彩金38元棋牌免费送平台

書名： HTML5 移動Web開發從入門到精通（微課精編版）
作者名：前端科技
本章字數： 2311字
更新時間： 2019-11-15 20:21:43

2.2　CSS3基本用法

CSS3也是一種標記語言，可以在任何文本編輯器中編輯。下面簡單介紹CSS3的基本用法。

2.2.1　CSS樣式

CSS的語法單元是樣式，每個樣式包含兩部分內容：選擇器和聲明（或稱為規則），如圖2.1所示。

圖2.1　CSS樣式基本格式

　選擇器（Selector）：指定樣式作用于哪些對象，這些對象可以是某個標簽、指定Class或ID值的元素等。瀏覽器在解析這個樣式時，根據選擇器來渲染對象的顯示效果。
　聲明（Declaration）：指定瀏覽器如何渲染選擇器匹配的對象。聲明包括兩部分：屬性和屬性值，并用分號來標識一個聲明的結束，在一個樣式中的最后一個聲明可以省略分號。所有聲明被放置在一對大括號內，然后位于選擇器的后面。
　屬性（Property）：CSS預設的樣式選項。屬性名是由一個或多個單詞組成，多個單詞之間通過連字符相連。這樣能夠很直觀地了解屬性所要設置樣式的類型。
　屬性值（Value）：定義顯示效果的值，包括值和單位，或者僅定義一個關鍵字。

【示例】下面的示例簡單演示了如何在網頁中設計CSS樣式。

第1步，啟動Dreamweaver，新建一個網頁，保存為test.html。

第2步，在<head>標簽內添加<style type="text/css">標簽，定義一個內部樣式表。

