资源描述
SS基本教程CSS教程目录第一章 C简介4第一节：什么是CS?4什么是SS参见4第二节:使用C的优势4第二章CSS入门例子5示例5第三章 S语法第一节:外部引用CS5使用 l 标签引用CS使用 mpor引用C6第二节:内部引用SS6第三节:内联引用S7第四节：SS 选择符 - S的名字选择符语法选择符取名规则8常用的三种选择符选择符用法总结第五节：S 声明9语法9简介两个常用的技巧9第六节:S 注释1语法10示例1第四章 S颜色1S颜色表达措施1注意：1第五章CS背景11第一节:CSS bckground-olor属性12bagun-cl- 背景色,定义背景的颜色示例1第二节：CSS backod-iage 属性2bacgrun-image 定义背景图片12示例12第三节:CSS backond-repeat属性1bcrund-eet - 定义背景图片的反复方式3示例3第四节:CS bagroud-psiion属性13bckgud-osition - 定义背景图片的位置13示例第五节: C bckrud-atachment属性bagndattahent -定义背景图片随滚动轴的移动方式14示例4第六节:CS bakgoun属性1backround 五个背景属性可以所有在此定义1示例15第六章 CS文本1第一节: CSS textderatio 属性6tdcorion- 定义文本与否有划线以及划线的方式16示例1第二节: C we-sae 属性7hie-space - 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式17示例1第七章S字体18第八章 S边框8第九章 CSS边外补白8第一节: CSSmarin 属性18gi-o - 定义上边外补白19magin-riht - 定义右边外补白19marin-botm-定义下边外补白19marget -定义左边外补白第十章 CSS边内补白9pang 定义边内补白9adgtop - 定义上边内补白20pdg-bottom- 定义下边内补白20adngeft- 定义左边内补白0padig-rght-定义右边内补白20第十一章属性索引20第一节：SS1属性按功能索引20CS盒模式2S视觉格式模型21CS视觉效果2CSS列表2CS背景2SS字体CS文本CSS颜色22第一章 CS简介第一节:什么是S?什么是CSS CSS是Caca tyeShts（层叠样式表)的简称 C语言是一种标记语言,它不需要编译，可以直接由浏览器执行(属于浏览器解释型语言） 在原则网页设计中CSS负责网页内容(XHML)的体现 CSS文献也可以说是一种文本文献,它涉及了某些CSS标记，CS文献必须使用css为文献名后缀. 可以通过简朴的更改CS文献,变化网页的整体体现形式,可以减少我们的工作量,因此她是每一种网页设计人员的必修课. 是由W的CSS工作组产生和维护的.参见 3C的S主页 在w3c网站上校验CS的对的性第二节：使用CSS的优势 内容与体现分离，有了CSS，网页的内容(XHMT）与体现就可以分开了. 使用CSS可以减少网页的代码量，增长网页的浏览速度第二章 SS入门例子示例 定义文字的颜色tmstyle ype=tet/cssed=alp clr：re;p col:bu；/styebdcoo就代表颜色,我们使用红色 red为文字颜色.你可以修改代码使用 blue蓝色,yellow黄色等学习文字的颜色p1/body这段代码显示的成果如下:第三章 C语法 CSS语法非常简朴，构成CSS语法的元素只有CS选择符与CSS属性 每个CSS选择符由个或多种C属性构成. SS是大小写敏感的，在CSS语法中推荐使用小写.第一节:外部引用SSCSS外部引用使用了外接的SS文献,一般的浏览器都带有缓存功能，因此顾客不用每次都下载此S文献.外部引用CS是最佳的引入CS的方式(可以使代码量最小,体现最统一，也是原则网页设计推荐的）使用 ln 标签引用S示例lnk rl=yesheet typ=et/css href= hef 指定需要加载的资源（CSS文献）的地址URI rel- 指定链接类型 te- 涉及内容的类型,一般使用ype=extcss使用impt 引用CSS 示例ipo ul（)；a相对途径与绝对途径加载文献的时候可以使用相对途径或者绝对途径绝对途径：文献的完整途径,主页上的文献或目录在硬盘上真正的途径,/tml/deut.htl也是绝对途径,C:wntsystesys也是绝对途径相对途径:相对于我们查看文档的途径./eattl或者defau.html或者./.defalthml都是相对途径 小结外部引用中link与impo的区别差别1：老祖宗的差别。li属于HTML标签,而imprt完全是S提供的一种方式。lin标签除了可以加载CS外,还可以做诸多其他的事情,例如定义RS，定义r连接属性等，it就只能加载CSS了。差别2：加载顺序的差别。当一种页面被加载的时候(就是被浏览者浏览的时候）,lik引用的CSS会同步被加载,而ipt引用的SS会等到页面所有被下载完再被加载。因此有时候浏览import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。差别3:兼容性的差别。由于mport是CSS2.1提出的因此老的浏览器不支持,import只有在E以上的才干辨认,而lnk标签无此问题。差别4：使用om控制样式时的差别。当使用javascip控制dm去变化样式的时候，只能使用link标签，由于imprt不是om可以控制的。第二节：内部引用SS 示例/*-文字样式开始-/*梦之都白色12象素文字 */.reamuwit2p clor:hite； fontize：1；/* 梦之都黑色16象素文字 */.drdblack16x color:ba; tize:16p；/ -文字样式结束-*/注意:sy标签应当在head标签内部第三节:内联引用CS内联引用可以把S样式直接作用在XHTL标签中 示例使用SS内联引用体现段落./p第四节:CS 选择符 - CSS的名字SS选择符就是CS样式的名字,当在XHTML文档中体现一种CSS样式的时候，就要用到一种CS怎么用呢?这时就通过CS选择符(CS的名字）来指定此HL标签使用此CSS样式.选择符语法选择符名字声明;一种CS选择符就定义了一种样式例如下面这三个例子font-s:;.eamleolr:be;#deamdredclo:e；dreadubu和reded都是CSS的选择符,也就是CS的名字.选择符取名规则CS选择符可以使用英文字母的大写与小写,数字,连字号，下划线,冒号,句号英文字母大写与小写 AZaz 数字-9 连字号- 下划线 冒号 句号 提示:S选择符只能以字母开头常用的三种选择符（我感觉这是初级教程中最难的地方:）tml标签选择符,例如 p标签选择符(代表所有的段落都使用这个S样式)，例如pot-size:2px； d选择符,唯一性选择符，例如 #reamduredclr:ed;，就是在名字前增长了一种,d选择符在一种页面中只能浮现一次,在整个网站中也最佳浮现一次(这样有助于程序员控制此元素,有多种同样名称的元素,就无法分开不好控制了）.class选择符,多重选择符,例如.dramdubuol:b;,就是在名字前增长了一种,clss选择符在一种页面中可以浮现多次(注意下面的示例中las选择符的用法). 示例梦之都xtml标签选择符梦之都d选择符/梦之都clas选择符p cls=dramduluedreamu18px梦之都class选择符2,浮现了多次一种p元素使用了两个cls选择符,她们之间用空格分开,并且cass选择符可以在一种页面浮现多次.选择符用法总结d与ca选择符在CS与XL中的用法总结CS中的写法HTM中的写法hl标签选择符onsz:12p；wwram.cm梦之都/class选择符.lsselctfont-ie:1;casscs_slcto梦之都第五节：CS 声明CS声明是由属性，冒号（：），属性值和分号（;)构成的.语法属性：属性值; 示例fnt-iz:12px;size代表字体大小 1px字体大小的值简介两个常用的技巧 1，选择符的名字同样，声明是可以组合的例如:选择符名字声明;声明2; divclor：la;fnsze：px； 2,明所有同样,选择符的名字也可以组合例如:选择符名字,选择符名字,选择符名字3声明1;声明2;eamdudivwie12px,1,ivolor：he；fntsize:px；h1, , divborer:1px soldlac；第六节：CS注释就像HTM教程中描述的同样,在CS文档中注释也起到很重要的作用,可以协助我们记起CSS的含义，加载在HTML文档的位置等.S注释的开始使用*，结束使用/语法 注释内容 示例/-文字样式开始-*/*梦之都白色1象素文字 */dreamdwhe2xclo:whie；size:2p;/* 梦之都黑色16象素文字 */.deamulck6pxcolr：blck；fot-siz：16p；*-文字样式结束- */第四章 CSS颜色SS颜色表达措施 CS预定义颜色表达法(就是使用颜色的英文)：cor:red;colr:gen;olor：blu; CS RB颜色表达法:color:rgb（55，)；color:rg（,25，0);colo:rg(0,0,255); S 16进制颜色表达法:lor：ff00;olo:0ff00;clr:#119f； SS 短1进制颜色表达法,属于wbsafe clr(网络安全色):colr:#f00;cor:#00;colo:#00f;短6进制颜色表达法就是当1进制颜色表达法中的两个表达颜色值的数字同样的时候的简写,例如lr:#f000;就可以简写为clor：#f00；注意: 使用16进制表达颜色时，要使用#标记 #rb等价于#rrgb,例如:#fb0等价于#f0第五章 SS背景背景(backgrou)，文字颜色可以使用color属性，但是涉及文字的p段落,di层，page页面等的颜色与背景图片可以使用与barud等属性.一般使用bckgroun-olr定义背景颜色，ckgoud-mag定义背景图片,akund-epet定义背景图片的反复方式，cgou-posn定义背景图片的位置,backgo-attachet定义背景图片随滚动轴的移动方式第一节：SS backrun-color 属性barondoor - 背景色,定义背景的颜色 取值: | transaren|inerit lo:颜色表达法 ranparnt： 透明 inhet： 继承 初始值： ansparen 继承性: 是 合用于： 所有元素 bcku:背景clo:颜色.示例bdy bkgundcolr:green；第二节:CSSbackgn-image 属性aground-mge - 定义背景图片 取值: nne|init oe: 无 t: 继承 初始值: none 继承性:否 合用于: 所有元素 backround:背景.image：图片.示例boyakgroun-ige：url(t_tabepng);bckground-ima:one;div bakgonage:ur(lst-orangepn)；第三节：CSS ackoundrpet 属性backgroud-rea- 定义背景图片的反复方式 取值：repeat | reax repeat- oeeat | nhrt epea： 平铺整个页面,左右与上下 r-x: 在x轴上平铺,左右 pat-y: 在y轴上平铺,上下 no-repeat： 图片不反复 inheri:继承 初始值: rpet 继承性: 否 合用于: 所有元素 bakgron:背景repeat:反复.示例body ackgound-ia：(lis-rne.png）；bakgrond-repet:no-repeat;ibcground-mae：url(lis-oage.p);aund-reat:peat-y；bacgrou-osition:it;第四节:CSbarond-poition属性akgr-posion - 定义背景图片的位置 取值: | enh | eft |eter | rih pecentage | | backrundrpea | | aroudpoito |iheit | |bakgoundepeat| acgron-atacmet | :背景颜色，图像等的一种属性或多种属性 inhert： 继承示例ody bakground:rl(list-oang.pn）repet-x ceter；第六章 CS文本CS文本属性用于定义文字，空格,单词,段落的体现等.一般使用letrscing属性控制字母之间的距离,word-pcing属性控制文字间空格的距离,tex-dcoraion属性定义文本与否有下划线,text-frm属性控制英文的大小写,txt-in属性定义文本的对齐方式，tx-det属性定义文本首行的缩进,hit-space属性定义文本与文档源代码的关系第一节： CSStex-decoration 属性text-decoaio -定义文本与否有划线以及划线的方式 取值：non | undeine | overli| line-hugh|bin| inrit ne:定义正常显示的文本 unrlieoveline| line-throh | bnk：四个值中的一种或多种 uderin:定义有下划线的文本 oerlne： 定义有上划线的文本 lnetrog: 定义直线穿过文本 lnk: 定义闪烁的文本示例#underlextcraon：neln;pvrlitext-eotion:ovri；p#linethrughtext-ecorton:lie-thouh；p#blinktet-drton：bln；p#nderovre-dcoratn：nderle verlne；p#underovethoughbiktext-decoatio:unerineovelinlineouh blik;第二节：CSS itepace 属性whie-pae -通过HM文档的源代码的排版方式控制页面显示文本的排版方式 取值: nora pe| nowra pre-wrap re-ie |iherit noa: 正常无变化（默认解决方式文本自动解决换行.如果达到容器边界内容会转到下一行) pe: 保持HTM源代码的空格与换行，等同与pe标签 nowrp: 强制文本在一行,除非遇到br换行标签 e-wrap: 同e属性，但是遇到超过容器范畴的时候会自动换行 pre-line:同pr属性，但是遇到持续空格会被看作一种空格 neit：继承示例p#whitse:r；第七章CS字体CS字体属性用于定义文字的字体，大小，粗细的体现等.一般使用font-famil定义使用什么字体，otsize定义字体大小,ot-tyle定义斜体字，fn-ariant定义小型的大写字体,fot-ght定义字体的粗细,f统一定义字体的所有属性.第八章 CSS边框 每个内容或元素外面都可以有一种边框. 边框分为上边框(top),下边框(otm)，左边框(lef),右边框(ight). 每种边框有颜色（olor),样式(styl),宽度(with)三种属性 如果上下左右的边框体现不同样，可以分别定义上下左右边框,如果同样可以统一使用bodr属性定义一般使用oerwidth属性定义边框的宽度,ber-olr属性定义边框的颜色，bodr-style属性定义边框的样式,border属性统一定义边框样式的几种属性.第九章 CS边外补白 边框的外面可以有一层边外补白（mrg）,边外补白可以把块级元素分开边外补白定义了环绕某种元素(eemet)的空白. 可以查看盒模式，理解边外补白和边内补白 边外补白分为上边外补白(tp)，下边外补白(bottom),左边外补白(left),右边外补白(righ） 边外补白只有宽度id一种属性.第一节: CSS rgin属性mgin边外补白可以取负值;边外补白是看不到的,由于它自身是白色的.mrgi-tp -定义上边外补白mrgn-riht -定义右边外补白maibttm- 定义下边外补白agi-left- 定义左边外补白第十章 SS边内补白 边框的里面面可以有一层边内补白(adig)，边内补白定义了边框与边框里面内容的距离 边内补白分为上边内补白(o）,下边内补白（tto)，左边内补白(et）,右边内补白（rgh) 边内补白只有width一种属性.padng - 定义边内补白padding边内补白不可以取负值；边内补白是看不到的，由于它自身是白色的pdditop- 定义上边内补白in-bo - 定义下边内补白paigle - 定义左边内补白 padright -定义右边内补白第十一章 SS属性索引第一节:CS21属性按功能索引S盒模式 border-ollase order-olor 边框颜色 boerspcig border-syle -边框样式 border-top-上边框 boder-right - 右边框 orrbttom - 下边框 bder-t- 左边框 bore-op-olr- 上边框颜色 bor-right-color -右边框颜色 brder-otomcolr- 下边框颜色 brde-t-l - 左边框颜色 brde-tp-syl- 上边框样式 bo-ght-styl-右边框样式 brr-bttom-stye - 下边框样式 borer-let-ste - 左边框样式 borrtp-with - 上边框宽度 brder-rht-wdth - 右边框宽度 order-botomwidth 下边框宽度 orderle-wdt - 左边框宽度 boder-widt 边框宽度 boder -边框所有属性 margin-ight-右边外补白宽度 mrin-ef - 左边外补白宽度 ainto - 上边外补白宽度 argi-botm -下边外补白宽度 magi 边外补白 paddntop - 上边内补白 ading-ight -右边内补白 adding-bom - 下边内补白 ding-ef- 左边内补白 pddig- 边内补白CS视觉格式模型 dly -显示方式 ositi -元素的定位 btom - 下偏移属性 ef- 左偏移属性 rt- 右偏移属性 top- 上偏移属性 lot -元素漂浮 zndx -轴顺序 drio unice-idi ma-t -最大高度 awidh-最大宽度 mi-heigh -最小高度 mnidth-最小宽度 eiht -盒子高度 widh - 盒子宽度 clar - 清除 lne-heigt 一段文字中每行文字的间距 ticallg - 垂直对齐方式视觉效果 i - 了盒子可显示的区域 vefow - 盒子中内容的显示方式 visibilty 元素与否可见SS列表 liststylimage -列表图像 list-style-psiio 列表位置 list-style-tye- 列表类型 -style - 列表所有属性SS背景 backgrond-attament-背景图片随滚动轴的移动方式 bakgound-olor - 背景颜色 grouimag - 背景图像 bckgroun-poson- 背景图片的位置 bagrond-rep - 背景图片的显示方式 bacgr - 背景CS字体 fnt-amiy - 字体 on-size - 字体大小 fonstle - 字体样式 ftari -小型的大写字母字体 fonwegt - 字体粗细 - 字体所有属性SS文本 t-algn - 文本对齐方式 ttdecoration - 文本与否有划线以及划线的方式 txident - 文本的首行缩进 te-tranrm 文本的大小写状态,此属性对中文无意义 he-spa- 文本的格式 wor-spacing - 以空格间隔文字的间距 eterspacing- 文本中字母的间距（中文为文字的间距）CSS颜色 colr- 颜色
展开阅读全文