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