熱門標(biāo)簽：上古卷軸5地圖標(biāo)注mod 荒野大鏢客2地圖標(biāo)注怎么變中文 移動(dòng)400辦理電話 中國(guó)地圖標(biāo)注各省份 蘇州通信外呼系統(tǒng)多少錢 武漢人工外呼系統(tǒng) 沈陽(yáng)智能外呼系統(tǒng)排名 山西旅游景地圖標(biāo)注 北川縣地圖標(biāo)注

第3講 CSS

• 何為CSS
• CSS的幾種設(shè)置方式
• 樣式規(guī)則選擇器
• 樣式規(guī)則的注釋與有效范圍
• 樣式屬性詳解

什么是CSS和CSS的設(shè)置方式

作者:Loncer 更多學(xué)習(xí)資源盡在:wwww.loncer.cn

什么是CSS

    CSS即:Cascading Style Sheets這幾個(gè)英文單詞的縮寫,中文為:層疊樣式表.它除了可以輕松設(shè)置網(wǎng)頁(yè)元素的顯示位置和格式外,還能產(chǎn)生濾鏡,圖像淡化,網(wǎng)頁(yè)淡入淡出的漸變效果.簡(jiǎn)而言之.CSS就是要對(duì)網(wǎng)頁(yè)的顯示效果實(shí)現(xiàn)與Word一樣的排版控制.
例如下的代碼:
body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> /body>
即設(shè)置了一個(gè)CSS樣式.

由上可知:一個(gè)HTML元素的style屬性可以指定多種樣式風(fēng)格,每種樣式 風(fēng)格的名稱和它的設(shè)置值之間用冒號(hào)來分開,每種樣式風(fēng)格之間用分號(hào)來分開.各種"樣式風(fēng)格名稱"被稱之為"CSS屬性",樣式風(fēng)格的"設(shè)置值"被稱為"CSS屬性值".這種設(shè)置網(wǎng)頁(yè)元素的顯示效果的方式就是CSS.

CSS的設(shè)置方式

• 內(nèi)聯(lián)樣式表(inline style sheets)

直接設(shè)置HTML正方標(biāo)簽的style屬性的方法稱為內(nèi)聯(lián)樣式表。
例如：body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> /body>
在使用內(nèi)聯(lián)樣式表時(shí)HTML4.01標(biāo)準(zhǔn)建議用戶在網(wǎng)頁(yè)的head>/head>標(biāo)簽之間增加一個(gè)meta>標(biāo)簽,
如下: meta http-equiv="Content-Style-Type" content="text/css">
使用這種方法有兩點(diǎn)不足:
1、如果要將同樣的樣式風(fēng)格設(shè)置到所有的段落上，則要對(duì)每一個(gè)P>標(biāo)簽進(jìn)行重復(fù)的設(shè)置。
2、一個(gè)網(wǎng)頁(yè)可以在多種介質(zhì)或媒體上輸出，使用內(nèi)聯(lián)樣式表設(shè)置的樣式會(huì)在所有的媒體上輸出時(shí)都會(huì)起作用，而沒法為不同的媒體指定不同的樣式表。

• 嵌入樣式表(Embedded style sheets)

head>
style type="text/css" media="screen,projection">
!--
P{"FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"}
-->
/style>
/head>
media說明這個(gè)樣式在什么介質(zhì)上顯示
!-- -->是為了那些不支持CSS的瀏覽器而寫的

---

在style>style>標(biāo)簽對(duì)中定義的每條樣式規(guī)則的基本格式如下：
selector{property:value;property:value……}
selector:
當(dāng)定義一條樣式規(guī)則時(shí)必須指定受這個(gè)樣式作用的網(wǎng)頁(yè)元素，在一條樣式規(guī)則中定義的網(wǎng)頁(yè)元素就是selector（選擇器）,也就是選擇該樣式作用于網(wǎng)頁(yè)元素。
有三種樣式選擇器：

1. HTML標(biāo)簽，如：P、BODY、A……
2. CLASS
3. ID

property:
指定那些將要被修改的樣式風(fēng)格名稱，即：CSS屬性，如：color、font-size……
value:
賦給property的值，即CSS的屬性值。
如果要在不多個(gè)網(wǎng)頁(yè)中使用同一樣風(fēng)格，則要在每一個(gè)網(wǎng)頁(yè)的HEAD中加入CSS定義，這就是嵌入樣式表的不足之處

• 外部樣式表(Linked style sheets)

把嵌入樣式表中的style>/style>之間的樣式規(guī)則定義語(yǔ)句放在一個(gè)單獨(dú)的外部文件中，這個(gè)外部文件就是外部樣式表文件，其擴(kuò)展名這.css。一個(gè)外部樣式表文件可以通過HTTP的link>標(biāo)簽連接到HTML文檔中。
例：

先建一個(gè)test.css文件，代碼如下： P{ "FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline" }

再寫一個(gè)要使用該樣式表的文件，設(shè)他倆在同一文件夾下： head> link rel="StyleSheet" href="test.css" type="text/css" media="screen"> /head> type和media是可選的,rel和href是必須的

使用外部樣式表，網(wǎng)頁(yè)制作者可以通過改變一個(gè)文件就可以改變整個(gè)網(wǎng)絡(luò)的外觀。大多數(shù)瀏覽器會(huì)將外部樣式表文件保存在緩沖區(qū)中，從而加快了網(wǎng)站的瀏覽速度。

• 輸入樣式表(imported sytle sheets)

可以使用CSS的@import將一個(gè)CSS文件輸入到另外一個(gè)CSS文件中,被輸入的CSS樣式規(guī)則定義語(yǔ)句就成了輸入的CSS樣式規(guī)則定義語(yǔ)句的一部分。也可以用@inport將一個(gè)CSS文件輸入到style>/style>標(biāo)簽對(duì)中。被輸入的CSS樣式規(guī)則定義語(yǔ)句就成了style>/style>標(biāo)簽對(duì)中的定義語(yǔ)句。
例：

style type="text/css" media="screen">br> !--br> @import url(http://………………);br> @import url(/XXXX……………);br> p{background:yellow;color:black}br> -->br> /style>br> 注：所有的@import部分要放在前面