css引入方式
- style標籤
- link標籤 引入css文件
- 行內style屬性
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />
css基本語法結構
- css基本語法結構
- 選擇器{
- 屬性：屬性值；
- 屬性：屬性值
}
選擇器
- 元素選擇器 p div hx
- class選擇器 .class名
- id選擇器 #id名 儘量不用
- 並集選擇器 選擇器,選擇器,… 同時使用多個選擇器
- 交集選擇器 選擇器選擇器 選擇同時滿足多個選擇器的元素
- 後代選擇器 選擇器 選擇器 選取包含在某些元素中的元素（層次關係）
- 子代選擇器 選擇器>選擇器 同上 必須緊鄰
- 屬性選擇器 [屬性][屬性=“屬性值”] 通過屬性選擇 通常和交集一起使用
- 全局選擇器 * 同樣屬性設置 會被其他選擇器的修飾覆蓋
- 僞類選擇器 :xxx 選擇元素狀態或元素的關係 通常和交集一起使用
- :active 點擊狀態
- :hover 鼠標懸浮狀態
常用屬性
color 文字顏色 英文 rgb值 #xxxxxx
font-size 字體大小 英文 像素
font-family 字體類型
text-align 文字對齊方式 可對內聯元素生效
text-decoration 文字修飾 上中下線
width 寬 像素 比例 可隨意繼承父元素
height 高 同上 需要html和body 或在需要設置高度的塊上定高度
line-height 行高 把塊中的文字水平居中 行高和塊高設置相同
background-color 背景顏色
background 背景圖片 url(img/test.png)
background-repeat 背景圖片重複方式
list-style li上的標記改變
display 控制元素顯示方式
none 不顯示
block 塊
inline 內聯 不能設置寬高
inline-block 內聯塊 可以設置寬高
border 可以使用複合屬性 1px solid black
可以分開設置
border-top
border-bottom
border-left
border-right
border-radius 邊框圓角
padding 內部填充（邊框和內容之間的空間） 可以使用複合屬性
10px 四邊
10px 20px 上下 左右
10px 20px 30px 上 左右 下
10px 20px 30px 40px 上 右 下 左
可以分開設置
同上
margin 外邊距（元素間的間距）可以使用複合屬性 同上
複合屬性時 0px auto 可以使塊左右居中
可以分開設置
同上
overflow 塊嵌套時 排布超過父元素邊界
hidden 隱藏
float 元素漂浮（不要與其他元素產生衝突）
left
right
cursor 鼠標類型
pointer 手
position 定位
static 默認文檔流 塊從上到下 內聯從左到右
relative 相對定位 本身不脫離文檔流 以自身位置進行偏移
absolute 絕對定位 脫離文檔流 以頁面位置進行偏移
fixed 固定定位 脫離文檔流 以頁面位置進行偏移 並固定在此處
top 向下偏移 負值反方向
left 向右偏移
z-index 一般使用在有定位的屬性上
數大的顯示在前
text-align對span不生效的原因
