第十二章 CSS入門

最後更新：2016-09-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

第 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;
border : inherit;
}
b {
}
<
/style>

例子
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS入門</title>

<style type="text/css">
/*p {
color: red;
font-size: 30px;
}*/
/*p {
color: green;
font-size: 30px;
font-style: italic;
}*/
p {
color: red;
border: 1px solid orange;
}
b {
border: inherit;
}
</style>
</head>
<body>

<!-- <b>b元素本身隱含加粗樣式</b>

<span style="font-weight:bold;">span元素沒有隱含，但可以設定它加粗</span>

<b style="font-weight:normal;">去除b元素的隱含樣式</b> -->

</body>
</html>

@charset:"utf-8";

p{
color:red;
font-size: 50px;
}

//.css
@charset "utf-8";
@import
p{
color:red;
font-size: 50px;
}

第十二章 CSS入門

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

第十二章 CSS入門

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support