編寫css代碼(新手看)

1、CSS之入門篇一一推薦新手 關(guān)于CSS樣式表 一.在學(xué)習(xí)css之前你應(yīng)該掌握哪些基礎(chǔ)知識(shí) 1.什么是網(wǎng)頁，什么是超文本語言(html )。2.會(huì)使用Dreamweaver等常用的網(wǎng)頁編輯器。Dreamweaver 是現(xiàn)今最好的網(wǎng)站編輯工具之一，而 Dreamweaver8 增加的對(duì)CSS的支持 更是你容易得來使用 CSS ,用它來給制作網(wǎng)頁的 CSS樣式表會(huì)更簡(jiǎn)單、更方便。本教程教 你如何利用Dreamweaver8 在頁面中加入 CSS ,你不用死記硬背的記代碼標(biāo)記，也不用去 看很厚的CSS手冊(cè)，你就可以輕松自如的在網(wǎng)頁中運(yùn)用CSS。不過首先你要對(duì) CSS有一定的了解。因此，本教程的前面 4

2、章為CSS理論知識(shí)，主要是對(duì) CSS的全面介紹，希望 讀者看后對(duì)CSS的語法、結(jié)構(gòu)、使用有一個(gè)全面的了解；后面 4章為DW實(shí)戰(zhàn)，主要是教 你如何利用Dreamweaver8 靈活運(yùn)用CSS在網(wǎng)頁中。閱讀此文前，你需要對(duì)HTML有一定的了解，并會(huì)使用 Dreamweaver 。2 .認(rèn)識(shí)CSSCSS就是Cascading Style Sheets ,中文翻譯為層疊樣式表：簡(jiǎn)稱樣式表，它是一種制作 網(wǎng)頁的新技術(shù)。網(wǎng)頁設(shè)計(jì)最初是用 HTML標(biāo)記來定義頁面文檔及格式，例如標(biāo)題、段落、表格、鏈接等，但這些標(biāo)記不能滿足更多的文檔樣式需求，為了解決這個(gè)問題，在 1997年 W3c(The World Wid

3、e Web Consortium)頒布HTML4標(biāo)準(zhǔn)的同時(shí)也公布了有關(guān)樣式表的第一個(gè)標(biāo)準(zhǔn) CSS1,自CSS1的版本之后，又在 1998年5月發(fā)布了 CSS2版本，樣 式表得到了更多的充實(shí)。W3c把DHTML(Dynamic HTML) 分為三個(gè)部分來實(shí)現(xiàn)：腳本語言 (包括 JavaScript、Vbscript 等)、支持動(dòng)態(tài)效果的瀏覽器 (包括 Internet Explorer、Netscape Navigator等)和CSS樣式表。注意：CSS需要IE4(Internet Explorer 4.0) 和NC4(Netscape 4.0)以上的瀏覽器支持，有些 效果需要更高版本的瀏覽器支

4、持。3 .怎樣使用CSS如果你使用的是 Dreamweaver MX 2004 以上的版本，在定義文字字體、 顏色、大小等屬性 的時(shí)候，查看一下代碼你會(huì)發(fā)現(xiàn)有這樣的一部分在head區(qū)域： 那么恭喜你，你已經(jīng)使用了CSS設(shè)計(jì)網(wǎng)頁。那么除了這種調(diào)用 CSS的方法外，還有別的嗎？回答是 當(dāng)然有了 “，下面是系統(tǒng)介紹 標(biāo)記加注法(in-line)：如果只有一個(gè)HTML標(biāo)記需要設(shè)定樣式，則可在該標(biāo)記內(nèi)，加上屬性style=以個(gè)別修訂樣式。頁面內(nèi)嵌法： 外部調(diào)用法：雙表法調(diào)用樣式表：import url（ css/style01.css ）;1 .基本語法CSS的定義是由三個(gè)部分構(gòu)成：選擇符（select

5、or ）,屬性（properties ）和屬性的取值（value）?；靖袷饺缦拢簊elector property: value（選擇符屬性：值）選擇符是可以是多種形式，一般是你要定義樣式的HTML標(biāo)記，例如BODY、P、TABLE,你可以通過此方法定義它的屬性和值，屬性和值要用冒號(hào)隔開：body color: black選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。如果屬性的值是多個(gè)單詞組成，必須在值上加引號(hào)，比如字體的名稱經(jīng)常是幾個(gè)單詞的組合：p font-family: sans serif（定義段落字體為 sa

6、ns serif ）如果需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，我們使用分號(hào)將所有的屬性和值分開：p text-align: center; color: red（段落居中排列；并且段落中的文字為紅色）為了使你定義的樣式表方便閱讀，你可以采用分行的書寫格式：text-align: center;color: black;font-family: arial（段落排列居中，段落中文字為黑色，字體是 arial）2 .選擇符組你可以把相同屬性和值的選擇符組合起來書寫，用逗號(hào)將選擇符分開，這樣可以減少樣式重復(fù)定義：h1, h2, h3, h4, h5, h6 color: green （這個(gè)組里包括所有的標(biāo)

