CSS的各种属性.docx

1、CSS的各种属性CSS的各种属性（鼠标 分级 容器）CSS鼠标属性习惯于使用 Windows 的用户对各种各样的鼠标样式一定不会陌生，当鼠标移动到不同的地方时，当鼠标需要执行不同的功能时，当系统处于不同的状态时，都会使鼠标形状发生改变。 虽然在网络上有各种各样的鼠标可供下载，图形五花八门，但是就 Windows 的默认系统来说，这些图形是固定不变的。改变鼠标的属性，简单说就是当鼠标移动到不同的元素对象上面时，让鼠标以不同的形状、图案显示。这种样式是通过改变“cursor”属性来完成的。下面的表格把鼠标的完部属性都列出来，可供参考： 关键字的解释和图例 关键字解释 auto鼠标按照默认的状态根据

2、页面上的元素自行改变样式. 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 文档中，设计者无需使用前面提到的一些字体、颜色、容器属性来格式化对象的字体、颜色、边距和填

3、充距等。因为在 CSS 中，已经提供了进行分级的专用分级属性。需要注意的是，无论如何，这些属性只能够被用于“列项”值是“显示”的元素。 display 属性值：block | inline | list-item | none 初始值：block 适用于：所有元素 继承：否 百分比值：不适用 这些属性中的前三个属性在 Internet Explorer 4 中并不支持。 如果是“block”，那么在页面上就会打开一个新的“容器”，这个“容器”被定位在相对于邻近的“容器”，并遵循 CSS 格式化模型的地方。当使用“block”作为属性值时，在元素的前后都会出现一个断行。如果是“list-item

4、”它的效果与“block”的效果有一些相似，唯一不同的是其中加入的一个列项标记。如果使用“inline”作为“display”的属性值，元素前后不会被加上断行。如果是“none”那么顾名思义，该元素就不会显示出来。 list-style-type 属性值：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none 初始值：disc 适用于：“display”值是“list-item”的元素 继承：是 百分比值：不适用 在列项的前面通常要为每一项加上项目符号或编号，

5、以区分不同的列项。共有九个关键字可以描述“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 属性值： | none 初始

6、值：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”的值

7、有两个：“inside”或者是“outside”，其中“outside”值是默认的值。它们决定了列项中的第二行文字的起始位置。CSS容器属性出于 CSS 精确定义网页样式的本意，在格式化页面对象时， CSS 将所有的元素都放置在一个“容器”里面，这个“容器”叫做 BOX。对于容器的格式化，CSS 提供了强大的支持，现在，首先了解一下与格式化“容器”有关的属性。 “容器”的属性共有以下的几类： l 边距(margin)类的属性设置了一个元素在四个方向上距离浏览器窗口边界或上级元素的边距。它用来控制一个元素在页面上位置。 l 填充距(padding)类的属性决定了究竟在边框和内容之间应该插入多少空

8、间的距离。 l 边框(border)类的属性定义了一个元素边距的样式。 l 剩下的一类中包括了宽度和高度属性以及浮动和清除属性。 margin-top 属性值： | | 初始值：0 适用于：所有元素 继承：否 百分比值：参考上级元素的宽度 该属性设置了一个元素顶端的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。比如：BODYmargin-top:0px 就是将浏览器窗口中的内容紧贴窗口的上边界。 注意：这个属性可以是负值，但是，很遗憾的是 Netscape 4 不支持这个负的边距值。 margin-right 属性值： | | auto 初始值：0 适用于：所有元素

9、 继承：否 百分比值：参考上级元素的宽度 该属性设置了一个元素右侧的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。 注意：这个属性可以是负值。 margin-bottom 属性值： | | auto 初始值：0 适用于：所有元素 继承：否 百分比值：参考上级元素的宽度 该元素设置了一个元素底部的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。 注意：这个属性可以是负值。 margin-left 属性值： | | auto 初始值：0 适用于：所有元素 继承：否 百分比值：参考上级元素的宽度 该元素设置了一个元素左侧的边距，这个边距可以是相对

10、于浏览器窗口边框来说，也可以是相对于上级元素来说。具体以上四个属性我们可以通过以下这个例子就会明白的。 CSS Demo p margin-top:0em; margin-right:2em; margin-bottom:3em; margin-left:6em; This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the

11、 margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings. paddin

12、g-top 属性值： | 初始值：0 适用于：所有元素 继承：否 百分比值：参考上级元素的宽度 该属性设置了一个元素的顶端填充距。它的属性值可以使用长度值或者百分比值来指定。但它的值不能为负，如果指定了负值，那么浏览器在执行时将把它变成所能支持的最接近的值：0 Ppadding-top:15px padding-right 属性值： | 初始值：0 适用于：所有元素 继承：否 百分比值：参考上级元素的宽度 该属性设置了一个元素的右侧填充距。它的属性值可以使用长度值或者百分比值来指定，但是不能使用负值。 padding-bottom 属性值： | 初始值：0 适用于：所有元素 继承：否 百分比值

