1. 背景相關屬性
1. 背景顏色
屬性 : background-color
取值 : 顏色值
2. 背景圖片
屬性 : background-image
取值 : url('')
3. 背景圖片相關屬性
1. 背景圖片重復平鋪顯示
屬性 : background-repeat
取值 :
1. repeat (默認值)
當圖片尺寸小於元素尺寸,會自動沿水平和垂直方向
重復平鋪,直到鋪滿元素
2. repeat-x
設置圖片沿水平方向平鋪
3. repeat-y
設置圖片沿垂直方向平鋪
4. no-repeat
設置圖片不重復平鋪
2. 背景圖片的尺寸
屬性 : background-size
取值 :
1. 像素值
取兩個值,分別表示背景圖片的寬和高;
取一個值,設置背景圖片寬度,高度等比縮放
2. 百分比
百分比取一個值或兩個值等同於像素的取值情況
百分比參照當前元素的寬高計算
---------------
3. cover
覆蓋,等比拉伸圖片至足夠大,完全覆蓋元素
4. contain
包含,等比拉伸圖片至剛好被元素容納的最大尺寸
3. 背景圖片的位置
屬性 : background-position
取值 :
1. 像素值 x y
x表示背景圖片水平偏移距離,正值表示向右
y表示背景圖片垂直偏移距離,正值表示向下
默認背景圖片從元素左上角顯示
2. 百分比
0% 0% 顯示在左上角
50% 50% 顯示在元素中間位置
100% 100% 顯示在右下角
3. 方位值
水平方向 : left center right
垂直方向 : top center bottom
設置方位值時,如果缺少某個方向,默認為center
使用場景 :
"精靈圖"技術,網頁開發過程中為了節省資源,減少網絡請求,
通常會將一組小圖標以一張圖片的形式存儲,通過一次
網絡請求加載圖片,配合background-position控制
圖標切換顯示
4. 背景屬性簡寫:
屬性 : background
取值 : color url() repeat position;
et :
background:pink url(northStar.jpg) no-repeat 10px 10px;
注意 :
background-size 單獨設置
2. 文本與字體相關屬性
1. 字體相關
1. 字體大小
屬性 : font-size
取值 : 像素值
2. 指定字體名稱
屬性 : font-family
取值 : 字體名稱
語法注意 :
1. 字體名稱如果是中文,或者由多個英文單詞組成,
必須加引號
2. 可以設置多個字體名稱,做備用字體,名稱之間使用
逗號隔開
et :
font-family: Arial,'黑體','Microsoft YaHei';
3. 設置字體加粗
屬性 : font-weight
取值 :
1. 可以取關鍵字
bold(加粗顯示) / normal (默認,正常顯示)
2. 取無單位的整百數
范圍 100~900
400 : 等價於normal
700 : 等價於bold
4. 設置字體樣式(斜體)
屬性 : font-style
取值 :
1. normal (默認正常顯示)
2. italic (斜體顯示)
--------------
3. oblique (文本傾斜顯示)
一般作為italic的替換樣式,可以實現斜體效果.
在某些情況下,可以指定傾斜角度
5. 字體屬性簡寫
屬性 : font
取值 : style weight size family; (順序強制)
語法注意 :
size,family為必填項
2. 文本相關
1. 文本顏色
屬性 : color
取值 : 顏色值
2. 文本水平對齊方式
屬性 : text-align
取值 : left(默認) / center / right;
3. 文本裝飾線
屬性 : text-decoration
取值 :
1. underline 下划線
2. overline 上划線
3. line-through 刪除線
4. none 取消裝飾線
4. 行高
屬性 : line-height
取值 : 像素值
注意 :
所有文本在其所屬行中都是垂直居中的
使用場景 :
1. 行高可以用來設置一行文本的垂直居中 :
行高與元素的高度保持一致
2. 行高可以實現文本在元素中上下位置的微調:
et :
1. {
height : 100px;
line-height : 120px;
}
2. {
height : 100px;
line-height : 70px;
}
3. 表格相關屬性
1. 表格尺寸
表格在設置寬高時,可以選擇 :
1. 為table標簽固定寬高,單元格自動分配大小
2. 為td單元格設置寬高,由內容決定表格整體大小
二選一
2. table標簽完全支持盒模型,默認采用border-box計算尺寸
tr,td標簽,不完全支持盒模型.
td不支持margin屬性
3. 表格邊框合並
將單元格邊框與表格邊框合並在一起
屬性 : border-collapse
取值 :
1. separate (默認值,邊框分離)
2. collapse 設置邊框合並
4. 調整單元格邊框之間的距離
屬性 : border-spacing
取值 : h-value v-value;
語法注意 :
h-value 表示水平方向上的邊距
v-value 表示垂直方向上的邊距
該屬性必須添加給table標簽,要求必須是邊框分離狀態
才起作用
4. 過渡效果
1. 什么是過渡 :
過渡指的是元素在兩種狀態切換時的平滑過渡效果
2. 過渡相關的屬性 :
1. 指定過渡時長
屬性 : transition-duration
取值 : 以s/ms為單位的數值
2. 指定過渡屬性
屬性 : transition-property
取值 : 大部分的CSS屬性名
語法 :
1. width (指定單個屬性名)
2. width,height (指定多個屬性名,使用逗號隔開)
3. all (指定所有發生值改變的屬性)
3. 指定過渡發生的時間變化曲率
屬性 : transition-timing-function
取值 :
1. linear 勻速變化
2. ease 默認值,慢速開始,中間加速,慢速結束
3. ease-in 慢速開始,加速結束
4. ease-out 快速開始,慢速結束
5. ease-in-out 慢速開始和結束,中間過程先加速
后減速
4. 指定延遲時間
屬性 : transition-delay
取值 : 以s/ms為單位的數值,設置過渡效果延遲多久執行
練習 :
創建200*200的元素
鼠標懸停時,
改變背景顏色,改變尺寸為300*300
改變元素形狀為圓形
所有變化在3秒內完成
3. 簡寫屬性
屬性 : transition
取值 : property duration timing-function delay;
語法 :
1. duration 是必填項,其他項可以省略
2. 可以分別為屬性設置過渡時長
et :
transition: width 2s,height 3s,background 5s;
5. CSS 常用的布局方式
1. 布局 :
設置元素的排列和顯示
2. 分類 :
1. 標准流布局(靜態布局,文檔流布局)
默認的布局方式
特點 : 元素按照類型和書寫順序,從左到右,從上到下
依次顯示
2. 浮動布局
元素設置浮動之后,可以停靠在其他元素的邊緣
屬性 :
float
取值 : left / right / none(默認值)
left : 元素左浮動,直到緊靠其他元素邊緣
right : 元素右浮動,直到緊貼其他元素邊緣
特點 :
1. 元素浮動之后,會脫離文檔流,在文檔中不再占位.
表現為懸浮在文檔上方.后面正常的元素會向前占位
2. 多個元素浮動時,會依次停靠在前一個浮動元素的
邊緣,如果當前父元素中寬度無法容納,會自動換行
顯示.
3. 任何元素只要設置浮動,都可以設置寬高
4. 文字環繞效果.浮動元素不占位,會遮擋正常元素的
顯示,只遮擋正常元素的位置,不影響正常內容顯示,
內容會圍繞在浮動元素周圍顯示
5. 浮動元素水平方向沒有縫隙,可以解決行內元素或
行內塊元素,水平方向上由於換行導致的空隙問題
浮動引起的問題 :
由於子元素全部浮動,在文檔中不占位,造成父元素
高度為0,影響頁面布局
解決辦法 :
1. 給父元素固定高度
2. 給父元素設置overflow:hidden;
3. 標准做法 :清除浮動元素帶來的影響
屬性 : clear
取值 : left/right/both
用法 :
為元素設置clear屬性
left : 當前元素不受左浮動元素的影響
right : 當前元素不受右浮動元素的影響
both : 不受左浮動或右浮動元素的影響
解決父元素高度為0 :
步驟 :
1. 在父元素的末尾添加空的子元素(塊元素)
2. 為空元素設置clear:both;