2021-02-04 CSS學習總結（一）
阿新 • • 發佈：2021-02-05
技術標籤：css
一、什麼是CSS
CSS(Cascading Style Sheets)層疊樣式表：用來表現HTML樣式的一種語言。
CSS的基本結構：選擇器，宣告塊。
二、CSS的三種引入形式
1、直接新增
該種形式的優先順序最高，但影響範圍也最小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="background-color:顏色;"> 2、頁內樣表式
優先順序中等，影響範圍只能影響本頁面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
/*在此處新增style標記
<style>
div
{
background-color:顏色;
}
</style>
*/
</head>
<body>
</body>
</html 3、獨立樣表式
優先順序與頁內樣式表相同。但是影響範圍廣，可以影響多個頁面，只要引入CSS便會被影響。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS檔名.css" />//通過link標記來引入CSS檔案
</head>
<body>
</body>
</html>
在CSS檔案內
div
{
background-color:顏色;
}
三、CSS選擇器
在CSS中選擇器是用來選擇要新增樣式的元素。不同的選擇器新增樣式的方式不同。
1、ID選擇器：一個元素只有一個唯一的一個ID值。
例如：
<div id="id值"></div>
引用時：#id值{}
2、元素選擇器：元素通常指HTML中的元素。
例如：div
引用時：div{}
3、類選擇器：為了突出某些內容，會在元素中加入class屬性。
例如：
<div class="phone"></div>
引用時：.phone{}
4、 屬性選擇器：屬性是指元素中所包含的屬性。
例如：
<input type="text" name="user" >中的name是一個屬性
引用時：[name=‘user’]{}
5、子代選擇器：元素只能選擇自己的孩子，不能隔代選擇。
例如：
<div><ul></ul></div>
引用時：div>ul{}
6、 後代選擇器：元素可以選擇任意的子元素。
例如：
<form><div><ul></ul></div></form>
引用時：form ul{}
7、 分組選擇器：可以選擇多個不同的元素。
例如：
<p><div></div></p>
引用時：p,div{}
四、CSS的優先順序
在css中精確度越高的優先順序越高。
直接新增的方式精確度最高優先順序也最高，因此不會被其他兩種方式所覆蓋。
而頁內樣式表和獨立樣式表的優先順序相同，在頁面中根據載入順序先載入的會被後加載的所覆蓋。
在選擇器中：id選擇器優先順序>類選擇器優先順序>元素選擇器優先順序