網(wǎng)站建設(shè)培訓(xùn)教程、css從入門到精通參考模板

1、網(wǎng)站建設(shè)培訓(xùn)教程1 / 21CSS從入門到精通第一章 CSS簡(jiǎn)介4第一節(jié)：什么是CSS?4什么是CSS4參見4第二節(jié)：使用CSS的優(yōu)勢(shì)4第二章 CSS入門例子5示例5第三章 CSS語法5第一節(jié)：外部引用CSS5使用 link 標(biāo)簽引用CSS5使用 import 引用CSS6第二節(jié)：內(nèi)部引用CSS6第三節(jié)：內(nèi)聯(lián)引用CSS7第四節(jié)：CSS 選擇符 - CSS的名字7選擇符語法7選擇符取名規(guī)則8常用的三種選擇符8選擇符用法總結(jié)8第五節(jié)：CSS 聲明9語法9介紹兩個(gè)常用的技巧9第六節(jié)：CSS 注釋10語法10示例10第四章 CSS顏色11CSS顏色表示方法11注意:11第五章CSS背景11第一節(jié)：CS

2、S background-color 屬性12background-color - 背景色,定義背景的顏色12示例12第二節(jié)：CSS background-image 屬性12background-image - 定義背景圖片12示例12第三節(jié)：CSS background-repeat 屬性13background-repeat - 定義背景圖片的重復(fù)方式13示例13第四節(jié)：CSS background-position 屬性13background-position - 定義背景圖片的位置13示例14第五節(jié): CSS background-attachment 屬性14background

3、-attachment - 定義背景圖片隨滾動(dòng)軸的移動(dòng)方式14示例14第六節(jié)：CSS background 屬性15background - 五個(gè)背景屬性可以全部在此定義15示例15第六章 CSS文本16第一節(jié): CSS text-decoration 屬性16text-decoration - 定義文本是否有劃線以及劃線的方式16示例16第二節(jié): CSS white-space 屬性17white-space - 通過HTML文檔的源代碼的排版方式控制頁面顯示文本的排版方式17示例17第七章 CSS字體18第八章 CSS邊框18第九章 CSS邊外補(bǔ)白18第一節(jié): CSS margin 屬性1

4、8margin-top - 定義上邊外補(bǔ)白19margin-right - 定義右邊外補(bǔ)白19margin-bottom - 定義下邊外補(bǔ)白19margin-left - 定義左邊外補(bǔ)白19第十章 CSS邊內(nèi)補(bǔ)白19padding - 定義邊內(nèi)補(bǔ)白19padding-top - 定義上邊內(nèi)補(bǔ)白20padding-bottom - 定義下邊內(nèi)補(bǔ)白20padding-left - 定義左邊內(nèi)補(bǔ)白20padding-right - 定義右邊內(nèi)補(bǔ)白20第十一章 CSS屬性索引20第一節(jié)：CSS2.1屬性按功能索引20CSS盒模式20CSS視覺格式模型21CSS視覺效果21CSS列表21CSS背景22C

5、SS字體22CSS文本22CSS顏色22第一章 CSS簡(jiǎn)介第一節(jié)：什么是CSS?什么是CSS CSS是Cascading Style Sheets(層疊樣式表)的簡(jiǎn)稱. CSS語言是一種標(biāo)記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行(屬于瀏覽器解釋型語言). 在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)中CSS負(fù)責(zé)網(wǎng)頁內(nèi)容(XHTML)的表現(xiàn). CSS文件也可以說是一個(gè)文本文件,它包含了一些CSS標(biāo)記,CSS文件必須使用css為文件名后綴. 可以通過簡(jiǎn)單的更改CSS文件,改變網(wǎng)頁的整體表現(xiàn)形式,可以減少我們的工作量,所以她是每一個(gè)網(wǎng)頁設(shè)計(jì)人員的必修課. CSS是由W3C的CSS工作組產(chǎn)生和維護(hù)的.參見 W3C的CSS主頁ht

