HTML是網頁的裸框架，但是現在已經是2020年了，你再做出一個80年代的網頁來，恐怕是沒HR要你了。所以學習CSS的重要性可想而知，CSS用途很廣，是一門獨立的編程語言，能美化網頁，也能進一步提高自己的審美level。
就好比一套別墅一樣，html就是房子的一磚一瓦組成的裸框架，css就是基於該房子的裝飾，JavaScript就是主人在房子內的一系列動作......
CSS是一門獨立的學科，該課程中包含了很多知識點，我就基於我們本科應用層之上，把最常用的幾塊總結歸納一下，方便以後前端開發實習的時候，能夠提供方便。我把CSS3分爲了：CSS選擇器、CSS屬性、CSS模型框架三部分。
選擇器顧名思義就是用來選擇東西的，直觀來說就是選擇哪些HTML元素來應用我們的CSS屬性，XXX選擇器就是根據XXX標準來進行選擇。
目錄
HTML基礎知識點 請點擊這裏
第一部分：基本選擇器
比如最常用的類選擇器，就是根據類（class屬性），來選擇HTML元素。html元素內添加class屬性，css中前置個點即可。這樣，紅色字體的CSS樣式就綁定在這個<p>段落了。
<body>
<p class="text1">hello world!</p>
</body>
<style>
.text1{
color: red;
}
</style>
與類選擇器對應的是 id 選擇器。類選擇器根據class屬性來匹配，同理 id選擇器根據id屬性來匹配，但優先級比類選擇器高。
注：CSS優先級從大到小爲：行內CSS>內嵌式CSS>外聯CSS
and CSS優先級從大到小爲：ID選擇器>僞類選擇器>類選擇器>標籤選擇器>通用選擇器
（兩種分類不同）其中在屬性值的後面加上“！important”，實現最大的優先級（王炸）
<body>
<p id="id1">hello world!</p>
</body>
<style>
#id1{
color: red;
}
</style>
還有標籤選擇器。請看以下代碼：
<body>
<p>hello world!</p>
</body>
<style>
p{
color: red;
}
</style>
該代碼就是通過p{屬性名：屬性值}，來對所有HTML的<p>標籤應用紅色字體屬性。當然AOE的選擇器優先級比較低。
當然還有很多選擇器，比如後代選擇器能夠實現一個HTML元素的所有子元素實現樣式；並集選擇器能夠同時讓多個不同的HTML元素類型（比如<h1>和<h2>）一次性實現同一個樣式；還有關係選擇器、兄弟選擇器、相鄰兄弟選擇器、通配選擇器等等 。
第二部分：屬性選擇器
以上類、id、標籤選擇器都是最基本的選擇器，最爲常用。其次就是屬性選擇器。首先概括一下概念吧，屬性選擇器就是根據屬性來選擇HTML元素，來應用CSS樣式（比如你的某個屬性符合我的要求，我就給你應用樣式）。
屬性選擇器中所有的例子，其HTML部分都是這部分代碼：
<body>
<p align="center">111</p>
<p>222</p>
<p align="left">333</p>
</body>
這三個<p>段落內容分別是111、222、333，對其屬性分別是居中、無、左對齊。
屬性選擇器的基本格式 ： 標籤名 [ 屬性要求 ] { CSS屬性名：屬性 }
比如最基本的：
標籤名[屬性]
<style>
p[align]{
color: red;
}
</style>
意思就是所有<p>標籤，只要有align屬性，就都符合條件，即染爲紅色。運行結果爲111和333紅色，222爲黑色。
標籤名[屬性='屬性值']
<style>
p[align='center']{
color: red;
}
</style>
意思就是所有<p>標籤，只要align屬性爲'center'的染爲紅色。運行結果爲111紅色，222和333爲黑色。
標籤名[屬性^='屬性值'] / 標籤名[屬性$='屬性值']
<style>
p[align^='c']{
color: red;
}
</style>
意思就是所有<p>標籤，align屬性爲'c'開頭的染爲紅色。運行結果爲111紅色，222和333爲黑色。
同理，把^改爲$，當align屬性爲'c'結尾的染爲紅色。
標籤名[屬性*='屬性值']
<style>
p[align*='t']{
color: red;
}
</style>
所有<p>標籤，align屬性包含字符串'c'的染爲紅色。即111、333紅色。
第三部分：其他選擇器
僞類選擇器
僞類動態選擇器，我覺得就是一個HTML元素在點擊之前、之後、點擊瞬間和懸停這四種情況的臨時樣式。當然這更加適合超鏈接，在一個網頁的超鏈接上，點擊前後的樣式可能不一樣，當然這裏只是展示一下語法，可以把下面的<div>改成<a>。
<body>
<div class="test">
</div>
</body>
<style>
.test{
/* 基礎樣式 */
width: 100px;
height: 100px;
}
.test:link{
/* 未被點擊 */
background-color: grey;
}
.test:hover{
/* 鼠標懸停 */
background-color: red;
}
.test:active{
/* 鼠標點擊瞬間 */
background-color: black;
}
.test:visited{
/* 點擊之後 */
background-color: teal;
}
</style>
僞裝結構選擇器（花裏胡哨，感覺沒啥用）
利用文檔結構的特殊性來匹配元素，比如父元素只有一個子元素，等等。
比如 標籤名：only-child 表示該類的父類只有其一個元素的情況。
比如 標籤名：only-first 表示匹配該類的父類的第一個元素。其中 ：標籤名：nth-child(3) 表示第三個。
比如 標籤名：only-last 表示匹配該類的父類的最後一個元素。 其中 ：標籤名：nth-last-child(3) 表示倒數第三個。
其他的還有很多，但個人感覺都是花裏胡哨，基本不會去用的......
標籤名：only-of-type 表示子元素唯一；
標籤名：first-of-type 表示匹配第一個子元素；
標籤名：last-of-type 表示匹配最後一個子元素；nth-of-type(3)同理
標籤名：empty 表示沒有子元素的HTML元素
狀態僞類
就是HTML元素的狀態......比如是否可見
標籤名：enabled 表示可見的HTML屬性 ； disenabled同理
標籤名：checked 表示選中的HTML元素 比如單選框、複選框
標籤名：not() 否定僞類 比如下方代碼，把id不是b的都變爲紅色。
<body>
<p id="a">111</p>
<p id="b">222</p>
<p id="c">333</p>
</body>
<style>
p:not(#b){
color: red;
}
</style>
最後一個比較好玩的東西是
目標僞類選擇器
如果讓你實現一個功能：在HTML中的瞄的基礎之上，跳轉到瞄內容的時候，背景顯示紅色。
像這樣，點擊“導航1”，跳轉到內容111，並且顯示紅色背景。如下圖所示：
點擊“導航3”，跳轉到內容333，並且顯示紅色背景。如下圖所示：
這就需要用到“ 標籤名：target ”，代碼如下所示：
<body>
<a href="#a">導航1</a>
<a href="#b">導航2</a>
<a href="#c">導航3</a>
<p id="a">內容111</p>
<p id="b">內容222</p>
<p id="c">內容333</p>
</body>
<style>
p:target{
background-color: red;
}
</style>
僞元素（經常需要用到首字母大寫）
比如要實現一個段落第一個字符紅色 （就像本行這樣）
<style>
p::first-letter{
color: red;
}
</style>
第一行紅色......
<style>
p::first-line{
color: red;
}
</style>
前置@，後置同理
<style>
p:before{
content: "@";
}
</style>
第四部分：字體/段落/列表類屬性
前面所接觸到的選擇器，我感覺就是從HTML模塊那裏，選出我們要作用的HTML元素。那麼我們選出來了，該則麼去把我們想要的效果展現出來呢，這就需要我們的CSS屬性來套用實現。先來總結一下字體這一塊的屬性。
字體大小：
font-size: 30px;
字體顏色：（取其一）
color: red;
color:rgb(255,0,0);
color: #FF0000;
粗體斜體：
font-style: italic;
/* 設置字體樣式 正常normal/斜體italic */
font-weight: 700;
/* 設置字體粗細，400~500正常 700以上粗體 */
字體樣式：（通常寫一種即可）
font-family: "黑體","bodoni mt";
/* 字體樣式，可多種，用逗號隔開如果沒有則默認字體*/
服務器字體：（基本用不到，可能面試會問吧）本地未安裝也可以用該字體
@font-face {
font-family:自定義字體;
src: url('http://www.baidu.com');
}
文字陰影：
text-shadow: 5px 5px 5px red;
/* 水平陰影/垂直陰影/模糊距離/陰影顏色 */
首行縮進：
text-indent: 2em;
行高：（當 行高 = 字體大小 可以實現垂直居中的效果）
line-height: 20px;
間距：
letter-spacing: 5px;
/* 字符之間的間距 */
word-spacing: 50px;
/* 單詞之間的間距 */
文本對齊：
text-align: left;
其他：
white-space: normal;
/* 單詞之間多個空格normal保留一個/pre保留多個/nowrap強制不換行 */
text-overflow: ellipsis;
/* clip屬性直接修剪溢出文本/ellipsis修剪溢出文本顯示省略號表記 */
列表類：
ul{
list-style-type: ;
/* 設置列表項標記的類型 */
/* none無標記/disc默認實心圓/circle空心圓/square實心方塊 */
/* decimal數字/upp(low)er-roman大小寫羅馬字符 */
/* upp(low)er-latin大小寫英文/lower-greek希臘字符 */
list-style-image: url(img/tupian1.jpg);
/* 設置有序/無序列表的標記圖像 */
list-style-position: outside;
/* 設置列表項標記的位置 */
/* inside左邊縮進大一點/outside小一點 */
}
第五部分：盒模型/定位浮動
盒模型
指的是比較像盒子的一個模型，就像瀏覽器調試窗口的這樣
藍色部分爲內容部分，padding爲內容和邊框的間距，border爲邊框，margin爲邊框外側離父容器的距離。我們設計如下代碼：
<style>
.d{
width: 100px;
height: 50px;
padding: 20px;
border: 10px solid;
margin: 20px;
}
</style>
運行結果如下圖所示。其中淺綠色部分爲瀏覽器調試窗口的選中效果（即padding屬性的20px）。黑色的粗實線（solid）爲border屬性的10px效果，最外面的白色部分爲該組件離父組件（<body>）20個px。
圓角優化和陰影
在上方類選擇器的基礎代碼之上，添加如下代碼：
border-radius: 2em;/* 基礎圓角 */
border-radius: 1em 10em 1em 10em;/* 對角線橢圓 */
border-radius: 10em 10em 10em 10em;/* 圓 */
box-shadow: 20px 20px 20px red inset;/* 陰影效果 水平偏移/垂直偏移/偏移距離/陰影顏色/是否內陰影(inset) */
border-radius（圓角實現）三種方式取其一即可。最終效果圖：
CSS定位和浮動
（純個人理解）HTML標籤分爲塊元素和行元素，其中行元素是按照從左往右依次排列的，比如這樣
<a>111</a> <a>111</a> <a>111</a>
在網頁上會在一行顯示9個1，因爲<a>是一種行元素。
同理，如果是塊元素，比如<p>
<p>111</p> <p>111</p> <p>111</p>
那麼會分三行顯示，這就是行元素和塊元素的區別。
那麼問題來了，我如果想讓三個<p>在同一行顯示，如何實現？
先來解釋一下CSS定位的概念，也就是說你一個HTML元素在網頁的哪裏？
自動定位：默認的定位方式。
相對定位：相對於我原本應該在的地方，的偏移值。（設置偏移值方法 top:20px;left:20px; ）
絕對定位：相對於父組件的位置（要求父組件也是絕對定位，否則再往上找）
固定定位：相對於瀏覽器窗口（<body>）而言的位置
position: static;
/* 自動定位 */
position: relative;
/* 相對定位 */
position: absolute;
/* 絕對定位 */
position: fixed;
/* 固定定位 */
其次是CSS浮動的概念 。浮動就是可以打破“塊元素豎着排，行元素橫着排”這個規則，比如實現三個<div>塊橫着排列
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
<style>
.d1{
background-color: gray;
float: left;
}.d2{
background-color: rosybrown;
float: left;
}.d3{
background-color: black;
clear: left;
}div{
width: 100px;
height: 100px;
}
</style>
如果d3沒有clear: left;這行代碼，將會被覆蓋，無法顯示，必須清除左方元素對自己的影響，方可正常使用。效果如下：
