css樣式表---1

時間 2019-11-07

標籤 css 樣式欄目 CSS 简体版

原文原文鏈接

3.1.1 CSS概念css

CSS全稱是Cascading Style Sheet，翻譯成中文叫層疊樣式表。它是一種標記性語言，配合HTML語言進行頁面外觀控制。CSS技術誕生於1996年，早期因爲缺少瀏覽器支持，並無引發人們的重視，如今大多數瀏覽器都支持CSS。CSS容許在HTML文檔中加入樣式，如字體類型、顏色、大小等，對於設計者來講，它是一個很是靈活的工具，能夠幫助開發人員實現網頁內容與外觀控制的分離。CSS樣式表的引入也很是靈活，既可在行內定義，也可定義在頁面的特定位置，甚至做爲外部樣式文件供網頁調用，真正實現外觀控制與內容功能的分離。html

CSS是由W3C組織負責制訂和頒佈的，1996年12月發佈的CSS爲1.0規範，1998年發佈了2.0規範，目前還有2.1和3.0規範兩個版本處於應用狀態。因爲W3C是一個民間技術組織，並無強制要求各軟件廠家必須符合CSS規範，所以，不一樣的瀏覽器對CSS的支持並不徹底相同，這多少給開發者帶來一些不便，但目前主流的瀏覽器IE6、IE7以及Firefox等已經將CSS做爲事實的技術規範，CSS所以獲得了很是好的支持。編程

3.1.2 使用CSS的優勢瀏覽器

HTML標籤也能夠進行頁面樣式的控制，在本章範例html_style.htm中，將<font></font>標籤內嵌在<h1></h1>標籤中，實現了字體和顏色的控制，代碼以下。緩存

<html>編輯器

<head>工具

<title>使用HTML方式控制樣式</title>字體

</head>網站

<body>ui

<h1><font face="楷體" color="red">第3章 CSS樣式表</font></h1>

<h2><font face="楷體" color="blue">第1節樣式表概述</font></h2>

<h2><font face="楷體" color="blue">第2節 CSS樣式表定義</font></h2>

<h2><font face="楷體" color="blue">第3節網頁中應用CSS樣式表的方法</font></h2>

</body>

</html>

在上述代碼中，經過設計font標籤的face與color兩個屬性，實現了對文字的字體與顏色控制。但這種在HTML標籤中內嵌代碼的控制樣式的方法明顯存在缺陷，當須要控制的樣式很是多時，工做量很是大，並且一旦需求發生改變，例如將頁面中所有的<h2>標籤由藍色改爲黑色，必須在每一個頁面中從新修改代碼。

在本章範例css_style.htm中，對上述代碼進行了改進，代碼以下。

<html>

<head>

<title>CSS方式控制樣式</title>

h1{ font-family:"楷體"; color:red;}

h2{ font-family:"楷體"; color:blue;}

</style>

</head>

<body>

<h1>第3章 CSS樣式表</h1>

<h2>第1節樣式表概述</h2>

<h2>第2節 CSS樣式表定義</h2>

<h2>第3節網頁中應用CSS樣式表的方法</h2>

</body>

</html>

上述代碼中，<h1></h1>標籤與<h2></h2>標籤內部的文字樣式已經再也不使用內嵌的<font></font>來控制，而是使用樣式表h1{}與h2{}控制，頁面效果如圖3-1所示。

圖3-1 CSS方式控制樣式

當要改變<h2></h2>顏色時，只須要修改h2{}樣式表color屬性對應的顏色名，頁面中全部的<h2></h2>樣式都會發生改變。樣式表還能夠單獨保存在文件中，供網站中的全部文件調用，這樣既能提升開發效率，又可保證網站中頁面的風格統一。

概括起來，使用樣式表來控制頁面外觀有以下一些優點：

1．CSS使樣式代碼獨立於網頁HTML代碼，簡化網頁格式設計，加強了網頁的可維護性；

2．樣式與內容分離，可以使用程序控制樣式，加強了網頁的表現能力；

3．CSS文件可被瀏覽器緩存，加載和刷新網頁時，只須要傳送頁面內容，就能夠節省帶寬，提升訪問速度；

4．內容與樣式設計分離，有利於開發團隊分工合做，提升代碼重用性，提升開發效率；

