捕鱼多少金币一元钱

書名： Java Web從入門到精通（第2版）
作者名：明日科技
本章字?jǐn)?shù)： 2129字
更新時(shí)間： 2020-11-28 17:38:16

2.3 CSS樣式表

視頻講解：光盤\TM\lx\2\03 CSS樣式表．mp4

CSS是W3C協(xié)會(huì)為彌補(bǔ)HTML在顯示屬性設(shè)定上的不足而制定的一套擴(kuò)展樣式標(biāo)準(zhǔn)。CSS標(biāo)準(zhǔn)中重新定義了HTML中原來的文字顯示樣式，增加了一些新概念，如類、層等，可以對(duì)文字重疊、定位等。在CSS還沒有引入到頁面設(shè)計(jì)之前，傳統(tǒng)的HTML語言要實(shí)現(xiàn)頁面美化在設(shè)計(jì)上是十分麻煩的，例如要設(shè)計(jì)頁面中文字的樣式，如果使用傳統(tǒng)的HTML語句來設(shè)計(jì)頁面就不得不在每個(gè)需要設(shè)計(jì)的文字上都定義樣式。CSS的出現(xiàn)改變了這一傳統(tǒng)模式。

2.3.1 CSS規(guī)則

在CSS樣式表中包括3部分內(nèi)容：選擇符、屬性和屬性值。語法格式如下：

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

參數(shù)說明：

選擇符：又稱選擇器，是CSS中很重要的概念，所有HTML語言中的標(biāo)記都是通過不同的CSS選擇器進(jìn)行控制的。

圖2.17 CSS語法

屬性：主要包括字體屬性、文本屬性、背景屬性、布局屬性、邊界屬性、列表項(xiàng)目屬性、表格屬性等內(nèi)容。其中一些屬性只有部分瀏覽器支持，因此應(yīng)用起來有些復(fù)雜。

屬性值：為某屬性的有效值。屬性與屬性值之間以“:”分隔。當(dāng)有多個(gè)屬性時(shí)，使用“; ”分隔。圖2.17為大家標(biāo)注了CSS語法中的選擇符、屬性與屬性值。

2.3.2 CSS選擇器

CSS選擇器常用的是標(biāo)記選擇器、類別選擇器、id選擇器等。使用選擇器可對(duì)不同的HTML標(biāo)簽進(jìn)行控制，從而實(shí)現(xiàn)各種效果。下面對(duì)各種選擇器進(jìn)行詳細(xì)介紹。

1．標(biāo)記選擇器

HTML頁面是由很多標(biāo)記組成的，例如圖像標(biāo)記<img>、超鏈接標(biāo)記<a>、表格標(biāo)記<table>等。CSS標(biāo)記選擇器就用于聲明頁面中哪些標(biāo)記采用了哪些CSS樣式。例如a選擇器，就聲明了頁面中所有<a>標(biāo)記的樣式風(fēng)格。

【例2.15】定義a標(biāo)記選擇器，在該標(biāo)記選擇器中定義超鏈接的字體與顏色。代碼如下：

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

2．類別選擇器

使用標(biāo)記選擇器非常快捷，但卻有一定的局限性。聲明一個(gè)標(biāo)記選擇器后，頁面中所有該標(biāo)記的內(nèi)容都會(huì)有相應(yīng)的變化。假如頁面中有3個(gè)<h2>標(biāo)記，如果想要每個(gè)<h2>的顯示效果都不一樣，使用標(biāo)記選擇器就無法實(shí)現(xiàn)了，這時(shí)就需要引入類別選擇器。

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

【例2.16】使用類別選擇器控制頁面中字體的樣式。（實(shí)例位置：光盤\TM\sl\2\10）

關(guān)鍵代碼如下：

        //以下為定義的CSS樣式
        <style>
          .one{                                       //定義類名為one的類別選擇器
                font-family：宋體；                   //設(shè)置字體
                font-size:24px;                       //設(shè)置字體大小
                color:red;                            //設(shè)置字體顏色
              }
            .two{
                font-family：宋體；
                font-size:16px;
                color:red;
              }
            .three{
                font-family：宋體；
                font-size:12px;
                color:red;
              }
        </style>
        </head>
        <body>
          <h2 class="one"> 應(yīng)用了選擇器one</h2>      //定義樣式后頁面會(huì)自動(dòng)加載樣式
          <p> 正文內(nèi)容1  </p>
            <h2 class="two">應(yīng)用了選擇器two</h2>
          <p>正文內(nèi)容2 </p>
          <h2 class="three">應(yīng)用了選擇器three</h2>
          <p>正文內(nèi)容3 </p>
        </body>