13、：参考上级元素的宽度 在动态的页面里恰当地种用这些鼠标有时可以起到意想不到的效果。例如，有一个链接的目标为帮助文件，于是可以使用帮助形式的鼠标。还有在一些需要使用鼠标事件的页面中，如果想告诉用户哪里可以点击鼠标，那么只要在页面上特定的位置让鼠标变成手形，用户就会辨认出页面上的活动区域。 该属性设置了一个元素的底端填充距。它的属性值可以使用长度值或者百分比值来指定，但是不能使用负值。 padding-left 属性值： | 初始值：0 适用于：所有元素 继承：否 百分比值：参考上级元素的宽度 该属性设置了一个元素的底端填充距。 它的属性值可以使用长度值或者百分比值来指定，但是不能使用负值。上面所

14、介绍的四个属性我们可以通过以下例子看出： CSS Demo p padding-top:0em; padding-right:2em; padding-bottom:3em; padding-left:6em; This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sa

15、mple text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings. border-top-width 属性值：thin | mediu

16、m | thick | 初始值：“medium” 适用于：所有元素 百分比值：不适用 继承：否 该元素设置了元素顶端边框的宽度，其属性值可以使用关键字或数字来指定。关键字共有三个：其中thin表示为最细的边框，thick表示为最粗，medium表示为中等宽度。 border-right-width 属性值：thin | medium | thick | 初始值：“medium” 适用于：所有元素 百分比值：不适用 继承：否 该元素设置了元素右边边框的宽度，其属性值可以使用关键字或数字来指定。 border-bottom-width 属性值：thin | medium | thick | 初始值

17、：“medium” 适用于：所有元素 百分比值：不适用 继承：否 该元素设置了元素底端边框的宽度，其属性值可以使用关键字或数字来指定。 border-left-width 属性值：thin | medium | thick | 初始值：“medium” 适用于：所有元素 百分比值：不适用 继承：否 该元素设置了元素左边边框的宽度，其属性值可以使用关键字或数字来指定。 border-color 属性值：1,4 初始值：“color”属性的值 适用于：所有元素 继承：否 百分比值：不适用 边框颜色属性可以设置元素四条边框的颜色，当你给出四个颜色属性值时，它们的表示顺序为上，右，下，左。如果仅给出一

18、个值，那么四条边框的颜色都一样。如果给出两个或三个值，那么缺失边的颜色将从对边获取。如果在指定边框时没有给出颜色值，那么，边框的颜色就等于该元素“color”属性值的颜色。 border-style 属性值：none | dotted | dashed | solid | double | groove | ridge | inset | outset 初始值：none 适用于：所有元素 继承：否 百分比值：不适用 “border-style”决定了边框的样式。如果在边框宽度时值为0，那么这个属性值就无效了。也就是说，这个属性必须用于可见的边框。 “border-style”属性值共有九个关键

19、字来描述，它们的名称和定义如下： 关键字 解释 none 不画边框，不论border-width的宽度是多少，边框都不会显示。 dotted 边框的样式为由点组成的虚线。 dash 边框的样式为由短线组成的虚线。 solid边框为实线。 double 边框线为双线。双线再加上它们之间的空白部分的宽度就等于border-width宽度。 groove 3D沟槽状的边框。 ridge3D脊状的边框。 inset3D内嵌的边框(颜色较深) outset 3D外嵌的边框(颜色较浅) 属性值可以指定一个、两个、三个或四个。如果仅给出一个属性值，那么所有的边框都是这个样式，如果给出四个值，它们分别作用于上

20、、右、下、左四条边框。如果仅给出两个或三个值，那么缺失边的属性值将从对边获取。 width 属性值： | | auto 初始值：auto 适用于：块级元素和可替换元素 继承：否 百分比值：参考上级元素的宽度 所有的块级元素和可替换元素都拥有 width(宽度) 属性。宽度可以用长度值、百分比值来定义元素的宽度。 height 属性值： | auto 初始值：auto 适用于：块级元素和可替换元素 继承：否 所有的块级元素和可替换元素都可以拥有 height 属性。它的定义方式与 width 属性是相似的。不过需要注意的是，height 属性不能用百分比值来指定。如果把 height 和 wid

21、th 结合起来使用就能够很好地控制一个元素的高度和宽度值。在 height 和 width 都是“auto”的情况下，改变它们任何一个都可以相应地使图片按比例缩放。 float 属性值：left | right | none 初始值：none 适用于：所有元素 继承：否 百分比值：不适用 使用 float 元素可以使文字环绕在一个元素的四周。当属性值是 right 或 left 时，该元素就会相应地出现在右边或边，即：文字环绕于该元素的左边或右边。 clear 属性值：none | left | right | both 初始值：none 适用于：所有元素 继承：否 百分比值：不适用 这个属性