5．網頁內容與外觀代碼分離，提升了頁面的兼容性，不一樣的瀏覽器與設備可根據實際狀況對同一站點的頁面樣式進行選擇和處理。

3.2 CSS樣式定義與編輯

3.2.1 CSS定義

CSS由樣式規則組成，以告訴瀏覽器怎樣去顯示一個文檔。

樣式規則以下：

樣式選擇器{

屬性1:屬性值;

屬性2:屬性值;

…

屬性n:屬性值;

}

例如在3.1節用來控制<h2></h2>標籤的外觀，使用了以下樣式規則：

h2{ font-family:"楷體"; color:blue;}

在這段代碼中，h2爲樣式選擇器，font-family和color爲該樣式的兩個屬性，分別表示字體名和顏色，對應的值爲「楷體」和「blue」，該樣式表示將頁面中的<h2></h2>標籤的字體設置爲楷體，顏色設置爲藍色。

在CSS規則中，「樣式選擇器」是一個很是重要的概念，樣式選擇器是用必定規則來指定一個或一組標記，從而對它們進行統一的外觀控制。樣式選擇器能夠包括HTML標籤符、用戶自定義類class或用戶自定義ID。「屬性(attributes)」表示由CSS標準定義的樣式屬性，「屬性值(values)」爲樣式屬性的值。

在下列代碼中，使用樣式選擇器body，body具備margin-left、margin-top等5個屬性，分別表示左、上、右、下邊距和背景顏色。

body

{

margin-left: 20px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #00ff00;

}

本章範例body_style.htm在3.1節描述的頁面文件中，將上述代碼加到頁面樣式中，頁面效果如圖3-2所示，讀者能夠對照前面的頁面效果，理解CSS工做原理。

圖3-2 body樣式

關於樣式表的語法，要注意如下幾個問題：

屬性必須包含在{}號之中；

屬性和屬性值之間用「:」分隔；

當有多個屬性時，用「;」進行區分；

在書寫屬性時屬性之間使用空格換行，並不影響屬性的顯示；

若是一個屬性有幾個值，則每一個屬性值之間用空格分隔開；

CSS語言對於屬性值要求很嚴格，若是CSS規範中沒有或者不符合要求，CSS語句都不能正常做用。

3.2.3 CSS編輯

任何純文本編輯器均可以進行手工方式的樣式表編寫工做，不過，純粹手工編寫工做量大，並且容易出錯。不少網頁製做工具都支持樣式表的編輯，例如Dreamweaver和ASP.NET開發環境。

Dreamweaver支持可視化與代碼兩種方式進行樣式表的編寫。

如圖3-3所示，使用Dreamweaver編輯網頁時，當選擇頁面中某個HTML標籤時，經過屬性對話框，能夠可視化樣式編寫工做，這是一種所見即所得的工做模式，即便開發人員不太熟悉CSS語言，也能夠由Dreamweaver生成相應的CSS代碼。

圖3-3 Dreamweaver樣式屬性對話框

使用代碼方式編寫CSS時，Dreamweaver提供了強大的代碼提示功能，幫助開發人員輕易生成CSS代碼。編輯樣式代碼時，按空格或回車鍵就可使用Dreamweaver的代碼提示功能。圖3-4(a)是在編寫樣式表boby{}時Dreamweaver給出的代碼提示，開發人員只需將鼠標移動到相應屬性上，按回車鍵，該屬性自動加至代碼中，同時還會彈出屬性值的代碼提示或選擇器，圖3-4(b)是編寫顏色樣式時Dreamweaver工具彈出的拾色器。

圖3-4 (a)Dreamweaver樣式編寫代碼提示 (b)Dreamweaver樣式編寫彈出拾色器

3.3 網頁中應用樣式表的方法

在網頁中，可經過在HTML標籤內嵌套、頁面內嵌套和外聯樣式表文件等幾種方法使用樣式表。

3.3.1 HTML標籤中內嵌style屬性

具體語法是在HTML標籤中加入一個style=""的屬性，兩個引號之間定義該標籤的樣式，樣式定義的語法遵循樣式定義規則。

這是一個直接書寫樣式的段落

</p>

上述代碼爲段落標籤<p></p>聲明瞭樣式，指定了段落縮進1釐米，背景色爲黃色，字體爲courier。

