网页设计与制作第13章.doc

第13章 CSS的属性和值一、CSS字体属性1、字体集合(font-family)可以用一个指定的字体名或一个种类的字体集合。多个集合的赋值是可以使用的，而如果确定了一个指定的字体赋值，就应该有一个种类集合名随后，以防第1个选择不存在。定义一个字体的集合的时候，就相当于定义了一个字体的控制集合，当浏览器解释执行的时候，会控制集合中所列的字体顺序从前到后的选择字体。任何包含空格的字体名都必须用单引号引住。字体集合也可以用字体属性给出。案例名称：字体集合 l2-1.htm字体集合pfont-family:隶书,times,serif字体集合text/css CSS字体 2002:7:25 eva(原创) FONT-FAMILY属性： 每部机器上都装有多种字体，浏览器会使用默认的字体浏览网页，比如简体中文版WINDOWS汉字默认是宋体，英文默认是ARIAL。 使用FONT-FAMILY属性则可以规定浏览器用什么字体解读网页。 FONT-FAMILY语法实例： h2 font-family:times,impact,sans-serif 说明如下: helvetica是浏览器首先寻找的字体名称，如果有就使用它。在helvetica字体没有找到的情况下，则会寻找impact字体，如果找到就使用它。如果以上两种字体都没有找到，则指示浏览使用sans-serif（通用字体）。在你不能保证你列出的字体浏览者一定会安装时，将一种通用字体加在字体列表中是一种好的做法。因此我们提倡使用最基本的字体制作网页，比如中文用宋体，英文用ARIAL，这样使得你的网页不会因为浏览器没能使用合适的字体解读而变样。 如果一种字体的名称中有空格，如Times New Roman，在CSS语句中要用引号包含该字体。 例：Body font-family:Times New Roman,serif 如果该语句已在双引号里，则字体名降级为单引号。 例： 如果该语句包括其它CSS规则，字体说明应放在最后。 例:H2 color:red;margin:10px;font-family:Times New Roman,serif2、字体风格(font-style)该属性以3个方法的其中一个来定义显示的字体：normal（普通）、italic（斜体）或oblique（倾斜）。案例名称：字体风格 l2-2.htm字体风格pfont-style:oblique字体风格3、字体变形(font-variant)字体变形属性决定了字体的显示是normal（普通）还是small-caps（小型大写字母）。当设置字体变形为小型大写字母时文字中的所有小写字母会显示比大写字母稍小的大写字母。案例名称：字体变形 l2-3.htm字体变形pfont-variant:small-caps字体变形ABCabc4、字体加粗(font-weight)字体加粗属性用作说明字体的字重,该属性值可以从100到900，normal相当于400，bold相当于700，bolder是将继承值加上一个等级，lighter是将继承值减上一个等级。浏览器能不能正确显示要看使用的字体类型支持几种粗细值。案例名称：字体加粗 l2-4.htm字体加粗pfont-family:Verdana;font-size:20ptfont-weight:100font-weight:600font-weight:200font-weight:700font-weight:300font-weight:800font-weight:400font-weight:900font-weight:500  5、字体大小(font-size)字体大小属性用作修改字体显示的大小：xx-small/x-small/small/medium/large/x-large/xx-large /smaller/larger/百分比/高度。关键字的本级与上级的比是：1:1.5，比如：medium与large的比是1:1.5；而larger是将继承值加上一级，smaller是将继承值减上一级；百分比是将默认字体扩大或缩小若干倍；高度的单位前面已讲过。案例名称：字体大小 l2-5.htm字体大小spanfont-size:20ptxx-smallx-smallsmallmediumlargex-largexx-large50%100%200%5pt10pt20pt20pt20ptsmaller20ptlarger6、字体(font)属性值： | | / 该属性可以一次定义前面所提到的所有属性，还有行高。例如Pfont:italic bold 12pt/14pt 黑体,Times 用于指定该段为italic（斜体）和bold（字重），24点大小和行高为44点，黑体或Times字体。案例名称：字体大小 l2-6.htm字体pfont:italic bold 24pt/50pt 黑体,Times字体字体二、CSS文本属性1、字体间隔(letter-spacing)字母间隔属性定义一个附加在字符之间的间隔数量。该值必须符合长度格式，允许使用负值。一个设为0值会阻止文字的调整。案例名称：字体间隔 l2-7.htm字体间隔pletter-spacing:40pt字体间隔CSS另外还有word-spacing,例如word-spacing：10pt，但是这种规定字符之间宽度的方式只在Netscape Communicator6.0才被很好的支持。2、字体修饰(text-decoration)文本修饰属性允许通过5个属性中的一个来修饰文本：underline（下划线）、overline（上划线）、line-through（删除线）、blink（闪烁，只适用NetScape浏览器），或默认地使用none。当需要同是写上两种属性的时候，在中间加上空格就可以了。案例名称：字体修饰 l2-8.htm字体修饰p text-decoration:line-through underline字体修饰3、纵向排列(vertical-align)纵向排列属性可以用作一个内部元素的纵向位置，相对于它的上级元素或相对于元素行（一个内部元素是没有行在其前和其后断开的，例如，在HTML中的EM、A和IMG）。该值可以是一个相对于元素行高属性的百分比，它会在上给基线上增高元素基线的指定数量。该值可以是负值。baseline（使元素和上级元素的基线对齐）middle（纵向对齐元素基线加上上级元素的高度字母x的高度的一半的中点）sub（下标）super（上标）text-top（使元素和上级元素的字体向上对齐）text-bottom（使元素和上级元素的字体向下对齐）影响相对于元素行的位置的关键字有下面两个。top（使元素和行中最高的元素向上对齐）bottom（使元素和行中最低的元素向下对齐）案例名称：纵向排列 l2-9.htm纵向排列spanvertical-align:super纵向排列CSS样式4、文本转换(text-transform)文本转换属性允许通过以下4个属性中的一个来转换文本。capitalize（使每个字的第1个字母大写）uppercase（使每个字的所有字母大写）lowercase（使每个字的所有字母小写）none（使用原始值）案例名称：文本转换 l2-10.htm广本转换ptext-transform:capitalize广本转换css样式abc5、文本排列(text-align)文本排列属性可以应用于块级元素（如P、H1等），使元素文本得到排列，这个属性的功能类似于HTML的段、标题和部分ALIGN属性：center、left、right，justify(两端对齐)。注意：justify比较特殊，很多情况都不支持。案例名称：文本排列 l2-11.htm文本排列On a dark desert highway, cool wind in my hair;Warm smell of colitas, rising up through the air;Up ahead in the distance, I saw a shimmering light.  On a dark desert highway, cool wind in my hair;Warm smell of colitas, rising up through the air;Up ahead in the distance, I saw a shimmering light. 6、文本缩进(text-indent)文本缩进属性可以应用于块级元素（如p和H1等），定义该元素第1行可以接受的缩进数量。该值必须是一个长度或一个百分比。若为百分比则视上级元素的宽度而定。可为负值。案例名称：文本缩进 l2-12.htm文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进文本缩进7、行高(line-height)行高属性可以接受一个控制文本基线之间的间隔的值。当值为数字时，行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。行高属性不允许使用负值。行高也可以由带有字体大小的字体属性产生。行高属性可以用于双行距的文本。案例名称：行高 l2-13.htm行高pline-height:900%行高行高8、颜色(color)案例名称：颜色（显示效果：文字颜色为深蓝色） l2-14.htm颜色pcolor:#000088颜色三、CSS背景属性1、背景颜色(background-color)背景颜色属性设定一个元素的背景颜色。案例名称：背景颜色 l2-15.htm背景颜色pcolor:red背景颜色2、背景图像(background-image:url(图片URL)背景图像属性设定一个元素的背景图像。案例名称：背景图像 l2-16.htm背景图像pbackground-image:url(hs a.gif)背景图像3、背景重复(background-repeat)当值为repeat-x时，图像横向重复；当值为repeat-y时图像纵向重复；当使用repeat的时候，背景图片满屏平铺；当值为no-repeat的时候，只显示一张图，无任何方向的平铺。案例名称：背景重复 l2-17.htm背景重复pbackground-image:url(hs.gif);background-repeat:repeat-x背景图像4、背景图像的依附(background-attachment)（直接在DREAMWARE里面实现更方便）属性：fixed（背景图案永远静止，文字在背景上面“滚动”）scroll（背景图案随着页面上的文字一起“滚动”）5、背景图像的初始位置(background-position)属性值：百分比/距离/left/center/right/top/center/bottom初始值：0% 0%或left top百分比值参照元素本身的尺寸；距离是偏向于左上角的横向、纵向的位置，单位前面已讲过。案例名称：背景位置 l2-18.htm背景位置pbackground-image:url(hs.gif);background-repeat:no-repeat;background-position:50% 5pt背景图像6、背景(background)使用该属性可以一次设置前面所提到的所有有关背景的属性。类似于font属性。属性值：| | | | 四、CSS容器属性1、边界(border)边框属性是一个用于设置一个元素边框的宽度、式样和颜色的属性。 medium (是缺省值) thin (比medium细) thick (比medium粗) 用长度单位定值。可以用绝对长度单位(cm, mm, in, pt,pc)或者用相对长度单位 (em, ex,px)。border-top-width:thin/medium/thick/宽度值border-right-width:thin/medium/thick/宽度值border-bottom-width:thin/medium/thick/宽度值border-left-width:thin/medium/thick/宽度值border-width:thin/medium/thick/宽度值（可以一次给出一个、两个、三个或四个值，只有一个值4边相等，某一边框的宽度值缺失取对边的宽度值，顺序是：上右下左。）border-color:颜色值（可以一次给出一个、两个、三个或四个值）border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset （可以一次给出一个、两个、三个或四个值）border-top: | | border-right: | | border-bottom: | | border-left: | | border: | | 注意：使用边界属性可以一次地设置所有边界的宽度，也可以选择分别设置上边界、下边界、左边界和右边界宽度；可以一次地设置所有边界的宽度、样式、颜色，也可以分别设置所有边界的样式、颜色；还可以分别设置上边界、下边界、左边界和右边界的宽度、样式和颜色。案例名称：边框 l2-19.htm边框pborder:10px groove blueinputborder:1px solid blue;background-color:#999999边框  2、边距(margin)设置了一个元素在四个方向上距离浏览器窗口边界或上级元素的边距。每个值可以是距离值或百分比之一，百分比参考上一级元素的宽度，可以为负值。如果边界在垂直方向邻接（重叠），则会改用其中最大的那个边界值，而水平方向则不会。margin-top:距离值/百分比margin-right:距离值/百分比margin-bottom:距离值/百分比margin-left:距离值/百分比margin:距离值/百分比（该属性是上边距、右边距、下边距和左边距属性的略写，可以一次给出一个、两个、三个或四个值，只有一个值4边距相等，某一边距的距离值缺失取对边的距离值，顺序是：上右下左。）案例名称：边界 l2-20.htm边界bodymargin:1em 2em 4em 6em边界边界边界边界边界边界边界边界边界边界边界边界边界CSS中margin 属性参数省略的原则今天和大家分享一下css中各种块级元素都可能会用到的margin属性中参数的省略原则，相信大家看过之后会领会css当中一些深层次的指导性思想。大家都知道，使用margin属性是用来设置对象四边的外边距，如果提供全部四个参数，将按上-右-下-左的顺序作用于四边，即：margin：top right bottom left;记住这个模式的好的途径是：这4个值从元素顶端开始，顺时针围绕元素。值总是按照这个顺序被使用，因此若想得到预期的效果，必须正确地排序它们。为什么会省略？有时，为margin输入的值有些重复,例如程序代码:pmargin：0.25em 1em 0.25em 1em;为了那些懒人少输入这些烦人的代码(不知道这是否是初衷，但肯定有这样的懒人)，或许更实际的些是为了减小css文件的字节数，以减小带宽占用，节省经济支出，因此出现了更简单的替代方法，不必这样重复输入一对值，可以用下面的标记来代替它：pmargin:0.25em 1em;这样的两个值足以代替那四个值，是怎么做的呢？省略原则css定义了几个步骤以接收少于四个的margin参数：1.如果没有left值，则使用right代替。2.如果没有bottom值，则使用top代替。3.如果没有right值，则使用top值代替。换句话来说，如果给margin赋了三个值，则第四个（left）由复制第二个（right）得到。如果给出了两个，则第四个由复制第二个得到，第三个（bottom）由复制第一个（top）得到。最后，如果只给出了一个值，那么将被复制到其他三个。假如更喜欢直观的说明，请看如下所示的图解。举三个例子你应该更加清楚了：1. b margin:10px; 和 b margin:10px 10px 10px 10px;是等价的；2. b margin:10px 5px; 和 b margin:10px 5px 10px 5px;是等价的；3. b margin: 5px 3px 4px;和 b margin:5px 3px 4px 3px;是等价的；有了这些原则的指引之后，我想你在编写css的时候头脑中对于margin属性中参数的省略的思路应该更加清晰了吧！.3、填充距padding一个元素的填充距是边框和元素的内容之间的间隔和数值。每个值可以是距离值或百分比之一，百分比参考上一级元素的宽度，填充距属性不能使用负值。padding-top:距离值/百分比padding-right:距离值/百分比padding-bottom:距离值/百分比padding-left:距离值/百分比padding:距离值/百分比（该属性是上距、右填充距、下填充距和左填充距属性的略写，可以一次给出一个、两个、三个或四个值，只有一个值4填充距相等，某一边距的距离值缺失取对边的距离值，顺序是：上右下左。） 案例名称：填充距 l2-21.htm填充距ppadding:20px填充距填充距填充距填充距填充距填充距填充距填充距填充距填充距填充距4、宽度和高度(width、height)设定容器的宽和高width:宽度值/百分比/autoheight:宽度值/auto案例名称：容器宽高 l2-22.htm宽度和高度inputwidth:200pt;height:50px5、浮动和清除(float、clear)float：left|right|noneclear：none|left|right|both (IE不支持) float元素可以使文字环绕在一个元素的四周，初始值为none，当属性值是right或left时，该元素就会相应出现在右边或左边，即：文字环绕于该元素的左边或右边。案例名称：浮动 l2-23.htm浮动.box1 float:right 我们可以非常明显的看出应用样式表前后的区别。在使用样式表之前，页面表格中的图片和文字与表格边框完全没有间隔，而且图片位于文字上方，没有什么美观而言；但是在使用了样式表之后，表格的边框与其中的内容之间有了整齐的间隔，而且图片居右，文字环绕其周围，实现了图文混排的效果。五、分级属性(list-style) disc (缺省值，黑圆点) circle (空心圆点) square (小黑方块) decimal (数字排序) lower-roman (小写罗马字排序) upper-roman (大写罗马字排序) lower-alpha (小写字母排序) upper-alpha (大写字母排序) none (无列表项标记) list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|nonelist-style-image:url(图片URL)|nonelist-style-position:inside|outsidelist-style:|案例名称：列表 l2-24.htm58列表.list1 list-style-position: inside;list-style-type: disc;font-size: 12px;line-height: 18px;color: #FF9900;.list2 font-family: 宋体;font-size: 12px;color: #006600;list-style-position: outside;list-style-type: square;line-height: 18px;.list3 font-family: 宋体;font-size: 12px;line-height: 18px;color: #000099;list-style-position: outside;list-style-image: url(list.gif);使用List（列表）可以让你页面中的内容更具条理性，不过页面中默认的列表效果确不够漂亮。每个列表项目的前面都是使用黑点或数字来标识，影响了我们页面的美观。本例将通过CSS的list参数的设置，定义列表项样式、列表项图片和位置，