45.css與選擇器
阿新 • • 發佈：2022-03-29
01 css的三種引入方式.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三種方式</title> <!--css 第一種引入方式: link--> <!--link專門用來引入外部的css檔案--> <link rel="stylesheet" href="mycss.css"> <!--方法二:style--> </head> <body> <!--方法三:行內式--> <p style="color: black">css的三種匯入方法</p> </body> </html>01 css的三種引入方式.html
02 基本選擇器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本選擇器</title> <style> /*標籤選擇器:標籤名*/ p{ color: red; } /*類選擇器:點+類名*/ .cl{ color02 基本選擇器.html: yellow; } /*id選擇器:#+id值*/ #d1{ color: green; } /*通用/全域性直譯器*/ *{ color: blue; } </style> </head> <body> <div id="d1">我是id選擇器 <p class="cl">我是類選擇器</p> </div> <div>我是通用/全域性選擇器</div> <p id="d2">我是標籤選擇器</p> </body> </html>
03 組合選擇器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*後代選擇器*/ div span{ color:red; } /*兒子選擇器*/ div>span{ color: aqua; } /*毗鄰選擇器:緊挨著下面一個*/ div+span{ color: yellow; } /*弟弟選擇器:同級別下面所有標籤*/ div~span{ color: brown; } </style> </head> <body> <span>div上面第一個span</span> <span>div上面第二個span</span> <div>div <span>div裡面第一個span(兒子選擇器)(後代選擇器)</span> <p>div裡面第一個span <span>div裡面第一個p裡面的span(後代選擇器)</span> </p> <span>div裡面最後一個span(兒子選擇器)(後代選擇器)</span> </div> <span>div下面的第一個span(弟弟選擇器)(毗鄰選擇器)</span> <span>div下面的第二個span(弟弟選擇器)</span> <span>div下面的第三個span(弟弟選擇器)</span> </body> </html>03 組合選擇器.html
04 屬性選擇器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>屬性選擇器</title> <style> /* 1.具有屬性名 2.具有某個屬性名及屬性值 3.具有某個屬性即屬性值某個標籤 */ /*找只要有hobby這個屬性名的所有標籤*/ /*background 背景顏色*/ [hobby]{ background-color: red; color: orange; } /*找input 具有屬性名hobby 並且值為jdb*/ [hobby="jdb"]{ background-color: pink; } /*找input 具有屬性名hobby 並且值為jdb的input標籤*/ input[hobby="jdb"]{ background-color: greenyellow; } /**/ </style> </head> <body> <input type="text" name="username" hobby="jdb"> <input type="text"> <span hobby="jdb">span</span> </body> </html>04 屬性選擇器.html
05 分組與巢狀.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分組與巢狀</title> <style> /**/ p{ color: greenyellow; } div{ color: greenyellow; } span{ color: greenyellow; } /*分組*/ div,span,p{ color: pink; } /*巢狀 多個不同的選擇器 可以組合使用*/ #d1,.cl,span{ color: orange; } </style> </head> <body> <p id="d1">p</p> <div class="cl">div</div> <span>span</span> </body> </html>05 分組與巢狀.html
06 偽類選擇器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style> /*連線態*/ a:link{ color: pink; } /*滑鼠懸浮態*/ a:hover{ color:red; } /*滑鼠點選態*/ a:active{ color: purple; } /*訪問過後的狀態*/ a:visited{ color:dimgrey; } /*input 框被點選的狀態,稱之為獲取焦點*/ input:focus{ background-color: orange; } /*input 滑鼠懸浮太*/ input:hover{ background-color: red; } </style> </head> <body> <a href="http://hao123.com">click me</a> <input type="text"> </body> </html>06 偽類選擇器.html
07 偽元素選擇器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>偽元素選擇器</title> <style> /*first-letter 第一個字母*/ p:first-letter{ font-size: 48px; color: gold; } p:before{ content: '$'; color: gold; } /*after在解決浮動的問題上 很有用*/ p:after{ content: "?"; color: red; } </style> </head> <body> <p>澳門最大線上賭場開業了,愛剪輯!</p> <p>澳門最大線上賭場開業了,愛剪輯!</p> <p>澳門最大線上賭場開業了,愛剪輯!</p> <p>澳門最大線上賭場開業了,愛剪輯!</p> </body> </html>07 偽元素選擇器.html
08 選擇器優先順序.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選擇器優先順序</title> <link rel="stylesheet" href="mycss.css"> <style> /* 1.選擇器相同的情況下:就近原則 2.選擇器不同的情況下: 行內 > id選擇器 > 類選擇器 > 標籤選擇器 */ #d1{ color: red; } .c1{ color: orange; } p{ color: greenyellow; } /**/ </style> </head> <body> <p id="d1" class="c1" style="color: blue">快要下課了,我想吃飯了!</p> </body> </html>08 選擇器優先順序.html
css 總結
前端 CSS 什麼是 CSS ? css就是用來調節標籤樣式的 層疊樣式表 css 的註釋 /*單行註釋*/ /* 多行註釋 多行註釋 */ /*這是部落格園首頁的樣式表*/ /*頂部導航條樣式開始*/ /*頂部導航條樣式結束*/ css 語法結構 選擇器(屬性1:值,屬性2:值,屬性3:值) css的三種引入方式 1.檔案匯入式(也是最規範的形式) 2.head 內 利用 style 標籤 內部直接書寫 CSS 程式碼 3.行內式(最不推介使用的) css 的流程 1.如何查詢標籤 2.如何設定樣式 如何查詢標籤 1.基本選擇器 2.組合選擇器 3.偽元素選擇器 4.偽類選擇器 偽類選擇器:對選擇器標籤進行了進一步的修飾 1.連線態:a:link 2.滑鼠懸浮態:a:hover 3.滑鼠點選態:a:active 4.訪問過後狀態:a:visited 一個標籤都應該有的屬性 1.id 唯一標識 2.class 類屬性,可以多繼承 3.style 設計樣式css總結
mycss.css
p {
color:deeppink;
}
mycss.css