第一章
概述
一、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
反映出对象的轮廓并把轮廓增亮。