CSS基礎和選擇器
什麼是CSS?
CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式通常又會存在於樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS檔案裡。
css的優勢
1.內容與表現分離
2.網頁的表現統一，容易修改
3.豐富的樣式，使頁面佈局更加靈活
4.減少網頁的程式碼量，增加網頁瀏覽器速度，節省網路頻寬
5.運用獨立頁面的css,有利於網頁被搜尋引擎收錄
CSS語法
CSS基礎語法
CSS語法可以分為兩部分：
- 選擇器
- 宣告
宣告由屬性和值組成，多個宣告之間用分號分隔。
CSS註釋
註釋是程式碼之母。
/*這是註釋*/
網頁中引用CSS樣式
- 內聯樣式
- 行內樣式表
- 外部樣式表
內嵌方式
style標籤
<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>這是一個p標籤！</p>
</body>
</html>
行內樣式
<html> <head> <meta charset="utf8"> </head> <body> <p style="color: blue;">這是一個p標籤！</p> </body> </html>
外聯樣式表-連結式
link標籤
index.css
p {
color: green;
}
然後在HTML檔案中通過link標籤引入：
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>這是一個p標籤！</p>
</body>
</html>
基礎選擇器
在一個HTML頁面中會有很多很多的元素，不同的元素可能會有不同的樣式，某些元素又需要設定相同的樣式，
選擇器就是用來從HTML頁面中查詢特定元素的，找到元素之後就可以為它們設定樣式了。 選擇器為樣式規則指定一個作用範圍。
基礎選擇器包括：
- 標籤選擇器
- 類選擇器
- ID選擇器
- 通用選擇器
標籤選擇器
通過標籤名來選擇元素：
示例：
p {
color: red;
}
將所有的p標籤設定字型顏色為紅色。
ID選擇器
通過元素的ID值選擇元素：
示例：
#i1 {
color: red;
}
將id值為i1的元素字型顏色設定為紅色。
類選擇器
通過樣式類選擇元素：
示例：
.c1 {
color: red;
}
將所有樣式類含.c1的元素設定字型顏色為紅色。
通用選擇器
使用*選擇所有元素：
* {
color: black;
}
組合選擇器
後代選擇器
因為HTML元素可以巢狀，所以我們可以從某個元素的後代查詢特定元素，並設定樣式：
div p {
color: red;
}
從div的所有後代中找p標籤，設定字型顏色為紅色。
兒子選擇器
div>p {
color: red;
}
從div的直接子元素中找到p標籤，設定字型顏色為紅色。
毗鄰選擇器
div+p {
color: red;
}
找到所有緊挨在div後面的第一個p標籤，設定字型顏色為紅色。
兄弟選擇器
div~p {
color: red;
}
找到所有div標籤後面同級的p標籤，設定字型顏色為紅色。
並集選擇器
div,p{
color:red;
}
選擇所有<div>元素和<p>元素標籤，設定字型顏色為紅色。
屬性選擇器
除了HTML元素的id屬性和class屬性外，還可以根據HTML元素的特定屬性選擇元素。
根據屬性查詢
[title] {
color: red;
}
根據屬性和值查詢
找到所有title屬性等於hello的元素：
[title="hello"] {
color: red;
}
找到所有title屬性以hello開頭的元素：
[title^="hello"] {
color: red;
}
找到所有title屬性以hello結尾的元素：
[title$="hello"] {
color: red;
}
找到所有title屬性中包含（字串包含）hello的元素：
[title*="hello"] {
color: red;
}
找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：
[title~="hello"] {
color: red;
}
表單常用
input[type="text"] {
backgroundcolor: red;
}
偽類選擇器
a:link（沒有接觸過的連結）,用於定義了連結的常規狀態。
a:hover（滑鼠放在連結上的狀態）,用於產生視覺效果。
a:visited（訪問過的連結）,用於閱讀文章，能清楚的判斷已經訪問過的連結。
a:active（在連結上按下滑鼠時的狀態）,用於表現滑鼠按下時的連結狀態。
偽類選擇器 : 偽類指的是標籤的不同狀態:
a ==> 點過狀態 沒有點過的狀態 滑鼠懸浮狀態 啟用狀態
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
a:active {color: #0000FF} /* 選定的連結 */ 格式: 標籤:偽類名稱{ css程式碼; }
before after偽類
:before p:before 在每個<p>元素之前插入內容 :after p:after 在每個<p>元素之後插入內容
例子
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網</title>
<style type="text/css">
/*沒訪問之前*/
a:link{
color: red;
}
/*滑鼠放在連結上的狀態*/
a:hover{
color: green;
}
/*訪問過後*/
a:visited{
color:black;
}
/*滑鼠點選的時候*/
a:active{
color: blue;
}
/*在p標籤屬性為c2的後面加上內容*/
p.c2:after{
content: 'hello';
color: pink;
}
/*在所有的p標籤的前面加上內容*/
p:before{
content: '偽類';
color: green;
}
</style>
</head>
<body>
<a href="#">css中文網</a>
<p>你hao</p>
<p class="c2">你好</p>
</body>
</html>
css優先順序和繼承
css的繼承
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。
例如一個BODY定義了的顏色值也會應用到段落的文字中。
body{color:red;} <p>hello</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。
然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
p{color:green}
css的優先順序
所謂CSS優先順序，即是指CSS樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1
按這些規則將數字符串逐位相加，就得到最終的權重，然後在比較取捨時按照從左到右的順序逐位比較。
1、文內的樣式優先順序為1,0,0,0，所以始終高於外部定義。 2、有!important宣告的規則高於一切。 3、如果!important宣告衝突，則比較優先權。 4、如果優先權一樣，則按照在原始碼中出現的順序決定，後來者居上。 5、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全域性選擇符*定義的規則)。
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層疊性</title>
<style type="text/css">
/*1 0 0*/
#box{
color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
</style>
</head>
<body>
<!--
層疊性： 權重的標籤覆蓋掉了權重小的標籤，說白了 ，就是被幹掉了
權重： 誰的權重大，瀏覽器就會顯示誰的屬性
誰的權重大？ 非常簡單 數數
id的數量 class的數量 標籤的數量
-->
<p id="box" class="container">
猜猜我是什麼顏色
</p>
</body>
</html>