6、tp://Style/CSS/ 在w3c網(wǎng)站上校驗(yàn)CSS的正確性/css-validator/ 第二節(jié)：使用CSS的優(yōu)勢(shì) 內(nèi)容與表現(xiàn)分離,有了CSS,網(wǎng)頁的內(nèi)容(XHMTL)與表現(xiàn)就可以分開了. 使用CSS可以減少網(wǎng)頁的代碼量,增加網(wǎng)頁的瀏覽速度第二章 CSS入門例子示例 定義文字的顏色p color:red;p1 color:blue;color就代表顏色,我們使用紅色 red 為文字顏色.你可以修改代碼使用 blue 藍(lán)色, yellow 黃色等.學(xué)習(xí)文字的顏色這段代碼顯示的結(jié)果如下：第三章 CSS語法 CSS語法非常簡(jiǎn)單,組成CS

7、S語法的元素只有CSS選擇符與CSS屬性. 每個(gè)CSS選擇符由1個(gè)或多個(gè)CSS屬性組成. CSS是大小寫敏感的,在CSS語法中推薦使用小寫.第一節(jié)：外部引用CSSCSS外部引用使用了外接的CSS文件,一般的瀏覽器都帶有緩存功能,所以用戶不用每次都下載此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代碼量最小,表現(xiàn)最統(tǒng)一,也是標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)推薦的).使用 link 標(biāo)簽引用CSS示例 href - 指定需要加載的資源(CSS文件)的地址URI rel - 指定鏈接類型 type - 包含內(nèi)容的類型,一般使用type=text/css使用 import 引用CSS 示例import ur

8、l(相對(duì)路徑與絕對(duì)路徑加載文件的時(shí)候可以使用相對(duì)路徑或者絕對(duì)路徑.絕對(duì)路徑:文件的完整路徑,主頁上的文件或目錄在硬盤上真正的路徑.相對(duì)路徑:相對(duì)于我們查看文檔的路徑./default.html或者default.html或者././default.html都是相對(duì)路徑 小結(jié)外部引用CSS中 link與import的區(qū)別差別1：老祖宗的差別。link屬于XHTML標(biāo)簽，而import完全是CSS提供的一種方式。link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，import就只能加載CSS了。差別2：加載順序的差別。當(dāng)一個(gè)頁面被加載的時(shí)候（就是被瀏覽者

9、瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而import引用的CSS會(huì)等到頁面全部被下載完再被加載。所以有時(shí)候?yàn)g覽import加載CSS的頁面時(shí)開始會(huì)沒有樣式（就是閃爍），網(wǎng)速慢的時(shí)候還挺明顯。差別3：兼容性的差別。由于import是CSS2.1提出的所以老的瀏覽器不支持，import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無此問題。差別4：使用dom控制樣式時(shí)的差別。當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)閕mport不是dom可以控制的。第二節(jié)：內(nèi)部引用CSS 示例/* -文字樣式開始- */* 夢(mèng)之都白色12象素文字 */.dreamduw

10、hite12px color:white; font-size:12px; /* 夢(mèng)之都黑色16象素文字 */.dreamdublack16px color:black; font-size:16px; /* -文字樣式結(jié)束- */注意:style標(biāo)簽應(yīng)該在head標(biāo)簽內(nèi)部.第三節(jié)：內(nèi)聯(lián)引用CSS內(nèi)聯(lián)引用可以把CSS樣式直接作用在XHTML標(biāo)簽中. 示例使用CSS內(nèi)聯(lián)引用表現(xiàn)段落.第四節(jié)：CSS 選擇符 - CSS的名字CSS選擇符就是CSS樣式的名字,當(dāng)在XHTML文檔中表現(xiàn)一個(gè)CSS樣式的時(shí)候,就要用到一個(gè)CSS.怎么用呢?這時(shí)就通過CSS選擇符(CSS的名字)來指定此XHTML標(biāo)簽使用此

11、CSS樣式.選擇符語法選擇符名字聲明;一個(gè)CSS選擇符就定義了一個(gè)樣式比如下面這三個(gè)例子pfont-size:12px;.dreamdubluecolor:blue;#dreamduredcolor:red;dreamdublue和dreamdured都是CSS的選擇符,也就是CSS的名字.選擇符取名規(guī)則CSS選擇符可以使用英文字母的大寫與小寫,數(shù)字,連字號(hào),下劃線,冒號(hào),句號(hào).英文字母大寫與小寫 A-Z a-z 數(shù)字 0-9 連字號(hào) - 下劃線 _ 冒號(hào) 句號(hào) . 提示: CSS選擇符只能以字母開頭.常用的三種選擇符(我感覺這是初級(jí)教程中最難的地方:)xhtml標(biāo)簽選擇符,比如 p標(biāo)簽選擇符

