網(wǎng)頁設(shè)計(jì)-CSS的基礎(chǔ)知識

1、第 10 章 CSS的基礎(chǔ)知識10.1 什么是樣式表10.2 樣式表的基本結(jié)構(gòu)10.3 如何在網(wǎng)頁中加入css 10.4 div與span標(biāo)簽 10.5 CSS的幾個特性 第10章 CSS的基礎(chǔ)知識CSS 是 Cascading Style Sheet 的縮寫。譯作層疊樣式表單。樣式：網(wǎng)頁的內(nèi)容以什么樣的形式顯示出來，如文字的大小、顏色，圖片的大小、插入的位置等。層疊：當(dāng)HTML文件引用CSS文件的時候，如果CSS所定義的樣式發(fā)生了沖突，將依據(jù)層次的先后來處理網(wǎng)頁中內(nèi)容的樣式。10.1 什么是樣式表CSS 主要是用于控制網(wǎng)頁元素的顯示方式樣式表的宗旨就是將結(jié)構(gòu)(內(nèi)容)和格式分離，HTML標(biāo)記只

2、控制網(wǎng)頁的內(nèi)容，內(nèi)容的樣式則交由CSS來控制。CSS也是一種標(biāo)記語言，有很多屬性來源于HTML，它也需要通過瀏覽器解釋執(zhí)行。10.1 什么是樣式表10.2 樣式表的基本結(jié)構(gòu)一個樣式表由許多樣式規(guī)則組成的，用以告訴瀏覽器怎樣去顯示一個網(wǎng)頁文檔。 樣式表的核心是規(guī)則，其格式如下： Selector定義樣式作用的對象 property為CSS屬性，value為屬性對應(yīng)的值Selector property1:value1; property2:value2; property3:value3;樣式定義的語法示例 H1 text-align:center; font-family:黑體選擇器樣式定義樣

3、式屬性屬性取值常用Selector類型HTML標(biāo)記符用戶定義的類用戶定義的ID虛類HTML標(biāo)記符的SelectorHTML標(biāo)記符是最常用的selector，它重新定義了HTML標(biāo)記符的顯示效果。例如：H1text-align:center;color:red使所有用H1標(biāo)記符修飾的內(nèi)容都居中和用紅色顯示。示例如下例10-1：建立一個簡單的樣式表簡單的樣式表 樣式表這是一個簡單的樣式表用戶定義類定義方式 表示任何帶有class屬性為classname的標(biāo)記符都采用所定義的樣式。.classname property1:value1; property2:value2; property3:val

4、ue3;定義方式*. classname樣式屬性:屬性值; 樣式屬性:屬性值;.所有HTML標(biāo)簽都可引用它*符號可以省略HTML標(biāo)簽. classname樣式屬性:屬性值; 樣式屬性:屬性值;.只有該指定的標(biāo)簽才能引用它12舉例如下 CSS類選擇器使用 .redcolor:red; font-size:18px; .greencolor:green; font-size:25px class選擇器redclass選擇器greenh3 也同樣適用 13用戶定義IDidnameproperty:value 表示任何ID屬性為idname的標(biāo)記符都采用所定義的樣式。用戶定義ID與class的使用方法

5、基本相同，不同之處在于ID選擇器只能在HTML碳中使用一次，因此其針對性更強(qiáng)。# idname樣式屬性:屬性值; 樣式屬性:屬性值;.所有HTML標(biāo)簽都可引用它HTML標(biāo)簽# idname 樣式屬性:屬性值; 樣式屬性:屬性值;.只有該指定的標(biāo)簽才能引用它定義方式16舉例如下 CSS id選擇器使用 #ppcolor:red; font-family:黑體 p#ptcolor:blue; font-family:仿宋 這是我們定義的PP類 這是我們定義的PP 這是我們定義的PT類 ID使用注意事項(xiàng)在很多瀏覽器下，ID選擇器可以用于多個標(biāo)記。但每個標(biāo)記定義的id不只是CSS可調(diào)用，JavaScr

6、ipt等其他腳本語言同樣也可以調(diào)用，因?yàn)檫@個特性，所以不要將ID選擇器用于多個標(biāo)記，否則會出現(xiàn)意想不同的錯誤。例，如果一個HTML中有兩個相同的 id 標(biāo)記，那么將會導(dǎo)致JavaScript在查找 id 進(jìn)出錯，例如函數(shù) getElementById( ).CSS屬性單位絕對長度單位：網(wǎng)頁定義上常常使用的絕對長度值由厘米（cm）、毫米（mm）、英寸（in）、磅（pt）、派卡（pc）等等單位 英寸(in) 厘米(cm) 毫米(mm) 磅(pt) 派卡(pc) 英寸 1.0 2.54 25.4 72 6 派卡 0.16667 0.4233 4.233 12 1.0 厘米 0.3937 1 10 2

7、8.3464 4.7244 毫米 0.03937 0.1 1.0 2.83464 0.47244 磅 0.01389 0.0352806 0.352806 1.0 0.83333 相對長度單位：CSS還支持下列三種長度的相對單位 em（當(dāng)前字體中字母M的寬度） ex（當(dāng)前字體中字母X的高度） px（一個象素的大?。?。顏色單位：顏色名: #RRGGBBrgb(rrr, ggg, bbb)rgb(rrr%, ggg%, bbb%)10.3 如何在網(wǎng)頁中加入css可以使用四種方法將樣式表加入到網(wǎng)頁中 內(nèi)聯(lián)樣式(Inline Styles ) 嵌入一個樣式表 (Embedding a Style Bl

