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

1、網(wǎng)站建設培訓教程1 / 21CSS從入門到精通第一章 CSS簡介4第一節(jié)：什么是CSS?4什么是CSS4參見4第二節(jié)：使用CSS的優(yōu)勢4第二章 CSS入門例子5示例5第三章 CSS語法5第一節(jié)：外部引用CSS5使用 link 標簽引用CSS5使用 import 引用CSS6第二節(jié)：內部引用CSS6第三節(jié)：內聯(lián)引用CSS7第四節(jié)：CSS 選擇符 - CSS的名字7選擇符語法7選擇符取名規(guī)則8常用的三種選擇符8選擇符用法總結8第五節(jié)：CSS 聲明9語法9介紹兩個常用的技巧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 - 定義背景圖片的重復方式13示例13第四節(jié)：CSS background-position 屬性13background-position - 定義背景圖片的位置13示例14第五節(jié): CSS background-attachment 屬性14background

3、-attachment - 定義背景圖片隨滾動軸的移動方式14示例14第六節(jié)：CSS background 屬性15background - 五個背景屬性可以全部在此定義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邊外補白18第一節(jié): CSS margin 屬性1

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

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

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

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

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

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

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

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

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

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

14、x字體大小的值.介紹兩個常用的技巧 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、的開始使用/*,結束使用*/語法/* 注釋內容 */示例/* -文字樣式開始- */* 夢之都白色12象素文字 */.dreamduwhite12pxcolor:white;font-size:12px;/* 夢之都黑色16象素文字 */.dreamdublack16pxcolor:black;font-size:16px;/* -文字樣式結束- */第四章 CSS顏色CSS顏色表示方法 CSS預定義顏色表示法(就是使用顏色的英文):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進制顏色表示法:color:#ff0000;color:#00ff00;color:#1199ff; CSS 短16進制顏色表示法,屬于web safe colors(網(wǎng)絡安全色):color:#f00;color:#0f0;color:#00f;短16進制顏色表示法就是當16進制顏色表示法中的兩個表示顏色值的數(shù)字一樣的時候的簡寫,比如color:#ff0000;就可以簡寫為color:#f00;注意: 使用16進制表示顏色時,要使用#標記 #rgb等價于#rrggbb,例如:#fb0等價于#ffbb00第五章 CSS背景背景(bac

17、kground),文字顏色可以使用color屬性,但是包含文字的p段落,div層,page頁面等的顏色與背景圖片可以使用與background等屬性.通常使用background-color定義背景顏色,background-image定義背景圖片,background-repeat定義背景圖片的重復方式,background-position定義背景圖片的位置,background-attachment定義背景圖片隨滾動軸的移動方式.第一節(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 - 定義背景圖片的重復方式 取值: repeat | repeat-x | repeat-y | no-repeat | inherit repeat: 平鋪整個頁面,左右與上下 repeat-x: 在x軸上平鋪,左右 repeat-y: 在y軸上平鋪,上下 no-repeat: 圖片不重復 inherit: 繼承 初始值: repeat

20、繼承性: 否 適用于: 所有元素 background:背景.repeat:重復.示例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坐標定位的,所以通常取兩個值.第五節(jié): CSS background-attachment 屬性background-attachment - 定義背景圖片隨滾動軸的移動方式 取值: scroll | fixed | inherit scro

23、ll: 隨著頁面的滾動軸背景圖片將移動 fixed: 隨著頁面的滾動軸背景圖片不會移動 inherit: 繼承示例body background-image:url(list-orange.png);background-attachment:fixed;background-repeat:repeat-x;background-position:center center;第六節(jié)：CSS background 屬性background - 五個背景屬性可以全部在此定義 取值: | | | | | inherit | | | | : 背景顏色,圖像等的一個屬性或多個屬性 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屬性定義文本的對齊方式,text-indent屬性定義文本首行的縮進,white-space屬性定義文本與文檔源代碼的關系.第一節(jié): CSS text-decoration 屬性te

25、xt-decoration - 定義文本是否有劃線以及劃線的方式 取值:none | underline | overline | line-through | blink | inherit none: 定義正常顯示的文本 underline | overline | line-through | blink: 四個值中的一個或多個 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: 正常無變化(默認處理方式.文本自動處理換行.假如抵達容器邊界內容會轉到下一行) pre: 保持HTML源代碼的空格與換行,等同與pre標簽 nowrap: 強制文本在一行,除非遇到br換行標簽 pre-wrap: 同pre屬性,但是遇到超出容器范圍的時候會自動換行 pre-line: 同pre屬性,但是遇到連續(xù)空格會被看作一個空格 inherit: 繼承示例p#prewhite-space:pre;第七章 CSS字體CSS字體屬性用于定義文字的字體,大小,粗細的表現(xiàn)等.通常使用font-fami

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

29、lor屬性定義邊框的顏色,border-style屬性定義邊框的樣式,border屬性統(tǒng)一定義邊框樣式的幾個屬性.第九章 CSS邊外補白 邊框的外面可以有一層邊外補白(margin),邊外補白可以把塊級元素分開.邊外補白定義了圍繞某種元素(elements)的空白. 可以查看盒模式,了解邊外補白和邊內補白. 邊外補白分為上邊外補白(top),下邊外補白(bottom),左邊外補白(left),右邊外補白(right). 邊外補白只有寬度width一種屬性.第一節(jié): CSS margin 屬性margin邊外補白可以取負值;邊外補白是看不到的,因為它本身是白色的.margin-top - 定義上

30、邊外補白margin-right - 定義右邊外補白margin-bottom - 定義下邊外補白margin-left - 定義左邊外補白第十章 CSS邊內補白 邊框的里面面可以有一層邊內補白(padding),邊內補白定義了邊框與邊框里面內容的距離. 邊內補白分為上邊內補白(top),下邊內補白(bottom),左邊內補白(left),右邊內補白(right). 邊內補白只有width一種屬性.padding - 定義邊內補白padding邊內補白不可以取負值;邊內補白是看不到的,因為它本身是白色的.padding-top - 定義上邊內補白padding-bottom - 定義下邊內補白

31、padding-left - 定義左邊內補白 padding-right - 定義右邊內補白第十一章 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 - 上邊框寬度 border-right-width - 右邊框寬度 border-bottom-width - 下邊框寬度 border-left-width - 左邊框寬度 border-width - 邊框寬度 border - 邊框所有屬性 margin-right - 右邊外補白寬度 margin-left - 左邊外補白寬度 margin-top - 上邊外補白寬度 margin-bottom - 下邊外補白寬度 margin