第一章
概述
一、CSS簡介
1
、
CSS
是
Cascading Style Sheets(
層疊樣式表單
)
的簡稱。通常所稱的
CSS
是指
CSS1,
即層疊樣式表單
1
級。
2
、編輯
CSS
文檔：與編輯
HTML
的方法一樣。有如下
3
種：
-
用常見的超文本編輯器來實現，如
Frontpage,Dreamweaver
；
-
用任何不帶格式的文本編輯器來編寫，后綴名為
.htm
或
.html
，如記事本、寫字板；
-
用任何不帶格式的文本編輯器來編寫，后綴名為
.css
。
第二章
CSS
初步了解
1
、將樣式與
HTML
結合：共有四種方法。
-
在文檔
<HEAD>
中用
<Style type="text/css"></style>
定義；
-
使用
<LINK>
元素鏈接到外部的樣式表單。
<LINK REL="stylesheet" href="style1.css">
；
-
在
<BODY>
內部的元素中使用
<STYLE>
定義
CSS
，如
<H3 Style="">
；
-
使用
CSS "@import"
標記來導入樣式表單；
2
、選擇符
在
h3{font-family:arial}
里
h3
是選擇符。
font-family
是屬性，
arial
是屬性值。屬性和屬性值之間以冒號分隔。如果要定義多個屬性，屬性與屬性之間以分號隔開。要為一個屬性定義多個屬性值，則用逗號隔開。
任何一個
html
標記都可以作為選擇符。但是有時用
class
和
id
更方便。
class
總以
.
號開頭，
id
以
#
開頭。
class
和
id
用法差不多，用
id
給選擇符一個獨有的名字，在調用
script
時會更容易。但是，如果使用樣式表單而不使用
script
，用
class
比
id
好。
3
、使
CSS
更容易和更強大
有幾種方法使
CSS
更容易和更強大：
-
使用上下文關聯的選擇符：如
strong em{color:red}
-
選擇符編組：如
h1,strong em,td{color:blue;}
-
簡化編碼：如
em{font:12pt/14pt bolder arial,helvetical}
-
使用錨偽類：如
a:link{color:red}
，選擇附中的元素類型可以省略而使用缺省值如
:link{color:red}
4
、定位
使用元素的
position
屬性，有絕對定位（
absolute
）和相對定位（
relative
）。
5
、
3D
層技術
使用
z-index
屬性。
6
、特殊效果
包括剪切（
clip
）、溢出（
overflow
）、可見性（
visibility
）屬性。剪切屬性可以讓一些被覆蓋的對象顯示出來，溢出屬性用來指定如果對象放在一個比它小的邊框中該怎樣處理，可見性屬性可以控制一個對象是否看得見
——
這些是制作特效的好辦法。
第三章
CSS
進一步學習
1
、注釋語句：
/*
在這里加入注釋
*/
2
、偽類：
-
選擇附中的元素類型可以省略而使用缺省值如
:link{color:red}
-
偽類可以被用在關聯選擇符里：
a:link img{border:solid blue}
-
偽類可以與通用類組合：
a.external:visited{color:blue}
3
、首行和首字偽元素：
首行偽元素：
p:first-line{font-style:small-caps}
首字偽元素：
p:first-letter{font-style:small-caps}
選擇符里的偽元素：
p.initial:first-letter{color:red}
4
、層疊順序的具體規則：
-
如果選擇符與元素匹配，那么聲明發生作用；如果沒有適用的聲明，用繼承值；如果沒有繼承值，用默認值。
-
標注
“!important”
的比未標注的級別高；
-
作者的樣式表單覆蓋讀者的樣式表單，讀者的覆蓋
UA
的。
-
按選擇符的指數來排列。（略）
-
按順序排列，后一個執行的勝出。
第四章
CSS
屬性
一、字體屬性
與字體有關的屬性包括：
font-family,font-style,font-variant,font-weight,font-size,font
。執行順序是：
font-style,font-variant,font-weight,font-size
1
、
font-family:
如果字體的名稱中含有空格，那么要加上雙引號。
2
、
font-style:normal|italic|oblique
3
、
font-variant:normal|small-caps
4
、
font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900
normal
相當于
400
，
bold
相當于
700
5
、
font-size:absolute-size|relative-size|length|percentage
-
absolute-size:xx-small|x-small|small|medium|large|x-large|xx-large
-
relative-size:larger|smaller
6
、
font:font-style|font-variant|font-weight|font-size|line-height|font-family
font
屬性可以一次定義前邊提到的所有的字體屬性。
二、顏色和背景屬性
1
、
color:
一般指前景色。
2
、
background-color:
背景色。
3
、
background-image:
body{background-image:url(marble.jpg)}
4
、
background-repeat:repeat|repeat-x|repeat-y|no-repeat
body{background-image:url(marble.jpg);background-repeat:repeat-y}
5
、
background-attachment:scroll|fixed
設置文字在背景圖案上面滾動，背景圖案保持固定不動用
fixed.
6
、
background-position:percentage|length{1,2}|top|center|bottom|left|center|right
7
、
background:background-color|background-image|background-repeat|background-attachment|background-position
可以一次設置前面的所有的有關背景的屬性。如
body{background:white url(bg.jpg)}
三、文本屬性
1
、
word-spacing:normal|length
2
、
letter-spacing:normal|length
3
、
text-decoration:none|underline|overline|line-through|blink
4
、
vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|percentage
這個屬性用來對齊圖片效果特別好。如
image{vertical-align:baseline}
5
、
text-transform:capitalize|uppercase|lowercase|none
-
capitalize:
每個單詞的第一個字母大寫。
-
uppercase:
所有字都大寫。
-
lowercase:
所有字都小寫。
6
、
text-align:left|right|center|justify
7
、
text-indent:length|percentage
適用于塊級元素，定義文本首行的縮進方式。如
p{text-indent:1cm}
8
、
line-height:normal|number|length|percentage
四、容器屬性
1
、
margin-top:length|percentage|auto
如
body{margin-top:0}
2
、
margin-right:
同上
3
、
margin-bottom:
同上
4
、
margin-left:
同上
5
、
margin:length|percentage|auto {1,4}
前四個屬性都可以用
margin
來定義。如果給出的值少于四個，那么缺失的部分就取其對邊的值。
6
、
padding-top:length|percentage
7
、
padding-right:
同上
8
、
padding-bottom:
同上
9
、
padding-left:
同上
10
、
padding:length|percentage {1,4}
前面四個屬性都可以用
padding
來定義。如果給出的值少于四個，那么缺失的部分就取其對邊的值。
11
、
border-top-width:thin|medium|thick|length
12
、
border-right-width:
同上
13
、
border-bottom-width:
同上
14
、
border-left-width:
同上
15
、
border-width:thin|medium|thick|length {1,4}
前面四個屬性都可以用
border-width
來定義。可以一次給出一個、兩個、三個或者四個
border-width
值。如果給出的值少于四個，那么缺失的部分就取其對邊的值。如
h1{border-width:thick thin medium}
16
、
border-color:<color> {1,4}
如果只給出一個值，那么四條邊框的顏色都一樣。否則缺失邊的顏色從對邊獲取。
17
、
border-style:none|dotted|dash|solid|double|groove|ridge|inset|outset
-
dotted:
點組成的虛線。
-
dash:
短線組成的虛線。
-
double:
雙線。
-
groove:3D
溝槽狀邊框。
-
ridge:3D
脊狀的邊框。
-
inset:3D
內嵌邊框（顏色較深）。
-
outset:3D
外嵌邊框（顏色較淺）。
18
、
border-top:border-top-width|border-style|color
一個元素頂邊的寬度、樣式和顏色都可以
border-top
一次指定。
19
、
border-right:
同上
20
、
border-bottom:
同上
21
、
border-left:
同上
22
、
border:border-width|border-style|color
要一次設置一個元素所有邊框的寬度、樣式和顏色，可以使用
border
。
border
只能使四條邊框都相同。
23
、
width:length|percentage|auto
24
、
height:length|auto
25
、
float:left|right|none
適用
float
元素可以使文字環繞在一個元素的四周。比
html
中的
align
屬性應用范圍更廣，不僅僅是圖片和表格，所有的元素都可以使用
float
屬性。
26
、
clear:none|left|right|both
與
float
相對應。如果為
right,
則元素的右邊不會放進任何對象。
五、分級屬性
1
、
display:block|inline|list-item|none
2
、
white-space:normal|pre|nowrap
3
、
list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
-
disc:
圓盤
-
circle:
圓圈
-
square:
方塊
-
decimal:
十進制數
1
、
2
、
3……
-
lower-roman:
小寫羅馬數字
i,ii,iii...
-
upper-roman:
大寫羅馬數字
I,II,III...
-
lower-alpha:
小寫字母
a,b,c...
-
upper-alpha:
大寫字母
A,B,C...
4
、
list-style-image:url|none
如
ul{list-style-image:url(bullet.gif)}
5
、
list-style-position:inside|outside
決定列項的第二行左邊距是否與第一行除了項目符號以外的第一個字母對齊。
6
、
list-style:keyword|position|url
可以一次指定
list-style-type,list-style-image,list-style-position
屬性。
六、鼠標屬性
cursor:auto|crosshair|default|hand|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help
第五章
CSS
的單位
一、長度單位
1
、絕對長度值：
cm,mm,in,pt,pc
等。絕對長度值最好用于打印輸出設備，而在僅僅作為屏幕顯示用絕對長度值并無多大意義。
2
、相對長度值：
CSS
支持以下單位
pc,em,ex
-
em
代表的高度就是大寫字母
"M"(
或者
"H")
的高度。優越性是設計者和用戶都具有對字體大小的控制權，缺陷是早期版本的瀏覽器不支持。
二、顏色單位
-
用百分比值來表示；如
color:rgb(50%,0,50%)
-
使用
0-255
之間的整數值來設置：如
color:rgb(128,0,128)
-
使用十六進制數組定義顏色：如
#fc0eab
-
使用簡化的十六進制數定義顏色：如
#080
-
為顏色取名：
aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow
三、URL單位
URL
單位的具體格式是：在
“url”
后面緊跟一個括號，括號中是
url
的地址。如果在地址中使用了括號、逗號、空格、單引號河雙引號，那么就必須在整個地址的外面加上一對單引號或者雙引號。地址可以是相對地址或絕對地址。
第六章
CSS
格式化模型
CSS
的格式化定義包括兩種元素：塊級元素和行內元素。
第七章
CSS
定位
相對定位：允許元素在相對于文檔布局的原始位置上進行偏移（
OFFSET
）操作。
絕對定位：允許元素與原始的文檔布局分離并且任意定位。
一、CSS定位的屬性
position,left,top,width,height,clip,overflow,z-index,visibility
1
、
position:absolute|relative|static
absolute
是絕對定位；
relative
是相對定位，在
scripting
語言實現動畫特效的時候非常有用處；
static
是默認狀態，沒有定位功能。
2
、
left,top:length|percentage|auto
左上角頂點是定位的取值參考點。
css
格式化是將對象放置在一個個矩形的
"
容器
"
中，這個矩形的左上角頂點就是定位的取值參考點。任何
left
和
top
值都是相對左上角而言的。
left
是容器的左上頂點到上級元素左邊界之間的距離；
top
是容器的左上頂點到上級元素上邊界之間的距離。
3
、
width,height:length|percentage|auto
4
、
clip:shape|auto
shape:rect(top,right,bottom,left),
一個剪切區域定義了元素的哪一個矩形部分可見。
5
、
overflow:visible|hidden|scroll|auto
overflow
決定了元素的內容在超越它的寬度和高度限制時，瀏覽器怎樣處理。使用
visible
，元素的寬度可以比原先聲明的更大。任何填充距或邊框都保留并相應擴大。使用
hidden
，則任何超出原先聲明的寬度和高度的內容都會變得不可見。使用
auto
時，一般超過高度或寬度時，瀏覽器會提供一組滾屏工具。使用
scroll
，表示如果瀏覽器支持滾屏工具，無論元素內容是否超越了邊界，這個工具都應該被顯示。這避免了載一些動態顯示的狀態下，滾動條是否需要顯示的混亂問題。
6
、
z-index:auto|integer
7
、
visibility:inherit|visible|hidden
inherit
（繼承）是默認值。
第八章
CSS
打印支持（略）
第九章
CSS
與框架結構
一、屬性
"@page"
允許用戶定義最外圍層的框架屬性；
"@frame"
允許用戶定義嵌入的框架。
1
、
parent:<frame name>
2
、
zindex:<number>
3
、
layout:fill|fixed|row|column
-
fill
是默認值，也是傳統布局規定。把框架中的內容按照瀏覽器傳統的方法排列出來成為一個
html
文檔，
left,top,right,bottom
值都會被忽略不計。
-
fixed:
把沒一個元素都放置在相對于框架結構的固定位置上。
-
layout:row
把框架結構按照一個單一列的形式互相緊挨著排列起來。
-
layout:column
把框架結構按照一個單一行的形式互相緊挨著排列起來。
4
、
content:<url>|normal
5
、
border:length|style|url|color
6
、
padding:values
7
、
background:transparent|color|url|blend-direction|repeat|scroll|position
二、將html元素與框架關聯
使用
flow:
屬性。如
p{flow:main}
使
<P>
內的內容都放在
main
框架中。
三、為超文本鏈接設置目標框架
<target:>
屬性。
-
target:_blank
打開新窗口。
-
target:_popup
打開新的彈出窗口，通常沒有變框，適用于消息、警告等。
-
target:_self
在當前框架結構中打開，會覆蓋當前內容。
-
target:_parent
在當前一級的上級框架里打開，如果沒有上級框架，則會在自身框架打開。
-
target:_top
在當前窗口打開，覆蓋所有的框架內容。
四、處理“溢出”
overflow:autoscroll|scrollbar|hand|button|any
第十章
CSS
與
HTML
（略）
第十一章
聲音層疊樣式表單
一、通用聲音屬性
1
、
volume:%|silent|x-soft|soft|medium|loud|x-loud
2
、
pause-before:
時間值
|
百分比值
表示在元素前的停頓
3
、
pause-after:
同上
表示在元素后的停頓
4
、
pause:
是
2
和
3
的簡便指定形式。
5
、
cue,cue-before,cue-after:url|none
6
、
play-during:url|mix?repeat?|auto|none
指定背景聲音。
7
、
azimuth:
角度值
|left-side|far-left|left|center-left|center|center-right|right|far-right|right-side|behind|leftwards|rightwards
提供聲音場幻境效果。
8
、
elevation:angle|below|level|above|higher|lower
設置音源的仰角位置。
9
、
speech-rate:number|x-slow|slow|medium|fast|x-fast|faster|slower
閱讀的速度。
10
、
voice-family:specific-voice|generic-voice|
11
、
pitch:hertz|x-low|low|medium|high|x-high
音高標準。
12
、
pitch-range:% 0%
音量代表平緩、單調的聲音；
50%
代表普通聲音；大于
50%
代表顫音。
13
、
stress:%
語音強調的級別。
14
、
richness:%
閱讀聲音的飽滿程度。
15
、
speak-punctuation:code|none
使更加富有文采。
16
、
speak-date:myd|dmy|ymd
指定閱讀日期的方式。
17
、
speak-numeral:digits|continous|none
閱讀數字的方法。
18
、
speak-time:24|12|none
控制是否把時間按照
24
小時制閱讀。
第十二章
CSS
濾鏡和漸變
filter:filtername()
是實現濾鏡樣式的屬性。對于一個元素可以作用多個濾鏡屬性。
一、濾鏡屬性
1
、
alpha
語法：
filter:alpha(Opacity=,FinishOpacity=,Style=,StartX=,StartY=,Finishx=,FinishY=)
作用是把一個元素與背景混合。
-
opacity
代表透明度，從
0-100
。
-
finishopacity
指定漸變時的結束透明度。
-
style
指定了透明區域的形狀特征。
0-
統一形狀；
1-
線形；
2-
放射狀；
3-
長方形。
-
startX
和
startY
代表透明效果開始的
x,y
坐標；
-
finishX
和
finishY
代表結束的
x,y
坐標。
2
、
blur
語法：
filter:blur(add=,direction=,strength=)
作用是產生模糊效果。
-
add
指定圖片是否被改變成印象派的模糊效果。
true,false
對文字設定為
add=1
時效果很好。
-
direction
設置模糊的方向。有
0,45,90,135,180,225,270,315
-
strength
只能是整數，代表有多少像素的寬度將受到模糊影響。默認值是
5
。
3
、
chroma
語法：
filter:chroma(color=)
設置一個對象中指定的顏色為透明色。
4
、
dropshadow
語法：
filter:DropShadow(color=,OffX=,OffY=,Positive=)
添加對象的陰影效果。
-
positive
為
true
時可以為任何的非透明像素建立可見的投影。為
false
時就為透明的像素部分建立可見的投影。
5
、
FlipH
語法：
filter:FlipH
水平翻轉。
6
、
FlipV
語法：
filter:FlipV
垂直翻轉。
7
、
Glow
語法：
filter:Glow(color=,strength=)
邊緣發光效果。
strength
是從
1
到
255
之間的數。
8
、
Gray
語法：
filter:Gray
把一張圖變為灰度圖。
9
、
Invert
語法：
filter:Invert
底片效果。
10
、
Light
語法：
filter:Light
模擬光源的投射效果。
11
、
Mask
語法：
filter:Mask(color=)
為對象建立一個覆蓋于表面的膜。
12
、
Shadow
語法：
filter:Shadow(color=,direction=)
在指定的方向上建立物體的投影。
13
、
Wave
語法：
filter:Wave(add=,freq=,LightScrength=,Phase=,Strenth=)
波動效果。
-
add
默認值為
true
表示是否要把對象按照垂直的波形樣式打亂。
-
freq
是波紋頻率。指定在這個對象上面一共需要產生多少個完整的波紋。
-
lightstrength
可對波紋增強光影效果。從
0-100
。
-
phase
設置正弦波開始的便宜量。
0-100
。
-
strength
代表振幅大小。
14
、
Xray
語法：
filter:Xray
反映出對象的輪廓并把輪廓增亮。
?