8、ock) 將一個外部樣式表鏈接到網(wǎng)頁 輸入一個樣式表以上四種方法，可分成內(nèi)部樣式表（前兩者）、外部樣式表（后兩者）兩類。10.3.1內(nèi)聯(lián)樣式樣式可以使用STYLE屬性內(nèi)聯(lián)（有的也叫“行內(nèi)方式”）。STYLE屬性可以應(yīng)用于任意BODY內(nèi)的HTML元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。其語法如下： 以下是一個例子 這段的樣式是紅色的New Century Schoolbook字體。缺點(diǎn)：因?yàn)楹托枰故镜膬?nèi)容混合在一起，沒有實(shí)現(xiàn)兩者的分離。缺點(diǎn)：在標(biāo)簽中，用設(shè)置style屬性的方法，一次只能控制一個標(biāo)簽的樣式10.3.2 嵌入一個樣式表將樣式表信息都列于HTML文

9、檔的頭部基本語法如下： 示例： STYLE元素放在文檔的HEAD部分。必須的TYPE屬性用于指定類型為“text/css ” 在STYLE中可指定MEDIA屬性。缺點(diǎn)：只限于一個頁面內(nèi)使用樣式表的規(guī)則單獨(dú)保存在一個文件中外部的樣式表可以通過HTML的LINK元素連接到HTML文檔中一個樣式表文件可鏈接到多個HTML文件10.3.3 將一個外部樣式表鏈接到網(wǎng)頁基本語法如下： . 說明：外部樣式表文件中不能含有任何HTML標(biāo)簽。樣式表僅僅由樣式表規(guī)則組成。外部樣式表文件中，無須使用注釋標(biāo)簽。必須將CSS文件與HTML文件一起發(fā)布到服務(wù)器中。在網(wǎng)頁被打開時，瀏覽器將依照鏈接標(biāo)簽將含有鏈接外部樣式表文

10、件的HTML網(wǎng)頁按照樣式表規(guī)則顯示。 LINK標(biāo)簽:TYPE屬性用于指定類型為text/cssMEDIA屬性可選，用于指定樣式表被接受的介質(zhì)或媒體。允許的值有 screen (缺省值)，提交到計(jì)算機(jī)屏幕； print， 輸出到打印機(jī)； projection，提交到投影機(jī)； aural，揚(yáng)聲器； braille，提交到凸字觸覺感知設(shè)備； tty，電傳打字機(jī) (使用固定的字體)； tv，電視機(jī)； all，所有輸出設(shè)備。 多樣的媒體通過用逗號隔開的列表或值all指定。REL屬性：用于定義連接的文件和HTML文檔之間的關(guān)系。REL=StyleSheet指定一個固定或首選的樣式，而REL=“Altern

11、ate StyleSheet”定義一個交互樣式。固定樣式在樣式表激活時總被應(yīng)用。TITLE屬性：給樣式指定一個標(biāo)題，可將多個樣式指定同一個標(biāo)題，從而組合成一個首選樣式REL=StyleSheet和一個TITLE屬性的組合指定一個首選的樣式每個網(wǎng)頁不能指定多于一個的首選樣式。一個樣式表可以使用CSS的import 指令輸入到網(wǎng)頁中。這個指令用于一個CSS文件或HTML的STYLE元素內(nèi)部。其語法如下： 說明： import語句后的“；”號是必須的。 要輸入的樣式表文件的擴(kuò)展名為.css。10.3.4 引入一個樣式表32樣式的優(yōu)先級樣式的優(yōu)先級遵循“就近優(yōu)先”的原則，也就是說，距離所修飾對象越近的

12、樣式，其優(yōu)先級越高。樣式如果沖突，則采用高優(yōu)先級樣式；如果不沖突，則采用疊加的樣式效果。33樣式的優(yōu)先級示例P color: red正文內(nèi)容其中，test.css 的內(nèi)容如下：P color: blue樣式的優(yōu)先級示例P color: red正文內(nèi)容其中，test.css 的內(nèi)容如下：P color: blue10.5 div與span標(biāo)簽 div標(biāo)簽DIV元素： “division”，“部分”的簡稱，是一個塊級元素。它是一個成對標(biāo)簽DIV可以包含段落、標(biāo)題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節(jié)、摘要或備注。通過它可以直接引用樣式，不再需要依附于HTML標(biāo)簽了它能接受STY

13、LE、CLASS和ID屬性。37其語法如下： .或者： . 或者：. 在使用標(biāo)記時，可以使用width與height屬性設(shè)置區(qū)域的大小。38 DIV的簡單使用 div font-size:24px;font-weight:bold;font-family:隸書;color:#00F;background-color:#CFF;text-align:center;width:400;height:100;border-style:double; CSS功能很強(qiáng)大，這就是DIV的一個方塊。 span標(biāo)簽標(biāo)簽一般用在網(wǎng)頁中某一小段文字。其語法如下：.或者.span標(biāo)簽被加入到HTML中的主要目的是用

14、于樣式表，所以當(dāng)樣式表失效時它就沒有任何作用。span標(biāo)簽可以使用clsss和id類選擇符。 41與的差異： 在區(qū)域內(nèi)的對象與區(qū)域外的上下文會自動換行；而是行內(nèi)元素，其區(qū)域內(nèi)的對象與區(qū)域外的上下文不會自動換行。 與標(biāo)簽可同時使用，但建議標(biāo)簽可包含，但最好不要包含標(biāo)簽，否則會造成標(biāo)簽的區(qū)域不完整，而形成斷行的現(xiàn)象。42 DIV的簡單使用 div font-size:24px;font-weight:bold;font-family:隸書;color:#00F;background-color:#CFF;text-align:center;width:400;height:100;border-style:double;#redcolor:red CSS功能很強(qiáng)大，這就是 DIV的一個方塊。 10.6 CSS的幾個特性 1定義規(guī)