CSS
概述
概念
Cascading Style Sheets 層疊樣式表
- 層疊：多個樣式可以作用在同一個html的元素上，同時生效
優點
- 功能強大
- 將內容的展示和樣式的控制分離
- 降低耦合度
- 讓分工協作更容易
- 提高開發效率
CSS的使用
方式一：內聯樣式
- 在標籤內使用Style屬性指定CSS代碼
- 不推薦使用，這裏耦合性依然很高
<div style="color: red">Hello</div>
方式二：內部樣式
-
在
<head>標籤內，定義<style>標籤，<style>標籤的標籤體內容就是CSS代碼 -
示例代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS和HTML的結合-方式二</title> <!-- 內部樣式 --> <style> div { color: blue; } </style> </head> <body> <div>Hello css</div> </body> </html>
方式三：外部樣式
- 定義CSS的資源文件
- 在head標籤內，定義link標籤，引入外部資源文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS和HTML的結合-方式三</title>
<!-- 外部樣式 -->
<link rel="stylesheet" href="css/a.css" >
</head>
<body>
<div>Hello css</div>
</body>
</html>
/*a.css文件*/
div {
color: green;
}
注意
- 內聯樣式、內部樣式和外部樣式，css作用範圍越來越大
- 內聯樣式不常用，後期常用內部樣式和外部樣式
CSS語法格式
-
格式
選擇器 {
/* 這是註釋 */
屬性名1:屬性值1;
屬性名2:屬性值2;
屬性名3:屬性值3;
......
}
- 選擇器篩選具有相似特徵的元素
- 注意
- 每一對屬性需要使用分號隔開
- 最後一對屬性可以不加分號
選擇器
基礎選擇器
- id選擇器：選擇具體的ID屬性值的元素，建議在HTML中ID值唯一
- 元素選擇器：選擇具有相同標籤名稱的元素
- ID選擇器優先級高於元素選擇器
- 類選擇器：選擇具有相同class屬性值
- 類選擇器優先級高於元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基礎選擇器</title>
<style>
#IDSTest {
color: red;
}
div {
color: green;
}
.CSTest {
color: blue;
}
</style>
</head>
<body>
<!-- ID選擇器 -->
<div id="IDSTest">ID選擇器測試一</div>
<div>ID選擇器測試二</div>
<!-- 元素選擇器 -->
<div>元素選擇器測試</div>
<!-- 類選擇器 -->
<p class="CSTest">p標籤測試一</p>
<p class="CSTest">p標籤測試二</p>
<p class="CSTest">p標籤測試三</p>
</body>
</html>
擴展選擇器
-
選擇所有元素
語法：* {}
-
並集選擇器
語法：選擇器1, 選擇器2 {}
-
後代選擇器：篩選選擇器1元素下的選擇器2元素
語法：選擇器1 選擇器2 {}
-
嫡長子(大霧)選擇器：篩選選擇器1的直接的子元素選擇器2
語法：選擇器1 > 選擇器2 {}
-
屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
語法：元素名稱[ 屬性名=屬性值 ] {}
-
僞類選擇器：選擇一些元素所具有的狀態
語法：元素: 狀態 {}
如：
<a>不同狀態- link 初始狀態
- over 懸浮狀態
- active 點擊狀態
- visited 點擊以後狀態
屬性
字體，文本
- font-size：字體大小
- color：文本顏色
- text-align：文本的對齊方式
- line-height：行高
背景
- background：可以使用圖片也可以使用純色
- 例如：background : url(img/pic.png) no-repeat center;
邊框
-
border：設置邊框（複合屬性）
用法：border: 邊框粗細 邊框樣式 邊框顏色;
尺寸
- height，width：尺寸大小
盒子模型
- margin：外邊距 可以設置四個方向上的外邊距大小
- padding：內邊距 可以設置四個方向上的內邊距大小
- 默認情況下，內邊距會影響盒子的大小
- box-sizing: border-box 設置盒子的屬性，讓width和height就是最終盒子的大小
- float：浮動
- left 左浮動
- right 右浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div {
border: 1px solid red;
width: 100px;
}
.div1 {
width: 100px;
height: 100px;
}
.div2 {
width: 200px;
height: 200px;
padding: 50px;
/*
設置合資的屬性，讓width和height就是最終盒子的大小
*/
box-sizing: border-box;
}
.div3 {
float: left;
}
.div4 {
float: left;
}.div5 {
float: right;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1" ></div>
</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">ccccc</div>
</body>
</html>