CSS
? CSS（英文全稱：Cascading Style Sheets）層疊樣式表, 是一種用來表現(xiàn)HTML（標(biāo)準通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準通用標(biāo)記語言的一個子集）等文件樣式的計算機語言篱蝇。
? CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計語言。相對于傳統(tǒng)HTML的表現(xiàn)而言冰肴，CSS能夠?qū)W(wǎng)頁中的對象的位置排版進行像素級的精確控制占拍，支持幾乎所有的字體字號樣式沽讹，擁有對網(wǎng)頁對象和模型樣式編輯的能力宾符，并能夠進行初步交互設(shè)計佛南，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計語言梗掰。CSS能夠根據(jù)不同使用者的理解能力，簡化或者優(yōu)化寫法嗅回，針對各類人群及穗，有較強的易讀性。
??CSS是用來美化網(wǎng)頁用的绵载，沒有網(wǎng)頁則CSS毫無用處埂陆，所以CSS需要依賴HTML展示其功能 苛白。
? CSS 樣式由選擇器和一條或多條以分號隔開的樣式聲明組成。每條聲明的樣式包含著一個 CSS屬性和屬性值焚虱。 [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FmNcbENy-1605579325994)(/QQ截圖20200205160701.png)]
選擇器名{屬性:屬性值;......}
div{background-color:red;}
注意：
css聲明要以分號;結(jié)束购裙，聲明以**{}**括起來
建議一行書寫一個屬性
若值為若干單詞，則要給值加引號鹃栽，如 font-family: “agency fb”;
多行注釋：
/* 這里的內(nèi)容就是注釋 */
1. 行內(nèi)式
? 行內(nèi)樣式將樣式定義在具體html元素的style屬性中躏率。以行內(nèi)式寫的CSS耦合度高，只適用于當(dāng)前元素谍咆，在設(shè)定某個元素的樣式時比較常用禾锤。
<pstyle="color:red;font-size:50px;">這是一段文本</p>
在當(dāng)前元素使用 style 屬性的聲明方式。
? style 是行內(nèi)樣式屬性摹察；
? color 是顏色屬性；red 是顏色屬性值倡鲸；
? font-size是字體大小屬性供嚎；50px 是字體大小屬性值
2. 嵌入式
? 嵌入式通過在html頁面內(nèi)容開辟一段屬于css的代碼區(qū)域，通常做法為在< head>標(biāo)簽中嵌套
<style type="text/css">p{color:blue;font-size:40px;}
3. 引入外聯(lián)樣式文件
? 在實際開發(fā)當(dāng)中峭状，很多時候都使用引入外聯(lián)樣式文件克滴，這種形式可以使html頁面更加清晰，而且可以達到更好的重用效果优床。
style.css
p{color:green;font-size:30px;}
test.html
<linkrel="stylesheet"type="text/css"href="style.css">
? rel:rel 屬性規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系劝赔。
? stylesheet:文檔的外部樣式表。
? 很多時候胆敞，大量的 HTML 頁面使用了同一個CSS着帽。那么就可以將這些 CSS 樣式保存在一個單獨的.css 文件中，然后通過元素去引入它移层。
??注意：當(dāng)有多重樣式時仍翰，記住前提規(guī)則，越精確越優(yōu)先观话。
? 在 CSS 中予借，選擇器是一種模式，用于選擇需要添加樣式的元素频蛔。
? CSS選擇器有很多灵迫，掌握常用的即可；
選擇所有?*
*{......}
*{color:orange;}
選擇指定標(biāo)簽
元素名稱{......}
p{color:red;font-size:20px;}
選擇設(shè)置過指定id屬性值的元素?#
#id屬性值{......}
#p1{font-weight:bold;}
選擇設(shè)置過指定class屬性值的元素?.
.class屬性值{......}
.hidden{display:none;}
? 當(dāng)幾個元素樣式屬性一樣時晦溪，可以共同調(diào)用一個聲明瀑粥，元素之間用逗號分隔
選擇器1,選擇器2,...{......}
h2 , #pre1{color:orange;font-style:italic;}
? CSS樣式的優(yōu)先級，是根據(jù)選擇器的精確度/權(quán)重來決定的尼变，常見的權(quán)重如下利凑，權(quán)重越大浆劲，優(yōu)先級越高
? 元素選擇器：1
? 類選擇器：10
? id選擇器：100
? 內(nèi)聯(lián)樣式：1000
? CSS組合選擇器說明了兩個選擇器直接的關(guān)系。 CSS組合選擇符包括各種簡單選擇符的組合方式哀澈。
? 在 CSS 中包含了四種組合方式: 后代選取器(以空格分隔)牌借，子元素選擇器(以大于號分隔），相鄰兄弟選擇器（以加號分隔）割按，普通兄弟選擇器（以波浪線分隔）膨报。
? 用于選擇指定標(biāo)簽元素下的后輩元素，以空格分隔
選擇器1 選擇器2{......}
.food? li{border:1px solid red;}
<h1>食物</h1><ulclass="food"><li>水果<ul><li>香蕉</li><li>蘋果</li><li>梨</li></ul></li><li>蔬菜<ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li></ul>
? 用于選擇指定標(biāo)簽元素的所有第一代子元素适荣，以大于號分隔
選擇器1 + 選擇器2{......}
#d + div{border:1px solid red;}
html代碼同上
? 可選擇緊接在另一元素后的元素现柠，且二者有相同父元素。以加號分隔
選擇器1 + 選擇器2{......}
#d + div{border:1px solid red;}
<divid="d">相鄰兄弟選擇器1<ul><li>開心麻花</li><li>賈玲</li><li>宋小寶</li></ul></div><div>相鄰兄弟選擇器2</div>
? 選擇緊接在另一個元素后的所有元素弛矛，而且二者有相同的父元素够吩，以波浪線分隔
選擇器1 ~ 選擇器2{......}
li ~ li{background-color:yellow;}
<div>普通兄弟選擇器1<ul><li>開心麻花</li><li>賈玲</li><li>宋小寶</li><li>沈騰</li><li>王寧</li></ul></div>
