CSS的各种属性.docx

资源描述

CSS的各种属性.docx

《CSS的各种属性.docx》由会员分享，可在线阅读，更多相关《CSS的各种属性.docx（36页珍藏版）》请在冰点文库上搜索。

CSS的各种属性.docx

CSS的各种属性

CSS的各种属性（鼠标分级容器）

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

适用于：

所有元素

继承：

否

百分比值：

不适用

　　这些属性中的前三个属性在InternetExplorer4中并不支持。

如果是“block”，那么在页面上就会打开一个新的“容器”，这个“容器”被定位在相对于邻近的“容器”，并遵循CSS格式化模型的地方。

当使用“block”作为属性值时，在元素的前后都会出现一个断行。

如果是“list-item”它的效果与“block”的效果有一些相似，唯一不同的是其中加入的一个列项标记。

如果使用“inline”作为“display”的属性值，元素前后不会被加上断行。

如果是“none”那么顾名思义，该元素就不会显示出来。

list-style-type

属性值：

初始值：

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

属性值：

|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

属性值：

初始值：

适用于：

所有元素

继承：

否

百分比值：

参考上级元素的宽度

　　该属性设置了一个元素顶端的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。

比如：

BODY{margin-top:

0px}就是将浏览器窗口中的内容紧贴窗口的上边界。

注意：

这个属性可以是负值，但是，很遗憾的是Netscape4不支持这个负的边距值。

margin-right

属性值：

||auto

初始值：

适用于：

所有元素

继承：

否

百分比值：

参考上级元素的宽度

　　该属性设置了一个元素右侧的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。

注意：

这个属性可以是负值。

margin-bottom

属性值：

||auto

初始值：

适用于：

所有元素

继承：

否

百分比值：

参考上级元素的宽度

　　该元素设置了一个元素底部的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。

注意：

这个属性可以是负值。

margin-left

属性值：

||auto

初始值：

适用于：

所有元素

继承：

否

百分比值：

参考上级元素的宽度

　　该元素设置了一个元素左侧的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。

具体以上四个属性我们可以通过以下这个例子就会明白的。

CSSDemo

margin-top:

0em;

margin-right:

2em;

margin-bottom:

3em;

margin-left:

6em;

}

Thisissampletextshowsthemarginsettings.Thisissampletextshowsthemarginsettings.Thisissampletextshowsthemarginsettings.Thisissampletextshowsthemarginsettings.Thisissampletextshowsthemarginsettings.Thisissampletextshowsthemarginsettings.Thisissampletextshowsthemarginsettings.Thisissampletextshowsthemarginsettings.Thisissampletextshowsthemarginsettings.Thisissampletextshowsthemarginsettings.

padding-top

属性值：

初始值：

适用于：

所有元素

继承：

否

百分比值：

参考上级元素的宽度

　　该属性设置了一个元素的顶端填充距。

它的属性值可以使用长度值或者百分比值来指定。

但它的值不能为负，如果指定了负值，那么浏览器在执行时将把它变成所能支持的最接近的值：

P{padding-top:

15px}

padding-right

属性值：

初始值：

适用于：

所有元素

继承：

否

百分比值：

参考上级元素的宽度

　　该属性设置了一个元素的右侧填充距。

它的属性值可以使用长度值或者百分比值来指定，但是不能使用负值。

padding-bottom

属性值：

初始值：

适用于：

所有元素

继承：

否

百分比值：

参考上级元素的宽度

　　在动态的页面里恰当地种用这些鼠标有时可以起到意想不到的效果。

例如，有一个链接的目标为帮助文件，于是可以使用帮助形式的鼠标。

还有在一些需要使用鼠标事件的页面中，如果想告诉用户哪里可以点击鼠标，那么只要在页面上特定的位置让鼠标变成手形，用户就会辨认出页面上的活动区域。

　　该属性设置了一个元素的底端填充距。

它的属性值可以使用长度值或者百分比值来指定，但是不能使用负值。

padding-left

属性值：

初始值：

适用于：

所有元素

继承：

否

百分比值：

参考上级元素的宽度

该属性设置了一个元素的底端填充距。

　它的属性值可以使用长度值或者百分比值来指定，但是不能使用负值。

上面所介绍的四个属性我们可以通过以下例子看出：

CSSDemo

padding-top:

0em;

padding-right:

2em;

padding-bottom:

3em;

padding-left:

6em;

}

border-top-width

属性值：

thin|medium|thick|

初始值：

“medium”

适用于：

所有元素

百分比值：

不适用

