css
css簡介
css的作用
1.實現了樣式和html的代碼分離。
2.彌補html對屬性的的控制不足。
3.精確的控制頁面的佈局。
4.可以提高頁面的執行效率。
5.css還有特殊的功能。
css的特性
1.繼承性
2.層疊性
css的基本語法
基本語法
<style type="text/css">
選擇器{
屬性1:屬性值；
屬性2：屬性值
。。。。。。
}
</style>
選擇器
1.類選擇器
2.id選擇器
3.標記選擇器
4.包含選擇器
5.僞類
類選擇器
<head>
<title> New Document </title>
<style>
.p1{ color:red }
</style>
</head>
<body>
<p>查看文字內容</p>
<p>查看文字內容</p>
<p class="p1">查看文字內容</p>
<p>查看文字內容</p>
<p>查看文字內容</p>
</body>
id選擇器
<head>
<title> New Document </title>
<style>
#p2{ font-size:100px;}
</style>
</head>
<body>
<p id="p2">查看文字內容</p>
<p>查看文字內容</p>
<p class="p1">查看文字內容</p>
<p>查看文字內容</p>
<p>查看文字內容</p>
</body>
標籤選擇器
<head>
<title> New Document </title>
<style>
p{color:red;}
</style>
</head>
<body>
<p>查看css的效果</p>
<p>查看css的效果</p>
<p>查看css的效果</p>
</body>
包含選擇器
<head>
<title> New Document </title>
<style>
ol ul li{font-size:50px; color:red}
</style>
</head>
<body>
<ol>
<li>zhangsan
<li>23
<ul>
<li>lisi
</ul>
</ol>
</body>
通配符選擇器
- {
}
選擇所有標籤
僞類
1.未連接 a:link
2.已經訪問鏈接 a:visited
3.進入鏈接 a:hover
4.激活（按下）狀態 a:active
其中的hover 和active 可以用於其他控價
<html>
<head>
<title> New Document </title>
<style>
a:hover{font-size:50px;}
</style>
</head>
<body>
<a href="#">我的鏈接</a>
</body>
選擇器的優先級
在頁面中同一個html元素有不同的選擇器定義樣式的。
1、id選擇器最高
2、類選擇器
3、標記選擇器
子選擇器 div >p
div >p{
意思是 div 裏面所有的子標籤p 都被會選中 注意對孫子標籤是不起作用的
}
相鄰選擇器
div +p{
意思是選擇跟我 div 同級的下一個挨着的p元素(單個的p 後面在跟p是選不中的) 如果在div 和p
之間隔着一個元素 那是選不中的
}
相鄰所有選擇器 div ~p
div ~p{
意思是 選中 div 後面所有同級的p元素 即使多個p 元素 之間有隔着的其他元素 也是能選中p元素
}
屬性選擇器 input[type=“password”]
a[title] {
意思是選中 a標籤 裏面只要有 title 這個屬性的 都會選中
}
a[title=num1] 意思是選中 屬性title=num1 的a 標籤
a[title^=num] 選中title的屬性值以num 開頭的a標籤
a[title$=num]選中title的屬性值以num 結尾的a標籤a[title|=num] 選中title的屬性值以num-連接的a標籤 如<a title=“num-ai”>
a[title~=num] 選中title的多個屬性值以 空格隔開的 有其中一個屬性值都能選中 例如<a tilte=“num num2 num3”> 三個屬性值你任意選一個都能選中
比如a[title~=num2] 和 a[title~=num3] 選中的其實是同一個標籤
a[title*=num] 選中title屬性值 包含num的都能選中 例如<a title=“mynumaaaa”>
a[title=num][name=lisi] 多個屬性選擇 意思 是選中 title=num 並且 name=lisi 的這個a標籤 <a title=“num” name=“lisi”>
過濾選擇器(僞類選擇器)
過濾選擇器
last-child p:last-child 選擇屬於其父元素最後一個子元素 <p> 元素。
:not(selector) li:not(#my) 選擇id不是my的所有li元素。
::selection 當鼠標左鍵選中文本時 這裏注意是兩個冒號 前面不加任何標籤
:root 選擇文檔的根元素。 跟* 這個選擇器很相似
:empty p:empty 選擇沒有子元素的每個 <p> 元素（包括文本節點）。
例如<p></p> 這裏面沒有任何子標籤和文本 就會被選中
