CSS 頁面美化和布局控制
概念：
Cascading Style Sheets 層疊樣式表
- 層疊：多個(gè)樣式可以作用在同一個(gè)html元素上，同時(shí)生效
好處
- 功能強(qiáng)大
- 將內(nèi)容展示和樣式控制分離
- 降低耦合度
- 讓分工協(xié)作更容易
- 可以提高開發(fā)效率
CSS使用
CSS與html結(jié)合方式
- 內(nèi)聯(lián)樣式
- 在標(biāo)簽內(nèi)使用style屬性指定css代碼
- 內(nèi)部樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<!--內(nèi)部樣式
* 在head標(biāo)簽內(nèi)，定義style標(biāo)簽力崇，style標(biāo)簽的標(biāo)簽體內(nèi)容就是css代碼
-->
<div>Hello Css</div>
</body>
</html>
- 外部樣式
- 在head標(biāo)簽內(nèi) 定義link標(biāo)簽，引入外部的資源文件
a.css
div {
color: lightgreen;
}
* head中l(wèi)ink標(biāo)簽引入
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/a.css"/>
</head>
注意：
- 1步悠，2内贮，3 三種方式 css作用范圍越來越大
CSS語法
格式
選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
注意： 每一對(duì)屬性要用,隔開宣赔，最后一對(duì)屬性可以不加惭笑；
選擇器
分類
基礎(chǔ)選擇器
- id選擇器 選擇具體的id屬性值的元素
* 語法：#id屬性值{}
<style>
#div1{
color:red;
}
</style>
<div id="div1">永不妥協(xié)</div>
- 元素選擇器
選擇具有相同標(biāo)簽名稱的元素
- 語法：標(biāo)簽名稱{}
div {
color: green;
}
注意 id選擇器優(yōu)先級(jí)高于元素選擇器
- 類選擇器
選擇具有相同的class屬性值的元素
- 語法 .class屬性值{}
.cls1 {
color: blue;
}
<p class="cls1">道不同不相為謀</p>
注意：類選擇器優(yōu)先級(jí)高于元素選擇器
以上選擇器中 id選擇器優(yōu)先級(jí)>類選擇器優(yōu)先級(jí)>元素選擇器優(yōu)先級(jí)
擴(kuò)展選擇器
- 選擇所有元素：
- 語法 *{}
通用選擇器侣姆，會(huì)選擇所有元素
- 并集選擇器
- 語法 選擇器1,選擇器2{}
- 子選擇器 篩選選擇器1下的選擇器2
- 語法 選擇器1 選擇器2{}
- 父選擇器 篩選選擇器2上的父元素選擇器1
- 語法 選擇器1>選擇器2{}
- 屬性選擇器 選擇元素名稱,屬性名=屬性值的元素
- 語法 元素名稱[屬性名=‘屬性值’]{}
<input type="text">
/*屬性選擇器*/
input[type='text'] {
border: 1px solid red;
}
- 偽類選擇器 選擇一些元素具有的狀態(tài)
- 語法：元素:狀態(tài){}
a:link {
color: deeppink;
}
a:hover {
color: blueviolet;
}
a:active {
color: greenyellow;
}
a:visited {
color: black;
}
<a href="#">去死吧</a>
屬性(常見)
- 字體 文本
- font-size:字體大小
- color:文本顏色
- text-align:文本對(duì)齊方式
- line-height:行高
- 背景
- background 背景 復(fù)合屬性
- 邊框 輪廓
- border:邊框 復(fù)合屬性
- 尺寸
- 寬度:width
- 高度:heigh
- 盒子模型 控制布局
- margin:外邊距
- padding:內(nèi)邊距
- 默認(rèn)情況下 內(nèi)邊距會(huì)影響盒子的大小