22、是与 float 有关的，它可以指定在一个元素的某一边是否允许有环绕的文字（或其它对象）出现。如果指定属性值是“right”，那么该元素右侧的所有空间都不会放进任何对象。如果属性值是“none”，那么该元素四周都有对象环绕，这也是默认的属性值。 CSS 常用信息速查手册文字属性 标识符 作用 属性值 font-family: 定义文字类型，顺序寻找，先找到的为选定值，若都找不到则用默认值 宋体，黑体等 font-style: 定义字体风格。 normal(标准)italic(斜体)oblique(倾斜) font-variant: 改变英文字母的显示 normal,small-caps(小型大

23、写字母) font-weight: 使字体加粗 normal(相当于400),bold,lighter,bolder或100900的九个数 font-size: 定义字体大小 任意数字，以pt(点阵)、px(屏幕象素)为单位 文本属性 text-decoration: 修饰文字 underline(加下划线)overline(加上划线)line-thought(加删除线)none(清除下划线，缺省) text-align: 文本的显示位置及方式 left,right,center,justify(从左到右对齐) 颜色属性 color: 定义字体颜色 1.以英文单词为关键字 2.以十六进制3.用

24、RGB值,用法：RGB(255,0,0) 0255 背景属性 background-color: 定义背景颜色 同于颜色属性的用法 background-image: 定义背景图象 用法:bodybackground-image:url(bg.gif) 其中bg.jif为任意图片 background-repeat: 按不同方式复制背景 repeat-x:按水平方向复制 repeat-y:按垂直方式复制 background-attachment 背景的固定 scroll:背景内容随前景一起滚动 fixed:背景不动 background-position: 定义背景位置 top:背景与前景内

25、容顶部对齐 bottom,left,right 方式:xxpt xxpt或x% x%或left top (以两个英文单词为组合,注意:中间有空格!) 边界属性 margin-top: 对象上边界 缺省值为:0 关键字:auto 数值:pt,px,in(英寸),cm(厘米)为单位 margin-right: 对象右边界 同上. margin-bottom: 对象下边界 同上. margin-left: 对象左边界 同上. 边界的简洁设置 形式 注解 DIVmargin:10cm 所有边界为10cm DIVmargin:10cm 3cm 上下为10cm,左右为3cm DIVmargin:1cm 3

26、cm 5cm 7cm 上为1cm,右为3cm,下为5cm,左为7cm。 CSS中常用的单位一、长度单位 长度单位是Web页设计中最常用的一个单位。一个排列无序、杂乱无章的页面不可能给人们留下什么好的印象。于是，在设计的时候需要为元素的位置、尺寸精确地定义一些值，以使其达到预期的效果。 CSS给予人们精确控制网页的能力，这一点为人们津津乐道。它允许人们定义外观、尺寸、空间及其他的样式。但是，CSS所给出的控制同时也是一个危险的东西，这不仅表现在设计者缺乏经验，更在于如何给出一个尺寸和空间值。为什么呢？因为一个设计者虽然能够决定某一个特殊的屏幕分辨率，但是不可能决定别人的大脑和别人的视力或者那些富

27、有个性的自定义设置。 CSS的主要功能之一就是CSS定位，这个定位的概念即包括位置的定位，也包括尺寸的定位。无论哪一种，都需要使用长度单位，不然，精确定位就无从谈起。在CSS中，长度是一种度量尺寸，用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。 1定义长度 在Dreamweaver 4中要定义长度，首先应该在所选择的选项后面的文本框中写符号部分，这个符号可以是“+”（正号），表示正长度值，也可以是“”（负号），表示负长度值。如果不写符号，那么默认值是“+”。在符号后紧接着是一个数值，这个数值可以是整数，也可以是小数。然后再在该选项的长度单位

28、下拉列表框中选择一种长度单位。长度单位一般是一个由两个字母组成的单位缩写，例如cm，pt，em等。2绝对长度单位 网页定义上常常使用的绝对长度值由厘米（cm）、毫米（mm）、英寸（in）、点（pt）、派卡（pc）等等。单位 英寸(in) 厘米(cm) 毫米(mm) 磅(pt) 派卡(pc) 英寸 1.0 2.54 25.4 72 6 派卡 0.16667 0.4233 4.233 12 1.0 厘米 0.3937 1 10 28.3464 4.7244 毫米 0.03937 0.1 1.0 2.83464 0.47244 磅 0.01389 0.0352806 0.352806 1.0 0.83333 绝对长度值的使用范围比较有限，只有在完全知道外部输出设备的具体情况下，才使用绝对长度值。也就是说，绝对长度值最好用于打印机输出设备，而在仅仅作为屏幕显示时，使用绝对长度值意义不大，应该尽量使用相对长度值。 3相对长度值 每一个浏览器都有其自己默认的通用尺寸标准，这个标准可以由系统决定，也可以由用户按照自己的爱好进行设置。因此，这个默认值尺寸往往是用户觉得最适合的尺寸。于是使用相对长度值，就可以是需要定义尺寸的元素按照默认大小为标准，相应地按比例缩放。这样就不可能产生难以辨认的情况。其实，百分比单位以及关键字