當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端学习笔记day48 CSS介绍

發布時間：2025/4/9 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了前端学习笔记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"> </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"> </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"> </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})

.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"> </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 兒子選擇器

p{color:blue; } #d1>p{color:red; } /*中間>是兒子選擇器，僅僅div標簽中的兒子標簽設置為紅色*/ 兒子選擇器-CSS

運行結果：

3.3.3 毗鄰選擇器

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"> </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"> </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

運行結果：

<! DOCTYPE html> <html><head><meta charset="utf-8"><title>選擇器</title><link rel="stylesheet" href="index.css"> </head><body><p xx="xuanxuan">我是一個p標簽</p><p xx="xixi">我也是一個p標簽</p><p cc="haha">我還是一個p標簽</p><p>我又是一個p標簽</p></body> </html> 屬性選擇器-html p{color:lightpink; } [xx^="x"]{color:green; } /*標簽內有xx屬性的且以x開頭的顏色設置為green*/ [xx$="a"]{color:red; } 屬性選擇器-CSS

運行結果：

3.5 分組和嵌套

分組就是多個標簽可以使用同一組樣式（而類選擇器是一個標簽可以使用多個類選擇器的樣式）；

嵌套其實就是上面的組合選擇器（后代選擇器，兒子選擇器，毗鄰選擇器，弟弟選擇器）

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 最近公

HTML

前端 学习笔记day48 CSS介绍

1. CSS-----層疊樣式表

2. CSS注釋 /**/

3. 選擇器（其實就是對哪一個標簽使用樣式 這個標簽就是選擇器）

3.1 基本選擇器

3.1.1 標簽選擇器（其實就是直接標簽名 寫樣式即可一般用于該類標簽的通用樣式設置）

3.1.2 ID選擇器（為特定的選擇器設置特定的樣式--因為每一個標簽都有一個唯一標識的id屬性）

?3.1.3 類選擇器（一個標簽使用了哪些樣式的類 可以使用多個類）

3.2 通用選擇器(*{color:red})

3.3 組合選擇器?

?3.3.1 后代選擇器

3.3.2 兒子選擇器

3.3.3 毗鄰選擇器

3.3.4 弟弟選擇器

3.4 屬性選擇器（就是某一類標簽有可能都有某個屬性 可以根據屬性設置標簽樣式）

3.5 分組和嵌套

3.6 選擇器的優先級

總結

前端学习笔记day48 CSS介绍

3. 選擇器（其實就是對哪一個標簽使用樣式這個標簽就是選擇器）

3.1.1 標簽選擇器（其實就是直接標簽名寫樣式即可一般用于該類標簽的通用樣式設置）

?3.1.3 類選擇器（一個標簽使用了哪些樣式的類可以使用多個類）

3.4 屬性選擇器（就是某一類標簽有可能都有某個屬性可以根據屬性設置標簽樣式）