pg寻宝黄金城中大奖视频在线观看

書名： HTML5權威指南
作者名： (美)Adam Freeman
本章字數： 2327字
更新時間： 2020-01-10 15:29:14

4.1 定義和應用樣式

CSS樣式由一條或多條以分號隔開的樣式聲明組成。每條聲明包含著一個CSS屬性和該屬性的值，二者以冒號分隔。代碼清單4-1所示為一條簡單的CSS樣式。

代碼清單4-1 一條簡單的CSS樣式

        background-color:grey; color:white

圖4-1指出了這個樣式中的樣式聲明、屬性和值。

圖4-1 CSS樣式剖析

本例中的樣式含有兩條樣式聲明。第一條將background-color屬性的值設置為grey，第二條將color屬性的值設置為white。

CSS屬性花樣繁多，每種屬性都控制著其應用元素某方面的外觀。本書第19章到第24章將介紹可用的CSS屬性并展示其效果。

4.1.1 了解本章所用的CSS屬性

為了說明CSS的工作方式，本章需要用到一些后面章節中才會詳細介紹的CSS屬性。表4-2列出了這些屬性及其簡要說明，還有其詳細介紹所在章的編號。

表4-2 CSS屬性摘要

4.1.2 使用元素內嵌樣式

樣式不是定義了就了事，它還需要被應用，也即告訴瀏覽器它要影響哪些元素。把樣式應用到元素身上的各種方式中，最直接的是使用全局屬性style，如代碼清單4-2所示。

代碼清單4-2 用全局屬性style定義樣式

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
          </head>
          <body>
              <a style="background-color:grey; color:white">
                  Visit the Apress website
              </a>
              <p>I like <span>apples</span> and oranges.</p>
              <a >Visit the W3C website</a>
          </body>
        </html>

這個HTML文檔中有4個內容元素：兩個超鏈接（用a元素生成），一個p元素以及包含在其中的一個span元素（第8章和第9章會詳細介紹a、p和span這三個元素。此處關注的只是如何應用樣式）。例中用全局屬性style將樣式應用到第一個a元素（鏈接到Apress網站）。style屬性只影響它所屬的元素，如圖4-2所示。

圖4-2 將樣式直接應用于元素

從圖中可以看出上例所用兩個CSS屬性的作用。background-color屬性和color屬性分別設置元素的背景和前景顏色。HTML文檔中的另外三個內容元素未受該樣式的影響。

關于CSS教

CSS話題對狂熱分子似乎很有吸引力。在網上隨便看場關于如何用CSS實現某種效果的討論，很快就會見到有人爭執什么才是正確的方法。我可沒工夫陪嚷嚷這些東西的人磨。對于任何問題，其唯一正確的解決方法就是利用已有知識和工具為盡可能多的用戶提供支持。笨蛋才會為完美的CSS方案糾纏不休。我的建議是：別管這些爭論，琢磨點適合自己的技術和招法（只要確有其效而且對自己口味就行）才是正事。

4.1.3 使用文檔內嵌樣式

直接對元素應用樣式有它的用處，但是對于可能大量需要各種樣式的復雜文檔來說就顯得缺乏效率。這樣做不僅需要逐個元素設好樣式，而且軟件更新時還不得不逐個元素仔細搞好樣式調整，很容易出錯。我們可以換種方法，用style元素（而不是style屬性）定義文檔內嵌樣式，通過CSS選擇器指示瀏覽器應用樣式。代碼清單4-3示范了style元素的用法。該例中用了一個簡單的CSS選擇器。

代碼清單4-3 使用style元素

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
<style type="text/css">
a {
background-color:grey;
color:white
}
</style>
            </head>
            <body>
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a >Visit the W3C website</a>
            </body>
        </html>

style元素及其屬性將在第7章介紹。本章關注的是如何在style元素中定義樣式。此例所示做法也要用到CSS聲明，只不過它們被包在一對花括號之間，并且跟在一個選擇器之后。如圖4-3所示。

圖4-3 定義在style元素之內的樣式剖析

本例中的選擇器為a，它指示瀏覽器將樣式應用到文檔中的每一個a元素。圖4-4所示為瀏覽器的處理結果。

圖4-4 選擇器a的效果

一個style元素中可以定義多條樣式，為此只消不斷重復定義一個選擇器和一套樣式聲明的過程即可。代碼清單4-4所示為一個具有兩條樣式定義的style元素。

