1.CSS規則
在CSS樣式表中包括三個部分的內容:選擇符、屬性和屬性值。語法樣式如下:
選擇符{屬性:屬性值;}
語法說明如下:
- 選擇符:又稱選擇器,是CSS中很重要的概念,所有HTML中的標記都是通過不同的CSS選擇器進行控制的。
- 屬性:主要包括字體屬性、文本屬性、背景屬性、佈局屬性、邊界屬性、列表項目屬性、表格屬性等內容。其中一些屬性只有部分瀏覽器支持,因此使用CSS屬性的使用變得更加複雜。
- 屬性值:某屬性的有效值。屬性與屬性值之間以“:”號分割。當有多個屬性值時,使用“;”分隔。
2.CSS選擇器
CSS選擇器常用的是標記選擇器、類別選擇器、包含選擇器、ID選擇器、類選擇器等。使用選擇器即可對不同的HTML標籤進行控制,從而實現各個效果。下面對主要的選擇器進行詳細的介紹。
1.標籤選擇器
HTML頁面是由很多標機組成,例如圖片標記<img>
、超鏈接標記<a>
、表格標記<table>
等,而CSS標記選擇器就是聲明頁面中的哪些標記採用哪些CSS標記,例如a選擇器,就是用於聲明頁面中所有<a>
標記的樣式風格。
例如:定義a標記選擇器,在該標記選擇器中定義超鏈接的字體與顏色。
<style>
a{
font_size:9px;
color:#F93;
}
</style>
2.類別選擇器
使用標記選擇器非常的快捷,但是會有一定的侷限性。如果頁面聲明標記選擇器,那麼頁面中所有該標記內容都會有相應的變化。加入頁面中有3個<h2>
標記,如果想讓每個<h2>
的顯示效果都不一樣,使用標記選擇器就無法實現了,這時就需要引入類別選擇器。
類型選擇器的名稱由自己定義,並以“.”號開頭,定義的屬性與屬性值也要遵循CSS規範。要應用類別選擇器的HTML標記,只需使用class屬性來聲明即可。
例:
<html>
<style>
.one{
font-family:宋體;
font-size:24px;
color:red;
}
.two{
font-family:宋體;
font-size:16px;
color:red;
}
.three{
font-family:宋體;
font-size:12px;
color:red;
}
</style>
</head>
<body>
<h2 class="one">應用選擇one</h2><!--定義樣式後,頁面會自動加載樣式-->
<p>正文內容1</p>
<h2 class="two">應用選擇器two</h2>
<p>正文內容2</p>
<h2 class="three">應用選擇器three</h2>
<p>正文內容3</p>
</body>
</html>
3.ID選擇器
ID選擇器是通過HTML頁面中的ID屬性來進行選擇增添樣式的,它與類別選擇器的基本相同,但是需要注意的是,由於HTML頁面中不能包含兩個相同的ID標記,因此定義的ID選擇器也只能被使用一次。
命名ID選擇器要以“#”號開始,後加HTML標記中的ID屬性值。
例如:使用ID選擇器控制頁面中的樣式。
<html>
<style>
#first{
font-size:18px
}
#two{
font-size:24px
}
#three{
font-size:36px
}
</style>
<body>
<p id="first">ID選擇器1</p>
<p id="two">ID選擇器2</p>
<p id="three">ID選擇器3</p>
</body>
</html>
3.在頁面中包含CSS
1.行內樣式
- 行內樣式是比較直觀的一種樣式,它直接定義在HTML標記之內,通過style屬性來實現。這種方式比較容易接受但是靈活性不強。
2.內嵌式
- 內嵌式樣式就是在頁面中使用標記將CSS包含在頁面中。內嵌樣式表的形式沒有行內標記表現的直接,但是能夠使頁面更加的規整。
- 與行內樣式相比,內嵌式樣式表更加便於維護,但是如果整個網站都由不同頁面構成,而每個頁面中相同的HTML標記都要求有相同的樣式,此時使用內嵌式樣式表就顯得計較笨重,而用鏈接式可以解決這一問題。
3.鏈接式
- 鏈接外部CSS樣式表是最常用的一種引用樣式表的方式,他講CSS樣式定義在一個單獨的文件中,然後在HTML頁面中通過標記引用,是一種最爲有效的使用CSS樣式的方式。
<link rel='stylesheet' href='path' type='text/css'>
參數說明如下:
- rel:定義外部文檔和調用文檔間的關係。
- href:CSS文檔的絕對路徑或相對路徑。
- type:外部文件的MME類型
3.CSS 3的新特徵
模塊與模塊化結構
在CSS 3中並沒有採取總體結構,而是採用了分工協作的模塊化結構。採用這種模式化結構,是爲了避免產生瀏覽器對於某個模塊支持不完全的情況。如果把整體分成幾個模塊,各瀏覽器可以選擇支持哪個模塊,不支持哪個模塊。
CSS 3中的常用模塊如下表所示:
模塊名稱 | 功能描述 |
---|---|
Basic Box Model | 定義各種與盒子相關的模塊 |
Line | 定義各種與直線相關的樣式 |
Lists | 定義各種與列表相關的樣式 |
Text | 定義各種與文字相關的樣式 |
Color | 定義各種與顏色相關的樣式 |
Font | 定義各種與字體相關的樣式 |
Background and Border | 定義各種與背景和邊框相關的樣式 |
Paged Media | 定義各種頁眉、頁腳、頁數等頁面元素數據的樣式 |
Writing Modes | 定義頁面中文本數據的佈局方式 |