類名不可以數字開頭
$,￥,%,@,#
可以包-,_
am:
4.id選擇器
語法：#value{
樣式聲明
....
}
特點：使用元素所附帶的id屬性值進行樣式的聲明定義
eg:
<any id="名稱1"></any>
5.羣組選擇器
定義一組選擇器的公共樣式
選擇之間用逗號隔開
eg:
div,p,a,.news,div.bg_box,#d1{
樣式聲明
.....
}
6.後代選擇器
依託於後代關係匹配頁面的元素
後代：
一級或者多餘一級的父子關係
語法：
選擇器1 選擇器2 ...{
樣式聲明
....
}
7.僞類選擇器
語法：
:僞類名稱{}
選擇器:僞類名稱{}
**:鏈接僞類
:link 匹配尚未訪問的超級鏈接
:visited 匹配訪問過的超級鏈接
**:動態僞類
:hover 匹配鼠標懸念在元素上時的狀態
:active ...被激活的狀態
:focus ...元素獲取焦點的狀態
練習：
新建div,p,hn,span,a,img用id,羣組，後代選擇器分別給他們背景，
文本顏色，字體大小，邊框，看下有什麼區別
新建特殊符號標籤，用僞類練習字體顏色，背景顏色
，新建div,p塊元素，用僞類練習字體顏色，背景顏色，
看下有什麼區別？
1.尺寸與邊框
1.css單位
1.尺寸單位
%:相對單位 20% 50% 100%
px:像素, 文字大小
in:英寸 -->2.54cm
pt:磅（文字大小） -->1/72 in
cm:釐米
mm:毫米
em:1em
rem
2.顏色單位（顏色的取值）
1.顏色的英文單詞
red,blue,black,yellow,green,pink,gray,purple,brown(棕色)...
2.rgb(r,g,b)
r:0-255
g:0-255
b:0-255
eg:
rgb(25,89,200)
3.rgb(r%,g%,b%)
4.#rrggbb
組成：0-9或a-f組成
#000000 黑色
#ffffff白色
#11ffaa
5.#rgb 是上面的縮寫
#000000-->#000
#ffffff-->#fff
#11ffaa-->#1fa
eg:
#33acbb
2.尺寸屬性
用於設置元素的寬度和高度
默認尺寸：
塊級元素：
寬度：佔父元素的100%
高度：自適應
行內元素：
寬度：自適應
高度：自適應
width: 寬度
height：高度
取值：
數值,數字 （以px爲單位的)
百分比 %
**：
哪些元素的尺寸允許修改？
1.塊級元素的尺寸允許修改
2.非塊級元素中，
本身存在width和height屬性的元素(img,table)允許修改，
但是不具備width和height屬性的行內元素
（span,a,b,i）是不允許修改的
3.邊框
作用：就是圍繞在元素內容和內邊距外的線條
1.邊框屬性
1.簡寫方式
語法：
border:width style color;
width:邊框的寬度（邊框的粗細）
style:邊框的樣式（實線，虛線）
取值：solid:實線
dotted:虛線
dashed:虛線
color:邊框的顏色
取值：合法的顏色值 transparent透明色
2.單邊設置
語法：
border-方向：width style color;
方向取值：
left:左
right:右
top:上
bottom:下
3.單屬性定義
語法：
border-屬性:值;
屬性：
width
style
color
eg:
border-width:3px ;
border-style:solid;
4.單邊單屬性定義
語法：
border-方向-屬性：值；
border-left-color:左邊框的顏色
4.邊框倒角
倒角：將元素的直角倒成圓角
語法：border-radius:值;
取值：
具體數值 px
百分比 % (設置圓形時使用)
2.單角設置
border-top-right-radius:右上角
border-top-left-radius:左上角
border-bottom-left-radius:左下角
border-bottom-right-raidus:右下角
5.邊框陰影
語法：
屬性：box-shadow
是由多個值組成的值列表，用空格分隔
值：
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:（必須值）陰影水平方向的偏移 值爲正向右偏，值爲負向左偏
v-shadow:（必須值）陰影垂直方向的偏移，值爲正向下偏，值爲負向上
blur:（可選值）陰影模糊距離
spread:（可選值）陰影的尺寸
color:（可選值）陰影顏色
inset:（可選值）將默認的外陰影改爲內陰影
練習：
設置一個圓的發光效果
6.框模型
1.什麼是框模型？
定義了元素框的內邊距和外邊距的方式
box model又稱盒子模型
內邊距：padding
內容區域與邊框之間的空白間距
外邊距：margin
圍繞在元素邊框外的空白間距（元素與元素之間的間距,元素和body區域）
**:
增加邊框的內邊距和外邊距元素內容區域大小不會改變，
但是，元素的總體佔地大小會發生變化(變大）
2.框模型的計算方式：
實際寬度=width+左右內邊距+左右邊框+左右外邊距;
實際高度=height+上下內邊距+上下邊框+上下外邊距;
3.內邊距
語法：
padding
取值：
以px爲單位的值
%百分比
auto 自動（控制塊級元素在水平方向居中對齊）
數量：
padding:value; 四個方向
padding:v1 v2; 上下，左右
padding:v1 v2 v3; 上，左右，下 padding:5px 20px 30px;
padding:v1 v2 v3 v4; 上右下左(順時針)
單邊設置：
padding-方向：值;
padding-top
padding-bottom
padding-left
padding-right
4.外邊距
語法：
margin
取值：
以px爲單位的值
%百分比
數量：
margin:value; 四個方向
margin:v1 v2; 上下，左右
margin:v1 v2 v3; 上，左右，下 padding:5px 20px 30px;
margin:v1 v2 v3 v4; 上右下左(順時針)
單邊設置：
margin-方向：值;
margin-top:px值
margin-bottom
margin-left
margin-right
**：同上
練習：新建兩個div,要求他們之間的間距爲50px,當鼠標放到第二個div上時，
其可視區域有放大的效果
1 漸變
grad
2 浮動
float
圓完成圖：
