設定CSS樣式的方式
-
行內樣式（行內樣式）
- 在標簽內通過style屬性來設定元素的樣式
<p style="color:red;font-size:60px"><!--設定字體顏色和大小--> CSS設定樣式 </p>問題：使用行內樣式，只能對一個標簽生效
? 復用程度不高，維護起來比較麻煩
-
內部樣式表
- 將樣式撰寫到head標簽中的style標簽里，然后通過css選擇器選中元素，并為其設定各種樣式，
<style> p{ /*標簽選擇器*/ color:green; font-size:50px; } </style>好處：可同時為多個標簽設定樣式，更加方便對樣式進行復用
問題：內部樣式表只能對一個網頁起作用，不能跨頁面復用
-
外部樣式表(最佳實作)
-
可以將css樣式撰寫到外部的css檔案中
然后通過link標簽來引入到對應的網頁中
<head> <!--在head標簽中撰寫--> <link rel="stylesheet" href="https://www.cnblogs.com/codehan/p/style.css"> </head>好處 ：樣式可以在不同頁面之間進行復用
? 可以使用到瀏覽器的快取機制，加快網頁的加載速度，提高用戶體驗，
-
CSS基本語法
css中的注釋
<style>
/*
注釋內容
*/
</style>
宣告塊
- 宣告塊：通過宣告塊來指定為元素設定的樣式，是一個名值對 ---名和值之間以 : 連接，以 ; 結尾
選擇器
- 定義：通過選擇器可以選中頁面中的指定元素
常用選擇器
-
元素選擇器
- 作用：根據標簽名選中指定的元素
- 語法：標簽名{ }
- 例：p{ } 、div{ } 、h1{ }
-
id選擇器
- 作用：根據元素的id屬性值選中一個元素
- 語法：#id屬性值{}
- 例 #box{ }、#red{ }
-
類選擇器
- 作用：根據元素的class屬性值選中一組元素
- 語法： .class屬性值{ }
- 例 .box{ } 、.bottom{ }
- 補充：class是一個標簽的屬性，和id類似，不同的是class可以重復使用,可以為同個元素指定多個class屬性
-
適配選擇器
- 作用：選中頁面中的所有元素
- 語法：*{ }
復合選擇器
-
交集選擇器
-
作用：選中同時符合多個條件的元素
-
語法：選擇器1選擇器2選擇器3...n { }
選擇器之間沒有空格
p.box.num{ color: blue; font-size: 50px; } -
注：交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭
-
-
并集選擇器
- 作用：同時選擇多個選擇器對應的元素
- 語法：選擇器1，選擇器2，選擇器3...選擇器n{ }
- 例 #box,p,h1,div,span{}
關系選擇器
-
相關概念
-
父元素：直接包含子元素的元素
-
子元素：直接被父元素包含的元素
-
祖先元素：直接或間接包含后代元素
? 一個元素的父元素也是他的祖先元素
-
后代元素：直接或間接被祖先元素包含的元素
? 子元素也是后代元素
-
兄弟元素：擁有相同父元素的元素
-
- 子元素選擇器
- 作用：選中指定父元素的指定子元素
- 語法:父元素>子元素
- 后代元素選擇器
- 作用：選中選中指定元素內的指定后代元素
- 語法：祖先 后代
- 兄弟選擇器
- 作用 ①：選擇下一個兄弟
- 語法：前一個+后一個
- 作用 ②：選擇下邊所有的兄弟
- 語法：兄~弟
屬性選擇器
-
語法：[屬性名] 選擇含有指定屬性的元素
-
[屬性名=屬性值] 選擇含有指定屬性和屬性值的元素
-
[屬性名^=屬性值] 選擇屬性值以指定值開頭的元素
-
[屬性名$=屬性值] 選擇屬性值以指定值結尾的元素
-
[屬性名*=屬性值] 選擇屬性值中含有某值的元素
偽類選擇器
-
偽類（不存在的類，特殊的類）
-
說明：描述一個元素的特殊狀態
-
一般使用 ：開頭
-
:first-child 第一個子元素
:last-child 最后一個子元素
:nth-child(n) 選中第n個子元素
? 特殊值：n 第n個 n的范圍0~正無窮
? even/2n選中偶數位的元素
? odd/2n+1 選中奇數位的元素
-
:first-of-type
:last-of-type
:nth-of-type()
這幾個偽類功能與上面的類似，不同點是他們是在同型別元素中進行排序
-
: not() 否定偽類，將符合條件的元素從選擇器中去除
-
a標簽特有的偽類
- :link 用來表示沒訪問過的鏈接(正常的鏈接)
- ：visited 表示訪問過的鏈接 （由于隱私原因，visited這個偽類只能修改鏈接的顏色
- ：hover 表示滑鼠移入的狀態
- ：active用來表示滑鼠點擊
偽元素選擇器
-
偽元素：表示頁面中一些特殊的并不真實存在的元素（特殊的位置）
-
偽元素使用 ：：開頭
-
：：first-letter 表示第一個字母、
-
：：first-line 表示第一行
-
：：selection 表示選中的內容
-
：：before 元素的開始
：：after 元素的最后 必須結合content屬性來使用
<style> p::before{ content:"【"; color: saddlebrown; } p::after{ content:"】"; } </style>
選擇器的權重及樣式繼承
樣式的繼承
我們為一個元素設定樣式同時也會應用到它的后代元素上，發生在祖先元素和后代元素之間
注：并不是所有的樣式都會被繼承，比如 背景相關的布局
選擇器的權重
樣式沖突：通過不同的選擇器選中相同的元素，并且為相同的樣式設定不同的值時
行內樣式 1,0,0,0
id選擇器 0,1,0,0
類和偽類選擇器 0,0,1,0
元素選擇器 0,0,0,1
通配符選擇器 0,0,0,0
繼承的樣式 沒有優先級
-
優先級計算相同，此時優先使用靠下的樣式
-
比較優先級時，需將所有的選擇器的優先級相加，最后優先級越高，則越優先顯示
-
分組選擇器單獨計算
-
選擇器的累加不會超過其最大的數量級（類選擇器再高也不會超過id選擇器）
注：可以在某一個樣式后添加！important 則此樣式會獲得最高的優先級，甚至超過行內樣式（一般不會使用）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/276118.html
標籤：Html/Css