第3步，在<style>標簽內輸入下面的樣式代碼，定義網頁字體大小為24像素，字體顏色為白色。

    body{font-size: 24px; color: #fff;}

第4步，輸入下面的樣式代碼，定義段落文本的背景色為藍色。

    p { background-color: #00F; }

第5步，在<body>標簽內輸入下面一行代碼，然后在瀏覽器中預覽，效果如圖2.2所示。

    <p>莫等閑、白了少年頭，空悲切。 </p>

圖2.2　使用CSS定義段落文本樣式

2.2.2　引入CSS樣式

在網頁中，有3種方法可以正確引入CSS樣式，讓瀏覽器能夠識別和解析。

　行內樣式

把CSS樣式代碼置于標簽的style屬性中，例如：

    <span style="color:red;">紅色字體</span>
    <div style="border:solid 1px blue; width:200px; height:200px;"></div>

這種用法沒有真正把HTML結構與CSS樣式分離，一般不建議大規模使用。除非為頁面中某個元素臨時設置特定樣式。

　內部樣式

把CSS樣式代碼放在<style>標簽內。這種用法也稱為網頁內部樣式。該方法適合為單頁面定義CSS樣式，不適合為一個網站或多個頁面定義樣式。

內部樣式一般位于網頁的頭部區域，目的是讓CSS源代碼早于頁面源代碼下載并被解析，避免當網頁下載之后，還無法正常顯示。

　外部樣式

把樣式放在獨立的文件中，然后使用<link>標簽或者@import關鍵字導入。一般網站都采用這種方法來設計樣式，真正實現HTML結構和CSS樣式的分離，以便統籌規劃、設計、編輯和管理CSS樣式。

2.2.3　CSS樣式表

樣式表是一個或多個CSS樣式組成的樣式代碼段。樣式表包括內部樣式表和外部樣式表，它們沒有本質不同，只是存放位置不同。

內部樣式表包含在<style>標簽內，一個<style>標簽就表示一個內部樣式表。而通過標簽的style屬性定義的樣式屬性不是樣式表。如果一個網頁文檔中包含多個<style>標簽，就表示該文檔包含了多個內部樣式表。

如果CSS樣式被放置在網頁文檔外部的文件中，則稱為外部樣式表，一個CSS樣式表文檔就表示一個外部樣式表。實際上，外部樣式表也就是一個文本文件，其擴展名為.css。當把不同的樣式復制到一個文本文件中后，另存為.css文件，則它就是一個外部樣式表。

在外部樣式表文件頂部可以定義CSS源代碼的字符編碼。例如，下面的代碼定義樣式表文件的字符編碼為中文簡體。

    @charset "gb2312";

如果不設置CSS文件的字符編碼，可以保留默認設置，則瀏覽器會根據HTML文件的字符編碼來解析CSS代碼。

2.2.4　導入外部樣式表

外部樣式表文件可以通過兩種方法導入HTML文檔中。

1. 使用<link>標簽

使用<link>標簽導入外部樣式表文件的代碼如下。

    <link href="001.css" rel="stylesheet" type="text/css" />

該標簽必須設置的屬性說明如下。

　href：定義樣式表文件URL。
　rel：用于定義文檔關聯，這里表示關聯樣式表。
　type：定義導入文件類型，同style元素一樣。

2. 使用@import命令

在<style>標簽內使用@import關鍵字導入外部樣式表文件的方法如下。

    <style type="text/css">
    @import url(“001.css");
    </style>

在@import關鍵字后面，利用url()函數包含具體的外部樣式表文件的地址。

2.2.5　CSS格式化

在CSS中增加注釋很簡單，所有被放在“/*”和“*/”分隔符之間的文本信息都被稱為注釋。例如：

    /*注釋*/

或

    /*
    注釋
    */

在CSS中，各種空格是不被解析的，因此用戶可以利用Tab鍵、空格鍵對樣式表和樣式代碼進行格式化排版，以方便閱讀和管理。

2.2.6　CSS屬性

CSS屬性眾多，在W3C CSS2版本中共有122個標準屬性（http://www.w3.org/TR/CSS2/propidx.html），在W3C CSS2.1版本中共有115個標準屬性（http://www.w3.org/TR/CSS21/propidx.html），其中刪除了CSS2版本中7個屬性：font-size-adjust、font-stretch、marker-offset、marks、page、size和text-shadow。在W3C CSS3版本中又新增加了20多個屬性（http://www.w3.org/Style/CSS/current-work#CSS3）。

本節不準備逐個介紹每個屬性的用法，我們將在后面各章節中詳細說明，讀者也可以參考CSS3參考手冊具體了解。

2.2.7　CSS屬性值

CSS屬性取值比較多，具體類型包括長度、角度、時間、頻率、布局、分辨率、顏色、文本、函數、生成內容、圖像和數字。常用的是長度值，其他類型值將在相應屬性中具體說明。

下面重點介紹一下長度值，它包括以下兩類。

1. 絕對值

絕對值在網頁中很少使用，一般用在特殊的場合。常見絕對單位如下。

　英寸（in）：使用最廣泛的長度單位。
　厘米（cm）：最常用的長度單位。
　毫米（mm）：在研究領域使用廣泛。
　磅（pt）：也稱點，在印刷領域使用廣泛。
　pica（pc）：在印刷領域使用。

2. 相對值

根據屏幕分辨率、可視區域、瀏覽器設置以及相關元素的大小等因素確定值的大小。常見相對單位包括如下4個。

em表示字體高度，它能夠根據字體的font-size值來確定大小，例如：

從上面樣式代碼中可以看出：1em等于font-size的屬性值，如果設置font-size:12pt，則line-height:2em就會等于24pt。如果設置font-size屬性的單位為em，則em的值將根據父元素的font-size屬性值來確定。例如，定義如下HTML局部結構。

    <div id="main">
      <p>em相對長度單位使用</p>
    </div>

再定義如下樣式。

    #main {    font-size:12px;}
    p {font-size:2em;} /*字體大小將顯示為24px*/

同理，如果父元素的font-size屬性的單位也為em，則將依次向上級元素尋找參考的font-size屬性值，如果都沒有定義，則會根據瀏覽器默認字體大小進行換算，默認字體大小一般為16px。

ex表示字母x的高度。

px根據屏幕像素點來確定大小。這樣不同的顯示分辨率就會使相同取值的px單位所顯示出來的效果截然不同。

百分比也是一個相對單位值。百分比值總是通過另一個值來確定當前值，一般參考父元素中相同屬性的值。例如，如果父元素寬度為500px，子元素的寬度為50%，則子元素的實際寬度為250px。

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

HTML5 移動Web開發從入門到精通（微課精編版）

2.2 CSS3基本用法

2.2.1 CSS樣式

2.2.2 引入CSS樣式

2.2.3 CSS樣式表

2.2.4 導入外部樣式表

2.2.5 CSS格式化

2.2.6 CSS屬性

2.2.7 CSS屬性值