7、題元素，每個(gè)標(biāo)題元素的文字都為綠色）p, table font-size: 9pt （段落和表格里的文字尺寸為9號(hào)字）效果完全等效于：p font-size: 9Pt table font-size: 9pt 3 .類選擇符用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時(shí)，在自定類的名稱前面加一個(gè)點(diǎn)號(hào)。假如你想要兩個(gè)不同的段落，一個(gè)段落向右對(duì)齊，一個(gè)段落居中，你可以先定義兩個(gè)類：p.right text-align: rightp.center text-align: center然后用不在不同的段落里，只要在 HTML標(biāo)記里加入彳定義的 class參數(shù)：這個(gè)段落向右對(duì)齊的這個(gè)段

8、落是居中排列的這個(gè)段落向右對(duì)齊的這個(gè)段落是居中排列的注意：類的名稱可以是任意英文單詞或以英文開頭和數(shù)字的組合，一般以其功能和效果簡(jiǎn)要命名。類選擇符還有一種用法，在選擇符中省略HTML標(biāo)記名，這樣可以把幾個(gè)不同的元素定義成相同的樣式：.center text-align: center（定義.center的類選擇符為文字居中排列）這樣的類可以被使用到任何元素上。下面我們使h1元素（標(biāo)題1）和p元素（段落）都?xì)w為center類，這使兩個(gè)元素的樣式都跟隨.center這個(gè)類選擇符：這個(gè)標(biāo)題是居中排列的這個(gè)段落也是居中排列的注意：這種省略 HTML標(biāo)記的類選擇符是我彳門經(jīng)后最常用的CSS方法，使用這種

9、方法，我們可以很方便的在任意元素上套用預(yù)先定義好的類樣式。4 . ID選擇符在HTML頁面中ID參數(shù)指定了某個(gè)單一元素，ID選擇符是用來對(duì)這個(gè)單一元素定義單獨(dú)的 樣式。ID選擇符的使用和類選擇符類似，只要把 CLASS換成ID即可。將上例中類用ID替代：這個(gè)段落向右對(duì)齊定義ID選擇符要在ID名稱前加上一個(gè)#|。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個(gè)例子，ID屬性將匹配所有id=intro的元素：#introfont-size:110%;font-weight:bold;color:#0000ff;background-color:transparent（字體尺寸為默認(rèn)尺寸的

10、110% ;粗體；藍(lán)色；背景顏色透明）下面這個(gè)例子，ID屬性只匹配id=intro的段落元素：p#intro font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent注意：ID選擇符局限性很大，只能單獨(dú)定義某個(gè)元素的樣式，一般只在特殊情況下使用。5 .包含選擇符可以單獨(dú)對(duì)某種元素包含關(guān)系定義的樣式表，元素1里包含元素2,這種方式只對(duì)在元素 1里的元素2定義，對(duì)單獨(dú)的元素 1或元素2無定義，例如： table a font-size: 12px 在表格內(nèi)的鏈接改變了小式，文字大小為12象素，而表格外的鏈接

11、的文字仍為默認(rèn)大小。6 .樣式表的層疊性層疊性就是繼承性，樣式表的繼承規(guī)則是外部的元素樣式會(huì)保留下來繼承給這個(gè)元素所包含 的其他元素。事實(shí)上，所有在元素中嵌套的元素都會(huì)繼承外層元素指定的屬性值，有時(shí)會(huì)把很多層嵌套的樣式疊加在一起，除非另外更改 。例如在DIV標(biāo)記中嵌套P標(biāo)記：div color: red; font-size:9pt這個(gè)段落的文字為紅色 9號(hào)字（P元素里的內(nèi)容會(huì)繼承 DIV定義的屬性）例如，上注意：有些情況下內(nèi)部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。邊界屬性值是不會(huì)繼承的，直覺上，一個(gè)段落不會(huì)同文檔BODY 一樣的上邊界值。另外，當(dāng)樣式表繼承遇到?jīng)_突時(shí)，總是以最后

12、定義的樣式為準(zhǔn)。如果上例中定義了P的顏色：div color: red; font-size:9ptp color: blue 這個(gè)段落的文字為藍(lán)色9號(hào)字 我們可以看到段落里的文字大小為9號(hào)字是繼承div屬性的，而color屬性則依照最后定義的。不同的選擇符定義相同的元素時(shí)，要考慮到不同的選擇符之間的優(yōu)先級(jí)。ID選擇符，類選擇符和HTML標(biāo)記選擇符，因?yàn)镮D選擇符是最后加上元素上的，所以優(yōu)先級(jí)最高，其次是 類選擇符。如果想超越這三者之間的關(guān)系，可以用 important提升樣式表的優(yōu)先權(quán)，例如： p color: #FF0000!important .blue color: #0000FF#i

13、d1 color: #FFFF00我們同時(shí)對(duì)頁面中的一個(gè)段落加上這三種樣式，它最后會(huì)依照被important申明的HTML標(biāo)記選擇符樣式為紅色文字。如果去掉！important ,則依照優(yōu)先權(quán)最高的ID選擇符為黃色文字。7.注釋 你可以在CSS中插入注釋來說明你代碼的意思，注釋有利于你或別人以后編輯和更改代碼 時(shí)理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以/*開頭，以*/結(jié)尾，如下： /*定義段落樣式表*/p text-align: center; /* 文本居中排列 */ color: black; /*文字為黑色 */font-family: arial /* 字體為 aria