須要說明的是，這種樣式聲明與舊式的HTML標籤格式控制有本質上的區別，例以下面代碼，雖然也能控制<p></p>標籤的顏色、背景和寬度，可是經過標籤的屬性定義方式實現控制外觀，不是嚴格意義上的樣式表，新的W3C規範已經不推薦使用這種外觀控制方式。

<p color="red" width="150px" bgcolor="yellow">舊式的HTML標籤外觀控制方式，不是樣式表</p>

HTML標籤內嵌樣式屬性的方式只適合對某個特定的HTML標籤設置樣式，定義好的樣式不能被其餘標籤共用，不適合大範圍的樣式定義。

3.3.2頁面內嵌入樣式表

這種內嵌方式是將樣式表寫在頁面<head></head>標籤內部，而且用<style></style>標籤進行聲明，樣式以下。

<!--

樣式表定義

-->

</style>

本章範例文件inner_style.htm演示了內嵌CSS的使用方式，頁面中三個段落標籤<p>都會受到該樣式表p{ background:gray;color:blue;font-size:16px;}的控制，背景爲灰色，文字爲藍色，字號爲16像素。

<html>

<head>

<title>頁面內嵌樣式</title>

<!--

p{background:gray;color:blue;font-size:16px;}

-->

</style>

</head>

<body>

</body>

</html>

3.3.3外聯樣式表文件使用樣式表

當定義樣式內容較多，且須要多個頁面共享樣式時，可以使用外聯樣式表文件來使用樣式表。

首先須要定義一個樣式表文件，樣式表文件的擴展名爲.css，在樣式表文件中，不須要再使用<style></style>標籤，直接定義樣式便可。例如，本章範例文件style.css中定義了段落標籤<p>和<h1>標籤的樣式，代碼以下：

h1{ color: green; font-size: 37px; font-family: impact }

P { text-indent: 25px; background: yellow; font-family: courier }

要調用style.css文件，能夠在<head></head>標籤中加入一條<link>標籤，語法以下。

本章範例文件out_style.htm演示瞭如何調用外部樣式表文件。

<head>

<title>外部樣式表</title>

</head>

<body>

<h1>外部CSS</h1>

<p>經過link標籤使用外部樣式表文件style.css</p>

</body>

</html>

上述代碼調用了CSS文件夾下面的樣式表文件style.css，樣式表功能與前面兩種使用方法徹底一致。

3.4 CSS樣式選擇器

樣式選擇器包括HTML標籤、類和ID，它們能夠協同做用修飾HTML標籤，優先級從低到高。

3.4.1 HTML標籤做樣式選擇器

網頁是由不一樣的HTML標籤組成的，能夠直接使用HTML標籤名做爲CSS的樣式選擇器，從而直接控制頁面中一組HTML標籤的樣式。

例以下列代碼中，分別使用了h1和p做爲樣式選擇器。

h1{

font-size:16px;

color:red

}

p{font-size:11px;color:gray}

一個網頁中若是引用上述樣式表，則頁面中全部標題標籤<h1>與段落標籤<p>都將分別受到這兩個樣式的控制，不須要再單獨設置樣式。有了h1樣式，不管頁面中有多少個<h1>標籤，都將字號大小顯示成16像素，字體顏色爲紅色，因爲一個樣式表的屬性和值能夠設置多個，從而可使用h1樣式選擇器實現<h1>標籤的多個風格控制，達到了統一高效的目的，例如，須要將<h1>標籤的字體顏色改爲藍色，只要將color屬性對應的值由red改成blue就好了。

有時爲了減小樣式表的重複聲明，經常採用「組合樣式選擇器」來定義樣式表。例如：h1, h2, h3, h4 {font-size:18px;color:red}可將文檔中的不一樣級別的標題<h1>至<h4>的樣式定義爲一致。

本章範例h_style.htm文件演示組合樣式選擇器定義方式，頁面中放置了h1至h3三級標籤。

<h1>第3章 CSS樣式表</h1>

<h2>第1節樣式表概述</h2>

<h2>第2節 CSS樣式表定義</h2>

<h2>第3節網頁中應用CSS樣式表的方法</h2>

<h3>3.1 標籤內部使用CSS</h3>

<h3>3.3 使用外部CSS文件</h3>

