CSS相關查閱檔案：點擊此處下載檔案
CSS 技術介紹
CSS 是「層疊樣式表單」，是用于(增強)控制網頁樣式并允許將樣式資訊與網頁內容分離的一種標記性語言，
CSS 語法規則
選擇器：瀏覽器根據“選擇器”決定受 CSS 樣式影響的 HTML 元素（標簽），
屬性 (property): 是你要改變的樣式名，并且每個屬性都有一個值，屬性和值被冒號分開，并由花括號包圍，這樣就組成了一個完整的樣式宣告（declaration），例如：
p {color: blue}
多個宣告：如果要定義不止一個宣告，則需要用分號將每個宣告分開，雖然最后一條宣告的最后可以不加分號(但盡量在每條宣告的末尾都加上分號)
例如：
p{
color:red;
font-size:30px;
}
注：一般每行只描述一個屬性
CSS 注釋：
/*注釋內容*/
CSS 和 HTML 的結合方式
第一種：
在標簽的 style 屬性上設定”key:value value;”，修改標簽樣式，
例：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式為：邊框 1 個像素，實線，紅色，
<div style="border: 1px solid red;">div 標簽 1</div>
<div style="border: 1px solid red;">div 標簽 2</div>
<span style="border: 1px solid red;">span 標簽 1</span>
<span style="border: 1px solid red;">span 標簽 2</span>
效果：
--style 標簽專門用來定義 css 樣式代碼
我們通過添加style屬性來給給原來的標簽添加樣式：
通過使用border來添加了邊框，然后1px代表1像素，solid代表是實線，red代表是紅色
CSS的邊框樣式可以參考鏈接：CSS邊框樣式
問題：這種方式的缺點？
- 如果標簽多了，樣式多了，代碼量非常龐大，
- 可讀性非常差，
- Css 代碼沒什么復用性可方言，
第二種
在 head 標簽中，使用 style 標簽來定義各種自己需要的 css 樣式，格式如下：
xxx {
Key : value value; }
例：分別定義兩個 div、span 標簽，分別修改每個 div 標簽的樣式為：邊框 1 個像素，實線，紅色，
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border: 1px solid red; }
span{
border: 1px solid red; }
</style>
</head>
<body>
<div>div 標簽 1</div>
<div>div 標簽 2</div>
<span>span 標簽 1</span>
<span>span 標簽 2</span>
</body>
</html>
這次我們是在head標簽內就添加style標簽來實作我們想要的CSS樣式
我們提前設定好對哪些標簽添加CSS樣式，然后后面不用再添加style屬性就可以實作我們想要的CSS樣式
這種方式的缺點，
1.只能在同一頁面內復用代碼，不能在多個頁面中復用 css 代碼，
2.維護起來不方便，實際的專案中會有成千上萬的頁面，要到每個頁面中去修改，作業量太大了，
第三種
把 css 樣式寫成一個單獨的 css 檔案，再通過 link 標簽引入即可復用，
使用 html 的<link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/kohler21/archive/2022/01/26/styles.css" />標簽 匯入 css 樣式檔案，
css 檔案內容（命名為1.css）：
div{
border: 1px solid yellow; }
span{
border: 1px solid red; }
html檔案內容：
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--link 標簽專門用來引入 css 樣式代碼-->
<link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/kohler21/archive/2022/01/26/1.css"/>
</head>
<body>
<div>div 標簽 1</div>
<div>div 標簽 2</div>
<span>span 標簽 1</span>
<span>span 標簽 2</span>
</body>
</html>
CSS 選擇器
標簽名選擇器
標簽名選擇器的格式是：
標簽名{
屬性：值; }
標簽名選擇器，可以決定哪些標簽被動的使用這個樣式，
例：在所有 div 標簽上修改字體顏色為藍色，字體大小 30 個像素，邊框為 1 像素黃色實線，并且修改所有 span 標簽的字體顏色為黃色，字體大小 20 個像素，邊框為 5 像素藍色虛線，
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 選擇器</title>
<style type="text/css"> div{
border: 1px solid yellow; color: blue;
font-size: 30px; }
span{
border: 5px dashed blue; color: yellow;
font-size: 20px; }
</style>
</head>
<body>
<div>div 標簽 1</div>
<div>div 標簽 2</div>
<span>span 標簽 1</span>
<span>span 標簽 2</span>
</body>
</html>
效果：
在這里我們針對div標簽邊框設定的是
- 標簽的邊框為1像素的黃色實線
- 標簽的字體設定的是藍色
- 標簽的字體的大小為30個像素
對span標簽設定的是 - 標簽的邊框為5像素的藍色虛線
- 標簽的字體為黃色
- 標簽的字體大小為20個像素
id 選擇器
id 選擇器的格式是：
#id 屬性值{
屬性：值; }
id 選擇器，可以讓我們通過 id 屬性選擇性的去使用這個樣式，
例：分別定義兩個 div 標簽，
第一個 div 標簽定義 id 為 id001 ，然后根據 id 屬性定義 css 樣式修改字體顏色為藍色，字體大小 30 個像素，邊框為 1 像素黃色實線，
第二個 div 標簽定義 id 為 id002 ，然后根據 id 屬性定義 css 樣式 修改的字體顏色為紅色，字體大小 20 個像素，邊框為 5 像素藍色點線，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 選擇器</title>
<style type="text/css">
#id001 {
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 20px;
border: 5px blue dotted ; }
</style>
</head>
<body>
<div id="id002">div 標簽 1</div>
<div id="id001">div 標簽 2</div>
</body>
</html>
效果：
這次我們是對兩個div標簽進行設定
兩個都是div標簽
但是我們對兩個div設定了id，兩個id是不一樣的
就類似于給起了個名字 名字是不相同的
對id為id001的我們設定:
- 標簽的邊框為1像素黃色實線
- 標簽的字體為藍色
- 標簽的字體大小為30像素
對id為id002的我們設定: - 標簽的邊框為5像素藍色虛線
- 標簽的字體為紅色
- 標簽的字體大小為20像素
class 選擇器（類選擇器）
class 型別選擇器的格式是：
.class 屬性值
{
屬性：值;
}
class 型別選擇器，可以通過 class 屬性有效的選擇性地去使用這個樣式，
例：
- 修改 class 屬性值為 class01 的 span 或 div 標簽，字體顏色為藍色，字體大小 30 個像素，邊框為 1 像素黃色實線，
- 修改 class 屬性值為 class02 的 div 標簽，字體顏色為灰色，字體大小 26 個像素，邊框為 1 像素紅色實線，
<html>
<head>
<meta charset="UTF-8">
<title>class 型別選擇器</title>
<style type="text/css">
.class01{ color: blue;
font-size: 30px;
border: 1px solid yellow; }
.class02{ color: grey;
font-size: 26px; border: 1px solid red;
}
</style>
</head>
<body>
<div >div 標簽 class01</div>
<div >div 標簽</div>
<span >span 標簽 class01</span>
<span>span 標簽 2</span>
</body>
</html>
效果：
我們顯示定義了兩個class：class01和class02
class01:
- 標簽字體顏色為藍色
- 標簽字體大小為30個像素
- 標簽的邊框為一個像素的黃色實線
class02： - 標簽字體顏色為灰色
- 標簽字體大小為26個像素
- 標簽的邊框為一個像素的紅色實線
然后我們再標簽中使用class
我們在第一個和第三個標簽中使用class02在第二個標簽中使用class01第四個標簽不使用class
然后我們就利用class的選擇來實作了我們想要的效果
組合選擇器
組合選擇器的格式是：
選擇器 1，選擇器 2，選擇器 n{
屬性：值; }
組合選擇器可以讓多個選擇器共用同一個 css 樣式代碼，
例：
我們現有如下標簽 ：
<div >div 標簽 class01</div> <br />
<span id="id01">span 標簽</span> <br />
<div>div 標簽</div> <br />
<div>div 標簽 id01</div> <br />
修改 的div 標簽 和 id="id01" 所有的 span 標簽，字體顏色為藍色，字體大小 20 個像素，邊框為 1 像素黃色實線，
<html>
<head>
<meta charset="UTF-8">
<title>class 型別選擇器</title>
<style type="text/css">
.class01 , #id01{ color: blue; font-size: 20px;
border: 1px red solid; }
</style>
</head>
<body>
<!--
需求 1：修改 的 div 標簽 和 id="id01" 所有的 span 標簽，字體顏色為藍色，字體大小 20 個像素，邊框為 1 像素黃色實線，
-->
<div id="id01">div 標簽 class01</div> <br />
<span >span 標簽</span> <br />
<div>div 標簽</div> <br />
<div>div 標簽 id01</div> <br />
</body>
</html>
效果：
在這里我們是先定義了一個組合：class01，id01
這個組合共同使用我們定義的css樣式：
- 標簽的字體為藍色
- 標簽的字體大小為20個像素
- 標簽的邊框為一個像素的紅色實線
然后我們在下面的標簽中使用
第一個標簽設定id=id01
第二個標簽設定class=class01
剩余標簽不設定
然后我們就得到了如圖所示的效果
這個組合選擇器就是把前面的class和id結合起來，使得我們能夠降低代碼的冗余，盡可能提高我們的效率
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/421656.html
標籤：其他