CSS 尺寸属性
CSS 尺寸属性允许你控制元素的高度和宽度。同样,还允许你增加行间距。
属性 | 描述 |
---|---|
height | 设置元素的高度。 |
line-height | 设置行高。 |
max-height | 设置元素的最大高度。 |
max-width | 设置元素的最大宽度。 |
min-height | 设置元素的最小高度。 |
min-width | 设置元素的最小宽度。 |
width | 设置元素的宽度。 |
CSS 分类属性 (Classification)
CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。
属性 | 描述 |
---|---|
clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
cursor | 规定当指向某元素之上时显示的指针类型。 |
display | 设置是否及如何显示元素。 |
float | 定义元素在哪个方向浮动。 |
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
visibility | 设置元素是否可见或不可见。 |
锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link
{color: #FF0000} /* unvisited link */a:visited
{color: #00FF00} /* visited link */a:hover
{color: #FF00FF} /* mouse over link */a:active
{color: #0000FF} /* selected link */
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
伪类和 CSS 类
伪类可以与 CSS 类配合使用:
a.red
:visited {color: #FF0000} <a class="red
" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过,那么它将显示为红色。
@media规则
@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印,将使用 10 个像素的 Times 字体。注意:font-weight 被设置为粗体,不论显示器还是纸媒介:
<html> <head> <style>@media screen
{ p.test {font-family:verdana,sans-serif; font-size:14px} }@media print
{ p.test {font-family:times,serif; font-size:10px} }@media screen,print
{ p.test {font-weight:bold} } </style> </head> <body>....</body> </html>
不同的媒介类型
注释:媒介类型名称对大小写不敏感。
浏览器支持:IE: Internet Explorer, F: Firefox, N: Netscape。
W3C:“W3C” 列的数字显示出属性背景由哪个 CSS 标准定义(CSS1 还是 CSS2)。
媒介类型 | 描述 |
---|---|
all | 用于所有的媒介设备。 |
aural | 用于语音和音频合成器。 |
braille | 用于盲人用点字法触觉回馈设备。 |
embossed | 用于分页的盲人用点字法打印机。 |
handheld | 用于小的手持的设备。 |
用于打印机。 | |
projection | 用于方案展示,比如幻灯片。 |
screen | 用于电脑显示器。 |
tty | 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。 |
tv | 用于电视机类型的设备。 |