不朽情缘玩了多久爆五滴血

書名： Java Web程序設計（慕課版）
作者名：梁永先李樹強朱林
本章字數： 2071字
更新時間： 2020-06-12 15:31:19

2.2 CSS樣式表

CSS（Cascading Style Sheet）是W3C協會為彌補HTML在顯示屬性設定上的不足而制定的一套擴展樣式標準。CSS標準中重新定義了HTML中原來的文字顯示樣式，增加了一些新概念，如類、層等，可以對文字重疊、定位等。在CSS還沒有引入到頁面設計之前，傳統的HTML語言要實現頁面美化在設計上是十分麻煩的，例如，要設計頁面中文字的樣式，如果使用傳統的HTML語句來設計頁面就不得不在每個需要設計的文字上都定義樣式。CSS的出現改變了這一傳統模式。

2.2.1 CSS規則

CSS規則

在CSS樣式表中包括3部分內容：選擇符、屬性和屬性值。語法格式為：

選擇符{屬性：屬性值;}

語法說明如下。

□ 選擇符：又稱選擇器，是CSS中很重要的概念，所有HTML語言中的標記都是通過不同的CSS選擇器進行控制的。

□ 屬性：主要包括字體屬性、文本屬性、背景屬性、布局屬性、邊界屬性、列表項目屬性、表格屬性等內容。其中一些屬性只有部分瀏覽器支持，因此使CSS屬性的使用變得更加復雜。

□ 屬性值：為某屬性的有效值。屬性與屬性值之間以“：”號分隔。當有多個屬性時，使用“；”分隔。圖2-17所示為大家標注了CSS語法中的選擇器、屬性與屬性值。

圖2-17　CSS語法

2.2.2 CSS選擇器

CSS選擇器

CSS選擇器常用的是標記選擇器、類別選擇器、包含選擇器、ID選擇器等。使用選擇器即可對不同的HTML標簽進行控制，從而實現各種效果。下面對各種選擇器進行詳細介紹。

1. 標記選擇器

大家知道HTML頁面是由很多標記組成，例如，圖片標記<img>、超鏈接標記<a>、表格標記<table>等。而CSS標記選擇器就是聲明頁面中哪些標記采用哪些CSS樣式。例如，a選擇器，就是用于聲明頁面中所有<a>標記的樣式風格。

【例2-13】定義a標記選擇器，在該標記選擇器中定義超鏈接的字體與顏色。

　　<style>
　　  a{
　　  font-size:9px;
　　  color:#F93;
　　     }
　　</style>

2. 類別選擇器

使用標記選擇器非常快捷，但是會有一定的局限性，頁面如果聲明標記選擇器，那么頁面中所有該標記內容會有相應的變化。假如頁面中有3個<h2>標記，如果想要每個<h2>的顯示效果都不一樣，使用標記選擇器就無法實現了，這時就需要引入類別選擇器。

類別選擇器的名稱由用戶自己定義，并以“。”號開頭，定義的屬性與屬性值也要遵循CSS規范。要應用類別選擇器的HTML標記，只需使用class屬性來聲明即可。

【例2-14】使用類別選擇器控制頁面中字體的樣式。

　　<!--以下為定義的CSS樣式-->
　　<style>
　　   .one{                <!-定義類名為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>

在上面的代碼中，頁面中的第一個<h2>標記應用了one選擇器，第二個<h2>標記應用了two，第三個<h2>標記應用了three選擇器，運行結果如圖2-18所示。

圖2-18　類別選擇器控制頁面文字樣式

說明

在HTML標記中，不僅可以應用一種類別選擇器，也可以應用多種類別選擇器，這樣可使HTML標記同時加載多個類別選擇器的樣式。在使用多種類別選擇器之間用空格進行分割即可。例如，“<h2 class="size color">”。

3. ID選擇器

ID選擇器是通過HTML頁面中的ID屬性來進行選擇增添樣式，與類別選擇器的基本相同，但需要注意的是，由于HTML頁面中不能包含有兩個相同的ID標記，因此定義的ID選擇器也就只能被使用一次。

命名ID選擇器要以“#”號開始，后加HTML標記中的ID屬性值。

【例2-15】使用ID選擇器控制頁面中字體的樣式。

　　<style>   <!--定義ID選擇器-->
　　  #first{
　　       font-size:18px
　　    }
　　  #second{
　　     font-size:24px
　　    }
　　  #three{
　　     font-size:36px
　　    }
　　</style>
　　<body>
　　     <p id="first">ID選擇器</p>    <!-在頁面定義標記，則自動應用樣式->
　　    <p id="second">ID選擇器2</p>
　　      <p id="three">ID選擇器3</p>
　　</body>