12、(代表所有的段落都使用這個(gè)CSS樣式),比如 pfont-size:12px; id選擇符,唯一性選擇符,比如 #dreamduredcolor:red;,就是在名字前增加了一個(gè)#,id選擇符在一個(gè)頁面中只能出現(xiàn)一次,在整個(gè)網(wǎng)站中也最好出現(xiàn)一次(這樣有利于程序員控制此元素,有多個(gè)一樣名稱的元素,就無法分開不好控制了). class選擇符,多重選擇符,比如.dreamdubluecolor:blue;,就是在名字前增加了一個(gè).,class選擇符在一個(gè)頁面中可以出現(xiàn)多次(注意下面的示例中class選擇符的用法). 示例夢(mèng)之都xhtml標(biāo)簽選擇符夢(mèng)之都id選擇符夢(mèng)之都class選擇符夢(mèng)之都class

13、選擇符2,出現(xiàn)了多次.一個(gè)p元素使用了兩個(gè)class選擇符,他們之間用空格分開,而且class選擇符可以在一個(gè)頁面出現(xiàn)多次.選擇符用法總結(jié)id與class選擇符在CSS與XHTML中的用法總結(jié)CSS中的寫法XHTML中的寫法xhtml標(biāo)簽選擇符pfont-size:12px;id選擇符#id_selectorfont-size:12px;夢(mèng)之都class選擇符.class_selectorfont-size:12px;夢(mèng)之都第五節(jié)：CSS 聲明CSS聲明是由屬性,冒號(hào)(:),屬性值和分號(hào)(;)組成的.語法屬性:屬性值; 示例font-size:12px;font-size代表字體大小. 12p

14、x字體大小的值.介紹兩個(gè)常用的技巧 1,選擇符的名字一樣,聲明是可以組合的例如：選擇符名字聲明1;聲明2; divcolor:black;font-size:12px; 2,明全部一樣,選擇符的名字也可以組合例如：選擇符名字1,選擇符名字2,選擇符名字3聲明1;聲明2;.dreamdudivwhite12px,h1,divcolor:white;font-size:12px;h1, p, divborder:1px solid black;第六節(jié)：CSS 注釋就像HTML教程中描述的一樣,在CSS文檔中注釋也起到很重要的作用,可以幫助我們記起CSS的含義,加載在HTML文檔的位置等.CSS注釋

15、的開始使用/*,結(jié)束使用*/語法/* 注釋內(nèi)容 */示例/* -文字樣式開始- */* 夢(mèng)之都白色12象素文字 */.dreamduwhite12pxcolor:white;font-size:12px;/* 夢(mèng)之都黑色16象素文字 */.dreamdublack16pxcolor:black;font-size:16px;/* -文字樣式結(jié)束- */第四章 CSS顏色CSS顏色表示方法 CSS預(yù)定義顏色表示法(就是使用顏色的英文):color:red;color:green;color:blue; CSS RGB顏色表示法:color:rgb(255,0,0);color:rgb(0,255

16、,0);color:rgb(0,0,255); CSS 16進(jìn)制顏色表示法:color:#ff0000;color:#00ff00;color:#1199ff; CSS 短16進(jìn)制顏色表示法,屬于web safe colors(網(wǎng)絡(luò)安全色):color:#f00;color:#0f0;color:#00f;短16進(jìn)制顏色表示法就是當(dāng)16進(jìn)制顏色表示法中的兩個(gè)表示顏色值的數(shù)字一樣的時(shí)候的簡(jiǎn)寫,比如color:#ff0000;就可以簡(jiǎn)寫為color:#f00;注意: 使用16進(jìn)制表示顏色時(shí),要使用#標(biāo)記 #rgb等價(jià)于#rrggbb,例如:#fb0等價(jià)于#ffbb00第五章 CSS背景背景(bac

17、kground),文字顏色可以使用color屬性,但是包含文字的p段落,div層,page頁面等的顏色與背景圖片可以使用與background等屬性.通常使用background-color定義背景顏色,background-image定義背景圖片,background-repeat定義背景圖片的重復(fù)方式,background-position定義背景圖片的位置,background-attachment定義背景圖片隨滾動(dòng)軸的移動(dòng)方式.第一節(jié)：CSS background-color 屬性background-color - 背景色,定義背景的顏色 取值: | transparent | in

