1.背景
1.背景色
屬性：background-color
取值：合法的顏色值
註意：背景顏色和背景圖片默認都從邊框位置處開始填充
2.背景圖片
屬性：background-image
取值：url(圖片的路徑);
ex:
background-image:url(a.jpg);
3.背景圖片平鋪
屬性：background-repeat
取值：
1.repeat 平鋪
2.no-repeat 不平鋪，只顯示一次
3.repeat-x 只在橫向平鋪
4.repeat-y 只在縱向平鋪
4.背景圖片尺寸
屬性：background-size
取值：
1.value1(寬) value2(高)
2.x% y%
3.cover 將背景圖等比放大，直到背景圖完全覆蓋到元素的所有區域為止。
4.contain 將背景圖等比放大，直到背景圖碰到元素的某一個邊緣為止。
5.背景圖片的固定
屬性：background-attachment
取值：
1.scroll 默認值，滾動
2.fixed 固定
6.背景圖片定位
作用：改變背景在元素中的位置
屬性：background-position
取值：
1.x y
x：背景圖在水平方向的偏移距離
取值為正，向右移動
取值為負，向左移動
y：背景圖在垂直方向的偏移距離
取值為正，向下移動
取值為負，向上移動
2.x% y%
0% 0% 背景在左上角
100% 100% 背景在右下角
50% 50% 背景在正中間
3.關鍵詞
x:left/center/right
y:top/center/bottom
7.背景的簡寫屬性
在一個屬性中指定多個屬性值
background:color url() repeat attachment position;
ex:
background:red;
background:url(a.jpg) no-repeat fixed center center;
2.漸變
1.什麽是漸變
漸變指的是多種顏色平緩變化的一種顯示效果。
2.漸變的主要因素
1.色標：一種顏色 及其 出現的位置
一個漸變是由多個色標組成（至少兩個）
3.漸變的分類
1.線性漸變
以直線的方向來填充漸變色
2.徑向漸變
以圓形的方式來填充漸變色
3.重復漸變
將線性漸變 或 徑向漸變 重復幾次實現漸變填充
4.線性漸變
屬性：backgrond-image
取值：linear-gradient(angle,color-point1,color-point2,...);
angle:表示漸變填充的方向或角度
取值：
1.關鍵詞
to top 從下向上填充漸變色
to bottom 從上向下填充漸變色
to left 從右向左填充漸變色
to right 從左向右填充漸變色
2.角度值
0deg 從下向上(等同於to top)
180deg 從上向下(等同於to bottom)
color-point:色標
表示顏色及其位置
取值：顏色和位置的組和，中間用空格隔開。
ex:
red 0px;
blue 100px;
green 200px;
5.徑向漸變
屬性：background-image
取值：radial-gradient([size at position],color-point1,color-point2,...);
size:半徑，以px為單位的數字
position:圓心所在位置
1.x y:具體數字
2.x% y%:元素寬和高的占比
3.關鍵詞
x:left/center/right
y:top/center/bottom
6.重復漸變
1.重復線性漸變
background-image:repeating-linear-gradient(angle,color-point,...);
color-point:位置一定要給絕對數值（px），不要用百分比。
2.重復徑向漸變
backgrond-image:repeating-radial-gradient([size at position],color-point);
練習：
給一個div設置高寬各400px,然後設置重復線性漸變背景色。
7.瀏覽器兼容性
各瀏覽器的新版都支持漸變屬性
對於不支持的瀏覽器版本，可以通過增加瀏覽器前綴的方式，讓瀏覽器支持漸變。
Firefox:-moz-
Chrome&Safari:-webkit-
IE:-ms-
opera:-o-
ex：
background-image:-webkit-linear-gradient();

www.caniuse.com
3.文本格式化屬性
1.字體屬性
1.指定字體
屬性：font-family
取值：用逗號隔開字體名稱列表
ex:
font-family:"微軟雅黑","黑體",Arial;
2.字體大小
屬性：font-size
取值：以px或pt為單位的數值
3.字體加粗
屬性：font-weight
取值：
1.bold 加粗(b標記)
2.normal 正常
3.value 整百倍的數字 400-900
4.字體樣式
屬性：font-style
取值：
1.italic 斜體(i標記)
2.normal 正常
5.小型大寫字母
將小寫字符變為大寫，但大小與小寫字符一致。
屬性：font-variant
取值：
1.normal 正常
2.small-caps 小型大寫字符
練習：
在網頁中定義一個div元素，並設值id為main,內容隨意，中英文結合
設置以下格式：
1.字體：微軟雅黑
2.文字大小:24px
3.加粗並且傾斜顯示文本
4.將所有小寫字符轉為小型大寫字符
6.字體屬性的簡寫方式
屬性：
font:style variant weight size family;
註意：使用簡寫方式時，必須要設置family的值，否則無效。
ex:font:24px;//錯誤
font:24px "微軟雅黑";//正確
2.文本格式化
1.文本顏色
屬性：color
取值：合法的顏色值
2.文本排列
作用：指定文本（行內，行內塊）在水平方向的對齊方式。
屬性：text-align
取值：left/center/right/justify(兩端對齊)
3.線條修飾
屬性：text-decoration
取值：
1.none 無任何線條修飾
2.underline 下劃線
3.overline 上劃線
4.line-through 刪除線
4.行高
作用：一行數據所占的高度
如果行高大於字體本身的大小，那麽改行文本將在指定的行高內呈現垂直居中的效果。
屬性：line-height
取值：以px為單位的數值
5.首行文本縮進
屬性：text-indent
取值：以px為單位的數值
6.文字陰影
屬性：text-shadow
取值：h-shadow v-shadow blur color;
練習：
在上面文本練習的基礎上，增加以下效果：
1.文本排列方式為兩端對齊
2.文本的修飾為下劃線
3.行高設為100px,並觀察設完行高後的文本效果
4.文本陰影，水平和垂直偏移0px，模糊距離為3px，顏色紅色
4.表格
1.表格的常用屬性
1.邊距屬性：padding
2.邊框屬性：border
3.尺寸屬性：width,height
4.文本格式化屬性：font-*，text-*,line-height
5.背景屬性：顏色，圖片，漸變
6.vertical-align
作用：指定單元格數據的垂直對齊方式
取值：
top:上對齊
middle:居中對齊
bottom:下對齊

CSS-背景-漸變-文本格式化