CSS 常用样式属性－金锄头文库

资源描述

《CSS 常用样式属性》由会员分享，可在线阅读，更多相关《CSS 常用样式属性（7页珍藏版）》请在金锄头文库上搜索。

1、CSS 常用样式属性从CSS的基本语法就可以看出，属性是CSS非常重要的部分。掌握了 CSS的各种属性是编辑页面样式表的前提条件，因此本节将介绍一些重要CSS属性。1字体属性字体属性也是最基本的属性，表8-2列出了它的主要属性：表 8-2 字体属性属性属性含义取值font-family字体类型取值为系统中所有可用字体，可是以为此属性赋于多个值，以便于在目标系统不支持第一种字符时，以次尝试后面的字体是否支持font-style字体样式它的取值为normal、itali、oblique三者之一font-variant字体变形取值为Normal或Small-caps。该属性决定字体的显示是nor

2、mal（普通）还是small-caps （小型大写字母）font-weight字体的粗细取值为 normal、bold、bolder、lighter 100、200、300fong-size字体大小取值可以为绝对大小、相对大小、长度和百分比。当取绝对大小时，字体由小到大的取值为：xx-small、x-small、small、medium、large、 x-large和xx-large，取相对大小时其取值为：larger和smaller面使用字体属性定义一种字体样式，样式如图8-3 所示：图 8-3 字体样式定义字符样式的代码如下：字体样式.FontStylefont-family:Tim

3、es New Roman, Times, serif; font-Style:italic;font-variant:small-caps;font-weight:bolder;font-size:36ptHello World这段代码定义了 ITZCH的字体类型为Times New Roman,并且是斜体、小体大写、粗体、 36 号字体。2颜色及背景属性除了上面介绍的字体样式属性外，还可以用样式表控制字体的颜色和背景属性，使字体不再是单纯的黑白显示。控制字体颜色及背景的CSS属性见表8-3所示:表 8-3 颜色和背景属性属性属性含义取值color字体颜色颜色值可以是一个关键字或一个RGB

4、格式的数字o Windows VGA（视频图像阵列）形成了 16各关键字：aqua （浅绿色），black （黑色）， blue （蓝色），fuchsia （紫红色），gray （灰色），green （绿色），lime（石灰色）,maroon （栗色）,navy （深蓝）,olive （橄榄色）,purple （紫色）,red （红色）,silver （银白色）,teal （兰绿色）,white （白色）和yellow （黄色）RGB格式的数字颜色则是指用红、绿、蓝三种颜色调出其他颜色background-color背景颜色颜色值与字体颜色值相同background-image背景图象背

5、景图象属性设定一个元素的背景图象。例如： body background-image: url（/images/foo.jpg）为了那些不载入图象的浏览者，当定义了背景图象后，应该也要定义一个类似的背景颜色background-repeat背景重复背景重复属性决定一个指定的背景图象如何被重复。值为repeat-x时，图象横向重复，当值为 repeat-y时图象纵向重复。例如：body background-repeat: repeat-x，这段代码使图像横向平铺background-attachment背景附件背景附件属性决定指定的背景图象是跟随内容滚动，还是固定不动。例如，指定一个固

6、定的背景图象：body background-attachment: fixed obackground-position背景位置背景位置属性给出指定背景图象的最初位置。该属性只能用于IMG, INPUT，TEXTAREA，SELECT和 OBJECT元素。安排背景位置最容易的方法是使用关键字：横向的关键字（left, center，right）和纵向的关键字（top，center，bottom）。百分比和长度也可用作安排背景图象的位置。百分比和字体大小有关。虽然使用长度是允许的，但因为它们处理不同的显示分辨率时有不可避免的缺点，所以不推荐使用background背景可以设定背景的颜

