一、CSS屬性定義
1、css顏色表示方法【重點】
rgb（紅綠藍3個顏色通道 強度值為0-255）rgb（0,0,0）
rgba（alpha a是透明度 值為0-1）rgba（123,123,123,0）
hsl
hsla（h:色相，色環上（ppt78頁）的角度值，0-360
s:飽和度，0—100%
l:明度，0—100%
a:不透明度，0-1之間的小數）
color:hsla(30,100%,50%,0.8);
十六進制（一般格式為#ffffff）(字母范圍從A-F,數字從0-9 )
opacity:0-1設置元素的不透明級別 效果作用於整體
background:transparent; 完全透明
總結：
十六進制（#ffffff） 兼容性好
在需要做半透明背景或文字效果時使用rgba與hsla
opacity屬性會影響對象的所有組成部分，即全部半透明
二、css文本修飾【重點】
font-family 字體名稱
font-size 尺寸大小
font-weight 粗細
color 顏色
line-height 行高
letter-spacing字符間距
white-space:nowrap;強制一行顯示
word-break:break-word;自動換行
@font-face 嵌入字體(網絡絕對地址)
font（family size weight @font-face）
@font-face能夠加載服務器端的字體文件，讓瀏覽器端可以顯示用戶電腦里沒有安裝的字體。
@font-face {
font-family : 字體名稱;
src : URL（）字體文件在服務器上的相對或絕對路徑;
}
text-decoration 上划線 中划線 下划線 無
text-align 水平對齊方式
text-indent 文本塊中第一行的縮進
text-overflow 文本溢出
text-shadow 文本陰影效果
文字縱向居中的簡易設法
#a{height:100px;line-height:100px;}
text-shadow 用來設置文本的陰影效果
text-shadow: 2px 2px 0 red;
水平 垂直 模糊 顏色
text-overflow設置是否使用一個省略標記（...）標示對象內文本的溢出。
white-space:nowrap文本在一行內顯示
p{width: 200px;
height: 40px;
overflow: hidden;
text-overflow: ellipsis;以什么方式顯示
}
一行文本溢出省略標記（...）
多行文本溢出省略標記（...）
三、css邊框效果【重點】
border
border-top
border-right
border-bottom
border-left
border-style 邊框類型dashed solid
border-width
border-color
border-radius 倒圓角
box-shadow 投影
outline 輪廓線 在邊框的外邊
border（top bottom right left style（類型） width color radius（圓角））
border-style 邊框類型dashed虛線 solid實線
border: 1px dotted #ffff30; /*推薦寫法*/
border-top: 1px solid #f90; /*推薦寫法*/
圓角 border-radius【重點】
border-radius: 50%;
投影 box-shadow（兼容）
box-shadow:#000 5px 5px 10px;
Firefox通過私有屬性-moz-box-shadow支持。
Chrome通過私有屬性-webkit-box-shadow支持。
兼容寫法
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
總結：
圓角、投影與輪廓線屬性是css3屬性，低版本的瀏覽器不能支持，要注意目標瀏覽器
一般的邊框屬性兼容性很好
4、css背景修飾【重點】
background
background-color
background-image
background-repeat
background-position
background-size
background-attachment 定義背景圖片隨滾動軸的移動方式
注意：
背景圖片優先於背景顏色顯示
以下各屬性的默認值是：
background-color：transparent;
background-image:none;
background-repeat:repeat;
background-position:left top;
拓展：
漸變效果實現（兼容性不好，只做了解）：
線性漸變（Linear-Gradient）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial-Gradient）- 由它們的中心定義
background:linear-gradient(to bottom,#ff3dd6,#00A0D9,#1A00FF);
background: radial-gradient(#ff3dd6,#1A00FF,#00FFDB);
http://www.runoob.com/css3/css3-gradients.html
background-image （none）
背景圖片優先於背景顏色顯示
background-attachment {fixed，scroll} 定義背景圖片隨滾動軸的移動方式
background-repeat（repeat）{repeat-x，repeat-y，no-repeat}
background-position（left top）背景負位置技巧
背景圖片適配：
background-size
background-size:auto; （默認值）
background-size:contain; （將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。）
background-size:cover; （將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。）
background-size:300px 400px; （自定義背景圖像大小）