18、herit : 顏色表示法 transparent: 透明 inherit: 繼承 初始值: transparent 繼承性: 是 適用于: 所有元素 background:背景.color:顏色.示例body background-color:green;第二節(jié)：CSS background-image 屬性background-image - 定義背景圖片 取值: | none | inherit none: 無 inherit: 繼承 初始值: none 繼承性: 否 適用于: 所有元素 background:背景.image:圖片.示例body background-image:url

19、(html_table.png);p background-image:none;div background-image:url(list-orange.png);第三節(jié)：CSS background-repeat 屬性background-repeat - 定義背景圖片的重復(fù)方式 取值: repeat | repeat-x | repeat-y | no-repeat | inherit repeat: 平鋪整個(gè)頁面,左右與上下 repeat-x: 在x軸上平鋪,左右 repeat-y: 在y軸上平鋪,上下 no-repeat: 圖片不重復(fù) inherit: 繼承 初始值: repeat

20、繼承性: 否 適用于: 所有元素 background:背景.repeat:重復(fù).示例body background-image:url(list-orange.png);background-repeat:no-repeat;divbackground-image:url(list-orange.png);background-repeat:repeat-y;background-position:right;第四節(jié)：CSS background-position 屬性background-position - 定義背景圖片的位置 取值: | | left | center | right

21、| | top | center | bottom ? | left | center | right | top | center | bottom | inherit 水平 left: 左 center: 中 right: 右 垂直 top: 上 center: 中 bottom: 下 垂直與水平的組合 x-% y-% x-pos y-pos示例body background-image:url(list-orange.png);background-repeat:no-repeat;p background-image:url(list-orange.png);background-po

22、sition:right bottom ;background-repeat:no-repeat;div background-image:url(list-orange.png);background-position:50% 20% ;background-repeat:no-repeat;background-position屬性是通過平面上的x與y坐標(biāo)定位的,所以通常取兩個(gè)值.第五節(jié): CSS background-attachment 屬性background-attachment - 定義背景圖片隨滾動(dòng)軸的移動(dòng)方式 取值: scroll | fixed | inherit scro

23、ll: 隨著頁面的滾動(dòng)軸背景圖片將移動(dòng) fixed: 隨著頁面的滾動(dòng)軸背景圖片不會(huì)移動(dòng) inherit: 繼承示例body background-image:url(list-orange.png);background-attachment:fixed;background-repeat:repeat-x;background-position:center center;第六節(jié)：CSS background 屬性background - 五個(gè)背景屬性可以全部在此定義 取值: | | | | | inherit | | | | : 背景顏色,圖像等的一個(gè)屬性或多個(gè)屬性 inherit: 繼承

24、示例body background:url(list-orange.png) repeat-x center;第六章 CSS文本CSS文本屬性用于定義文字,空格,單詞,段落的表現(xiàn)等.通常使用letter-spacing屬性控制字母之間的距離,word-spacing屬性控制文字間空格的距離,text-decoration屬性定義文本是否有下劃線,text-transform屬性控制英文的大小寫,text-align屬性定義文本的對(duì)齊方式,text-indent屬性定義文本首行的縮進(jìn),white-space屬性定義文本與文檔源代碼的關(guān)系.第一節(jié): CSS text-decoration 屬性te

25、xt-decoration - 定義文本是否有劃線以及劃線的方式 取值:none | underline | overline | line-through | blink | inherit none: 定義正常顯示的文本 underline | overline | line-through | blink: 四個(gè)值中的一個(gè)或多個(gè) underline: 定義有下劃線的文本 overline: 定義有上劃線的文本 line-through: 定義直線穿過文本 blink: 定義閃爍的文本示例p#underlinetext-decoration:underline;p#overlinetext

26、-decoration:overline;p#line-throughtext-decoration:line-through;p#blinktext-decoration:blink;p#underovertext-decoration:underline overline;p#underoverthroughblinktext-decoration:underline overline line-through blink;第二節(jié): CSS white-space 屬性white-space - 通過HTML文檔的源代碼的排版方式控制頁面顯示文本的排版方式 取值: normal | pre

27、 | nowrap | pre-wrap | pre-line | inherit normal: 正常無變化(默認(rèn)處理方式.文本自動(dòng)處理換行.假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行) pre: 保持HTML源代碼的空格與換行,等同與pre標(biāo)簽 nowrap: 強(qiáng)制文本在一行,除非遇到br換行標(biāo)簽 pre-wrap: 同pre屬性,但是遇到超出容器范圍的時(shí)候會(huì)自動(dòng)換行 pre-line: 同pre屬性,但是遇到連續(xù)空格會(huì)被看作一個(gè)空格 inherit: 繼承示例p#prewhite-space:pre;第七章 CSS字體CSS字體屬性用于定義文字的字體,大小,粗細(xì)的表現(xiàn)等.通常使用font-fami

