第 12 章 CSS 入門 · 李炎恢 HTML CSS JavaScript PHP Bootstrap 教程

# 第 12 章 CSS 入門學習要點： 1.使用?CSS 2.三種方式 3.層疊和繼承主講教師：李炎恢本章主要探討 HTML5?中 CSS（層疊樣式表），它是用來對 HTML?文檔外觀的表現形式進行排版和格式化。 **一．使用** **CSS** CSS 樣式由一條或多條以分號隔開的樣式聲明組成。每條聲明的樣式包含著一個?CSS 屬性和屬性值。 ``` <p style="color:red;font-size:50px;">這是一段文本</p> ``` 解釋：style?是行內樣式屬性。color?是顏色屬性，red?是顏色屬性值；font-size是字體大小屬性，50px?是字體大小屬性值。 **二．三種方式** 創建 CSS?樣式表有三種方式：1.元素內嵌樣式；2.文檔內嵌樣式；3.外部引入樣式。 **1.****元素內嵌樣式** ``` <p style="color:red;font-size:50px;">這是一段文本</p> ``` 解釋：即在當前元素使用 style?屬性的聲明方式。 **2.****文檔內嵌樣式** ``` <style type="text/css"> p { 　　color: blue; font-size: 40px; } </style> <p>這是一段文本</p> ``` 解釋：在<head>元素之間創建<style>元素，通過選擇器的方式調用指定的元素并設置相關 CSS。 **3.****外部引用樣式** ``` <link rel="stylesheet" type="text/css" href="style.css"> ``` //style.css ``` @charset "utf-8"; p { 　　color: green; 　　font-size: 30px; } ``` 解釋：很多時候，大量的 HTML?頁面使用了同一個組 CSS。那么就可以將這些 CSS?樣式保存在一個單獨的.css?文件中，然后通過<link>元素去引入它即可。@charset "utf-8"?表明設置 CSS?的字符編碼，如果不寫默認就是 utf-8。如果有多個.css?文件，可以使用 @import 導入方式引入.css 文件。只不過，性能不如多個<link>鏈接。 **三．層疊和繼承** 所謂的樣式表層疊：指的是同一個元素通過不同方式設置樣式表產生的樣式重疊。樣式表繼承：指的是某一個被嵌套的元素得到它父元素樣式。還有一種樣式叫瀏覽器樣式，是這個元素在這個瀏覽器運行時默認附加的樣式。 **1.****瀏覽器樣式** ``` <b>這個元素隱含加粗樣式</b> <span style="font-weight:bold;">這個元素通過 style 加粗</span> ``` 解釋：<b>元素就是具有加粗的隱含樣式，而<span>元素沒有任何隱含樣式，通過 style?屬性設置樣式。 **2.****樣式表層疊** 樣式表層疊通過五種方式進行，如果樣式相同，那么比如會產生沖突替換。這時，它的優先級順序就顯的比較重要。以下優先級從低到高： (1).瀏覽器樣式（元素自身攜帶的樣式）； (2).外部引入樣式（使用<link>引入的樣式）； (3).文檔內嵌樣式（使用<style>元素設置）； (4).元素內嵌樣式（使用?style 屬性設置）。 //元素內嵌 ``` <p style="color:red;font-size:30px;">我將被三種方式疊加樣式</p> ``` //文檔內嵌 ``` <style type="text/css"> p { 　　color:blue; font-weight: bold; } </style> ``` //外部引入 ``` @charset "utf-8"; p { 　　color: green; 　　font-style: italic; } ``` 如果某一個樣式被優先級高的給替換掉了，卻又想執行這個樣式方案，可以將這個方案標記成重要樣式（important）。 //強行設置最高優先級 ``` color: green !important; ``` **3.****樣式繼承** 如果某一個元素并沒有設置父元素相關的樣式，那么就會使用繼承機制將父元素的樣式集成下來。 //<b>元素繼承了<p>元素的樣式 ``` <p style="color:red;">這是<b>HTML5</b></p> ``` 樣式繼承只適用于元素的外觀（文字、顏色、字體等），而元素在頁面上的布局樣式則不會被繼承。如果繼承這種樣式，就必須使用強制繼承：inherit。 //強制繼承布局樣式 ``` <p>這是<b>HTML5</b></p> <style type="text/css"> p { 　　border: 1px solid red; } b { 　　border : inherit; } </style> ```