您的位置：首页 > Web前端 > CSS

CSS学习记录（高级）

2008-10-20 15:29 411 查看

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 */ [/code]
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

伪类和 CSS 类

伪类可以与 CSS 类配合使用：

a[code].red

:visited {color: #FF0000}
<a class="

red

" href="css_syntax.asp">CSS Syntax</a>[/code]
假如上面的例子中的链接被访问过，那么它将显示为红色。

@media规则

@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：

<html>
<head>
<style>
[code]@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>[/code]

不同的媒介类型

注释：媒介类型名称对大小写不敏感。

浏览器支持：IE: Internet Explorer, F: Firefox, N: Netscape。

W3C：“W3C” 列的数字显示出属性背景由哪个 CSS 标准定义（CSS1 还是 CSS2）。

媒介类型	描述
all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航