前端 学习笔记day48 CSS介绍
生活随笔
收集整理的這篇文章主要介紹了
前端 学习笔记day48 CSS介绍
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. CSS-----層疊樣式表
設置樣式的三種方式：
1. 直接在標簽內寫style屬性設置該標簽的樣式（又叫內聯標簽）
2. 在head標簽中寫style標簽設置body標簽中子標簽的樣式；
3.把樣式直接寫在一個css文件中 直接在html文件的head標簽的link子標簽通過href屬性關聯css文件中寫好的樣式；
2. CSS注釋 /**/
?
3. 選擇器（其實就是對哪一個標簽使用樣式 這個標簽就是選擇器）
3.1 基本選擇器
3.1.1 標簽選擇器（其實就是直接標簽名 寫樣式即可一般用于該類標簽的通用樣式設置）
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>基本選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><p>我是一個p標簽</p><div>我是一個div標簽</div></body> </html> p{color:red;font-size:18px }div{color:green; font-size:20px }運行結果：
?
3.1.2 ID選擇器（為特定的選擇器設置特定的樣式--因為每一個標簽都有一個唯一標識的id屬性）
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>基本選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><p id="p0">我這個p標簽沒有ID選擇器所以使用標簽選擇器的樣式</p><p id="p1">我是一個p標簽</p><p id="p2">我也是一個p標簽</p></body> </html> ID選擇器-html p{color:red;font-size:18px } #p1{color:green;font-size:18px } /*ID選擇器 用標簽的ID號*/ #p2{color:black;font-size:20px } ID選擇器-CSS運行結果：
?
?3.1.3 類選擇器（一個標簽使用了哪些樣式的類 可以使用多個類）
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><p class="c1 c2">我是一個p標簽 我使用了2個類選擇器樣式</p><p>我只是一個普通的標簽選擇器</p></body> </html> 類選擇器-html?
p{color:red;font-size:18px } .c1{color:hotpink; } .c2{font-size:40px 類選擇器-CSS運行結果：
3.2 通用選擇器(*{color:red})
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><p class="c1 c2">我是一個p標簽 我使用了2個類選擇器樣式</p><p>我只是一個普通的標簽選擇器</p><div>我是一個div標簽</div></body> </html> 通用選擇器-html?
.c1{color:hotpink; } .c2{font-size:40px } *{color:blue; } 通用選擇器-CSS?
3.3 組合選擇器?
?3.3.1 后代選擇器
p{color:blue; } #d1 p{color:red; } /*中間空格 是后臺選擇器，div標簽中的所有后代標簽都設置為紅色*/ 后代選擇器-CSS?
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><div id="d1"><p>我是嵌套在div標簽中的p標簽</p><div id="d2"><p>我是嵌套在div標簽的div標簽中的p標簽</p></div></div></body> </html> 后代選擇器-html?
?運行結果：
3.3.2 兒子選擇器
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><div id="d1"><p>我是嵌套在div標簽中的p標簽</p><div id="d2"><p>我是嵌套在div標簽的div標簽中的p標簽</p></div></div></body> </html> 兒子選擇器-html?
p{color:blue; } #d1>p{color:red; } /*中間>是兒子選擇器，僅僅div標簽中的兒子標簽設置為紅色*/ 兒子選擇器-CSS運行結果：
3.3.3 毗鄰選擇器
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><div id="d1"><p>我是嵌套在div標簽中的p標簽</p><div id="d2"><p>我是嵌套在div標簽的div標簽中的p標簽</p></div></div><hr> <!--水平線--><div id="d3">我是一個div標簽</div><p>我是跟d3標簽同級的p標簽</p></body> </html> 毗鄰選擇器-HTML?
p{color:blue; } #d3+p{color:red; } /*中間+是毗鄰選擇器，div標簽后面相鄰的標簽設置為紅色*/ 毗鄰選擇器-CSS運行結果：
3.3.4 弟弟選擇器
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><p>我是在div標簽上面的p標簽，我不會使用弟弟選擇器的樣式</p><div id="d1">我是一個div標簽</div><p>我是跟d1標簽同級的p標簽</p><p>我也是跟d1標簽同級的p標簽</p></body> </html> 弟弟選擇器-html?
p{color:blue; } #d1~p{color:red; } /*中間~是弟弟選擇器，div標簽后面同級的所有標簽設置為紅色*/ 弟弟選擇器-CSS運行結果：
3.4 屬性選擇器（就是某一類標簽有可能都有某個屬性 可以根據屬性設置標簽樣式）
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><p>我只是一個普通的p標簽</p><p class="cc1">我是一個p標簽(我的屬性是cc1)</p><p class="cc2">我是一個p標簽（我的屬性是cc2）</p><p class="cc2">我是一個p標簽（我的屬性是cc2)</p></body> </html> 屬性選擇器-html?
p{color:red; } p[class="cc1"]{color:green; } p[class="cc2"]{color:blue; } 屬性選擇器-CSS運行結果：
運行結果：
3.5 分組和嵌套
分組就是多個標簽可以使用同一組樣式（而類選擇器是一個標簽可以使用多個類選擇器的樣式）；
嵌套其實就是上面的組合選擇器（后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器）
<! DOCTYPE html> <html><head><meta charset="utf-8"><title>選擇器</title><link rel="stylesheet" href="index.css"> <!--樣式來自于index.css文件--></head><body><p>我只是一個普通的p標簽</p><div>我是一個普通的div標簽</div></body> </html> 分組-html?
p,div{color:red; } /*兩個標簽都是用這個樣式*/ 分組-CSS運行結果：
3.6 選擇器的優先級
找到一個標簽有很多很多選擇器可以使用樣式；
用標簽選擇器可以找到一個標簽，給它包裹一種樣式 使用ID選擇器又可以為同一種標簽包裹另一種樣式 那瀏覽器在渲染頁面時 應該用哪一種去呈現呢？這就涉及到選擇器的優先級
1. 內聯樣式（直接在標簽內借助style屬性寫的樣式）優先級最高；
2. 選擇器相同時（比如都是標簽選擇器，或者都是ID選擇器）誰靠近標簽 誰生效；
3.選擇器不一致時按照下面的優先級順序：
? ?內聯樣式（1000）> ID選擇器（100）>類選擇器（10）>標簽（元素）選擇器（1）
?
?權重計算永不進位（也就是只要出現ID選擇器，優先級低的無論出現多少次 都是使用ID選擇器的樣式）
?
轉載于:https://www.cnblogs.com/xuanxuanlove/p/10008864.html
總結
以上是生活随笔為你收集整理的前端 学习笔记day48 CSS介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [Hbase]Hbase章２ Hbase
- 下一篇： hihoCoder week17 最近公