1.CSS概述
CSS（Cascading Style Sheet）是層疊樣式表.作用來定義網頁的顯示效果。簡單一句話：CSS将網頁内容和顯示樣式進行分離，提高了顯示功能。
2.CSS和HTML結合的方式
2.1 行内樣式
利用标簽中style屬性來改變每個标簽的顯示樣式。例如：
該方式比較靈活，但是對于多個相同标簽的同一樣式定義比較麻煩，适合局部修改。
2.2 内嵌方式
在head标簽中加入style标簽,對多個标簽進行統一修改.例如:
<head>
<style type="text/css">
p { color:#FF0000;}
</style>
</head> 這種方式可以對單個頁面的樣式進行統一設定,但是對于局部不夠靈活.
2.3 連結方式
通過head标簽中Link标簽來實作,前提是先要有一個已經定義好的CSS檔案,例如:
可以通過多個link 标簽連結進來多個CSS檔案.重複樣式以最後連結進來的CSS樣式為準.
2.4 導入方式
前提是已經存在一個定義好的CSS檔案。網頁的一部分樣式需要用到，那麼就用到這種方式。例如:
<style type="text/css">
@import url(css_3.css);
div{ color:#FF0000;}
</style> 注:url括号後面必須要用分号結束.如果導入進來的樣式與本頁面定義的樣式重複,以本頁定義的樣式為準。
3.CSS樣式優先級和代碼規範
4.CSS選擇器
就是指定CSS要作用的标簽，那個标簽的名稱就是選擇器。意為：選擇哪個容器。
CSS選擇器的類型：
html标簽名選擇器。使用的就是html的标簽名
class選擇器。其實使用的标簽中的class屬性
id選擇器。其實使用的是标簽的中的id屬性。 4.1 标簽選擇器
4.2 class選擇器
在标簽中定義class屬性并指派。通過 标簽名.class值 對該标簽進行樣式設定。
例：
相同标簽設定不同樣式的時候，用class進行區分。
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标簽樣式</p>
<p class=”pclass_2”>P标簽樣式</p>
不同标簽進行相同設定的時候，用class進行統一定義。
.classname {color:#00FF00;}
<p class=”classname”>P标簽樣式</p>
<div class=”classname”>DIV标簽樣式</div> 4.3 id選擇器
與class選擇器類似，但格式不同，選擇器的名稱為：#id值。
例：
#pid { color:#0000FF;}
<p id=”pid”>P标簽樣式</p>
注：多個标簽同樣可以定義相同的id值，但是對于JavaScript對标簽元素的擷取就會出錯。是以形成習慣，確定id值的唯一性對于以後的資料庫設計也很有好處。 5.CSS擴充選擇器
5.1 關聯選擇器
标簽是可以嵌套的，要讓相同标簽中的不同标簽顯示不同樣式，就可以用此選擇器。
例：
p { color:#00FF00;}
p b { color:#FF000;}
<p>P标簽<b>劉德華</b>段落樣式</p>
<p>P标簽段落</p> 5.2 組合選擇器
對多個不同選擇器進行相同樣式設定的時候應用此選擇器。
p,div { color:#FF0000;}
<p>P标簽顯示段落。</p>
<div>DIV标簽顯示段落</div>
注：多個不同選擇器要用逗号分隔開。 5.2 僞選擇器
其實就在html中預先定義好的一些選擇器。稱為僞元素。是因為CSS的術語。
格式：标簽名：僞元素。類名 标簽名。類名：僞元素。都可以。
a:link 超連結未點選狀态。
a:visited 被通路後的狀态。
a:hover 光标移到超連結上的狀态（未點選）。
a:active 點選超連結時的狀态。
使用順序 L – V – H - A
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一個字母。
:focus 具有焦點的元素。IE6浏覽器不支援，在FireFox中可以看到效果。 執行個體:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>僞類選擇器</title>
<style type="text/css">
a{
color:red;
}
a:visited{
color:blue;
font-size:20cm;
}
a:hover{
color:yellow;
}
a:active{
color:green;
font-size:2cm;
}
</style>
</head>
<body>
<a href="#" target="_blank" rel="external nofollow" >黑馬程式員</a>
</body>
</html> 6.CSS常見操作（檢視CSS2.0樣式中文手冊.chm）
6.1 CSS尺度相關機關
可以檢視相關文檔可得:
6.2 CSS字型的設定
設定字型類型
font-family:"隸書";
font-size
設定字型大小
font-size:12px;
font-style
設定字型風格
font-style:italic;
font-weight
設定字型的粗細
font-weight:bold;
font
在一個聲明中設定所有字型屬性
字型屬性的順序：字型風格→字型粗細→字型大小→字型類型
font:italic bold 36px "宋體";
多個字型優先級從前到後，字型 有空格一定盯引号引上
body{font-family: Times,"Times New Roman", "楷體";} 6.3 CSS文本的設定
color
設定文本顔色
color:#00C;
text-align
設定元素水準對齊方式
text-align:right;
text-indent
設定首行文本的縮進
text-indent:20px;
line-height
設定文本的行高
line-height:25px;
text-decoration
設定文本的裝飾
text-decoration:underline; 6.4 CSS背景的設定
background-color
background-image
background-position
background-repeat
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat; 6.5 CSS清單的設定
list-style-type
list-style-image
list-style-type 6.6 CSS盒子模型(border margin padding)
6.7 定位設定(position,float,clear,z-index)
絕對定位: absolute,它會使得後面的區域發生位置的改變,是相對于body所發生的改變.
相對定位:relative ,它是相對原來自己的位置做一下相對偏移. 6.8 滑鼠樣式設定(cursor)
p { cursor: text; }
a { cursor: pointer; }
body { cursor:
url("mycursor.gif"), url("images/cursors/footcursor.jpg"), default; } 7.CSS濾鏡效果
濾鏡一詞是從攝影方面引過來的，就是濾光鏡，濾色片的意思，它對圖檔的顔色進行一定的處理，以達到不同的效果。如顔色漸變效果，底片曝光效果和透明色效果等.
Phase：角度變形百分比。
Strength：變形強度。
例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
濾鏡：Xray
文法：STYLE="filter:Xray"
例子：filter:Xray 具體可以檢視蘇昱(Rainer Su)編寫的CSS2.0樣式表中文手冊.chm
版權聲明：本文為CSDN部落客「weixin_33766168」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。
原文連結：https://blog.csdn.net/weixin_33766168/article/details/92620873