第三章：CSS樣式（前篇）
文章目錄
前言
上一章初試了一下在
行內屬性style和在以及在頭部head裡使用style標籤進行編寫簡單的樣式。但是想要製作出豐富多彩的頁面樣式，就需要更加詳細地瞭解CSS，本章節將一步步說明要點。
第一節：層疊式樣式表
什麼是層疊式樣式表
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。簡稱CSS.
CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化
樣式編寫位置
-
內部樣式：
就是以style標籤，寫在HTML內部的樣式。例如前面所學的,寫在head裡面的style標籤內的就是內部樣式。
例：
瀏覽器結果：
-
內聯樣式：
使用內聯樣式也可以實現上面例子的樣式結果，內聯樣式就是寫在每一個標籤的style屬性內的樣式
例：
-
外部樣式：
內聯樣式或內部樣式都能用自己的方法實現樣式處理，但
在實際開發中，幾乎很少如此操作。更多地會把樣式寫在CSS檔案當中.這種寫在檔案外部的樣式，叫外部樣式(也叫外鏈)。
呼叫外部CSS檔案，還需要運一個標籤<link>
【link標籤屬性】
href—— CSS檔案地址
rel—— 指定href屬性為樣式表
例：
用回上面的例子，在當前HTML檔案 index.html 位置上有一個CSS資料夾，資料夾內建立一個CSS檔案。此時，就可以把原來的內部樣式全部寫到一個檔案上。
瀏覽器結果：跟上面兩個例子實現的樣式是一樣的。
PS：在實際工作工，絕大多數都是以外部樣式操作的。為了方便截圖和程式碼編寫，以後內容相關的樣式位置，以內部樣式為主。
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。CSS盒模型就是把頁面上的每個元素都被當成一個矩形盒子，佔據一定的頁面空間。它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
標準盒子模型
盒子的屬性和值
width / height—— 寬高
border—— 圍繞在內邊距和內容外的邊框。
border-width—— 邊框寬度
border-style——邊寬型別
【屬性值】
solid —— 實線
dashed ——虛線
dotted —— 點線
double —— 雙線(border-width大小超過3px才有效)
border-color——邊框顏色
margin——外邊距
padding——內邊距
Content—— 盒子的內容，顯示文字和影象。
外邊距margin與內邊距padding
padding是指內邊距，即元素邊框與元素內容之間的距離，上下左右的內邊區域。
作用：設定內容到元素的邊緣的間距，四個方向的值為整數
padding:10px;—— 上下左右填充都是 10px
padding:10px 5px;—— 上下填充是10px,左右填充是5px
padding:10px 5px 3px—— 上10px,左右填充5px,下3px
padding:10px 5px 3px 1px—— 順時針原則，代表上、右、下、左的值
margin是指外邊距，即元素邊框（外邊框）到其它的元素邊框的距離，即上下左右的外邊區域
作用：用於設定元素之間的間距，值可以為負數。其他用法同padding
第二節：選擇器
瀏覽器是有自己的預設樣式的，當我們不對樣式進行操作，也可以看到文字有顏色、大小、字型等。平時可以通過瀏覽器中的
設定-自定義字型進行簡單調整（一般不會動它）。雖然可以調整，但想要更漂亮的樣式，可以通過重置樣式的設計，前提編寫CSS樣式。對樣式進行編寫，就要用到選擇器。
選擇器的作用是：選擇所需的元素。
選擇器的格式
- 選擇器 + { 屬性：屬性值；}
如：#idname{ attr1 : value1 ; attr2 : value2 ;}
選擇器的型別
id選擇器—— 如：#idName{ }
class類選擇器—— 如：.className{ }
標籤選擇器—— 如：a{ }
屬性選擇器—— 如：[type-text]{ }
偽類選擇器—— 如：:hover{ }
偽元素選擇器—— 如：::after{ }
複合選擇器—— 如：div,p{ }
PS：最常用的是前面三種選擇器，只要能選擇到所需的元素正常操作，理論上哪種選擇器任君選擇。推薦儘量用類選擇器比較好，當然例如有一些一開始需要重置的樣式可以使用籤選擇器，例如a標籤的會有下劃線和字型藍色，可以重置。
id選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。可以應用於任何元素。id 選擇器以 “#” 來定義
例：對指定的兩個p標籤內文字指定樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id選擇器</title>
<style type="text/css">
#myred{color: #f00;}
#mygreen{color: #58cb58;}
</style>
</head>
<body>
<div>
<p id="myred">這個段落是紅色。</p>
<p id="mygreen">這個段落是綠色。</p>
</div>
</body>
</html>
瀏覽器結果：
class類選擇器
類選擇器可以為標有特定 class 的 HTML 元素指定特定的樣式。也可以應用於任何元素。類選擇器以 “.” 來定義
例：同樣用上面的例子,不再使用id，而是用class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>類選擇器</title>
<style type="text/css">
.myred{color: #f00;}
.mygreen{color: #58cb58;}
</style>
</head>
<body>
<div>
<p class="myred">這個段落是紅色。</p>
<p class="mygreen">這個段落是綠色。</p>
</div>
</body>
</html>
瀏覽器結果是一樣的：
- 類選擇器與id選擇器區別
1、ID選擇器只能在文件中使用一次。類選擇器與之不同，在一個HTML文件中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為一個元素同時設定多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）
例1：類選擇器可以使用多次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>類選擇器與id選擇器</title>
<style type="text/css">
.mycolor{color: #f00;}
#yourcolor{color: #58cb58;}
</style>
</head>
<body>
<div>
<p>這個段落是<span class="mycolor">紅色</span>的。</p>
<p>這個段落也是<span class="mycolor">紅色</span>的。</p>
<p>這個段落是<span id="yourcolor">綠色</span>的。</p>
</div>
</body>
</html>
瀏覽器結果：
例2：類選擇器詞列表方法為一個元素同時設定多個樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>類選擇器與id選擇器</title>
<style type="text/css">
.mycolor{color: #f00;}
.mysize{font-size: 25px;}
#yourcolor{
color: #58cb58;
font-size: 25px
}
</style>
</head>
<body>
<div>
<p>這個段落是<span class="mycolor mysize">紅色</span>的。</p>
<p>這個段落是<span id="yourcolor">綠色</span>的。</p>
</div>
</body>
</html>
瀏覽器結果：
標籤選擇器
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標籤選擇器</title>
<style type="text/css">
a{ /*選擇對所有a標籤*/
color: #333; /*設定顏色*/
text-decoration: none; /*設定為無下劃線*/
}
</style>
</head>
<body>
<div>
<a href="http://http://www.ifeng.com">鳳凰網</a><br/>
<a href="http://www.baidu.com">百度一下</a><br/>
<a href="http://www.sina.com.cn">新浪網</a><br/>
<a href="http://vip.iqiyi.com">愛奇藝.VIP會員</a><br/>
<a href="http://www.taobao.com">淘寶網</a><br/>
</div>
</body>
</html>
瀏覽器結果：
屬性選擇器
有時候，我們會遇到很尷尬的局面，在資料非常多，並且使用了相同的標籤的元素中，想對其中某些元素進行不同樣式的處理。但又不可能對大量資料花時間給出id或class。這時便可使用屬性選擇器解決。它能根據元素的屬性及屬性值來準確選擇元素
[attr=val]—— 屬性等於val
[attr^=val]—— 屬性以val開頭
[attr$=val]—— 屬性以val結尾
例：在無數個連結裡，給百度，並且name=baidu2的連結中，文字設定為紅色字型樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>屬性選擇器</title>
<style type="text/css">
a[href="http://www.baidu.com"][name="baidu2"] {color: red;}
</style>
</head>
<body>
<div>
<a href="http://www.baidu.com" name="baidu1">百度一下</a><br/>
<a href="http://www.baidu.com" name="baidu2">百度一下</a><br/>
<a href="http://www.sina.com.cn" name="xinlang">新浪網</a><br/>
<a href="http://vip.iqiyi.com" name="aiqiyi">愛奇藝.VIP會員</a><br/>
<a href="http://www.baidu.com" name="baidu3">百度一下</a><br/>
<a href="http://www.baidu.com" name="baidu2">百度一下</a><br/>
<a href="http://www.taobao.com" name="taobao">淘寶網</a><br/>
<a href="http://www.baidu.com" name="baidu3">百度一下</a><br/>
...
</div>
</body>
</html>
瀏覽器結果：
偽類選擇器
在裡面定義的樣式只有當元素處於某種狀態下時才起作用，在預設狀態下無效。這類選擇器，我們就稱它為【偽類選擇器】
偽類選擇器有多，像::hover、:active、:focus
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偽類選擇器</title>
<style type="text/css">
a{
color: #333;
text-decoration: none;
}
a:hover{ /*新增偽類選擇器*/
color: #f00; /*滑鼠移動到的時改變的樣式*/
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<a href="http://http://www.ifeng.com">鳳凰網</a><br/>
<a href="http://www.baidu.com">百度一下</a><br/>
<a href="http://www.sina.com.cn">新浪網</a><br/>
<a href="http://vip.iqiyi.com">愛奇藝.VIP會員</a><br/>
<a href="http://www.taobao.com">淘寶網</a><br/>
</div>
</body>
</html>
瀏覽器結果：
偽元素選擇器
能在指定標籤的內容前面/後面新增一個子元素，這類選擇器，我們稱它為【偽元素選擇器】
::after—— 在內容前面新增一個子元素
::before—— 在內容後面新增一個子元素
例：對商品價格數字前面加入美元符號
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偽元素選擇器</title>
<style type="text/css">
span{color: #f00;}
span::before{
content: '$';
color: #58cb58;
}
</style>
</head>
<body>
<div>
<p>商品1價格：<span>998</span></p>
<p>商品2價格：<span>658</span></p>
<p>商品3價格：<span>888</span></p>
<p>商品4價格：<span>168</span></p>
<p>商品5價格：<span>528</span></p>
<p>商品6價格：<span>988</span></p>
</