CSS樣式表概述（信息技術(shù)）_第1頁(yè)
CSS樣式表概述（信息技術(shù)）_第2頁(yè)
CSS樣式表概述（信息技術(shù)）_第3頁(yè)
CSS樣式表概述（信息技術(shù)）_第4頁(yè)
CSS樣式表概述（信息技術(shù)）_第5頁(yè)
已閱讀5頁(yè)，還剩25頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

CSS樣式表概述網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)CSS樣式表概述1.1 CSS的基本概念又稱(chēng)為級(jí)聯(lián)樣式表，是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面在瀏覽器中的外觀。使用它可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制，并且實(shí)現(xiàn)頁(yè)面內(nèi)容與頁(yè)面外觀控制的分離。CSS語(yǔ)言是一種標(biāo)記語(yǔ)言,它不需要編譯,可以直接由瀏覽器解釋執(zhí)行（屬于瀏覽器解釋型語(yǔ)言）。CSS文件是一個(gè)文本文件，它包含了一些預(yù)定義的CSS標(biāo)記，CSS文件必須使用css為文件名后綴。CSS的定義任務(wù)CSS樣式表概述1.1 CSS的基本概念1994年哈坤?利提出了CSS的最初思想，伯特?波斯（Bert

Bos）對(duì)哈坤?利提出的CSS思想非常贊同，于是合作設(shè)計(jì)CSS。1996年底，CSS完成。1996年12月CSS要求的第一版本被出版。1997年初，W3C內(nèi)組織了專(zhuān)門(mén)管CSS的工作組，由克里斯?里雷負(fù)責(zé)。這個(gè)工作組開(kāi)始討論第一版中沒(méi)有涉及到的問(wèn)題，于是1998年5月出版了CSS的第二版，即CSS2.0。CSS的發(fā)展任務(wù)CSS樣式表概述1.1 CSS的基本概念在可幾以乎更所加有準(zhǔn)的確瀏地覽控器制網(wǎng)上頁(yè)都可中以各使元用素C的SS位，置其，功是能元包素括在：網(wǎng)頁(yè)中浮可動(dòng)以；更加靈活地控制網(wǎng)頁(yè)頁(yè)面中文本的字體、顏色、大小、間可距以、為風(fēng)網(wǎng)格頁(yè)及中位的置元等素；設(shè)置各種濾鏡，產(chǎn)生諸如陰影、輝光、?？珊院挽`透活明地等為只網(wǎng)有頁(yè)在中一的些元圖素像設(shè)處置理各軟種件效中果才的能邊實(shí)框現(xiàn)；的特殊效果可；以方便地為網(wǎng)頁(yè)中的元素設(shè)置不同的背景顏色、背景圖片及還平可鋪以方與式腳等本；語(yǔ)言結(jié)合使用，實(shí)現(xiàn)網(wǎng)頁(yè)元素的動(dòng)態(tài)效果。CSS的功能和優(yōu)勢(shì)功能任務(wù)CSS樣式表概述1.1 CSS的基本概念采用CSS布局相對(duì)于傳統(tǒng)的TABLE網(wǎng)頁(yè)布局而具有以下3個(gè)顯著優(yōu)勢(shì)：表現(xiàn)和內(nèi)容相分離。提高頁(yè)面瀏覽速度。易于維護(hù)和改版。使用CSS布局更符合現(xiàn)在的W3C標(biāo)準(zhǔn)。CSS的功能和優(yōu)勢(shì)優(yōu)勢(shì)任務(wù)CSS樣式表概述1.1 CSS的基本概念CSS的分類(lèi)內(nèi)部樣式表（InternalStyle

Sheet）外部樣式表（ExternalStyle

Sheet）內(nèi)嵌樣式表內(nèi)嵌樣式表的規(guī)則定義在HTML（Inline

Style)標(biāo)記的內(nèi)部，該樣式規(guī)則只對(duì)所在的HTML標(biāo)記有效。分類(lèi)這種樣式表需要使用選擇符，用于指定對(duì)哪些網(wǎng)頁(yè)元素有效。內(nèi)部樣式表的樣式規(guī)則定義在HTML文檔的<head>標(biāo)簽和</head>標(biāo)簽之間。外部樣式表的樣式規(guī)則定義在一個(gè)以.css為擴(kuò)展名的樣式表文件中，在需要使用的時(shí)候，可以在

HTML文件中引用。任務(wù)CSS的樣式規(guī)則是由兩個(gè)主要部分組成：選擇符和樣式描述。選擇符用來(lái)指定CSS規(guī)則使用于哪個(gè)或哪些元素，最常見(jiàn)的選擇符是HTML標(biāo)記的名稱(chēng)。樣式描述部分用花括號(hào)括起來(lái)，其內(nèi)容是一組用于指定元素的以分號(hào)分隔開(kāi)的樣式屬性名和它的屬性值。樣式規(guī)則定義的基本格式為：選擇符｛樣式屬性1：屬性值1[；樣式屬性2：屬性值2；]…｝其中，方括號(hào)[]表示可選項(xiàng)。也就是說(shuō)，在一條樣式規(guī)則中可以指定一個(gè)或多個(gè)樣式屬性。CSS樣式表概述1.2 CSS的基本語(yǔ)法任務(wù)在大多數(shù)情況下，選擇符就是被施加樣式的HTML標(biāo)記的名稱(chēng)，瀏覽器在文檔中解析到這些標(biāo)記的時(shí)候，就會(huì)使用CSS中定義好的樣式來(lái)顯示它們。選擇符還可以包括以下幾種形式。CSS樣式表概述1.2 CSS的基本語(yǔ)法選擇符任務(wù)標(biāo)記名把HTML的標(biāo)記名作為選擇符，表示要將樣式規(guī)則應(yīng)用于這類(lèi)HTML標(biāo)記上。例如，body

{color:black}//此例的效果是使頁(yè)面中的文字為黑色。p

{font-family:"sans

serif"}//定義段落字體為sans

serif。p

{text-align:center;color:red}//段落居中排列;并且段落中的文字為紅色。CSS樣式表概述1.2 CSS的基本語(yǔ)法選擇符任務(wù)類(lèi)名CSS允許將HTML標(biāo)記名的class屬性的值作為選擇符，這種選

擇符成為類(lèi)選擇符，表示將CSS規(guī)則應(yīng)用于class屬性值等于指定類(lèi)名的元素，class屬性的值是用戶(hù)自定義的。使用類(lèi)選擇符能夠把相同的元素分類(lèi)定義不同的樣式。定義類(lèi)選擇符時(shí)，①在指定的class屬性值，即類(lèi)名稱(chēng)前面加一個(gè)點(diǎn)號(hào)；②在選擇符中省略HTML標(biāo)記名，這樣可以把幾個(gè)不同的元素定義成相同的樣式。CSS樣式表概述1.2 CSS的基本語(yǔ)法選擇符任務(wù)CSS樣式表概述1.2 CSS的基本語(yǔ)法選擇符ID選擇符ID選擇符，就是將HTML文檔中的ID屬性值作為選擇符。在HTML文檔中ID屬性可以唯一指定一個(gè)HTML元素，因而ID選擇符可以用來(lái)對(duì)某個(gè)電椅的元素定義單獨(dú)的樣式。ID選擇符的應(yīng)用和類(lèi)選擇符類(lèi)似，只要把class換成ID即可。需要注意的是，如果將上例中class用ID替代，則ID選擇符指定的樣式規(guī)則只能在一個(gè)頁(yè)面中使用一次，而class類(lèi)選擇符指定的樣式規(guī)則可以多次使用。定義ID選擇符要在ID名稱(chēng)前加上一個(gè)“#”號(hào)。定義ID選擇符的屬性也有兩種方法：①#ID屬性值；②HTML標(biāo)記名#ID屬性值。任務(wù)CSS樣式表概述1.2 CSS的基本語(yǔ)法選擇符包含選擇符可以單獨(dú)對(duì)某種元素包含關(guān)系定義的樣式表。元素1里包含元素2，這種方式只對(duì)在元素1里的元素2定義，對(duì)單獨(dú)的元素1和元素2無(wú)定義。例如，table

a{font-size:

12px}說(shuō)明：在表格內(nèi)的鏈接改變了樣式，文字大小為12像素，而表格外的鏈接的文字仍為默認(rèn)大小。任務(wù)CSS樣式表概述1.2 CSS的基本語(yǔ)法選擇符選擇符組選擇符組就是把具有相同樣式屬性和屬性值的選擇符組合起來(lái)，用逗號(hào)分隔，這樣可以減少樣式重復(fù)定義。例如，p,table{font-size:9pt}說(shuō)明：段落和表格里的文字尺寸為9號(hào)字，效果完全等效于：p{font-size:9pt}table

{

font-size:

9pt

}任務(wù)CSS樣式表概述1.2 CSS的基本語(yǔ)法CSS的層疊性層疊性就是繼承性，樣式表的繼承性是指外部的元素樣式會(huì)保留下來(lái)繼承給該元素所包含的其他元素。事實(shí)上，所有在元素中嵌套的元素都會(huì)繼承外層元素指定的屬性值，有時(shí)會(huì)把很多層嵌套的樣式疊加在一起。當(dāng)對(duì)同一網(wǎng)頁(yè)元素使用定義的多個(gè)CSS規(guī)則時(shí)，總是以最后定義的樣式來(lái)顯示該元素的顯示格式。例如，現(xiàn)有如下的CSS規(guī)則：div

{

color:

red;

font-size:9pt}p

{color:

blue}任務(wù)CSS樣式表概述1.2 CSS的基本語(yǔ)法當(dāng)不同的選擇符定義相同的元素時(shí)，要考慮到不同的選擇符之間的優(yōu)先級(jí)。對(duì)于ID選擇符、類(lèi)選擇符和HTML標(biāo)記選擇符，ID選擇符優(yōu)先級(jí)最高，類(lèi)選

擇符優(yōu)先級(jí)次之，HTML標(biāo)記選擇符優(yōu)先級(jí)最低。選擇符的優(yōu)先級(jí)任務(wù)CSS樣式表概述1.2 CSS的基本語(yǔ)法CSS允許在代碼中插入注釋來(lái)說(shuō)明代碼的含義，注釋有利于讀者編輯和更改代碼時(shí)理解代碼的含義。在瀏覽器中，注釋不會(huì)顯示的。CSS注釋以"/*"開(kāi)頭，以"*/"結(jié)尾。CSS的注釋任務(wù)類(lèi)型CSS樣式表概述1.3 CSS的樣式屬性類(lèi)型屬性主要用于定義網(wǎng)頁(yè)中的文本的字體、大小、顏色、樣式以及文本鏈接的修飾效果等，如圖所示。任務(wù)背景CSS樣式表概述1.3 CSS的樣式屬性背景屬性主要用于設(shè)置背景顏色或背景圖像，其對(duì)話框如圖所示。任務(wù)區(qū)塊CSS樣式表概述1.3 CSS的樣式屬性區(qū)塊屬性主要用于控制網(wǎng)頁(yè)頁(yè)面元素的間距、對(duì)齊方式等，其對(duì)話框如圖所示。任務(wù)方框CSS樣式表概述1.3 CSS的樣式屬性CSS將網(wǎng)頁(yè)頁(yè)面中的所有塊元素都看成包含在一個(gè)方框中，這個(gè)方框共分為4各部分，分別是邊界、邊框、填充和方框內(nèi)容。如圖所示。任務(wù)方框CSS樣式表概述1.3 CSS的樣式屬性方框”屬性和“邊框”屬性都是針對(duì)方框中各部分的屬性設(shè)置，“方框”分類(lèi)對(duì)話框如圖所示。任務(wù)列表CSS樣式表概述1.3 CSS的樣式屬性列表屬性用于控制列表內(nèi)的各項(xiàng)元素的顯示格式，其分類(lèi)對(duì)話框如圖所示。任務(wù)定位CSS樣式表概述1.3 CSS的樣式屬性定位屬性能夠精準(zhǔn)的控制網(wǎng)頁(yè)元素的位置，并可以使網(wǎng)頁(yè)元素在頁(yè)面上隨處浮動(dòng)。其分類(lèi)對(duì)話框如圖所示。通過(guò)CSS定位屬性可以精確的控制網(wǎng)頁(yè)元素的位置，實(shí)現(xiàn)很多在不通過(guò)CSS無(wú)法實(shí)現(xiàn)的顯示效果。例如下面的代碼可以實(shí)現(xiàn)兩個(gè)垂直排列的表格轉(zhuǎn)變成水平排放。任務(wù)擴(kuò)展CSS樣式表概述1.3 CSS的樣式屬性擴(kuò)展屬性用于設(shè)置網(wǎng)頁(yè)顯示的擴(kuò)展規(guī)則。其規(guī)則在如圖所示的“擴(kuò)展”分類(lèi)對(duì)話框中設(shè)置。任務(wù)CSS樣式表概述1.4 CSS樣式的引用內(nèi)嵌定義的樣式表，也就是在對(duì)象的標(biāo)記內(nèi)直接使用style屬性定義樣式，是最簡(jiǎn)單的樣式調(diào)用方法。這種方式可以靈巧地把樣式規(guī)則應(yīng)用到各標(biāo)簽對(duì)象中，使用簡(jiǎn)單、顯示直觀。但這種方式無(wú)法完全發(fā)揮出樣式表“表現(xiàn)與內(nèi)容分離”的優(yōu)勢(shì)，在設(shè)計(jì)過(guò)程中并不常用。內(nèi)嵌定義的樣式規(guī)則只對(duì)所在的HTML標(biāo)記有效。例如，<p

style=“font-size:20pt;

color:red”></p>段落文字大小為20點(diǎn)，字體顏色為紅色。內(nèi)嵌樣式表的引用任務(wù)CSS樣式表概述1.4 CSS樣式的引用內(nèi)部樣式表的樣式規(guī)則定義在HTML文檔的<head>標(biāo)簽和</head>標(biāo)簽之間，這種樣式表需要使用選擇符，用于指定對(duì)哪些網(wǎng)頁(yè)元素有效。內(nèi)部樣式表定義以后，如果在HTML中需要引用其中的樣式規(guī)則，根據(jù)選擇符的不同可以使用如下的幾種方式引用它。內(nèi)部樣式表的引用任務(wù)CSS樣式表概述1.4 CSS樣式的引用內(nèi)部樣式表的引用包含選擇符標(biāo)記名選擇符ID選擇符類(lèi)選擇符內(nèi)部樣式表引用方式任務(wù)CSS樣式表概述1.4 CSS樣式的引用外部樣式表的樣式規(guī)則定義是在一個(gè)以.css為擴(kuò)展名的樣式表文件中，在需要使用的時(shí)候，可以使用鏈接或使用@import方法導(dǎo)入當(dāng)前的HTML文檔中。而需要在HTML標(biāo)記元素中引用其中的

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論