继承：

否

　　该元素设置了元素顶端边框的宽度，其属性值可以使用关键字或数字来指定。

关键字共有三个：

其中thin表示为最细的边框，thick表示为最粗，medium表示为中等宽度。

border-right-width

属性值：

thin|medium|thick|

初始值：

“medium”

适用于：

所有元素

百分比值：

不适用

继承：

否

　　该元素设置了元素右边边框的宽度，其属性值可以使用关键字或数字来指定。

border-bottom-width

属性值：

thin|medium|thick|

初始值：

“medium”

适用于：

所有元素

百分比值：

不适用

继承：

否

　　该元素设置了元素底端边框的宽度，其属性值可以使用关键字或数字来指定。

border-left-width

属性值：

thin|medium|thick|

初始值：

“medium”

适用于：

所有元素

百分比值：

不适用

继承：

否

　　该元素设置了元素左边边框的宽度，其属性值可以使用关键字或数字来指定。

border-color

属性值：

{1,4}

初始值：

“color”属性的值

适用于：

所有元素

继承：

否

百分比值：

不适用

　　边框颜色属性可以设置元素四条边框的颜色，当你给出四个颜色属性值时，它们的表示顺序为上，右，下，左。

如果仅给出一个值，那么四条边框的颜色都一样。

如果给出两个或三个值，那么缺失边的颜色将从对边获取。

如果在指定边框时没有给出颜色值，那么，边框的颜色就等于该元素“color”属性值的颜色。

border-style

属性值：

初始值：

none

适用于：

所有元素

继承：

否

百分比值：

不适用

　　“border-style”决定了边框的样式。

如果在边框宽度时值为0，那么这个属性值就无效了。

也就是说，这个属性必须用于可见的边框。

“border-style”属性值共有九个关键字来描述，它们的名称和定义如下：

关键字解释

none　不画边框，不论border-width的宽度是多少，边框都不会显示。

dotted边框的样式为由点组成的虚线。

dash　边框的样式为由短线组成的虚线。

solid　边框为实线。

double边框线为双线。

双线再加上它们之间的空白部分的宽度就等于border-width宽度。

groove3D沟槽状的边框。

ridge　3D脊状的边框。

inset　3D内嵌的边框（颜色较深）

outset3D外嵌的边框（颜色较浅）

　　属性值可以指定一个、两个、三个或四个。

如果仅给出一个属性值，那么所有的边框都是这个样式，如果给出四个值，它们分别作用于上、右、下、左四条边框。

如果仅给出两个或三个值，那么缺失边的属性值将从对边获取。

width

属性值：

||auto

初始值：

auto

适用于：

块级元素和可替换元素

继承：

否

百分比值：

参考上级元素的宽度

　　所有的块级元素和可替换元素都拥有width（宽度）属性。

宽度可以用长度值、百分比值来定义元素的宽度。

height

属性值：

|auto

初始值：

auto

适用于：

块级元素和可替换元素

继承：

否

　　所有的块级元素和可替换元素都可以拥有height属性。

它的定义方式与width属性是相似的。

不过需要注意的是，height属性不能用百分比值来指定。

如果把height和width结合起来使用就能够很好地控制一个元素的高度和宽度值。

在height和width都是“auto”的情况下，改变它们任何一个都可以相应地使图片按比例缩放。

float

属性值：

left|right|none

初始值：

none

适用于：

所有元素

继承：

否

百分比值：

不适用

　　使用float元素可以使文字环绕在一个元素的四周。

当属性值是right或left时，该元素就会相应地出现在右边或边，即：

文字环绕于该元素的左边或右边。

clear

属性值：

none|left|right|both

初始值：

none

适用于：

所有元素

继承：

否

百分比值：

不适用

这个属性是与float有关的，它可以指定在一个元素的某一边是否允许有环绕的文字（或其它对象）出现。

如果指定属性值是“right”，那么该元素右侧的所有空间都不会放进任何对象。

如果属性值是“none”，那么该元素四周都有对象环绕，这也是默认的属性值。

CSS常用信息速查手册

文字属性标识符作用属性值

　　font-family:

定义文字类型，顺序寻找，先找到的为选定值，若都找不到则用默认值宋体，黑体等

　　font-style:

定义字体风格。

normal（标准）italic（斜体）oblique（倾斜）

　　font-variant:

改变英文字母的显示normal,small-caps（小型大写字母）

　　font-weight:

使字体加粗normal（相当于400）,bold,lighter,bolder或100~900的九个数

　　font-size:

