一.css是什麼
css(cascading style sheet)定義如何顯示html元素,給html設定樣式,顯得更為美觀.
二.css的引入方式
1.行內引入
在標籤中新增乙個style是屬性,屬性值就是設定的樣式
2.內接引入
在head標籤中新增乙個style標籤,在標籤內寫要設定的樣式
3.外界引入
在head標籤中新增link標籤,href中指定要匯入的css樣式檔案路徑,在css檔案中寫樣式
三.css基礎選擇器
1.標籤選擇器
直接寫標籤名{} eg:div{}
2.id選擇器
#id{}
3.class選擇器
.class{}
四.高階選擇器
1.子類選擇器
div>p{},選擇的是前一級標籤div的子標籤p
2.後代選擇器
div p{},選擇的是div標籤中的後代子標籤p
3.並集選擇器
div,p{},選擇多個標籤,用逗號隔開
4.交集選擇器
div.class{},選擇div標籤下的class類標籤
div#id{},選擇div標籤下的id標籤
5.通用選擇器
*{},選擇所有的標籤
6.屬性選擇器
[屬性名] 帶這個屬性名的標籤
[屬性名="匹配的屬性值"] 符合匹配屬性的標籤
[屬性名^="匹配的屬性值"] 符合以這個屬性值開頭的標籤
[屬性名$="匹配的屬性值"] 符合以這個屬性值結尾的標籤
[屬性名*="匹配的屬性值"] 包含這個屬性值的標籤
7.偽類選擇器
a標籤中的四種狀態:
未被訪問過的鏈結 a:link{}
訪問過的鏈結 a:visited{}
滑鼠懸浮鏈結 a:hover{}
滑鼠點選鏈結 a:active{}
ul標籤中的偽類選擇器
選擇第乙個孩子 ul li:first-child{}
選擇最後乙個孩子 ul li:last-child{}
選擇指定的孩子 ul li:nth-child(n){}
p標籤中方的偽類選擇器
選擇第乙個字元 p:first-letter{}
在標籤前新增乙個內容 p:before{}
在標籤後新增乙個內瓤 p:after{}
五.選擇器的優先順序
1.繼承性:子標籤可以繼承父標籤的樣式
2.層疊性:(選擇器權重一樣的時候)後新增的樣式會覆蓋前邊的樣式
3.權重:!important>內聯》id>類》標籤
初識css與css選擇器
初識css css的全稱為cascading style sheet 層疊樣式表，它的主要作用是為我們的html標籤新增各種各樣的樣式和修飾效果。這裡我總結的css屬於css2.0的知識點，css3.0的知識我打算在後面的文章裡面總結。其實html css部分的知識點總共站前端的知識總量的1 2 但...
初識CSS 類選擇器
物以類聚人以群分，網頁中的元素也是一樣的 在頁面中總有很多元素擁有一模一樣的外觀，比如 一樣的大小，同樣的顏色 那麼我們如果繼續使用id選擇器乙個乙個去設定樣式就會很麻煩 這個時候我們可以選擇類選擇器來寫樣式 如果想給兩個h1標籤同樣適用於一種樣式的話，我們用類選擇，給兩個h1標籤新增class r...
初識CSS,基礎選擇器
css全稱 cascading style sheet 層疊樣式表 html 規定網頁上有什麼內容。css 規定網頁上這些內容的樣式。使用 html寫樣式的缺點 1.比較臃腫。2.可讀性比較差。3.不便於維護。4.對搜尋引擎不友好，搜尋引擎更關心內容 使用 css寫樣式的優點 1.比較簡潔 2.可讀...