圖2.18 類別選擇器控制頁面文字樣式

在上面的代碼中，頁面中的第一個(gè)<h2>標(biāo)記應(yīng)用了one選擇器，第二個(gè)<h2>標(biāo)記應(yīng)用了two選項(xiàng)器，第三個(gè)<h2>標(biāo)記應(yīng)用了three選擇器。運(yùn)行結(jié)果如圖2.18所示。

說明

在HTML標(biāo)記中，不僅可以應(yīng)用一種類別選擇器，也可以應(yīng)用多種類別選擇器，這樣可使HTML標(biāo)記同時(shí)加載多個(gè)類別選擇器的樣式。在多種類別選擇器之間，用空格進(jìn)行分隔，例如“<h2 class="size color">”。

3.id選擇器

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

命名id選擇器要以“#”開始，后加HTML標(biāo)記中的id屬性值。

【例2.17】使用id選擇器控制頁面中字體的樣式。關(guān)鍵代碼如下：

        <style>                                   //定義id選擇器
          #frist{
              font-size:18px
            }
          #second{
              font-size:24px
            }
          #three{
              font-size:36px
            }
        </style>
        <body>
            <p id="frist">id選擇器</p>          //在頁面中定義標(biāo)記，則自動(dòng)應(yīng)用樣式
            <p id="second">id選擇器2</p>
            <p id="three">id選擇器3</p>
        </body>

圖2.19 使用id選擇器控制頁面文字大小

運(yùn)行本實(shí)例，結(jié)果如圖2.19所示。

2.3.3 在頁面中包含CSS

在對(duì)CSS有了一定的了解后，下面介紹在頁面中包含CSS樣式的幾種方式，其中包括行內(nèi)樣式、內(nèi)嵌式和鏈接式。

1．行內(nèi)樣式

行內(nèi)樣式是比較直接的一種樣式，直接定義在HTML標(biāo)記之內(nèi)，通過style屬性來實(shí)現(xiàn)。這種方式比較容易令初學(xué)者接受，但是靈活性不強(qiáng)。

【例2.18】通過行內(nèi)定義樣式的形式，實(shí)現(xiàn)控制頁面文字的顏色和大小。（實(shí)例位置：光盤\TM\sl\2\11）

關(guān)鍵代碼如下：

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

圖2.20 定義行內(nèi)樣式

運(yùn)行本實(shí)例，結(jié)果如圖2.20所示。

2．內(nèi)嵌式

內(nèi)嵌式樣式表就是在頁面中使用<style></style>標(biāo)記將CSS樣式包含在頁面中。例2.16就是使用這種內(nèi)嵌樣式表的模式。內(nèi)嵌式樣式表的形式?jīng)]有行內(nèi)標(biāo)記表現(xiàn)的直接，但是能夠使頁面更加規(guī)整。

與行內(nèi)樣式相比，內(nèi)嵌式樣式表更加便于維護(hù)。但是每個(gè)網(wǎng)站都不可能由一個(gè)頁面構(gòu)成，而每個(gè)頁面中相同的HTML標(biāo)記又都要求有相同的樣式，此時(shí)使用內(nèi)嵌式樣式表就顯得比較笨重，而使用鏈接式樣式表即可輕松解決這一問題。

3．鏈接式

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

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

參數(shù)說明：

rel：定義外部文檔和調(diào)用文檔間的關(guān)系。

href:CSS文檔的絕對(duì)或相對(duì)路徑。

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

【例2.19】通過鏈接式樣式表的形式在頁面中引入CSS樣式。（實(shí)例位置：光盤\TM\sl\2\12）

（1）創(chuàng)建名稱為css.css的樣式表，在該樣式表中定義頁面中<h1>、<h2>、<h3>、<p>標(biāo)記的樣式。關(guān)鍵代碼如下：

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

（2）在頁面中通過<link>標(biāo)記將CSS樣式表引入到頁面中，此時(shí)CSS樣式表定義的內(nèi)容將自動(dòng)加載到頁面中。關(guān)鍵代碼如下：

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

運(yùn)行程序，結(jié)果如圖2.21所示。

圖2.21 通過鏈接形式引入CSS樣式

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

Java Web從入門到精通（第2版）

2.3 CSS樣式表

2.3.1 CSS規(guī)則

2.3.2 CSS選擇器

2.3.3 在頁面中包含CSS