在html中使用css的三種方式： 1、行內樣式：同過元素的style屬性來設置 屬性之間分號隔開。 2、內部樣式：在<head>的<style>元素中定義css樣式 3、外部樣式：在css文件中定義css樣式，然後在html的<head>中通過<style>引入外部樣式表 css文件中不加<sty ...
在html中使用css的三種方式：
1、行內樣式：同過元素的style屬性來設置
<p style="font-size:20px; color:red">hello</p>
屬性之間分號隔開。
2、內部樣式：在<head>的<style>元素中定義css樣式
<style> p{font-size: 20px;color: red} </style>
3、外部樣式：在css文件中定義css樣式，然後在html的<head>中通過<style>引入外部樣式表
p{font-size: 20px;color: red}
<link href="xxx.css" type="text/css" rel="stylesheet" />
css文件中不加<style>標簽，直接寫css樣式就ok。
內部|外部樣式的語法： 選擇器 {屬性名1：屬性值1; 屬性名2：屬性值2}
三種方式，屬性之間都是分號隔開。
css註釋：
/* 註釋 */
css選擇器
1、元素選擇器、類選擇器、id選擇器
p{color: red} /* 元素選擇器，給所有p元素設置樣式*/ .red{color: red} /* 類選擇器，在元素中通過class="red"引用 */ #user{color: red} /* id選擇器，在元素中通過id="user"引用，最多只能使用1次 */
2、通用選擇器、分組選擇器
*{color: red} /*通用選擇器，給所有元素設置樣式 */ h1,.red{color: red} /*分組選擇器，同時給多個選擇器設置相同的樣式 */
3、後代選擇器、子選擇器、相鄰兄弟選擇器、後續兄弟選擇器
div p{color: red} /*後代選擇器，選擇<div>中所有的<p>元素，不管<p>是<div>的兒子、孫子、重孫......只要<p>是<div>的後代就行*/ div>p{color:red} /*子選擇器，選擇的是<p>，<p>必須是<div>的兒子*/ div+p{color:red} /*相鄰兄弟選擇器，選擇的是<p>，<p>必須是<div>後面的第一個兄弟元素 */ div~p{color:red} /*後續兄弟選擇器，選擇<div>後面所有的<p>，<p>必須是<div>的兄弟元素 */
4、屬性選擇器
[attr] /*含有attr屬性*/ [attr=value] /*有attr屬性，且屬性值為value*/ [attr^=value] /*有attr屬性，且屬性值以value開頭(只要value是開頭就ok*/ [attr|=value] /*有attr屬性，且屬性值以value開頭、value和後面部分以-連接 */ [attr$=value] /*有attr屬性，且屬性值以value結尾*/ [attr*=value] /*有attr屬性，且屬性值中含有value（含有就ok）*/ [attr~=value] /*有attr屬性，且屬性值中含有單詞value，value要是一個完整的單詞（和其它單詞以空格隔開）*/
屬性選擇器常和其它選擇器一起使用，比如:
button[type="button"] /*選擇所有type="button"的<button> */
屬性選擇器中，attr不能加引號，value可引可不引。
5、<a>鏈接
a:link /*所有未訪問過的<a>*元素/ a:hover /*滑鼠移到<a>元素上*/ a:active /*點擊<a>時*/ a:visited /*所有訪問過的<a>*/
這4個設置的是<a>元素不同時期的樣式。
:hover這個偽類所有元素都可以使用。
6、表單元素
:focus /*聚焦時*/ :checked /*選中時*/ :enabled /*可用的*/ :disabled /*禁用的*/ :read-only /*只讀*/
可單獨使用，也可配合表單元素使用：
:focus{ } input:focus{ }
7、空元素
:empty{ } /*所有的空元素*/ p:empty{ } /*所有空的<p>元素*/
空元素指的是沒有任何屬性、沒有內容的元素，示例：<p></p>。
8、非
:not(p) /*選擇不是<p>的所有元素*/
()中儘量只使用元素選擇器，使用其他選擇器容易出錯。
9、type系列
p:first-of-type /*同級別中的第一個<p>*/ p:nth-of-type(n) /*同級別中的第n個<p>*/ p:nth-last-of-type(n) /*同級別中的倒數第n個<p>*/ p:last-of-type /*同級別中的最後一個<p>*/ p:only-of-type /*同級別中唯一的一個<p>*/
示例：
p:first-of-type{color:red}
<body> <h1></h1> <p></p> <!--選中--> <p></p> <div> <h2></h2> <p></p> <!--選中--> <p></p> </div> </body>
只要是同級別的<p>中的第一個即可。
10、child系列
p:first-child /*匹配的是<p>，<p>要是其父元素的第一個子元素*/ p:nth-child(n) /*匹配的是<p>，<p>要是其父元素的第n個子元素*/ p:nth-last-child(n) /*匹配的是<p>，<p>要是其父元素的倒數第n個子元素*/ p:last-child /*匹配的是<p>，<p>要是其父元素的最後一個子元素*/ p:only-child /*匹配的是<p>，<p>要是其父元素的唯一一個子元素*/
示例：
p:first-child{color:red}
<body> <h1></h1> <p></p> <p></p> <div> <p></p> <!--選中--> <p></p> </div> </body>
11、首字、首行
p:first-letter /*<p>元素的第一個字元*/ p:first-line /*<p>元素的第一行*/
12、:before :after
p:before{ /*在<p>的前面添加內容*/ content:"hello " } p:after{ /*在<p>的後面添加內容*/ content:" byebye" }
添加的內容預設是行內元素，但會和<p>在同一行顯示（相當於把添加的內容放到<p>元素內的最前|後面），添加的並不是一個真正的元素，所以叫做偽元素。
可以設置為塊級，添加的內容會作為塊級元素顯示：
p:before{ /*在<p>的前面添加內容*/ content:"hello "; display: block } p:after{ /*在<p>的後面添加內容*/ content:" byebye"; display: block }
可以給添加的元素設置樣式：
p:before{ content:"hello "; /* 屬性之間分號分隔 */ display: block; /*給添加的內容設置樣式*/ font-size: 20px; color:red }
添加圖片：
p:before{ content:""; /* content屬性是必需的，不添加文本時可以設置為空串 */ display: block; /*必須要設置為塊級，要設置寬、高，添加的背景圖片才能顯示出來*/ width: 100px; height: 100px background-image: url("1.png"); }
清除浮動：
p:before{ content:""; clear: both }
偽元素可以使用單冒號，也可以使用雙冒號。
:before <=> ::before
:after <=> ::after
帶冒號的選擇器中，有4個偽元素:first-letter、:first-line、:before、:after，其餘都是偽類。
選擇器可以搭配使用。
在同種方式中（都是內部|外部樣式），優先順序id選擇器最高，類選擇器次之，屬性選擇器最低。（定位越具體、詳細的，優先順序越高）
如果使用了相同的css屬性，優先順序行內最高，內部、外部優先順序相同，看<head>中<link />、<style>的順序，後面的優先順序更高（後渲染的樣式會覆蓋之前的樣式）。
