1)css:頁面的美化 + 佈局控制
2)概念
(1)cascading style sheets: 層疊樣式表
(2)層疊:多個樣式可以作用在同一個html的元素上,同時生效
樣式表: 樣式
3)好處:
(1)功能比較強大
html屬性樣式比較少, css多
(2)解耦: 將內容的展示和樣式的控制分離
1:降低耦合度解耦.
2:讓分工協作更容易.
3:能提高開發效率.
跟設置不同主題一樣.
4)css和html結合的3種方式:
(1)內聯樣式(不推薦使用--》樣式控制和元素展示沒有分離)
在標籤內使用style指定css代碼:
鍵值對構成;
(2)內部樣式(比較常用)
head標籤內定義style標籤,style標籤的標籤體內容就是css的代碼:
選擇器{屬性}
(3)外部樣式(推薦)
1.定義css的資源文件
2.在head標籤內,定義link標籤,引入外部的資源文件
常規寫法:
<link rel="stylesheet" href="css/a.css">
瞭解一下另外一種寫法:
<style>
@import "css/a.css";
</style>
5)css語法
(1)格式:
選擇器{
對應的屬性名: 屬性值;
對應的屬性名: 屬性值;
對應的屬性名: 屬性值;
...
}
說明:
選擇器-->來篩選具有相似特徵的元素.
每一對屬性需要使用;隔開,最後一對屬性可以不加;
6)選擇器有哪些?
(1)基礎選擇器
1.id選擇器
語法:#id屬性值{}
id最好唯一
2.元素選擇器
語法:選擇具有相同標籤名稱的元素
標籤名稱
注意: id選擇器優先級高於元素選擇器
3.類選擇器
選擇具有相同的class屬性值的元素
語法: .class屬性值{}
優先級: id選擇器> 類選擇器 > 元素選擇器
(2)擴展選擇器
1.*: 通用選擇器,任意元素都被選中
2.並集選擇器:
選擇器1,選擇器2{
}
3.子選擇器: 去篩選選擇器1下的選擇器2
選擇器1 選擇器2{}
4.父選擇器: 控制的是div裏面的內容
div > p {
}
5.屬性選擇器: 選擇元素名稱,屬性名=屬性值的元素
語法: 元素名稱[屬性名="屬性值"]{
}
// input標籤,文本是輸入框的
input[type='text']{
border: 5px solid;
}
6.僞類選擇器: 選擇一些元素具有的狀態
語法: 元素:狀態{}
如: <a>
狀態:
link
visited
active: 正在訪問狀態
hover
控制鼠標: 放上去後, 點擊後, 訪問後
7)css中的屬性
(1)字體、文本
font-size: 字體大小
color: 文本顏色
text-align: 對齊方式
line-height: 行高
(2)背景
background: url("img/xx.png") no-repeat center;
(3)邊框
border: 設置邊框，符合屬性
(4)尺寸
width: 寬度
height: 高度
(5)盒子模型
margin: 外邊距
以我自己爲視角,設置我相對於外邊的距離.
margin: auto -->水平居中
padding: 內邊距
我內部還有個小框框,我相對於小框框。
默認情況下 內邊距 影響最終盒子的大小.
通過設置: box-sizing: border-box
float: 浮動
left：
right:
說明:
把每一個元素看成一個盒子;
對頁面佈局的控制