定义字体大小任意数字，以pt（点阵）、px（屏幕象素）为单位

　　文本属性text-decoration:

修饰文字underline（加下划线）overline（加上划线）line-thought（加删除线）none（清除下划线，缺省）

　　text-align:

文本的显示位置及方式left,right,center,justify（从左到右对齐）

　　颜色属性color:

定义字体颜色1.以英文单词为关键字

　　2.以十六进制3.用RGB值,用法：

RGB（255,0,0）0~255

　　背景属性

　　background-color:

定义背景颜色同于"颜色属性"的用法

　　background-image:

定义背景图象用法:

body{background-image:

url（bg.gif）}

　　其中"bg.jif"为任意图片

　　background-repeat:

按不同方式复制背景repeat-x:

按水平方向复制

　　repeat-y:

按垂直方式复制

　　background-attachment背景的固定scroll:

背景内容随前景一起滚动

　　fixed:

背景不动

　　background-position:

定义背景位置top:

背景与前景内容顶部对齐

　　bottom,left,right

　　方式:

xxptxxpt或x%x%或lefttop

　　（以两个英文单词为组合,注意:

中间有空格!

）

　　边界属性margin-top:

对象上边界缺省值为:

　　关键字:

auto

　　数值:

pt,px,in（英寸）,cm（厘米）为单位

　　margin-right:

对象右边界同上.

　　margin-bottom:

对象下边界同上.

　　margin-left:

对象左边界同上.

　　边界的简洁设置形式注解

　　DIV{margin:

10cm}所有边界为10cm

　　DIV{margin:

10cm3cm}上下为10cm,左右为3cm

DIV{margin:

1cm3cm5cm7cm}上为1cm,右为3cm,下为5cm,左为7cm。

CSS中常用的单位

　　一、长度单位

　　长度单位是Web页设计中最常用的一个单位。

一个排列无序、杂乱无章的页面不可能给人们留下什么好的印象。

于是，在设计的时候需要为元素的位置、尺寸精确地定义一些值，以使其达到预期的效果。

　　CSS给予人们精确控制网页的能力，这一点为人们津津乐道。

它允许人们定义外观、尺寸、空间及其他的样式。

但是，CSS所给出的控制同时也是一个危险的东西，这不仅表现在设计者缺乏经验，更在于如何给出一个尺寸和空间值。

为什么呢？

因为一个设计者虽然能够决定某一个特殊的屏幕分辨率，但是不可能决定别人的大脑和别人的视力或者那些富有个性的自定义设置。

　　CSS的主要功能之一就是CSS定位，这个定位的概念即包括位置的定位，也包括尺寸的定位。

无论哪一种，都需要使用长度单位，不然，精确定位就无从谈起。

　　在CSS中，长度是一种度量尺寸，用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。

　　1．定义长度

在Dreamweaver4中要定义长度，首先应该在所选择的选项后面的文本框中写符号部分，这个符号可以是“+”（正号），表示正长度值，也可以是“－”（负号），表示负长度值。

如果不写符号，那么默认值是“+”。

在符号后紧接着是一个数值，这个数值可以是整数，也可以是小数。

然后再在该选项的长度单位下拉列表框中选择一种长度单位。

长度单位一般是一个由两个字母组成的单位缩写，例如cm，pt，em等。

　　2．绝对长度单位

网页定义上常常使用的绝对长度值由厘米（cm）、毫米（mm）、英寸（in）、点（pt）、派卡（pc）等等。

　　单位英寸（in）厘米（cm）毫米（mm）磅（pt）派卡（pc）

　　英寸1.02.5425.4726

　　派卡0.166670.42334.233121.0

　　厘米0.393711028.34644.7244

　　毫米0.039370.11.02.834640.47244

　　磅0.013890.03528060.3528061.00.83333

　　绝对长度值的使用范围比较有限，只有在完全知道外部输出设备的具体情况下，才使用绝对长度值。

也就是说，绝对长度值最好用于打印机输出设备，而在仅仅作为屏幕显示时，使用绝对长度值意义不大，应该尽量使用相对长度值。

　　3．相对长度值

每一个浏览器都有其自己默认的通用尺寸标准，这个标准可以由系统决定，也可以由用户按照自己的爱好进行设置。

因此，这个默认值尺寸往往是用户觉得最适合的尺寸。

于是使用相对长度值，就可以是需要定义尺寸的元素按照默认大小为标准，相应地按比例缩放。

这样就不可能产生难以辨认的情况。

其实，百分比单位以及关键字

展开阅读全文