css高级教程css利剑.docx
《css高级教程css利剑.docx》由会员分享，可在线阅读，更多相关《css高级教程css利剑.docx（45页珍藏版）》请在冰豆网上搜索。
css高级教程css利剑
CSS尺寸（Dimension）
∙PreviousPage
∙NextPage
CSS尺寸（Dimension）属性允许你控制元素的高度和宽度。
同样，它允许你增加行间距。
CSS尺寸实例：
使用像素值设置图像的高度
本例演示如何使用像素值设置元素的高度。
使用百分比设置图像的高度
本例演示如何使用百分比值来设置元素的高度。
使用像素值来设置元素的宽度
本例演示如何使用像素值来设置元素的宽度。
使用百分比来设置元素的宽度
本例演示如何使用百分比值来设置元素的宽度。
设置元素的最大高度
本例演示如何设置一个元素的最大高度。
使用像素值来设置元素的最大宽度
本例演示如何使用像素值来设置元素的最大高度。
使用百分比来设置元素的最大宽度
本例演示如何使用百分比值来设置元素的最大高度。
使用像素值来设置元素的最小高度
本例演示如何使用像素值来设置元素的最小高度。
使用像素值来设置元素的最小宽度
本例演示如何使用像素值来设置元素的最小宽度。
使用百分比来设置元素的最小宽度
本例演示如何使用百分比值来设置元素的最小宽度。
使用百分比设置行间距
本例演示如何使用百分比值来设置段落中的行间距。
使用像素值设置行间距
本例演示如何使用像素值来设置段落中的行间距。
使用数值来设置行间距
本例演示如何使用一个数值来设置段落中的行间距。
CSS尺寸属性
CSS尺寸属性允许你控制元素的高度和宽度。
同样，还允许你增加行间距。
属性
描述
height
设置元素的高度。
line-height
设置行高。
max-height
设置元素的最大高度。
max-width
设置元素的最大宽度。
min-height
设置元素的最小高度。
min-width
设置元素的最小宽度。
width
设置元素的宽度。
CSS分类（Classification）
∙PreviousPage
∙NextPage
CSS分类属性允许你规定如何以及在何处显示元素。
CSS分类（Classification）实例：
如何把元素显示为内联元素
本例演示如何把元素显示为内联元素。
如何把元素显示为块级元素
本例演示如何把元素显示为块级元素。
float属性的简单应用
使图像浮动于一个段落的右侧。
将带有边框和边界的图像浮动于段落的右侧
使图像浮动于段落的右侧。
向图像添加边框和边界。
带标题的图像浮动于右侧
使带有标题的图像浮动于右侧
使段落的首字母浮动于左侧
使段落的首字母浮动于左侧，并向这个字母添加样式。
创建水平菜单
使用具有一栏超链接的浮动来创建水平菜单。
创建无表格的首页
使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
定位：
相对定位
本例演示如何相对于一个元素的正常位置来对其定位。
定位：
绝对定位
本例演示如何使用绝对值来对元素进行定位。
定位：
固定定位
本例演示如何相对于浏览器窗口来对元素进行定位。
如何使元素不可见
本例演示如何使元素不可见。
你希望元素被显示出来，还是不呢？
把表格元素设置为collapse（请在非IE的浏览器中查看）
本例演示如何使表格元素叠加？
改变光标
本例演示如何改变光标。
清除元素的侧面
本例演示如何使用清除元素侧面的浮动元素。
CSS分类属性（Classification）
CSS分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。
属性
描述
clear
设置一个元素的侧面是否允许其他的浮动元素。
cursor
规定当指向某元素之上时显示的指针类型。
display
设置是否及如何显示元素。
float
定义元素在哪个方向浮动。
position
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility
设置元素是否可见或不可见。
CSS伪类（Pseudo-classes）
∙PreviousPage
∙NextPage
CSS伪类用于向某些选择器添加特殊的效果。
CSS伪类（Pseudo-classes）实例：
超链接
本例演示如何向文档中的超链接添加不同的颜色。
超链接2
本例演示如何向超链接添加其他样式。
超链接-:
focus的使用
本例演示如何对超链接应用:
focus伪类（无法在IE中工作）。
:
first-child（首个子对象）
本例演示:
first-child伪类的用法。
:
lang（语言）
本例演示:
lang伪类的用法。
语法
伪类的语法：
selector:
pseudo-class{property:
value}
CSS类也可与伪类搭配使用。
selector.class:
pseudo-class{property:
value}
锚伪类
在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：
活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:
link{color:
#FF0000}/*未访问的链接*/
a:
visited{color:
#00FF00}/*已访问的链接*/
a:
hover{color:
#FF00FF}/*鼠标移动到链接上*/
a:
active{color:
#0000FF}/*选定的链接*/
提示：
在CSS定义中，a:
hover必须被置于a:
link和a:
visited之后，才是有效的。
提示：
在CSS定义中，a:
active必须被置于a:
hover之后，才是有效的。
提示：
伪类名称对大小写不敏感。
伪类与CSS类
伪类可以与CSS类配合使用：
a.red:
visited{color:
#FF0000}
CSSSyntax
假如上面的例子中的链接被访问过，那么它将显示为红色。
CSS2-:
first-child伪类
您可以使用:
first-child伪类来选择元素的第一个子元素。
这个特定伪类很容易遭到误解，所以有必要举例来说明。
考虑以下标记：
Thesearethenecessarysteps:
- IntertKey
- Turnkeyclockwise
- Pushaccelerator
Donotpushthebrakeatthesametimeastheaccelerator.
在上面的例子中，作为第一个元素的元素包括第一个p、第一个li和strong和em元素。
给定以下规则：
p:
first-child{font-weight:
bold;}
li:
first-child{text-transform:
uppercase;}
第一个规则将作为某元素第一个子元素的所有p元素设置为粗体。
第二个规则将作为某个元素（在HTML中，这肯定是ol或ul元素）第一个子元素的所有li元素变成大写。
请访问该链接，来查看这个:
first-child实例的效果。
提示：
最常见的错误是认为p:
first-child之类的选择器会选择p元素的第一个子元素。
注释：
必须声明
DOCTYPE>，这样:
first-child才能在IE中生效。
为了使您更透彻地理解:
first-child伪类，我们另外提供了3个例子：
例子1-匹配第一个
元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的p元素：
p:
first-child{
color:
red;
}
sometext
sometext
TIY
例子2-匹配所有
元素中的第一个元素
在下面的例子中，选择器匹配所有
元素中的第一个元素：
p>i:
first-child{
font-weight:
bold;
}
sometext.sometext.
sometext.sometext.
TIY
例子3-匹配所有作为第一个子元素的
元素中的所有元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的
元素中的所有元素：
p:
first-childi{
color:
blue;
}
sometext.sometext.
sometext.sometext.
TIY
CSS2-:
lang伪类
:
lang伪类使你有能力为不同的语言定义特殊的规则。
在下面的例子中，:
lang类为属性值为no的q元素定义引号的类型：
q:
lang（no）
{
quotes:
"~""~"
}
文字段落中的引用的文字文字
伪类
浏览器支持：
IEInternetExplorer,F:
Firefox,N:
Netscape。
W3C：
“W3C”列的数字显示出伪类属性由哪个CSS标准定义（CSS1还是CSS2）。
伪类
作用
IE
F
N
W3C
:
active
将样式添加到被激活的元素
4
1
8
1
:
focus
将样式添加到被选中的元素
-
-
-
2
:
hover
当鼠标悬浮在元素上方时，向元素添加样式
4
1
7
1
:
link
将特殊的样式添加到未被访问过的链接
3
1
4
1
:
visited
将特殊的样式添加到被访问过的链接
3
1
4
1
:
first-child
将特殊的样式添加到元素的第一个子元素
1
7
2
:
lang
允许创作者来定义指定的元素中使用的语言
1
8
2
CSS伪元素（Pseudo-elements）
∙PreviousPage
∙NextPage
CSS伪元素用于将特殊的效果添加到某些选择器。
CSS伪元素（Pseudo-elements）实例：
制作首字母特效
本例演示如何向文本的首字母添加特效。
制作首行特效
本例演示如何向文本的首行添加特效。
语法：
伪元素的语法：
选择器:
伪元素{属性:
值}
CSS类也可以与伪元素配合使用：
选择器.类:
伪元素{属性:
值}
:
first-line伪元素
"first-line"伪元素用于向某个选择器中的文字的首行添加特殊样式：
p{font-size:
12pt}
p:
first-line{color:
#0000FF;font-variant:
small-caps}
Sometextthatendsupontwoormorelines
在上面的例子中，浏览器显示根据first-line伪元素格式化的第一行。
浏览器是依靠浏览器窗口的尺寸来进行分行的。
提示：
first-line伪元素仅能被用于块级元素。
提示：
下面的属性可以被应用到first-line伪元素。
∙font属性
∙color属性
∙background属性
∙word-spacing
∙letter-spacing
∙text-decoration
∙vertical-align
∙text-transform
∙line-height
∙clear
:
first-letter伪元素
first-letter伪元素用于向某个选择器中的文本的首字母添加特殊的样式：
p{font-size:
12pt}
p:
first-letter{font-size:
200%;float:
left}
Thefirstwordsofanarticle.
输出的效果类似于：
___
|hefirst
|wordsofan
article.
∙font属性
∙color属性
∙background属性
∙margin属性
∙padding属性
∙border属性
∙text-decoration
∙vertical-align（仅当float为none时）
∙text-transform
∙line-height
∙float
∙clear
伪元素和CSS类
伪元素可以与CSS类配合使用：
p.article:
first-letter{color:
#FF0000}
文章中的一个段落。
上面的例子会使所有class为article的段落的首字母变为红色。
多重伪元素
多个伪元素可以配合在一起使用：
p{font-size:
12pt;}
p:
first-letter{color:
#FF0000;font-size:
24pt;}
p:
first-line{color:
#0000FF;}
Thefirstwordsofanarticle
输出的效果类似于：
__
|hefirst
|wordsofan
article.
在上面的例子中，段落的首字母将是字号为24pt的红色。
首行的其余部分将会是蓝色，而段落的其余部分会是默认的颜色。
CSS2-:
before伪元素
before伪元素可用于在某个元素之前插入某些内容。
下面的样式会在标题之前播放音频：
h1:
before
{
content:
url（beep.wav）
}
CSS2-:
after伪元素
after伪类可用于在某个元素之后插入某些内容。
下面的样式会在标题之后播放音频：
h1:
after
{
content:
url（beep.wav）
}
伪元素
浏览器支持：
IE:
InternetExplorer,F:
Firefox,N:
Netscape。
W3C：
“W3C”列的数字显示出属性背景由哪个CSS标准定义（CSS1还是CSS2）。
伪元素
作用
IE
F
N
W3C
:
first-letter
将特殊的样式添加到文本的首字母
5
1
8
1
:
first-line
将特殊的样式添加到文本的首行
5
1
8
1
:
before
在某元素之前插入某些内容
1.5
8
2
:
after
在某元素之后插入某些内容
1.5
8
2
CSS2媒介类型
∙PreviousPage
∙NextPage
媒介类型（MediaTypes）允许你定义以何种媒介来提交文档。
文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
媒介类型
某些CSS属性仅仅被设计为针对某些媒介。
比方说"voice-family"属性被设计为针对听觉用户终端。
其他的属性可被用于不同的媒介。
例如，"font-size"属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。
显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif字体更易阅读，而在纸媒介上，serif字体更易阅读。
@media规则
@media规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示14像素的Verdana字体。
但是假如页面需要被打印，将使用10个像素的Times字体。
注意：
font-weight被设置为粗体，不论显示器还是纸媒介：
....
不同的媒介类型
注释：
媒介类型名称对大小写不敏感。
浏览器支持：
IE:
InternetExplorer,F:
Firefox,N:
Netscape。
W3C：
“W3C”列的数字显示出属性背景由哪个CSS标准定义（CSS1还是CSS2）。
媒介类型
描述
all
用于所有的媒介设备。
aural
用于语音和音频合成器。
braille
用于盲人用点字法触觉回馈设备。
embossed
用于分页的盲人用点字法打印机。
handheld
用于小的手持的设备。
print
用于打印机。
projection
用于方案展示，比如幻灯片。
screen
用于电脑显示器。
tty
用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv
用于电视机类型的设备。
CSSDon't
∙PreviousPage
∙NextPage
本节列出了在使用CSS时尽量避免使用的技术。
InternetExplorerBehaviors
它是什么？
InternetExplorer5引入了行为（behaviors）。
behaviors是一种通过使用CSS向HTML元素添加行为的方法。
为什么要避免它？
只有InternetExplorer支持behavior属性。
用什么代替？
请使用JavaScript和HTMLDOM取而代之。
例子1-MouseoverHighlight
下面的HTML文件中有一个
Mouseoverme!
!
!