12.1認識CSS
CSS-層疊樣式表译红，目的是為網頁上的元素精確定位技掏，其次铃将，它可以把網頁上的內容結構和控制相分離
CSS可以更加精確地控制網頁的內容形式，內容更加豐富哑梳，樣式靈活多變
12.2使用CSS
1.基本語法
選擇符{樣式屬性：取值劲阎；樣式屬性：取值；樣式屬性：取值鸠真；....}
選擇符(Selector)：指這組樣式編碼要針對的對象悯仙，可以是一個XHTML標簽，如body吠卷，hl锡垄，也可以是定義了特定id或class的標簽
屬性(Property)：對于每一個XHTML中的標簽，CSS都提供了豐富的樣式屬性
值(value)：指定屬性的值祭隔，兩種類型货岭，指定范圍和指定數值
2.添加CSS方法
- 鏈接外部樣式表
<link rel=stylesheet type=text/css href=style.css>
通過link標簽調用已經定義好的樣式表，link標簽處在head標簽里面
rel=stylesheet是指在頁面中使用外部的樣式表
type=text/css是指文件的類型是樣式表文件
href=style.css是文件所在位置
- 內部樣式表
<style type="text/css">
<!--
...
-->
</style>
一般位于head標簽中
- 導入外部樣式表
<style type="text/css">
<!--
@import style.css
...
-->
</style>
注意使用時外部樣式表的路徑疾渴，方法和鏈接外部樣式表的方法類似
但導入外部樣式表輸入方式更有優(yōu)勢千贯，實質上它是相當于存在于內部樣式表中
- 內嵌樣式
<table style=color:red;margin-right:220px>
內嵌樣式混合在HTML標記中使用
內前樣式的使用是直接在HTML標記里添加style參數
12.3字體屬性
font-family: "字體1","字體2",...
font-size: 大小的取值
font-style: 樣式的取值
font-weight: 字體粗細值
font-variant: 取值
font: 字體取值
在font-family里面定義了多種字體，瀏覽器會由前向后選擇字體搞坝，如果都不支持搔谴，則會采用系統(tǒng)默認的字體
-
font-size取值：
font-size取值 font-style取值：
normal：默認的正常字體
italic：以斜體顯示文字
oblique：屬于中間狀態(tài)font-weight取值：
normal：正常粗細
bold：粗體
bolder：特粗體
lighter：特細體
number：100~900，通常正百取值font-variant取值：
normal：正常顯示
small-caps: 將小寫英文字母轉化為大寫并且字體較小字體復合屬性
.h{
font: bold italic "宋體"
}
各值之間用空格相連
12.4顏色和背景屬性
color: 顏色取值
background-color: 顏色取值
background-image: url(圖像地址)
background-repeat: 取值
background-attachment: scroll/fixed
background-postion: 位置取值
background: 取值
顏色的取值一般用16進制
圖像的地址可以是相對地址也可以是絕對地址
background-repeat:
no-repeat：背景圖像不平鋪
repeat：背景圖像平鋪
repeat-x：背景圖像只在水平方向平鋪
repeat-y：背景圖像只在垂直方向平鋪background-attachment:
scroll：背景圖像隨對象滾動而滾動桩撮，默認選項
fixed：背景圖像固定在頁面上不動-
background-postion:
長度設置值
- 背景復合屬性
background : url(...) no-repeat left top;
各值之間用空格相連
12.5段落屬性
word-spacing: 取值
letter-spacing: 取值
text-decoration: 取值
vertical-align: 排列取值
text-transform: 轉換值
text-align: 排列值
text-index: 縮進值
line-height: 行高值
white-space: 值
unicode-bidi: bidi-override,normal,embed
direction: ltr,rtl,inherit
單詞間隔word-spacing:
normal：默認值
數值：可以為負字符間隔letter-spacing:
normal：默認值
數值：可以為負文字修飾text-decoration:
none：不修飾己沛，默認值
underline：添加下劃線
overline：添加上劃線
line-through：添加刪除線
blink：文字閃爍效果垂直對齊方式vertical-align:
baseline：瀏覽器默認的垂直對齊方式
sub：文字的下標
super：文字的上標
top：垂直靠上對齊
text-top：使元素和上級元素的字體向上對齊
middle：垂直居中對齊
text-bottom:使元素和上級元素的字體向下對齊文本轉換text-transform:
none：表示使用原始值
capitalize：每個單詞的第一個字母大寫
uppercase：每個單詞的所有字母大寫
lowercase：每個單詞的所以字母小寫水平對齊方式text-align:
left：左對齊
right：右對齊
center：居中對齊
justify：兩端對齊文本縮進text-index:
文本的縮進值必須是一個長度值或一個百分比文本行高line-height:
行高值可以為長度慌核，倍數或百分比處理空白white-space:
normal：默認，將連續(xù)的多個空格合并
pre：導致源代碼中的空格和換行符會被保留
nowrap：強制在同一行顯示所有文本申尼，直到文本結束或者遇到文本反排unicode-bidi,direction
unicode-bidi,direction經常一起使用，用來設置對象的閱讀順序
unicode-bidi
bidi-override：嚴格按照direction的值重排序
normal：默認值
embed：對象打開附加的嵌入層 direction的值指定嵌入層垫桂，在對象內部進行隱式重排序
direction
ltr：從左到右順序閱讀
rtl：從右到左順序閱讀
inherit：文本流的值不可繼承
12.6外邊距與內邊距屬性
內容區(qū)：盒子模型的中心师幕，呈現(xiàn)了盒子的主要信息內容，內容區(qū)是盒子模型必備的組成部分诬滩，其他的三部分都是可選的
屬性：width霹粥，height，overflow
使用屬性可以指定盒子內容區(qū)的高度和寬度內邊距：是內容區(qū)和邊框之間的空間疼鸟，可以被看做是內容區(qū)的背景區(qū)域
屬性：padding后控，padding-top，padding-bottom空镜，padding-left浩淘，padding-right
使用屬性可以指定內容區(qū)與各方向邊框的距，同時對盒子背景色屬性的設置可以使內邊距部分呈現(xiàn)相應的顏色吴攒，起到一定的變現(xiàn)效果邊框：
屬性：border张抄，border-style，border-width和border-color外邊距：外邊距位于盒子的最外圍洼怔，它不是一條線而是添加在邊框外面的空間署惯，外邊距使得盒子之間不必緊湊的連接在一起
屬性：margin，margin-top镣隶，margin-bottom极谊，margin-left，margin-right
其具體設置和使用與內邊距屬性相似
12.6.1外邊距margin
長度值：絕對邊距值
百分比：相對上級元素
auto：自動取邊距值
margin的值可以取一個或四個
12.6.2內邊距padding
長度值：絕對邊距值
百分比：相對上級元素
padding值可以取一個或四個
12.6.3邊框border
-
border-style
邊框樣式取值 border-width
medium：默認寬度
thin：小于默認寬度
thick：大于默認寬度
長度：數字和單位安岂，不可為負border-color
可以用16種顏色的關鍵字或RGB值來設置border
使用border屬性可以設置元素的邊框樣式轻猖，寬度和顏色
12.7定位屬性
12.7.1定位方式postion
postion: static | absolute | fixed | relative
static：默認值
absolute：絕對定位，需要同時使用left嗜闻，right蜕依，top和bottom等屬性進行絕對定位
fixed：當頁面滾動時，元素不隨著滾動
relative：相對定位琉雳，對象不可層疊
12.7.2元素位置left样眠，right，top和bottom
left: auto | 長度值 | 百分比
right: auto | 長度值 | 百分比
top: auto | 長度值 | 百分比
bottom: auto | 長度值 | 百分比
12.7.3層疊順序
z-index: auto | 數字
12.7.4浮動屬性
float: none | left | right
使用float可以設置文字在某個元素的周圍翠肘，它能應用于所有的元素
- none：默認值檐束，表示對象浮動
- left：表示文字浮動在元素的右邊
- right：表示文字浮動在元素的左邊
12.7.5清除屬性clear
clear：none | left | right | both
用于指定一個元素是否允許有其他元素漂浮在它的周圍
- none：默認值，允許兩邊都可以有浮動對象
- left：不允許左邊有浮動對象
- right：不允許右邊有浮動對象
- both：不允許有浮動對象
12.7.6可視區(qū)域clip
clip: auto | rect(數字)
使用clip可以限定只顯示裁切出來的區(qū)域
- auto表示對象不裁剪
- rect表示它根據提供的數值計算
12.7.7層的寬度和高度width束倍，height
width: auto | 長度值
height: auto | 長度值
12.7.8超出范圍overflow
overflow: visible | auto | hidden | scroll
設置當層內的內容超出所能容納的范圍時的顯示方式
- visible：表示層的大小和內容都會自動顯示出來
- auto：表示只在內容超出層的范圍時才顯示滾動條
- hidden：表示會隱藏超出范圍的內容
- scroll：表示總是顯示滾動條
12.7.9可見屬性visibility
visibility: inherit | visible | hidden
針對嵌套層被丧，插入其它層中的層
- inherit：默認值盟戏，繼承父對象的可見性
- visible：無論父對象是否可見，子層都可見
- hidden：無論父對象是否可見甥桂，子層都隱藏
12.8列表屬性
list-style-type: 值
list-style-image: none | url(圖像地址)
list-style-postion: outside | inside
list-style
-
list-style-type：設置列表項所使用的符號類型
type的取值 list-style-image:
none：不指定圖像
url：圖像地list-style-postion:
outside：列表項目標記放在文本以外柿究，且環(huán)繞文本不根據標記對齊
inside：列表項目標記放在文本以內，且環(huán)繞文本根據標記對齊list-style列表復合屬性
list-style-type和list-style-image都被指定時黄选，list-style-image優(yōu)先
12.9光標屬性cursor
cursor: auto | 形狀取值 | url(圖像地址)
設置在對象上移動時鼠標指針采用的光標形狀
12.10濾鏡屬性
12.10.1不透明度alpha
設置對象的透明度蝇摸，使圖片產生透明漸變效果
filter:alpha(參數 1=參數值, 參數 2=參數值, ...)
12.10.2動感模糊blur
用于設置對象的動態(tài)模糊效果
filter:blur(add=參數值, direction=參數值, strength=參數值)
12.10.3對顏色進行透明處理chroma
chroma濾鏡的作用是將圖片中的某種顏色轉化為透明色，產生透明效果
filter: chroma(color=顏色代碼或顏色關鍵字)
12.10.4陰影效果dropShadow
dropShadow濾鏡用于設置在指定的方向上和位置上產生陰影效果
dropShadow(color=陰影顏色, offX=參數值, offY=參數值, positive=參數值)
- color: 控制陰影顏色
- ** offX办陷，offY分別設置陰影相對于原始圖像移動的水平距離和垂直距離**
- positive：設置陰影是否透明
12.10.5對象翻轉flipH貌夕，flipV
flipH用于設置沿水平方向翻轉對象，flipV用于設置沿垂直方向翻轉對象
filter: FlipH
filter: FlipV
12.10.6發(fā)光效果glow
glow濾鏡用于設置在對象周圍產生發(fā)光的效果
filter: Glow(color=顏色代碼,strength=強度值)
color用于設置發(fā)光的顏色
strength用于設置發(fā)光的強度民镜，取值范圍為1~255啡专，默認值為5
12.10.7灰度處理gray
gray濾鏡用于把彩色圖片中的色彩去掉，轉化為黑白色圖片
filter: gray
12.10.8反相invert
invert濾鏡用于設置對象反相制圈，可以將圖片的顏色们童，飽和度，以及亮度完全反轉過來
filter: invert
12.10.9X光片效果xray
xray濾鏡用于制作類似X光片的效果
filter: xray
12.10.10遮罩效果mask
mask濾鏡用于產生遮罩效果离唐，可以做出像印章一樣的效果
filter: Mask(Color=顏色代碼)
12.10.11波形濾鏡wave
wave濾鏡用于為對象內容創(chuàng)波紋扭曲效果
filter: wave(add=參數值, freq=參數值, lightstrength=參數值,
phase=參數值, strength=參數值);
add：設置是否要把對象按照波形樣式打亂
freq：設置圖片上的波浪數目
lightstrength：設置波浪的光照強度病附，取值范圍為0~100
phase：設置波浪的起始位置
strength：設置波浪的的強度大小
