1. CSS介紹 現在的互聯網前端分三層： HTML：超文本標記語言。從語義的角度描述頁面結構。 CSS：層疊樣式表。從審美的角度負責頁面樣式。 JS：JavaScript 。從交互的角度描述頁面行為 CSS：Cascading Style Sheet，層疊樣式表。CSS的作用就是給HTML頁面標簽 ...
1. CSS介紹
現在的互聯網前端分三層：
HTML：超文本標記語言。從語義的角度描述頁面結構。
CSS：層疊樣式表。從審美的角度負責頁面樣式。
JS：JavaScript 。從交互的角度描述頁面行為
CSS：Cascading Style Sheet，層疊樣式表。CSS的作用就是給HTML頁面標簽添加各種樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。
接下來我們要講一下為什麼要使用CSS。
1.1 HTML的缺陷
不能夠適應多種設備
要求瀏覽器必須智能化足夠龐大
數據和顯示沒有分開
功能不夠強大
1.2 CSS優點
使數據和顯示分開
降低網路流量
使整個網站視覺效果一致
使開發效率提高了（耦合性降低，一個人負責寫html，一個人負責寫css）
比如說，有一個樣式需要在一百個頁面上顯示，如果是html來實現，那要寫一百遍，現在有了css，只要寫一遍。現在，html只提供數據和一些控制項，完全交給css提供各種各樣的樣式。
2. CSS的引入方式
2.1 行內樣式
<div> <p style="color: green">我是一個段落</p> </div>
2.2 內接樣式
<style type="text/css"> /*寫我們的css代碼*/ span{ color: yellow; } </style>
2.3 外接樣式-鏈接式
<link rel="stylesheet" href="./index.css">
2.4 外接樣式-導入式
<style type="text/css"> @import url('./index.css'); </style>
3. CSS選擇器
3.1 基本選擇器
標簽選擇器
類選擇器
id選擇器
3.1.1 標簽選擇器(標簽名)
標簽選擇器可以選中所有的標簽元素，比如div，ul，li ，p等等，不管標簽藏的多深，都能選中，選中的是所有的，而不是某一個，所以說 "共性" 而不是 ”特性“。
body{ color:gray; font-size: 12px; } /*標簽選擇器*/ p{ color: red; font-size: 20px; } span{ color: yellow; }
3.1.2 類選擇器(.)
所謂類：就是class . class與id非常相似，任何的標簽都可以加類，但是類是可以重覆,屬於歸類的概念。同一個標簽中可以攜帶多個類，用空格隔開。
類的使用，能夠決定前端工程師的css水平到底有多牛逼？在這裡一定要有”公共類“的概念。
.lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; }
html：
<!-- 公共類 共有的屬性 -->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
3.1.3 id選擇器(#)
同一個頁面中id不能重覆。
任何的標簽都可以設置id ，id命名規範 要以字母 可以有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不一樣的屬性值。
#box{ background:green; } #s1{ color: red; } #s2{ font-size: 30px; }
html：
<body> <div id="box">娃哈哈</div> <div id="s1">爽歪歪</div> <div id="s2">QQ星</div> </body>
3.2 高級選擇器
後代選擇器
子代選擇器
並集選擇器(組合選擇器)
交集選擇器
3.2.1 後代選擇器
使用 空格 表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）。
.container p{ color: red; } .container .item p{ color: yellow; }
3.2.2 子代選擇器
使用 > 表示子代選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。
.container>p{ color: yellowgreen; }
3.2.3 並集選擇器
多個選擇器之間使用 逗號 隔開。表示選中的頁面中的多個標簽。一些共性的元素，可以使用並集選擇器。
/*並集選擇器*/ h3,a{ color: #008000; text-decoration: none; }
3.2.4 交集選擇器
使用 . 表示交集選擇器。第一個標簽必須是標簽選擇器，第二個標簽必須是類選擇器 語法：div.active
比如有一個<h4 class='active'></h4>這樣的標簽。那麼它表示兩者選中之後元素共有的特性。
h4{ width: 100px; font-size: 14px; } .active{ color: red; text-decoration: underline; } /* 交集選擇器 */ h4.active{ background: #00BFFF; }
3.3 其他選擇器
偽類選擇器
偽標簽選擇器
屬性選擇器
3.3.1 偽類選擇器
偽類選擇器一般會用在超鏈接a標簽中，使用a標簽的偽類選擇器。
/*link表示沒有被訪問的a標簽的樣式*/ .box ul li.item1 a:link{ color: #666; } /*visited表示訪問過後的a標簽的樣式*/ .box ul li.item2 a:visited{ color: yellow; } /*hover表示滑鼠懸停時a標簽的樣式*/ .box ul li.item3 a:hover{ color: green; } /*active表示滑鼠摁住的時候a標簽的樣式*/ .box ul li.item4 a:active{ color: yellowgreen; }
3.3.2 偽標簽選擇器
/*設置第一個首字母的樣式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加內容 這個屬性使用不是很頻繁 瞭解 使用此偽元素選擇器一定要結合content屬性*/ p:before{ content:'alex'; } /*在....之後 添加內容，使用非常頻繁 通常與咱們後面要講到佈局 有很大的關聯（清除浮動）*/ p:after{ content:'&'; color: red; font-size: 40px; }
3.3.3 屬性選擇器
屬性選擇器，字面意思就是根據標簽中的屬性，選中當前的標簽。
/*根據for屬性查找，找到所有又for屬性的，設置字體顏色為紅色*/ [for]{ color: red; } /*找到for屬性的值等於username的元素 字體顏色設為黃色*/ [for='username']{ color: yellow; } /*以....開頭^ */ [for^='user']{ color: #008000; } /*以....結尾$ */ [for$='vvip']{ color: red; } /*包含某元素的標簽*/ [for*="vip"]{ color: #00BFFF; } /*指定標簽的for屬性 其中for屬性的值是以空格隔開的值列表， user1是值列表中的一個獨立值*/ label[for~='user1']{ color: red; } input[type='text']{ background: red; }
3.4 選擇器的權重
有些時候我們可能會給同一個標簽設置多個樣式，遇到了重疊項的設置又該聽誰的呢？這裡就要用到選擇器的權重。
行內樣式 1000> id選擇器 100 > 類選擇器 10 > 標簽選擇器 1 > 繼承樣式 0
3.4.1 css的兩大特性：基礎性和層疊性
繼承性：給父級設置一些屬性，子級繼承了父級的該屬性，這就是我們的css中的繼承。
面向對象語言都會存在繼承的概念，在面向對象語言中，繼承的特點：繼承了父類的屬性和方法。那麼我們現在主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。
記住：有一些屬性是可以繼承下來 ： color 、 font-*、 text-*、line-* 。主要是文本級的標簽元素。
但是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。
層疊性：權重大的標簽覆蓋掉了權重小的標簽，誰的權重大，瀏覽器就會顯示誰的屬性。
