前端之旅——CSS
CSS 定義
CSS是Cascading Style Sheets 的簡稱，中文稱是層疊樣式表
屬性和屬性值用冒號隔開，以分號結尾
CSS 四種引入方式
1.行內式
行內式是在標簽的style屬性中設定CSS樣式
<div style="..."><div>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head>頭標簽的<style></style>標簽中
<head> ... <style type="text/css"> .... </style> </head>
3.導入式
將一個獨立的.CSS文件引入HTML文件中，導入式使用@import 引用外部CSS文件
<style> 標記也是寫在<head>標記中。
導入式會在整個網頁裝載完成後再裝載CSS文件
<head>
...
<style type="text/css">
@import " css文件路徑"
</style>
</head>
4.鏈接式（導入就用這種）
將一個獨立的 .css 文件引入到HTML文件中，使用<link>標記在<head>標記中
鏈接式會以網頁文件主體裝載前裝載CSS文件
rel = stylesheet (告訴它是層疊樣式表)
<head>
...
<link href="my.css" rel="stylesheet" type="text/css">
</head>
樣式應用順序：
如果外部樣式、內部樣式、內聯樣式同事應用於同一個元素，屬性不一樣的話就會以合並的方式呈現。
如果是應用於同一個元素且同一個屬性。他們的權重是， 行內樣式 > 內部樣式 > 外部樣式
有個例外的情況：如果外部樣式放在內部標簽的後面，外部標簽將會覆蓋內部標簽
基本選擇器：
1.通用元素選擇器
*匹配應用到的所有標簽。
*{ color:red }
2.標簽選擇器
匹配所有使用 xx 標簽的元素（可以匹配到所有標簽）
div{ color:yellow}
3.類選擇器
匹配所有class屬性中包含info的元素。
語法：點.類名{樣式}（類名不能以數字開頭，類名要區分大小寫）
.mycolor{color:yellow> <div class="mycolor">nick</div>
4.id 選擇器
使用id屬性來調用樣式，在一個網頁中id的值都是唯一的（是W3C規範而不是規則，所以不會報錯）
語法：#id 名{} （id 不能以數字開頭）
#mycolor {color:yellow} <div id="mycolor">NICKE<div>
組合選擇器：
1.多元素選擇器
同時匹配h1，h2 標簽，之間用逗號分隔
h1,h2{color:yellow} <h1>牛魔大力陷滂沱</h1> <h2>虎魔狂亂心不死</h2>
2.後代元素選擇器
匹配所有div 裏的 p 標簽 之間用空格分隔
div p {color:yellow} <div> <p>nick</p> <div> <p>123</P> </div> </div>
3.子元素選擇器
匹配所有div標簽裏嵌套的子標簽p標簽，之間用>分隔
只找兒子
4.毗鄰元素選擇器
匹配所有緊隨div標簽之後的同級標簽p，之間用+分隔（只能匹配一個）
div + p{color:yellow} <div>123</div> <p>nick</p>
屬性選擇器：title標題 可以是class id 等
1.[title]&P[title]
設置所有具有title屬性的標簽元素；
設置所有具有title屬性的p標簽元素。
設置所有具有title屬性的標簽元素； [title] {color:yellow} p[title] 設置所有具有title屬性的p標簽 {color;yellow} <div title>nick</div> <p title>nick</p>
2.[title=nick]
設置所有title屬性等於"nick"的標簽元素
[title="nick"] {color:yellow}
3.[title~=nick]
設置所有title屬性值中，有一個值等於nick的標簽元素
[title~="nick"] {color:yellow;} <p title="nick asd cas sad">nick</p> <p title="group askii append">juex</p>
4[title|=nick]
設置所有title屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以“nick”開頭的標簽元素
[title="nick"] {color;yellow} <p title="nick-asdsad-asd">nick</p>
5.[title^=nick]
設置屬性值以指定值開頭的每個標簽元素
<title^="nick"> {color:yellow;} <p title="nickdasds asd">nick</p>
6.[title$=nick]
設置屬性值以指定值結尾的每個標簽元素。
[title$="nick"]
{color:yellow}
<p title="jendanick">asd</p>
7.[title *=nick]
設置屬性值中包含指定值得每一個元素
[title="nick"] {color:yellow} <p title="snickda">nick</p>
偽類選擇器
前端之旅——CSS