CSS的各种属性（鼠标 分级 容器）
日期：2013-06-11 浏览次数：21658 次
CSS鼠标属性
习惯于使用 Windows 的用户对各种各样的鼠标款式一定不会陌生，当鼠标挪动到不同的地方时，当鼠标需求执行不同的功用时，当系统处于不同的形状时，都会使鼠标外形发生改变。
虽然在网络上有各种各样的鼠标可供下载，图形五花八门，但是就 Windows 的默认系统来说，这些图形是固定不变的。改变鼠标的属性，简单说就是当鼠标挪动到不同的元素对象上面时，让鼠标以不同的外形、图案显示。这种款式是通过改变“cursor”属性来完成的。下面的表格把鼠标的完部属性都列出来，可供参考：
关键字的解释和图例
关键字 解释
auto 鼠标按照默认的形状依据页面上的元素自行改变款式.
crosshair 精确定位“十”字。
default 默认指针
hand 手形
move 挪动
e-resize 箭头朝右方
ne-resize 箭头朝右上方
nw-resize 箭头朝左上方
n-resize 箭头朝上方
se-resize 箭头朝右下方
sw-resize 箭头朝左下方
s-resize 箭头朝下方
w-resize 箭头朝左方
text 文本“I”形
wait 等待
help 协助
CSS分级属性
使用过 Word 的用户都知道有一个“项目符号和编号”的功用。在 HTML 文档中，设计者无需使用前面提到的一些字体、颜色、容器属性来格式化对象的字体、颜色、边距和填充距等。由于在 CSS 中，曾经提供了进行分级的公用分级属性。需求留意的是，无论如何，这些属性只能够被用于“列项”值是“显示”的元素。
display
属性值：block | inline | list-item | none
初始值：block
适用于：所有元素
承继：否
百分比值：不适用
这些属性中的前三个属性在 Internet Explorer 4 中并不支持。
如果是“block”，那么在页面上就会打开一个新的“容器”，这个“容器”被定位在绝对于邻近的“容器”，并遵照 CSS 格式化模型的地方。当使用“block”作为属性值时，在元素的前后都会出现一个断行。如果是“list-item”它的效果与“block”的效果有一些类似，独一不同的是其中加入的一个列项标记。如果使用“inline”作为“display”的属性值，元素前后不会被加上断行。如果是“none”那么顾名思义，该元素就不会显示出来。
list-style-type
属性值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值：disc
适用于：“display”值是“list-item”的元素
承继：是
百分比值：不适用
在列项的前面通常要为每一项加上项目符号或编号，以区分不同的列项。共有九个关键字可以描述“list-style-type”的符号或者编号，说明和图例如下：
关键字 说明 图例
disc 圆盘 l
circle 圆圈 m
square 方块 n
decimal 十进制数 1、2、3、4、5、..........
lower-roman 小写罗马数字 i、ii、iii、iv、v、..........
upper-roman 大写罗马数字 I、II、III、IV、V、.........
lower-alpha 小写字母 a、b、c、d、e、..........
upper-alpha 大写字母 A、B、C、D、E、...........
none 不显示项目符号和编号 无
list-style-image
属性值：<url> | none
初始值：none
适用于：“display”值是“list-item”的元素
承继：是
百分比值：不适用
在项目的前面，不但可以使用“list-style-type”加上项目符号和编号，还可以使用“list-style-image”来为项目加上图片符号。当加载图片时，不论能否定义了“list-style-type”属性，浏览器都会使用图片来代替项目符号或编号。
list-style-position
属性值：inside | outside
初始值：outside
适用于：“display”值是“list-item”的元素
承继：是
百分比值：不适用
“list-style-position”的值有两个：“inside”或者是“outside”，其中“outside”值是默认的值。它们决定了列项中的第二行文字的起始位置。
CSS容器属性
出于 CSS 精确定义网页款式的本意，在格式化页面对象时， CSS 将所有的元素都放置在一个“容器”里面，这个“容器”叫做 BOX。对于容器的格式化，CSS 提供了强大的支持，如今，首先了解一下与格式化“容器”有关的属性。
“容器”的属性共有以下的几类：
l 边距(margin)类的属性设置了一个元素在四个方向上距离浏览器窗口边界或上级元素的边距。它用来控制一个元素在页面上位置。
l 填充距(padding)类的属性决定了究竟在边框和内容之间应该插入多少空间的距离。
l 边框(border)类的属性定义了一个元素边距的款式。
l 剩下的一类中包括了宽度和高度属性以及浮动和清除属性。
margin-top
属性值：<length> | <percentage> | <auto>
初始值：0
适用于：所有元素
承继：否
百分比值：参考上级元素的宽度
该属性设置了一个元素顶端的边距，这个边距可以是绝对于浏览器窗口边框来说，也可以是绝对于上级元从来说。比如：BODY{margin-top:0px} 就是将浏览器窗口中的内容紧贴窗口的上边界。
留意：这个属性可以是负值，但是，很遗憾的是 Netscape 4 不支持这个负的边距值。
margin-right
属性值：<length> | <percentage> | auto
初始值：0
适用于：所有元素
承继：否
百分比值：参考上级元素的宽度
该属性设置了一个元素右侧的边距，这个边距可以是绝对于浏览器窗口边框来说，也可以是绝对于上级元从来说。
留意：这个属性可以是负值。
margin-bottom
属性值：<length> | <percentage> | auto
初始值：0
适用于：所有元素
承继：否
百分比值：参考上级元素的宽度
该元素设置了一个元素底部的边距，这个边距可以是绝对于浏览器窗口边框来说，也可以是绝对于上级元从来说。
留意：这个属性可以是负值。
margin-left
属性值：<length> | <percentage> | auto
初始值：0
适用于：所有元素
承继：否
百分比值：参考上级元素的宽度
该元素设置了一个元素左侧的边距，这个边距可以是绝对于浏览器窗口边框来说，也可以是绝对于上级元从来说。具体以上四个属性我们可以通过以下这个例子就会明白的。
<HTML>
<head>
<title>CSS Demo</title>
<style type="text/css">
p{
margin-top:0em;
margin-right:2em;
margin-bottom:3em;
margin-left:6em;
}
</style>
</head>
<body>
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text
习惯于使用 Windows 的用户对各种各样的鼠标款式一定不会陌生，当鼠标挪动到不同的地方时，当鼠标需求执行不同的功用时，当系统处于不同的形状时，都会使鼠标外形发生改变。
虽然在网络上有各种各样的鼠标可供下载，图形五花八门，但是就 Windows 的默认系统来说，这些图形是固定不变的。改变鼠标的属性，简单说就是当鼠标挪动到不同的元素对象上面时，让鼠标以不同的外形、图案显示。这种款式是通过改变“cursor”属性来完成的。下面的表格把鼠标的完部属性都列出来，可供参考：
关键字的解释和图例
关键字 解释
auto 鼠标按照默认的形状依据页面上的元素自行改变款式.
crosshair 精确定位“十”字。
default 默认指针
hand 手形
move 挪动
e-resize 箭头朝右方
ne-resize 箭头朝右上方
nw-resize 箭头朝左上方
n-resize 箭头朝上方
se-resize 箭头朝右下方
sw-resize 箭头朝左下方
s-resize 箭头朝下方
w-resize 箭头朝左方
text 文本“I”形
wait 等待
help 协助
CSS分级属性
使用过 Word 的用户都知道有一个“项目符号和编号”的功用。在 HTML 文档中，设计者无需使用前面提到的一些字体、颜色、容器属性来格式化对象的字体、颜色、边距和填充距等。由于在 CSS 中，曾经提供了进行分级的公用分级属性。需求留意的是，无论如何，这些属性只能够被用于“列项”值是“显示”的元素。
display
属性值：block | inline | list-item | none
初始值：block
适用于：所有元素
承继：否
百分比值：不适用
这些属性中的前三个属性在 Internet Explorer 4 中并不支持。
如果是“block”，那么在页面上就会打开一个新的“容器”，这个“容器”被定位在绝对于邻近的“容器”，并遵照 CSS 格式化模型的地方。当使用“block”作为属性值时，在元素的前后都会出现一个断行。如果是“list-item”它的效果与“block”的效果有一些类似，独一不同的是其中加入的一个列项标记。如果使用“inline”作为“display”的属性值，元素前后不会被加上断行。如果是“none”那么顾名思义，该元素就不会显示出来。
list-style-type
属性值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值：disc
适用于：“display”值是“list-item”的元素
承继：是
百分比值：不适用
在列项的前面通常要为每一项加上项目符号或编号，以区分不同的列项。共有九个关键字可以描述“list-style-type”的符号或者编号，说明和图例如下：
关键字 说明 图例
disc 圆盘 l
circle 圆圈 m
square 方块 n
decimal 十进制数 1、2、3、4、5、..........
lower-roman 小写罗马数字 i、ii、iii、iv、v、..........
upper-roman 大写罗马数字 I、II、III、IV、V、.........
lower-alpha 小写字母 a、b、c、d、e、..........
upper-alpha 大写字母 A、B、C、D、E、...........
none 不显示项目符号和编号 无
list-style-image
属性值：<url> | none
初始值：none
适用于：“display”值是“list-item”的元素
承继：是
百分比值：不适用
在项目的前面，不但可以使用“list-style-type”加上项目符号和编号，还可以使用“list-style-image”来为项目加上图片符号。当加载图片时，不论能否定义了“list-style-type”属性，浏览器都会使用图片来代替项目符号或编号。
list-style-position
属性值：inside | outside
初始值：outside
适用于：“display”值是“list-item”的元素
承继：是
百分比值：不适用
“list-style-position”的值有两个：“inside”或者是“outside”，其中“outside”值是默认的值。它们决定了列项中的第二行文字的起始位置。
CSS容器属性
出于 CSS 精确定义网页款式的本意，在格式化页面对象时， CSS 将所有的元素都放置在一个“容器”里面，这个“容器”叫做 BOX。对于容器的格式化，CSS 提供了强大的支持，如今，首先了解一下与格式化“容器”有关的属性。
“容器”的属性共有以下的几类：
l 边距(margin)类的属性设置了一个元素在四个方向上距离浏览器窗口边界或上级元素的边距。它用来控制一个元素在页面上位置。
l 填充距(padding)类的属性决定了究竟在边框和内容之间应该插入多少空间的距离。
l 边框(border)类的属性定义了一个元素边距的款式。
l 剩下的一类中包括了宽度和高度属性以及浮动和清除属性。
margin-top
属性值：<length> | <percentage> | <auto>
初始值：0
适用于：所有元素
承继：否
百分比值：参考上级元素的宽度
该属性设置了一个元素顶端的边距，这个边距可以是绝对于浏览器窗口边框来说，也可以是绝对于上级元从来说。比如：BODY{margin-top:0px} 就是将浏览器窗口中的内容紧贴窗口的上边界。
留意：这个属性可以是负值，但是，很遗憾的是 Netscape 4 不支持这个负的边距值。
margin-right
属性值：<length> | <percentage> | auto
初始值：0
适用于：所有元素
承继：否
百分比值：参考上级元素的宽度
该属性设置了一个元素右侧的边距，这个边距可以是绝对于浏览器窗口边框来说，也可以是绝对于上级元从来说。
留意：这个属性可以是负值。
margin-bottom
属性值：<length> | <percentage> | auto
初始值：0
适用于：所有元素
承继：否
百分比值：参考上级元素的宽度
该元素设置了一个元素底部的边距，这个边距可以是绝对于浏览器窗口边框来说，也可以是绝对于上级元从来说。
留意：这个属性可以是负值。
margin-left
属性值：<length> | <percentage> | auto
初始值：0
适用于：所有元素
承继：否
百分比值：参考上级元素的宽度
该元素设置了一个元素左侧的边距，这个边距可以是绝对于浏览器窗口边框来说，也可以是绝对于上级元从来说。具体以上四个属性我们可以通过以下这个例子就会明白的。
<HTML>
<head>
<title>CSS Demo</title>
<style type="text/css">
p{
margin-top:0em;
margin-right:2em;
margin-bottom:3em;
margin-left:6em;
}
</style>
</head>
<body>
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