運行本段代碼，結果如圖2-19所示。

圖2-19　使用ID選擇器控制頁面文字大小

2.2.3 在頁面中包含CSS

在頁面中包含CSS

在對CSS有了一定了解后，下面為大家介紹如何實現在頁面中包含CSS樣式的幾種方式，其中包括行內樣式、內嵌式、鏈接式和導入式。

1. 行內樣式

行內樣式是比較直接的一種樣式，直接定義在HTML標記之內，通過style屬性來實現。這種方式也是比較容易令初學者接受，但是靈活性不強。

【例2-16】通過行內定義樣式的形式，實現控制頁面文字的顏色和大小。

　　<table width="200" border="1" align="center">   <!--在頁面中定義表格-->
　　<tr>
　　<td><p style="color:#F00; font-size:36px;">行內樣式一</p></td><%--在頁面文字中定義CSS樣式--%>
　　</tr>
　　<tr>
　　 <td><p style="color:#F00; font-size:24px;">行內樣式二</p></td>
　　</tr>
　　<tr>
　　<td><p style="color:#F00; font-size:18px;">行內樣式三</p></td>
　　</tr>
　　<tr>
　　 <td><p style="color:#F00; font-size:14px;">行內樣式四</p></td>
　　</tr>
　　</table>

運行本實例，運行結果如圖2-20所示。

圖2-20　定義行內樣式

2. 內嵌式樣式表

內嵌式樣式表就是在頁面中使用<style></style>標記將CSS樣式包含在頁面中。本章中的例2-14就是使用這種內嵌樣式表的模式。內嵌式樣式表的形式沒有行內標記表現的直接，但是能夠使頁面更加規整。

與行內樣式相比，內嵌式樣式表更加便于維護，但是如果每個網站都不可能由一個頁面構成，而每個頁面中相同的HTML標記都要求有相同的樣式，此時使用內嵌式樣式表就顯得比較笨重，而用鏈接式樣式表解決了這一問題。

3. 鏈接式樣式表

鏈接外部CSS樣式表是最常用的一種引用樣式表的方式，將CSS樣式定義在一個單獨的文件中，然后在HTML頁面中通過<link>標記引用，是一種最為有效的使用CSS樣式的方式。

　　<link rel=’stylesheet’ href=’path’ type=’text/css’>

參數說明如下。

□ rel：定義外部文檔和調用文檔間的關系。

□ href：CSS文檔的絕對或相對路徑。

□ type：指的是外部文件的MIME類型。

【例2-17】通過鏈接式樣式表的形式在頁面中引入CSS樣式。

（1）創建名稱為css.css的樣式表，在該樣式表中定義頁面中<h1>、<h2>、<h3>、<p>標記的樣式，代碼如下：

　　h1,h2,h3{       /*定義CS樣式 */
　　      color:#6CFw;
　　     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
　　}
　　p{
　　 color:#F0Cs;        /*定義顏色*/
　　 font-weight:200;
　　 font-size:24px;     /*設置字體大小*/
　　}

（2）在頁面中通過<link>標記將CSS樣式表引入到頁面中，此時CSS樣式表定義的內容將自動加載到頁面中，代碼如下：

　　<title>通過鏈接形式引入CSS樣式</title>
　　<link href="css.css"/>   <!--頁面引入CSS樣式表-->
　　</head>
　　<body>
　　     <h2>頁面文字一</h2>  <!--在頁面中添加文字-->
　　    <p>頁面文字二</p>
　　</body>

運行程序，結果如圖2-21所示。

圖2-21　使用鏈接式引入樣式表

說明

在這3種樣式同時作用于同一個區域時，瀏覽器會優先執行行內樣式，其次是內嵌樣式，最后才是鏈接式樣式。

官术网_书友最值得收藏!

Java Web程序設計（慕課版）

2.2 CSS樣式表

2.2.1 CSS規則

2.2.2 CSS選擇器

【例2-13】 定義a標記選擇器，在該標記選擇器中定義超鏈接的字體與顏色。

【例2-14】 使用類別選擇器控制頁面中字體的樣式。

【例2-15】 使用ID選擇器控制頁面中字體的樣式。