14、l */ /*定義段落樣式表*/p text-align: center; /* 文本居中排列 */ color: black; /*文字為黑色 */font-family: arial /* 字體為 arial */ 前面我們了解了 CSS的語法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識(shí)別并調(diào)用。 當(dāng)瀏覽器讀取樣式表時(shí)，要依照文本格式來讀，這里介紹四種在頁面中插入樣式表的方法： u鏈入外部樣式表/u、u內(nèi)部樣式表/u、u導(dǎo)入外表樣式表/u和u內(nèi)嵌樣式/u。 1.鏈入外部樣式表鏈入外部樣式表是把樣式表保存為一個(gè)樣式表文件，然后在頁面中用標(biāo)記鏈接到這個(gè)樣式表文件，這個(gè)標(biāo)記必須放到頁面的區(qū)內(nèi)，如

15、下：上面這個(gè)例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel= styleshee誕指在頁面中使用這個(gè)外部的樣式表。type= text/css是指文件的類型是樣式表文本。href= mystyle.css是文件所在白位置。 media是選擇媒體類型，這些媒體包括： 屏幕，紙張，語音合成設(shè)備，盲文閱讀設(shè)備等。一個(gè)外部樣式表文件可以使用于多個(gè)頁面。當(dāng)你改變這個(gè)樣式表文件時(shí)，所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網(wǎng)站時(shí)，非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯，瀏覽時(shí)也減少了重復(fù)下載代碼。樣式表文件可以用任何文本編輯器（例如：記事本）

16、打開并編輯，一般樣式表文件擴(kuò)展名為.css。內(nèi)容是定義的樣式表，不包含 HTML標(biāo)記，mystyle.css這個(gè)文件的內(nèi)容如下：hr color: siennap margin-left: 20pxbody background-image: url（images/back40.gif）/*定義水平線的顏色為土黃；段落左邊的空白邊距為20象素；頁面的背景圖片為images目錄下的back40.gif文件*/2 .內(nèi)部樣式表內(nèi)部樣式表是把樣式表放到頁面的區(qū)里，這些定義的樣式就使用到頁面中了，樣式表是用標(biāo)記插入的，從下例中可以看出標(biāo)記的用法：hr color: siennap margin-lef

17、t: 20pxbody background-image: url(images/back40.gif)注意：有些低版本的瀏覽器不能識(shí)別style標(biāo)記，這意味著低版本的瀏覽器會(huì)忽略style標(biāo)記里的內(nèi)容，并把style標(biāo)記里的內(nèi)容以文本直接顯示到頁面上。為了避免這樣的情況發(fā)生，我們用加HTML注釋的方式（）隱藏內(nèi)容而不讓它顯示： 3 .導(dǎo)入外部樣式表導(dǎo)入外部樣式表是指在內(nèi)部樣式表的里導(dǎo)入一個(gè)外部樣式表，導(dǎo)入時(shí)用import ,看下面這個(gè)實(shí)例： 例中import mystyle.css表示導(dǎo)入 mystyle.css樣式表，注意使用時(shí)外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導(dǎo)入外部樣式

18、表輸入方式更有優(yōu)勢(shì)。實(shí)質(zhì)上它相當(dāng)于存在內(nèi)部樣式表中的。注意：導(dǎo)入外部樣式表必須在樣式表的開始部分，在其他內(nèi)部樣式表上面。4 .內(nèi)嵌樣式內(nèi)嵌樣式是混合在 HTML標(biāo)記里使用的，用這種方法，可以很簡(jiǎn)單的對(duì)某個(gè)元素單獨(dú)定義樣式。內(nèi)嵌樣式的使用是直接將在HTML標(biāo)記里加入style參數(shù)。而style參數(shù)的內(nèi)容就是CSS的屬性和值，如下例：這是一個(gè)段落在style參數(shù)后面的引號(hào)里的內(nèi)容相當(dāng)于在樣式表大括號(hào)里的內(nèi)容。注意：style參數(shù)可以使用于任意 BODY內(nèi)的元素（包括BODY本身），除了 BASEFONT、 PARAM 和 SCRIPT 。5.多重樣式表的疊加上一章里我們已經(jīng)提到樣式表的層疊順序，這里我們討論插入樣式表的這幾種方法的疊加，如果在同一個(gè)選擇器上使用幾個(gè)不同的樣式表時(shí)，這個(gè)屬性值將會(huì)疊加幾個(gè)樣式表，遇到?jīng)_突的地方會(huì)以最后定義的為準(zhǔn)。例如，我們首先鏈入一個(gè)外部樣式表，其中定義了h3選擇符的 color、text-alig 和 font-size 屬性：h3color: red;text-align: left;font-size: 8pt;/*標(biāo)題3的文字顏色為紅色；向左對(duì)齊；文字尺寸為8號(hào)字*/然后在內(nèi)部樣式表里也定義了h3選擇符的text-align和font-size屬性：h3text-a