代碼清單4-4 在一個style元素內定義多條樣式

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  a {
                      background-color:grey;
                      color:white
                  }
span {
border: thin black solid;
padding: 10px;
}
              </style>
            </head>
            <body>
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a >Visit the W3C website</a>
            </body>
        </html>

本例新增樣式的選擇器為span（表示瀏覽器將把樣式應用到文檔中所有span元素上，實現其border和padding屬性所規定的效果）。border屬性設置的是圍繞目標元素的邊框，padding屬性控制的則是目標元素與邊框之間的間距，其效果如圖4-5所示。這些例子中的選擇器和樣式屬性都很簡單。選擇器和樣式屬性的全面介紹分別安排在第17章、第18章和第19章、第20章。

圖4-5 應用多條樣式

4.1.4 使用外部樣式表

如果有一套樣式要用于多個HTML文檔，那么與其在每一個文檔中重復定義相同的樣式，不如另外創建一個獨立的樣式表文件。這種文件按慣例以．css為文件擴展名，其中包含著用戶的樣式定義。代碼清單4-5所示為文件styles.css的內容。

代碼清單4-5 文件styles.css

        a {
            background-color:grey;
            color:white
        }
        span {
            border: thin black solid;
            padding: 10px;
        }

樣式表中用不著style元素，需要什么樣式，只需要為其設計好選擇器，后面再跟上一套樣式聲明即可。然后HTML文檔就可以用link元素將這些樣式導入其中（link元素將在第7章詳細介紹）。如代碼清單4-6所示。

代碼清單4-6 導入外部樣式表

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
            </head>
            <body>
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a >Visit the W3C website</a>
            </body>
        </html>

文檔想要鏈接多少樣式表都行，為每個樣式表使用一個link元素即可。如果不同樣式表中的樣式使用了相同的選擇器，那么這些樣式表的導入順序很重要，在此情況下得以應用的是后導入的樣式。

1．從其他樣式表中導入樣式

可以用@import語句將樣式從一個樣式表導入另一個樣式表。代碼清單4-7所示的樣式表combined.css示范了這種用法。

代碼清單4-7 文件combined.css

@import "styles.css";
        span {
            border: medium black dashed;
            padding: 10px;
        }

一個樣式表中想要導入多少別的樣式表都行，為每個樣式表使用一條@import語句即可。@import語句必須位于樣式表頂端，樣式表自已的樣式定義不能出現在它之前。在combined.css這個樣式表中，先導入了styles.css，然后再定義了一條針對span元素的新樣式。代碼清單4-8顯示了HTML文檔鏈接combined.css樣式表的情形。

代碼清單4-8 鏈接到一個包含有導入語句的樣式表

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
<link rel="stylesheet" type="text/css" href="combined.css"/>
            </head>
            <body>
              <a >Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a >Visit the W3C website</a>
            </body>
        </html>

combined.css中的@import語句導入了styles.css中定義的兩條樣式，其中應用于span元素的那條樣式又被combined.css中定義的具有相同選擇器的樣式蓋過。其效果見圖4-6。

圖4-6 從其他樣式表中導入樣式

@import語句用得并不廣泛。其中一個原因是不少人并不知道有這個東西。另一個原因則是瀏覽器處理@import語句的效率往往不如處理多個link元素并靠樣式層疊（下節就會介紹）解決問題。

2．聲明樣式表的字符編碼

在CSS樣式表中可以出現在@import語句之前的只有@charset語句。后者用于聲明樣式表使用的字符編碼。代碼清單4-9示范了如何表示樣式表使用的是UTF-8編碼（這是最常見的編碼）。

代碼清單4-9 聲明樣式表使用的字符編碼類型

@charset "UTF-8";
        @import "styles.css";
        span {
            border: medium black dashed;
            padding: 10px;
        }

如果樣式表中未聲明所使用的字符編碼，那么瀏覽器將使用載入該樣式表的HTML文檔聲明的編碼。要是HTML文檔也沒有聲明其編碼，那么默認情況下使用的將是UTF-8。

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

HTML5權威指南

4.1 定義和應用樣式

4.1.1 了解本章所用的CSS屬性

4.1.2 使用元素內嵌樣式

4.1.3 使用文檔內嵌樣式

4.1.4 使用外部樣式表