7、色、图像、重复、附件和位置。例如，指定段落的背景：p background: url（/images/ball.jpg） #fOf8ff fixed 下面仍然以一个示例来演示如何使用颜色和背景属性样式。效果如图8-4所示：图 8-4 颜色及背景属性为了达到上述效果，可在字体属性的示例中添加如下的颜色和背景图象属性：color:rgb（204,82,28）;background-image : url（imagOl.jpg）; background-repeat:repeat-x;margin-right : 25em;注意，使用样式表可以实现比使用HTML标记Font实现更多的控制，当然也可

8、以使用 HTML 标记 background 指定背景属性。3排版属性前面介绍了如何用CSS定义字体、颜色和背景属性，那么接下来将为定义好的文本进行排版。表8-4列出CSS中用于控件文本的排版的属性:表 8-4 颜色和背景属性属性属性含义取值word-spacing文字间隔文字间隔属性定义一个附加在文字之间的间隔数量。该值必须符合长度格式，允许使用负值。例如：p word-spacing: 4em letter-spacing字母间隔字母间隔属性定义一个附加在字符之间的间隔数量text-d ecoration文字修饰文本修饰属性允许通过五个属性中的一个来修饰文本： underline （下划

10、eft | right | center | justifytext-indent文本缩进文本缩进属性可以定义第一行的缩进数量。该值必须是一个长度或一个百分比，如果为百分比则视上级元素的宽度而定line-height行高当取值为数字时，行高由元素字体大小的量与该数字相乘所得；在下面的示例中，将对文本属性进行处理，即增加了文字之间的间距，增高了行与行之间行高，对齐方式变成两端齐，并且段首还进行处缩进。显示效果如图8- 5 所示：图 8-5 排版属性样式利用 CSS 的文本属性可以很方便地对页面中的文本进行排版。下面是实现该显示效果的示例代码：排版属性 pletter-spacing:le

11、m;text-align:justify;text-indent:4em;line-height: 15pt;开发人员可以用任何一种文本编辑工具来编写样式表CSS,比如Windows下的记事本和写字板。另外，也可以使用一些专门的HTML文本编辑工具（如Frontpage、Ultraedit等），来编辑CSS文档。4、“容器”属性CSS 的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性。在网页中的内容必须“装”进这个“容器”中。“容器”属性是CSS中非常重要的一种属性。下面将对“容器”属性进行分类介绍。首先介绍边距属性，表8-5 列出了容器属性中常用的边距属性。表 8-5

12、边距属性属性属性含义取值margin-top设置上边界上边界属性用一个指定的长度或百分比值来设置元素的上边界，百分比值参考上级元素的宽度。允许使用负值指定边距margin-right设置右边界右边界属性可以是一个指定的长度或百分比值margin-bottom设置下边界下边界属性可以是一个指定的长度或百分比值margin-left设置左边界左边界属性可以是一个指定的长度或百分比值定义了边距后的页面，无论怎么改变窗口的大小，它都会按照定义好的边距样式显示。定义连距属性的语句如下：也可以一次使用margin定义四个连距，边距的顺序是上、右、下、左。下面语句实现的与此相同的功能：该语句的含义是

13、：上边距为2em，右边距为3em,下边距为4em,左边距为5em。在定义了边距大小后，接下来介绍填充距属性。填充距的属性见表8-6 所示：表 8-6 填充距属性属性属性含义取值Padding-top顶端填充距。可以为绝对值，也可以是百分比Padding-right右边填充距Length | percentagePadding-bottom底端填充距Length | percentagePadding-left左边填充距Length | percentage首先了解什么叫填充距，它与边距有什么差别？填充距指的是文本边框与文本内容之间的距离；而边距指定文本边框与容器之间的距离。设定填充距与设置边距的方式相同，例如：最后来看一下CSS提供的边框属性。边框属性可以用来控制表格四边边框的宽度、边框颜色和边框样式，如表8-7 所示。表 8-7 边框属性属性属性含义取值border-width边框宽度medium（默认宽度）| thin（小于默认宽度）| thick（大于默认宽度）| length（用相对或绝对值设置边框宽度。不可为负值）border-style边框样式None （无边框）| hidden （隐藏边框）| dotted （点线）| dashed （虛线）| solid（实线边框）| doubl

展开阅读全文