為了讓網頁元素的樣式更加豐富，也為了讓網頁的内容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的标簽就廢棄不用了，html隻負責文檔的結構和内容，表現形式完全交給CSS，html文檔變得更加簡潔。
css基本文法
css的定義方法是：
選擇器 { 屬性：值； 屬性：值； 屬性：值；}
例：
div{
width:100px;
height:100px;
background:gold;
}
一、css引入頁面的三種方式：
1、内聯式：通過标簽的style屬性，把樣式寫在标簽中
例：
<h1 style="width:200px;height:200px;background:red">這是一個h1标題</h1>
2、内嵌式：通過style标簽，把樣式寫在head标簽中
例：
<head>
<style>
p{width:200px;height:200px;background:gold;}
</style>
</head>
3、外鍊式：外部建立一個css檔案，頁面通過link标簽引入
例：
<link rel="stylesheet" href="css/main.css" target="_blank" rel="external nofollow" >
二、css六種選擇器：
1、标簽選擇器：寫法和标簽名相同，會選擇所有的标簽
例：
div{color:red}
2、類選擇器：名稱任意，名稱前需要加“.”，标簽通過class屬性引用
例：
.blue{color:blue}
3、層級選擇器：通過層級關系比對标簽
例：
.con span{color:red}
4、Id選擇器： 通過id名稱來選擇标簽（一般不用）
例：
#div01{
width:200px;
height:200px;
background:gold;
}
5、組選擇器： 将通過的樣式抽取出來寫在一起，選擇器之間用“，”隔開
例：
.box01,.box02,.box03{
width: 200px;
height: 200px;
}
.box01{
background:gold;
}
.box02{
background:red;
}
.box03{
background:orange;
}
6、僞類選擇器： 定義滑鼠懸停時标簽的樣式
例：
.link01:hover{
color:red;
}
三、css常用樣式：屬性樣式清單
css屬性
布局常用樣式屬性：
width 設定元素(标簽)的寬度，如：width:100px;
height 設定元素(标簽)的高度，如：height:200px;
background 設定元素背景色或者背景圖檔，如：background:gold; 設定元素背景色為金色
border 設定元素四周的邊框，如：border:1px solid black; 設定元素四周邊框是1像素寬的黑色實線
以上也可以拆分成四個邊的寫法，分别設定四個邊的：
border-top 設定頂邊邊框，如：border-top:10px solid red;
border-left 設定左邊邊框，如：border-left:10px solid blue;
border-right 設定右邊邊框，如：border-right:10px solid green;
border-bottom 設定底邊邊框，如：border-bottom:10px solid pink;
padding 設定元素包含的内容和元素邊框的距離，也叫内邊距，如padding:20px;padding是同時設定4個邊的，也可以像border一樣拆分成分别設定四個邊:padding-top、padding-left、padding-right、padding-bottom。
margin 設定元素和外界的距離，也叫外邊距，如margin:20px;margin是同時設定4個邊的，也可以像border一樣拆分成分别設定四個邊:margin-top、margin-left、margin-right、margin-bottom。
float 設定元素浮動，浮動可以讓塊元素排列在一行，浮動分為左浮動：float:left; 右浮動：float:right;
文本常用樣式屬性一：
color 設定文字的顔色，如： color:red;
font-size 設定文字的大小，如：font-size:12px;
font-family 設定文字的字型，如：font-family:'微軟雅黑';為了避免中文字不相容，一般寫成：font-family:'Microsoft Yahei';
font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
line-height 設定文字的行高，如：line-height:24px; 表示文字高度加上文字上下的間距是24px，也就是每一行占有的高度是24px
text-decoration 設定文字的下劃線，如：text-decoration:none; 将文字下劃線去掉
text-align 設定文字水準對齊方式，如text-align:center 設定文字水準居中
text-indent 設定文字首行縮進，如：text-indent:24px; 設定文字首行縮進24px
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)