28、ly定義使用什么字體,font-size定義字體大小,font-style定義斜體字,font-variant定義小型的大寫字體,font-weight定義字體的粗細(xì),font統(tǒng)一定義字體的所有屬性.第八章 CSS邊框 每個(gè)內(nèi)容或元素外面都可以有一個(gè)邊框. 邊框分為上邊框(top),下邊框(bottom),左邊框(left),右邊框(right). 每種邊框有顏色(color),樣式(style),寬度(width)三種屬性. 如果上下左右的邊框表現(xiàn)不一樣,可以分別定義上下左右邊框,如果一樣可以統(tǒng)一使用border屬性定義.通常使用border-width屬性定義邊框的寬度,border-co

29、lor屬性定義邊框的顏色,border-style屬性定義邊框的樣式,border屬性統(tǒng)一定義邊框樣式的幾個(gè)屬性.第九章 CSS邊外補(bǔ)白 邊框的外面可以有一層邊外補(bǔ)白(margin),邊外補(bǔ)白可以把塊級(jí)元素分開.邊外補(bǔ)白定義了圍繞某種元素(elements)的空白. 可以查看盒模式,了解邊外補(bǔ)白和邊內(nèi)補(bǔ)白. 邊外補(bǔ)白分為上邊外補(bǔ)白(top),下邊外補(bǔ)白(bottom),左邊外補(bǔ)白(left),右邊外補(bǔ)白(right). 邊外補(bǔ)白只有寬度width一種屬性.第一節(jié): CSS margin 屬性margin邊外補(bǔ)白可以取負(fù)值;邊外補(bǔ)白是看不到的,因?yàn)樗旧硎前咨?margin-top - 定義上

30、邊外補(bǔ)白margin-right - 定義右邊外補(bǔ)白margin-bottom - 定義下邊外補(bǔ)白margin-left - 定義左邊外補(bǔ)白第十章 CSS邊內(nèi)補(bǔ)白 邊框的里面面可以有一層邊內(nèi)補(bǔ)白(padding),邊內(nèi)補(bǔ)白定義了邊框與邊框里面內(nèi)容的距離. 邊內(nèi)補(bǔ)白分為上邊內(nèi)補(bǔ)白(top),下邊內(nèi)補(bǔ)白(bottom),左邊內(nèi)補(bǔ)白(left),右邊內(nèi)補(bǔ)白(right). 邊內(nèi)補(bǔ)白只有width一種屬性.padding - 定義邊內(nèi)補(bǔ)白padding邊內(nèi)補(bǔ)白不可以取負(fù)值;邊內(nèi)補(bǔ)白是看不到的,因?yàn)樗旧硎前咨?padding-top - 定義上邊內(nèi)補(bǔ)白padding-bottom - 定義下邊內(nèi)補(bǔ)白

31、padding-left - 定義左邊內(nèi)補(bǔ)白 padding-right - 定義右邊內(nèi)補(bǔ)白第十一章 CSS屬性索引第一節(jié)：CSS2.1屬性按功能索引CSS盒模式 border-collapse border-color - 邊框顏色 border-spacing border-style - 邊框樣式 border-top - 上邊框 border-right - 右邊框 border-bottom - 下邊框 border-left - 左邊框 border-top-color - 上邊框顏色 border-right-color - 右邊框顏色 border-bottom-color -

32、 下邊框顏色 border-left-color - 左邊框顏色 border-top-style - 上邊框樣式 border-right-style - 右邊框樣式 border-bottom-style - 下邊框樣式 border-left-style - 左邊框樣式 border-top-width - 上邊框?qū)挾?border-right-width - 右邊框?qū)挾?border-bottom-width - 下邊框?qū)挾?border-left-width - 左邊框?qū)挾?border-width - 邊框?qū)挾?border - 邊框所有屬性 margin-right - 右邊外補(bǔ)白寬度 margin-left - 左邊外補(bǔ)白寬度 margin-top - 上邊外補(bǔ)白寬度 margin-bottom - 下邊外補(bǔ)白寬度 margin