沒有使用組合樣式控制時，三級標籤的默認顯示字號是不同的，如圖3-5所示，使用組合樣式控制後，頁面h1至h4各級標題的字號統一爲18像素，顏色爲紅色，如圖3-6所示。

圖3-5各級h標題默認樣式

圖3-6 h1至h4組合樣式選擇器效果

3.4.2 類做爲樣式選擇器

使用HTML標籤做樣式選擇器帶來兩個問題：其一，當頁面中的相同標籤要顯示成不一樣的樣式怎麼辦？其二，當不一樣的標籤要顯示相同的樣式，是否須要逐一設計不一樣標籤的樣式？

因爲HTML標籤做樣式選擇器的做用對象是頁面中全部標籤，所以，問題彷佛沒法解決。例如，頁面中有三個段落標籤，使用p做爲樣式選擇器，代碼以下：

<html>

<head>

p{background:#CCCCCC; color:#FF0000; font-size:16px;}

</style>

</head>

<body>

</body>

</html>

若是想使三個段落顯示不一樣的背景與字體顏色，使用p做爲樣式選擇器是沒法實現的，由於該樣式會對頁面中全部段落起控制做用。

事實上，網頁設計人員常常會遇到須要控制頁面中部分標籤的樣式，這種狀況下，也就是縮小原有HTML標籤做樣式選擇器的做用範圍。此時，可以使用類(class)樣式選擇器。

類樣式選擇器的完整格式以下：

HTML標籤名.類名

{屬性1:值;

屬性2:值;

……

屬性n:值;

}

能夠用類(class)爲一個HTML標記符指定多個樣式，與HTML標籤做樣式選擇器不一樣，要使類樣式選擇器起做用，必須在標籤中指定樣式的類名，如class="style1"。

將上述三個段落的背景設置爲灰色，字體分別爲紅色，藍色，黑色，字號大小分別爲20px、16px、12px，能夠設置三個類選擇器，並在三個段落標籤中指定類樣式選擇器，相應代碼以下。

p.style1{background:gray;color:red; font-size:20px;}

p.style2{background:gray;color:blue;font-size:16px;}

p.style3{background:gray;color:black;font-size:12px;}

</style>

上述代碼的頁面效果如圖3-7所示。須要注意的是，在<p>標籤中指定樣式選擇器的類名，不能使用完整樣式選擇器名稱p.style1，而必須使用style1，由於style1纔是真正的類名。

圖3-7 類做樣式選擇器

類的聲名也能夠不針對具體的HTML標記符，不少時候，咱們都省略類選擇器前面的HTML標籤名，直接使用「.類名」的格式聲明一個類樣式。

例若有樣式

.strong

{

font-weight:bold;

}

此時，頁面中只要須要font-weight樣式屬性的標籤，例如<p>、<div>、<span>等，均可以使用class="strong"調用該樣式，使字體加粗。這是多個HTML標籤共用同一個樣式的例子。

上述兩種類的定義也能夠複合使用，例以下面代碼中聲明瞭.style1與p.stlye1兩個樣式表，類名相同。

.style1{color:red; }

p.style1{background:gray; font-size:20px;}

頁面中的<p>和<span>兩個標籤都使用style1樣式，則color、background和font-size三個屬性同時做用於<p>標籤，而只有color屬性做用於<span>標籤，請讀者仔細體會樣式做用的原理。

<span class="style1">這是一個範圍</span>

3.4.3 ID做樣式選擇器

HTML標籤的ID是一個身份標識，針對某個特定標籤的樣式控制或編程，都要使用標籤的ID。ID做樣式選擇器與類和HTML標籤做樣式選擇器的語法基本一致，頁面中對應標籤只須要設置與ID樣式選擇器一致的ID就可使用該樣式，通常狀況下，頁面標籤的ID是惟一的，所以，ID樣式選擇器通常只針對某個特定的標籤做用一次。

定義格式以下：#ID { attributes1:values1;attributes2:values2;…}

例以下面代碼用#yellow聲明一個ID樣式表，表示字體爲黃色。

#yellow{color:yellow}

其引用以下：

<p id="yellow">本段爲黃色</p>

上述代碼請參見本章範例id_selectors.htm。

使用類選擇器和ID選擇器有如下一些區別：

類選擇符能夠重複使用，且能夠用在任意元素上，使用任意次；

頁面中HTML標籤的id屬性應該是惟一的，擁有id的元素纔會應用該樣式；

ID選擇器的優先權高於類選擇器。

3.4.4 層次樣式選擇器

HTML標籤是能夠嵌套使用的，本章範例div_li_style.htm有以下代碼，使用了兩個層，並分別指定了id，層內嵌套有列表標籤。

<ul>

<li >這是div1中的列表</li>

<li>這是div1中的列表</li>

</ul>

</div>

<ul>

<li id="li1">這是div2中的列表，id爲li1</li>

<li>這是div2中的列表</li>

</ul>

</div>

若是要實現圖3-8的樣式：div1中<li>標籤爲加粗字號，紅色，div2中<li>標籤爲普通字號，藍色，若是使用類做樣式選擇器，則須要針對<li>標籤設計兩個不一樣的類樣式，並在<li>標籤中調用，聲明和調用樣式的代碼變得較複雜。

事實上，CSS規範中提供了層次樣式選擇器，能夠實現上述效果。

圖3-8 層次樣式選擇器

下列代碼給div1和div2定義了層次樣式表

div#div2 ul li{font-weight:normal;color:blue;}

div#div1 ul li{font-weight:bold; color:red;}

層次樣式表的概念與HTML文檔樹的層次結構是一致的，沿着某個起始的節點，通過必定路徑，從而達到指定的位置，層次樣式選擇器就是使用這條路徑做選擇器的名稱的。

在上面代碼中，層次選擇器div#div1 ul li所定義的樣式表示將div標籤下面一個id爲div1名下的ul和li標籤的字體設置成加粗，顏色爲紅色。

須要說明的是，樣式選擇器的基本形式只有HMTL標籤、類、ID，層次選擇器其實是上述三種基本選擇器的組合方式。

3.4.5 超連接專用選擇器

因爲HTML中的超連接標籤<a>有link、visited、hover、active四個狀態，分別表示連接、已訪問過的連接、鼠標停在上方時、點擊鼠標時四個狀態。

CSS規範爲超連接提供了4種專用選擇器：　　

a:link（沒有接觸過的連接）：用於定義連接的常規狀態。這種連接狀態是基本的，推薦至少要定義這種連接樣式。

a:visited（訪問過的連接）：用於閱讀文章，能清楚地判斷已經訪問過的連接。顏色要和超連接常規狀態顏色不一樣，多用於之內容爲主的網站。

a:hover（鼠標放在連接上的狀態）：用於產生視覺效果。(推薦「a:hover」連接顏色使用紅色，能產生極好的視覺效果。)

a:active（連接被點擊時的狀態）：用於表現鼠標按下時的連接狀態。　

以上4種選擇器第4種較少使用，在定義選擇器時能夠省略，但要嚴格按上述順序定義，不然可能會無效。

a:link{text-decoration:none ; color:red;}

a:visited {text-decoration:none ; color:gray;}

a:hover {text-decoration:underline ; color:red ;}

a:active {text-decoration:none ;color:green;}

上述樣式控制的超連接如圖3-9所示，沒有訪問過的超連接爲紅色，訪問過的爲灰色，被點擊時爲綠色，鼠標懸停在超連接上方時爲紅色加下劃線。

圖3-9 超連接樣式

若是網頁中不一樣區域的超連接須要設置成不一樣的樣式，如上圖所示，第一個欄目的超連接未訪問時爲紅色，第二個欄目未訪問時爲藍色，此時，能夠單獨設計一個用來控制超連接樣式的類，超連接類的語法格式爲a.類名{樣式定義}，詳見本章範例link_style.htm的代碼。

a.news:link{text-decoration:underline ;color:blue;}

a.news:visited{text-decoration:underline ;color:green;}

a.news:hover {text-decoration:underline ;color:red;}

a.news:active {text-decoration:underline ;color:green;}

調用上面超連接樣式，必須在超連接標籤中顯示指定樣式類名，代碼以下。

3.4.6通配選擇器*

有時，須要將網頁中全部標籤設置成某一共同的樣式，例如，全部文字的顏色都顯示成紅色，此時，可以使用通配樣式選擇器「*」爲全部的元素定義統一的屬性。

例如，頁面中聲明瞭通用樣式選擇器的樣式

*{color:red;}

則頁面中全部標籤的文字都以紅色顯示，除非另外再受到其餘樣式的控制。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。