背景
-
常用背景屬性
background-color設置元素的背景顏色
background-image把圖像設置為背景。
background-position設置背景圖像的起始位置。
background-repeat設置背景圖像是否及如何重復。
background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動。
background簡寫屬性，作用是將背景屬性設置在一個聲明中。
簡寫順序：color image repeat attachment position; -
h5新增屬性
background-size:px | % | cover | contain;background-size: 50px;
輸入一個值，對應的值等比例縮放
background-size: 50px 150px;
輸入兩個值，不成比例，圖片將被拉伸
background-size: cover;
cover使圖片填充整個頁面 不顧圖片的展示效果。把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。
background-size: contain;
contain使整個圖片按比例完全顯示在頁面內。把圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域background-clip: border-box|padding-box|content-box;
background-clip:border-box;
背景被裁剪到邊框盒
background-clip: padding-box;
背景被裁剪到內邊距框
background-clip: content-box;
背景被裁剪到內容框。線性漸變line-gradient
-
徑向漸變radial-gradient
邊框/輪廓
-
常用邊框屬性
border-width規定邊框的寬度。
border-style：dotted | solid | double | dashed; 規定邊框的樣式。
border-color規定邊框的顏色。
border簡寫屬性，順序：border-width border-style border-color -
新增邊框屬性
border-radius: 1-4 length|% / 1-4 length|%;
“/”前是指圓角的水平半徑，而“/”后是指圓角的垂直半徑 -
輪廓
outline-color設置輪廓的顏色。
outline-style設置輪廓的樣式。
outline-width設置輪廓的寬度。
outline-offset: length|inherit;輪廓與邊框邊緣的距離。
outline簡寫屬性 -
border與outline的區別
1、outline是不占空間的，既不會增加額外的width或者height
2、outline有可能是非矩形的
3、border 可應用于幾乎所有有形的html元素，而 outline 是針對鏈接、表單控件和ImageMap等元素設計
4、outline 的效果將隨元素的 focus 而自動出現，相應的由 blur 而自動消失。這些都是瀏覽器的默認行為，無需JavaScript配合CSS來控制。
文本
- 常用字體屬性
font-family 設置字體系列。多個用逗號隔開
font-size 設置字體的尺寸。
font-style:normal(文本正常顯示)|italic(文本斜體顯示)|oblique (文本傾斜顯示)
font-weight:bold|bolder|normal|lighter|100~900整數 設置字體的粗細
line-height 設置行高
font簡寫屬性順序： style weight size/line-height family
-
常用文本屬性
color設置文本顏色
direction設置文本方向。
line-height設置行高。
text-align對齊元素中的文本。
vertical-align:top|middle|bottom。
text-decoration：none|underline(下劃線)|overline(上劃線)|（line-throung）|blink(閃爍） 添加修飾。
text-indent縮進元素中文本的首行
letter-spacing設置字符間距。
word-spacing設置字間距。
white-space設置元素中空白的處理方式。 -
h5新增文本屬性
text-shadow：h-shadow v-shadow blur color;
word-wrap:normal|break-word;
盒陰影
-
box-shadow
語法：
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
換句說：
對象選擇器 {box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色}
顏色透明
-
rgba
background: rgba(顏色值,顏色值,顏色值,透明度);
-
opacity
background: rgb(顏色值,顏色值,顏色值);
opacity: 0~1; -
區別
相同之處就是背景色完全是一樣的
RGBA設置透明度可以不影響其他的元素屬性,opacity影響
列表
- 列表常用屬性
- list-style-type:disc(實心圓點)|square（方塊）|circle（空心圓點）|none
- list-style-image:url(引入圖片的路徑)
- list-style-position:inside|outside
- list-style簡寫屬性順序：type position image;
表格
- 表格常用屬性
- border-collapse：
separate默認值。邊框會被分開。不會忽略border-spacing 和 empty-cells 屬性。
collapse如果可能，邊框會合并為一個單一的邊框.會忽略 border-spacing 和 empty-cells 屬性。 - border-spacing設置分隔單元格邊框的距離。
- caption-side設置表格標題的位置。
- empty-cells設置是否顯示表格中的空單元格。
- table-layout設置顯示單元、行和列的算法。
- border-collapse：
