版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第6章CSS技术
本章的主要内容如下:CSS是一种定义网页格式的标准方法，它扩展了HTML的功能。在HTML中使用CSS的几种主要方式，包括直接嵌入样式表、导入外部样式表、链接外部样式表、和内联样式表等。CSS样式常用的属性包括字体属性、颜色和背景属性、文本属性、边框属性、布局属性以及列表属性等。如何使用CSS进行定位。返回6.1什么是CSS
CSS是CascadingStyleSheets的简称，我们一般称为级联式样式表或层叠式样式表。CSS是一种格式化网页元素的标准方法，它通过大量CSS属性扩展了HTML的功能，使Web创作者可以将这些属性应用到整个页面，甚至整个网站。虽然HTML为网页设计者提供了强大的格式设置功能，但是它必须在每一个需要设置的位置使用格式设置标记符，而不能为具有一定逻辑含义的内容设置统一的格式，而CSS却能够做到这一点。
例如，如果要为所有的“标题2"标记符(h2)设置“居中”对齐方式和“楷体”字体，那么必须在每次出现该标记符时使用align="center"属性，并A标题中的的文字用font标记符括起来以设置字体，如下所示。下一页返回6.1什么是CSS
<html><head><title>实例---小使用CSS</title></head><body><h2align="center"><fontface="楷体_gb2312">这是二级标题为“楷体”和“居中对齐”I均格式。</font></h2><p>其他内容</p><h2align="center"><fontface="楷体_gb2312">这是二级标题为“楷体”和“居中对齐”的格式。</font></h2></body></html>上一页下一页返回6.1什么是CSS
使用这种格式设置方式显然有很多局限性一一如果有100个h2标记符要设置同样的格式，就实在太麻烦了，而且很有可能出现不一致的情况。使用CSS样式表技术可以克服HTML方式的缺陷，因为它可以就某一个特定的标记符设置格式。例如，将刚才的例子可以改写为CSS版本，如下所示。<html><head><title>实例—使用CSS</title><style>
h2{text-align:center;font-family:楷体_gb2312}</style></head><body>上一页下一页返回6.1什么是CSS
<h2>这是二级标题为“楷体”和“居中对齐”的格式。</h2><p>其他内容</p><h2>这是二级标题为“楷体”和“居中对齐”的格式。</h2></body></html>以上HTML代码在浏览器中的显小如图6.1所示，与使用纯HTML方式时一模一样.
上面的代码在style标记符中定义了CSS样式，该样式应用于网页中所有的h2标记符，使该标记符中的内容采用“楷体”字体和“居中”对齐方式。上一页下一页返回6.1什么是CSS
实际上，样式定义不仅可以应用于单个的HTML标记符，而且还可以应用于用户定义的类、ID等，从而提供更强大的样式修饰功能。将多个样式定义汇集到一个样式表文件中，则可以使多个网页应用同一套样式，从而可以确保网页格式的一致性。CSS不但在格式定义方面具有特殊优势，还可以提供精确定位功能以及各种特殊效果，从而可以为网页布局和页面效果的制作提供一种新的途径。由于CSS具有以上一些优点，它己经成为一种应用非常广泛的网页设计技术。上一页返回6.2定义CSS样式
6.2.1样式表项的组成语法selector{propertyl:valuel;property2:value2;...…}说明:selector表示需要应用样式的对象，property表示由CSS标准定义的样式属性，value表示样式属性的值。例如，以下是一个标准的样式表项:h2{text-align:center;font-family:楷体_gb2312}
其中h2是selector，也称为选择器、选择符;text-alignIIIfont-family都是样式属性，而”center"和”楷体_gb2312”分别是属性的值。为了增强可读性，定义CSS时可以分行写。如果属性的值有多个，那么不同的值之间用逗号分隔开，如下所示:下一页返回6.2定义CSS样式
h2{font-family:Arial,Helvetica,sans-serif;font-style:italic;color:red;}另外，在定义样式表时，还可以添加注释，以便增强文档的可读性。CSS的文字注释是将注释语句放置在“/*”和“*/”之间，注意注释语句不能嵌套。例如，以下样式定义中包含一条注释语句。上一页下一页返回6.2定义CSS样式
h2{/“将h2标记符中的文字字体设置为求书，文字对齐方式为center“/text-align:right;font-family:求书;}实际上，除了可以使用基本的HTML标记作为selecto:外，还可以有多种的selector类别。以下是一些常用的selector类别:HTML标记符具有上下文关系的HTML标记符用户定义的类用户定义的ID虚类上一页下一页返回6.2定义CSS样式
6.2.2HTML标记符样式HTML标记符是最典型的一种selector，网页设计者可以为某个或某些具体的HTML元素应用样式说明。例如，以下声明就是应用于h2元素。h2{text-align:center;font-family:楷体_gb2312}
定义了这个样式之后，在网页中凡是出现在h2标记符中的内容都将以楷体字体和居中对齐的方式显示。如果不同的selector包含相同的内容，我们可以采用编组的方式来定义样式，不同的selector之间用逗号分隔。例如，以下就是一个采用编组方式进行样式定义的例子。h2,h3,p{color:red}该样式定义表示网页中h2,h3和P标记符中的内容均以红色显示上一页下一页返回6.2定义CSS样式
6.2.3具有上下文关系的HTML标记符样式使用CSS设置格式时，样式属性可以继承。也就是说，包含在其他元素内的元素将继承外部元素的样式定义。例如，如果定义了以下样式规则:body{color:blue}
那么网页中所有的文字都将以蓝色显示，除非有另外的样式或格式设置标记符来更改这个设定。如果我们需要将位于某个元素内的元素设置特定的样式规则，则应将selector指定为具有上下文关系的HTML标记符。例如，如果只是想使位于h2标记符中的b标记符具有特定的属性，则应使用以下格式:h2b{color:blue}/*注意，元索之间l用空格分隔“/上一页下一页返回6.2定义CSS样式
这表示只有位于h2标记符内的b元素具有蓝色属性，而网页中其他b元素不具有该属性。另外，这种上下文关系还可以嵌套任意多层，例如:ph2I{color:reds}。实际上，我们可以把任意HTML标记符样式都理解为具有上下文关系的HTML样式，因为任何定义了样式的HTML标记符都位于body标记符内。下面是一个使用具有上下文关系的HTML标记符样式的例子，其源代码如下所示:<html><head><title>具有上下文关系的HTML标记符样式<</title><style>h2b{font-style:italic;color:red}上一页下一页返回6.2定义CSS样式
</style></head><body><h2>在风中逝去的村庄</h2><h2>在风中<b>逝去</b>的村庄</h2></body></html>在浏览器中打开该文件，效果如图6.2所示。上一页下一页返回6.2定义CSS样式
6.2.4用户定义的类标记符类可以使用类(class)来为单一HTML标记符创建多个样式。要想将一个类包含到网页的定义中，可将一个句点和一个类名称添加到selector后，如下所示selector.classname{propertyl:valuel;...}
在CSS中可以使用任何名称命名类，但是最好使用具有含义的名称。例如，如果网页中有三个地方使用h2标记符，我们希望不同位置的h2标记符使用不同的颜色，那么可以定义以下类样式上一页下一页返回6.2定义CSS样式
h2.color_red{color:red}h2.color-green{color:green}h2.color_yellow{color:yellow}然后在网页中击要使用该类的地方用class属性应用这些类，如下所示<h2class="colorred">红色标题</h2><h2class="color-green">绿色标题</h2><h2class="color_yellow">黄色标题</h2>
如果使用了h2标记符，但是没有指定class属性，则不应用所定义的样式，因为标记符类样式仅应用于具有相应class属性的标记符。当然，标记符类样式也可以和标记符样式共同使用。例如，如果仍然需要让三个h2标记符中的文本显示不同的颜色，但是又想让它们具有相同大小的文字，此时不需要将相同的字体大小属性添加到三个h2类样式定义中，而只需要添加一个样式规则来定义所有h2标记符中文字的大小，源代码如下所示:上一页下一页返回6.2定义CSS样式
<html><head><title>用户定义的类</title><style>h2{font-size:l6pt}h2.color_red{color:red}h2.color-green{color:green}h2.color-navy{color:navy}</style></head><body>上一页下一页返回6.2定义CSS样式
<h2>标题</h2><h2class="colorred">红色标题</h2><h2class="color-green">绿色标题</h2><h2class="color-navy”>蓝色标题</h2></body></html>
在浏览器中打开该文件，效果如图6.3所示。网页中所有h2标记符中包含的文字，不管h2标记符中是否包含class属性，都将是16pt的大小;而包含了class属性的h2标记符，则击要根据属性的定义显小为不同的颜色。上一页下一页返回6.2定义CSS样式
2.通用类实际上，不仅可以为某个或某些标记符定义类，还可以定义能应用于所有标记符的类，即通用类，此时直接用句点后跟类名就可以了，格式如下:.classname{property:value;....}
通用类样式定义好了以后，可以在需要应用该样式的标记符内使用class属性，使其等于所定义的类名，从而使相应标记符采用所定义的样式。下面是一个使用通用类的例子(不同标记符应用了同一个类样式)，其源代码如下所示:<html><head><title>通用类实例</title><style>.style{font-style:italic)上一页下一页返回6.2定义CSS样式
</style></head><body><pclass="style">青年文摘(引用类style)</p><h3class="style">青年文摘(引用类style)</h3></body></html>在浏览器中打开该文件，效果如图6.4所示。上一页下一页返回6.2定义CSS样式
6.2.5用户定义的ID
除了使用.classname的方式定义一个类样式外，还可以使用ID定义样式。要将一个ID包括在样式定义中，应该用一个井号(#)作为ID名称的前缀，如下所示:#IDname{property:value;....}
ID样式定义好了以后，可以在需要应用该样式的标记符内使用id属性，使其等于所定义的ID名称，从而使相应类的标记符采用所定义的样式。id属性的用法与class属性的用法完全一样，一者并没有什么区别，一般情况下使用其中之一即可。下面是一个使用用户定义ID样式的例子，其源代码如下所示，效果如图6.5所示。上一页下一页返回6.2定义CSS样式
<html><head><title>用户定义的ID实例</title><style>#style{font-style:italic}</style></head><body><pid="style">读者文摘(引用IDstyle)</p><h3id="style">读者文摘(引用IDstyle)</h3></body></html>上一页下一页返回6.2定义CSS样式
6.2.6虚类对于a标记符(超链接标记符)，可以用虚类的方式设置不同类型链接的显小方式。所谓不同类型链接，是指访问过的、未访问过的、激活的、悬停的这四种状态的链接。可以通过指定下列selector之一来设置链接样式:aaink或:link:当超链接未被访问过时，超链接的显示方式;a:visited或:visited:当超链接己经被访问过时，超链接的显示方式;a:active或:active:当超链接当前为被选中状态时，超链接的显示方式;a:hover或:hover:当鼠标指针悬停在超链接上时，超链接的显示方式。例如，我们可以使用以下的方式更改超链接的颜色显示，而不需要使用第1章介绍的HTML方法(在body标记符中指定link等属性)进行设置。上一页下一页返回6.2定义CSS样式
;aink{color:blue}:visited{color:purple}:active{color:gray}以下是一个使用虚类样式的例子，其源代码如下所示:<html><head><title>虚类实例</title><style>aink{color:blue}:visited{color:purple}:active{color:gray}上一页下一页返回6.2定义CSS样式
:hover{color:red}a{text-decoration:none}/*设置所有超链接均没有下划线“/</style></head><body><p>没有访问过的<ahref--"testl.htm">超链接<</a>为蓝色<</p><p>访问过的<ahref--"test2.htm">超链接<</a>为紫色<</p><p>活动<ahref--"test3.htm">超链接</a>为灰色</p>印>鼠标悬停在其上的<<ahref--"test4.htm">超链接</a>为红色</p></body></html>在浏览器中打开该文件，效果如图6.6所示。上一页返回6.3将CSS添加到HTML中
将CSS添加到HTML中有以下二种常用方法:直接嵌入样式表链接外部样式表内联样式表。下一页返回6.3将CSS添加到HTML中
6.3.1直接嵌入样式表所谓直接嵌入样式表就是指在HTML源文件的head标记符中直接使用style标记符来定义CSS，然后在HTML源文件的body标记符内再调用CSS。具体用法如下所示:<html><head><title>如何将CSS添加到HTML----汽接嵌入</title><style>
样式1{定义样式}
样式2{定义样式}…….样式n{定义样式}上一页下一页返回6.3将CSS添加到HTML中
</style></head><body>
调用样式</body></html>使用直接嵌入样式表时，标记符style必须位于<head>与</head>标记符之间。实际上，我们在6.2节中己多次用到这种使用CSS的方法。由于所有样式均位于head标记符内，所以这种方法的好处是容易维护。上一页下一页返回6.3将CSS添加到HTML中
6.3.2链接外部样式表
为了整个网站能够保持一致的样式，我们可以单独创建一个样式表文件(该文件的后缀为.css，在其中定义需要用到的样式，然后在每个HTML文件中都与该样式表文件建立链接，从而在每个HTML文件中都可以调用所链接样式表中的样式。建立链接的标记符是link，具体的用法如下所示:<html><head><title>如何将CSS添力II到HTML----链接外部样式</title><link1><link2>上一页下一页返回6.3将CSS添加到HTML中
<linkn></head><body>
应用所链接样式表中的样式</body></html>
链接标记符link必须放置在标记符<head>与</head>之间，它是单独使用的标记符。link标记符具有以下一些主要属性:rel:使用该属性可以设置链接的文件和HTML文档之间的关系。在链接样式表文件(.css文件)的情况下，该属性的取值永远是"stylesheet"ohref:使用该属性可以设置链接文件的位置。该属性既可以是相对位置也可以是绝对位置。上一页下一页返回6.3将CSS添加到HTML中
type:使用该属性可以设置链接文件的类型。CSS文件的类型是toxt/css。
外部样式表文件的内容由样式定义，即样式名称和属性组成。例如，一个单独由P{margin:gem}组成的文件就可以用作外部样式表。一个HTML文件可以链接多个样式表，如果样式表中的样式有冲突，那么最后应用的样式优先。例如，filel.css样式文件和file2.css样式文件中都有hl样式，如果先应用filel中的样式，后应用filet中的样式，那么hl的样式应当以filet中定义的样式为准。下面是一个使用链接样式的例子，其源代码如下:<html><head><title>如何将CSS添加到HTML一链接外部样式</title>clinkrel="StyleSheet"href--"style.css"type="text/css">上一页下一页返回6.3将CSS添加到HTML中
</head><body><h1>新北京新奥运</h1><h2>绿色奥运人文奥运科技奥运</h2><p>北京已经成功中办2008年奥运会!</p></body></html>其中与网页处在同一目录下的style.css文件的内容如下所示(相关属性的含义清参见6.4节):hl{font-size:xx-large;color:red;font-weight:bolder)h2{color:white;background-color:blue;text-decoration:underline)p{text-indent:30px;)在浏览器中打开网页文档，显示效果如图6.7所示上一页下一页返回6.3将CSS添加到HTML中
6.3.3内联样式表
除了以上介绍的使用样式表的方法以外，还有一种最直接的使用样式表的方法。我们可以将style属性与HTML标记符body中所包含的任何标记符联合使用，这个属性能够将任何数量的CSS声明作为自己的值，而每个声明之间用分号隔开，如:<Pstyle="color:red;font-family:'NewCenturySchoolbook',serif'>。我们将这种样式表称为内联样式表。内联的样式比其他方法更加灵活，但是如果要改变样式就比较麻烦，必须一个一个地改动。由于内联样式与传统的HTML类似，都是针对具体的每个标记符进行修饰，所以并没有发挥出样式表利于统一设置样式的优势，因此在实际中的应用相对较少。以下是一个使用内联样式表的例子，其源代码如下所示:上一页下一页返回6.3将CSS添加到HTML中
<html><head><title>如何将CSS添加到HTML----内联样式表</title></head><body><h1style="font-size:xx-large;color:red;font-weight:bolder">新北京新奥运</h1><h2style="color:white;background-color:blue;text-decoration:underline">绿色奥运人文奥运科技奥运</h2><pstyle="text-indent:30px">北京已经成功中办2008年奥运会!</p></body></html>上一页下一页返回6.3将CSS添加到HTML中
在浏览器中打开该文档，如图6.8所示。
需要注意的是，如果定义了同类的样式，那么优先级高的样式将覆盖优先级低的样式，样式的优先级是由样式定义的位置确定的，越先定义的样式，优先级越低。由于内联样式总是在使用时才定义，所以它的优先级最高。例如，在以下示例中，内联样式的优先级最高，link标记符由于位于style标记符之后，所以该链接样式的优先级要高于嵌入式样式。在浏览器中打开网页文档，效果如图6.9所示。<html><head><title>样式表的优先级</title><style>hl{color:red}上一页下一页返回6.3将CSS添加到HTML中
</style>clinkrel="stylesheet"href="style2.css"type="text/css"></head><body>
<h1>这个标题显示为绿色</h1><h1style="color:blue">这个标题显示为蓝色</h1></body></htm>其中与网页处在同一目录下的style2.css文件的内容如下所示h1{color:green}上一页返回6.4CSS单位与常用属性
6.4.1CSS单位CSS中常用的单位包括长度单位、百分比和颜色单位。1.长度单位CSS长度单位分为有效的相对单位和绝对长度单位。CSS有效的相对单位如下所示:em:它所代表的长度是当前字体中m字母的宽度;ex:它所代表的长度是当前字体中x字母的高度;px:像素，它是相对于计算机屏幕的分辨率来定义的。CSS有效的绝对单位如下所示:in:英寸，1in=2.54cmcm:厘米，1cm=10mmmm:毫米下一页返回6.4CSS单位与常用属性
pt:点，1点=1/72inpc:帕，1帕=12点
在CSS中表示长度的标准格式为:i1，负号+数字+单位。这二部分之间没有空格，如2px表示2个像素。
2.百分比单位在CSS中使用百分比的标准格式为:i1，负号+数字+百分号。这二部分之间没有空格，如60%。
百分比实际上是一种相对长度的表小方法，最经常使用的百分比值是相对于元素的字体大小和表格相对于页面的宽度。3.颜色单位CSS中有两种定义颜色的方法，一种是直接输入颜色的名称(如red,white,black等)另一种是使用数字来表示颜色。上一页下一页返回6.4CSS单位与常用属性
使用数字来表示颜色有以下四种形式:#rrggbb:rr,gg,bb分别代表红色、绿色和蓝色的颜色值，该值是十六进制的数字。如#0033990#rgb:r,g和b分别表小红色、绿色和蓝色的颜色值，该值是十六进制的数字。如#0f9。这种方式是#rrggbb方式的一种快捷表小法，如#0f9等同于#00ff99。rgb(x,y,z):x,y,z为取值范围是0到255之间的整数，它们依次表小红色、绿色和蓝色。如rgb0212,80,106)。rgb(x%,y%,z%):x,y,z为取值是0到100之间的整数，表小红色、绿色、蓝色的百分比含量。如rgb(20%,50%,35%)上一页下一页返回6.4CSS单位与常用属性
6.4.2字体属性
CSS字体属性允许创作者对页面字体进行定义，包括以下常用属性:font-family,font-style,font-size,font-variant,font-weight和font等。1.font-family(字体族)语法font-family:字体名称|字体族名称说明:使用该属性可以定义文本格式中使用的字体族。该属性既可以是具体的字体名称(如黑体、宋体)，也可以是字体族的名称(如cursive>serif)。所谓字体族是指同一类字体的总称。很明显，定义一个具体的字体不如定义一个字体族。在指定font-family属性时，一次可以定义多个字体名称或者字体族名称，各个名称之间使用逗号隔开。浏览器可以根据当前计算机所装载的字体或字体族并按照样式定义的字体顺序来显示。上一页下一页返回6.4CSS单位与常用属性
下面是一个使用该属性的例子，其源代码如下所示:P{font-family:黑体，宋体，serif}2·font-style(字体风格)语法font-style:字体风格名称说明:使用该属性可以定义字体的风格。该属性所包含的值有normal(普通)、italic(斜体)和oblique(倾抖)。该属性的默认值是normalo
下面是一个使用字体风格的例子，其源代码如下所示:P{font-style:oblique}上一页下一页返回6.4CSS单位与常用属性
3.font-size(字体大小）语法font-size:绝对大小|相对大小|百分比说明:使用该属性可以定义字体的大小。如果使用绝对大小，该属性包含的值有xx-small(特别小)、x-small(比较小)、small(小)、medium(中等)、large(大)、x-1arge(比较大)和xx-large(特别大)。使用绝对大小时，还可以直接给出字体的大小，如12px。如果使用相对大小，该属性包含的值有larger(大一点)和smaller一点)。larger表示比上一级元素的字体大一号，smalle:表示比上一级元素中的字体小一号。所谓上一级元素是指包含当前元素的元素，也就是包含当前标记符的标记符。显然，body是所有元素的上级元素。另外还可以使用百分比表示字体的大小，表示相对于当前字体大小的百分比。上一页下一页返回6.4CSS单位与常用属性
下面是一个使用字体大小的例子，其源代码如下所示，效果如图6.10所示。<html><head><title>Fontsize属性实例</title><style>.large{font-size:x-large}.small{font-size:x-small}.larger{font-sizeaarger}.smaller{font-sizeamaller}
</style></head><body>上一页下一页返回6.4CSS单位与常用属性
<pclass="large">NOKIA科技以人为本</p><pclass="small">NOKIA科技以人为本</p><p>NOKIA科技以<fontclass="larger">人</font>为本</p><p>NOKIA科技以<fontclass="smaller">人</font>为本</p></body></html>4.font-variant(字体变形)语法font-varient:字体变形值说明:使用该属性可以定义字体的变形显示。该属性包含两个值，分别为normal(普通)和small-caps(小型大写字母)。小型大写字母是指所有字母都显示为比小写字母稍大的大写字符。该属性的默认值是normal。上一页下一页返回6.4CSS单位与常用属性
下面是一个使用字体变形的例子，其源代码如下所示:p{font-variant:small-caps}5.font-weight(字体加粗)语法font-weight:字体加粗值
说明:使用该属性可以定义字体的加粗情况。该属性包含的值有normal(普通)、bold(加粗)、bolder(更粗)、lighter(更细)以及100,200,300,400,500,600,700,800和900。其中normal相当于400,bold相当于700。如果使用bolder或lighter，表示相对于上一级元素中的字体更粗或更细。该属性的默认值是normal。下面是一个使用字体加粗的例子，其源代码如下所示，效果如图6.11所示。上一页下一页返回6.4CSS单位与常用属性
<html><head><title>Fontweight属性实例</title><style>.bold{font-weight:600}.bolder{font-weight:bolder}.lighter{font-weightaighter}
</style></head><body><pclass="bold">Lining出色源自本色</p><p>Lining出色源自<fontclass="bolder">本色</font></p><p>Lining出色源自<fontclass="lighter">本色</font></p></body></html>上一页下一页返回6.4CSS单位与常用属性
6.font(字体)语法font:字体说明说明:我们不仅可以单独定义字体的属性，而且还可以使用font属性将字体的所有属性都放在一起定义，各个属性之间用空格隔开。不过在定义这些字体属性时，要么不出现相应属性，要么按以下顺序出现:font-weight,font-variant,font-style,font-size和font-family。下面是一个将所有的字体属性都定义在一起的例子，其源代码如下所示，效果如图6.12所示。<html><head><title>Font字体属性实例</title>上一页下一页返回6.4CSS单位与常用属性
<style>p{font:bolderitalic24pt;}</style></head><body><p>让世界充满爱!</p></body></html>上一页下一页返回6.4CSS单位与常用属性
6.4.3颜色及背景属性
CSS颜色和背景属性允许创作者对页面元素的颜色和背景进行定义。该类属性包括:color(颜色)、background-color(背景颜色)、background-image(背景图像)、background-attachment(背景附着)、background-repeat(背景贡复)、background-position(背景位置)和background等。1.color(颜色)语法color:颜色值说明:使用该属性可以定义页面元素内文本的颜色。该属性的值既可以是颜色的英文名称，也可以是十六进制的数值。上一页下一页返回6.4CSS单位与常用属性
下面是一个使用颜色属性的例子，其源代码如下所示P{color:red}h2{color:#336699}2.background-color(背景颜色)round-color:颜色值|transparent(透明)
使用该属性可以定义页面元素的背景颜色。在默认情况下，页面元素的背景颜色是透明的，也就是不使用任何背景颜色。下面是一个使用背景颜色属性的例子，其源代码如下所示:body{background-color:white}hl{background-color:#000080}上一页下一页返回6.4CSS单位与常用属性
3.background-image(背景图像)语法background-image:url(统一资源定位符)说明:使用该属性可以定义页面元素的背景图像。一般情况下，如果定义了页面元素的背景图像，最好也定义页面元素的背景颜色，这样可以确保浏览者在不显示图像时能够用适当的背景颜色显示页面。下面是一个使用背景图像的例子，其源代码如下所示:body{background-image:url(/image/bgimage.gif)}p{background-image:url(/image/bgimage.gif)}4.background-repeat(背景重复)语法background-repeat:重复的方向上一页下一页返回6.4CSS单位与常用属性
说明:使用该属性可以定义页面元素背景图像的重复方向。该属性包含的值有repeat(两个方向都重复)、repeat-x(只在x轴方向重复)、repeat-y(只在Y轴方向重复)和no-repeat(不重复)。该属性默认的值是repeat。下面是一个使用背景重复的例子，它将背景图像重复的方向设置为只在Y轴方向重复，其源代码如下所示:body{background-image:url(bgimage2.gi幻;background-repeat:repeat-y}5.background-attachment(背景图像附着)语法background-attachment:背景图像附着的方式说明:使用该属性可以指定页面背景图像是跟随内容滚动，还是固定上一页下一页返回6.4CSS单位与常用属性
不动。该属性包含的值有scroll(滚动)和fixed(固定不动)，默认值是scroll。下面是一个使用背景图像附着属性的例子，其源代码如下所示<html><head><title>background-attachment属性实例</title><style>body{background-image:url(clouds.jpg);background-attachment:fixed}</style></head><body><p>锄禾日当午，</p>汗滴禾下土。</p>印>谁知盘中餐，</p>粒粒皆辛苦。</p></body></html>上一页下一页返回6.4CSS单位与常用属性
在浏览器中打开该文档，当拖动滚动条时，背景图像固定不同，只是文字在滚动，如图6.13所示。6.background-position(背景位置)语法background-position:初始位置说明:使用该属性可以指定背景图像的初始位置。该属性所包含水平方向的值有left(居左)、center(水平居中)、right(居右)和具体数值(百分比或者像素值);垂直方向的值有bottom(底部)、middle(中间)、top(顶部)和具体数值(百分比或者像素值)。水平方向的值与垂直方向的值用空格分开。此属性的默认值是“0%0%"，表示背景图像位于区域左上角。下面是一个使用背景位置的例子，其源代码如下所示:body{background-image:url(clouds.jpg);background-positionaefttop}
上一页下一页返回6.4CSS单位与常用属性
body{background-image:url(clouds.jpg);background-position:20%120px}7.background(背景)语法background:背景说明说明:同字体说明类似，背景说明也可以将所有的背景属性放在一起定义，各个属性之间使用空格隔开。不过在指定background属性时，各属性值的位置可以是任意的。下面是一些使用背景属性的例子，其源代码如下所示:body{background:whiteurl(bg.jpg)}p{background:#ffb300}table{background:#Of0url(bgimage.gino-repeatlefttop}上一页下一页返回6.4CSS单位与常用属性
6.4.4文本属性CSS文本属性允许创作者对页面文本进行格式化。‘常用的CSS文本属性包括:letter-spacing(字符间距)、text-align(文本对齐方式)、text-decoration(文本修饰)、text-indent(文本缩进)、text-transform(文本大小写转换)和line-height(行高)等。1.letter-spacing(字符间距)语法letter-spacing:数值说明:使用该属性可以定义字母(或汉字)之间的空白，单位是CSS允许的任何单位，并允许使用负数。该属性默认值为normal(普通)。上一页下一页返回6.4CSS单位与常用属性
下面是一个使用字母间距的例子，其源代码如下所示<html><head><title>letter-spacing属性实例</title><style>.1s1{letter-spacing:0.1em}.1s2{letter-spacing:-0.1em}</style></head><body><pclass="Isl">lifemeansstruggle.</p><pclass="Is2">lifemeansstruggle.</p>上一页下一页返回6.4CSS单位与常用属性
</body></html>在浏览器中打开该文件，效果如图6.14所示。2.text-decoration(文字修饰)语法text-decoration:文字修饰效果
说明:使用该属性可以为文本指定特殊的风格。该属性所包含的值有none(无)、underline(下划线)、overline(上划线)、line-through(删除线)和blink(闪烁，浏览器一般不支持此效果)。下面是一个使用文字修饰属性的例子，其源代码如下所示:上一页下一页返回6.4CSS单位与常用属性
hl{text-decoration:overline}a{text-decoration:none}/“用这个样式定义uJ以去掉所有超链接的下划线!“/3.text-transform(文本转换)语法text-transform:文本转换方式说明:本属性适用于英文文本，使用该属性可以对文本做一些适当的转换。该属性所包含的值有none(无)、capitalize(使每个单词的第一个字母大写)、uppercase(使每个单词的所有字母大写)和lowercase(使每个单词的所有字母小写)。该属性的默认值为none下面是一个使用文本转换属性的例子，其源代码如下所示:上一页下一页返回6.4CSS单位与常用属性
<html><head><title>text-transform属性实例</title><style>.transforml{text-transform:capitalize}.transform2{text-transformaowercase}.transform3{text-transform:uppercase}</style></head><body><p>Sellnotvirtuetopurchasewealth,norlibertytopurchasepower.(normal)</p><pclass="transforml">Sellnotvirtuetopurchasewealth,norlibertytopurchasepower.(capitalize)</p>上一页下一页返回6.4CSS单位与常用属性
<pclass="transform2">Sellnotvirtuetopurchasewealth,norlibertytopurchasepower.(lowercase)</p><pclass="transform3">Sellnotvirtuetopurchasewealth,norlibertytopurchasepower.(uppercase)</p></body></html>在浏览器中打开该文件，效果如图6.15所示。4.text-align(文本对齐)语法text-align:对齐方式说明:使用该属性可以指定文本的对齐方式。该属性所包含的值有left(居左对齐)、center(居中对齐)、right(居右对齐)和_justify(可调整)。该属性的默认值为left上一页下一页返回6.4CSS单位与常用属性
下面是一个使用文本对齐属性的例子，其源代码如下所示:h1{text-align:center}p.newspaper{text-align:justify}5.text-indent(文本缩进)语法text-indent:缩进的数值说明:使用该属性可以设置文本的缩进。该属性通常用于段落的缩进，表示段落第一行缩进的情况。该属性既可以用百分比来表示，也可以使用CSS允许的单位来表示。下面是一个使用文本缩进的例子，其源代码如下所示:p{text-indent:12px}上一页下一页返回6.4CSS单位与常用属性
6.line-height(行高)
语法
line-height:数值说明:使用该属性可以设定文本行的高度。当值为数字时，行高等于当前文本字体大小与该数字相乘。当使用百分比时，行高等于当前字体高度与该百分比相乘。该属性不能为负值。下面是一个使用行高属性的例子，其源代码如下所示:P{line-height:200%}P{line-height:2}上一页下一页返回6.4CSS单位与常用属性
7.文本属性综合实例下面是一个包含多种文本属性的综合实例，其源代码如下所示:<html><head><title>文本属性综合实例</title><style>.align{text-align:center}.decorationl{text-decoration:overline}.decoration2{text-decoration:underline}.indent{text-indent:l2px}.lineheight{line-height:3}</style></head><body>上一页下一页返回6.4CSS单位与常用属性
<pclass=“align”>不要承担你完成不了的事，但定要信守诺言。</p><pclass=“decorationl”>不要承担你完成不了的事，但定要信守诺言。!</p><pclass=“decoration2”>不要承担你完成不了的事，但定要信守诺言。</p><pclass=“indent”>不要承担你完成不了的事，但定要信守诺言。</p><pclass=“lineheight”>不要承担你完成不了的事，但定要信守诺言。小要承担你完成不了的事，但定要信守诺言。小要承担你完成不了的事，但定要信守诺言。</p></body></html>在浏览器中打开该文档，如图6.16所示。上一页下一页返回6.4CSS单位与常用属性
6.4.5布局属性
CSS的布局属性允许创作者控制页面元素周围的各种距离及元素的浮动效果。该类属性主要包括margin(边界)、padding(填充距)、border-color(边框颜色)、border-style(边框样式)、border-width(边框宽度)、border(边框)不IIfloat(浮动)。1.页面元素周围的空白在任何一个HTML元素的周围，都包含边框、边界和填充这三种空白。最接近元素内容的是填充，接下来是边框，最外围是边界。边界区总是透明的，可以显小出背景色或背景图像;而填充总是采用标记符的背景色或背景图像;边框则可以使用自己的颜色，以下小例可以显小出这三种空白的区别，效果如图6.17所示。上一页下一页返回6.4CSS单位与常用属性
<html><head><title>边界、边框和填充的区别</title><style>p{font-size:24;color:white;margin:0.25in;border:0.25insolidblack;padding:0.25in;background:gray}
</style></head><body><p>有志之人立长志</p><p>无志之人常立志</p></body></html>上一页下一页返回6.4CSS单位与常用属性
2.margin(页边距)语法margin:数值说明:我们一般使用该属性设置元素四个方向边界的宽度，顺序为上、右、下、左。如果该属性只指定一个数值，那么表示所有四个方向边界宽度都相同;如果该属性指定两个或三个数值，那么没有指定宽度的边采用对边的边界宽度;如果该属性有四个数值，那么这四个数值分别表示上、右、下和左边界的宽度。下面是一个使用页边距的例子，其源代码如下所示:body{margin:5px}/“所有边界设为5px*/p{margin:2px4px}/*上和下边界为2px，左和右边界为4px*/p{margin:2px4px3px}/*上边界为2px，左和右边界为4px，下边界为3px*/上一页下一页返回6.4CSS单位与常用属性
p{margin:lpx2px3px4px}/*上边界为1px，右边界为2px，下边界为3px，左边界为4px*/3.padding(填充距)语法padding:数值说明:使用该属性可以设置边框与内容之间四个方向上的空白距离，顺序为上、右、下。如果该属性只指定一个数值，那么表示所有填充距都相同;如果该属性指定两或三个数，那么没有指定填充距的边采用对边的填充距;如果该属性有四个数值，那么这四个数值左值分别表示上、右、下和左填充距。下面是一个使用填充距的例子，其源代码如下所示:上一页下一页返回6.4CSS单位与常用属性
table{padding:2cm4cm5cm}/*上填允距为2cm，左右填允距为4cm，下填允距为5cm*/4.border-style(边框样式)语法border-style:边框样式说明:使用该属性可以设置上、右、下、左边框的样式。该属性所包含的值有none(无)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(凹线)、ridge(凸线)、inset(内陷)和outset(外凸)。需要注意的是，如果浏览器不支持边框样式的属性值，则除了none以外的所有属性值都用solid代替。如果该属性只给出一个值，那么表示所有边框的样式都相同;如果该属性给出两个或三个值，那么没有指定样式的边框采用对边边框的样式;如果该属性给出四个数值，那么这四个数值分别表示上、右、下和左边框的样式。下面是一个使用边框的例子，其源代码如下所示:上一页下一页返回6.4CSS单位与常用属性
tr{border-styleaolid}5.border-color(边框颜色)语法border-color:颜色值说明:使用该属性可以设置上、右、下、左边框的颜色。该属性的值既可以是颜色名称也可以是十六进制的数值。如果该属性只给出一个值，那么表示所有边框的颜色都相同;如果该属性给出两或三个值，那么没有指定颜色的边框采用对边边框的颜色;如果该属性给出四个数值，那么这四个数值分别表示上、右、下和左边框的颜色。下面是一个包含边框颜色的例子，其源代码如下所示:上一页下一页返回6.4CSS单位与常用属性
table{border-color:redgreenblueblack}6.border-width(边框宽度)语法border-width:数值说明:使用该属性可以设置上、右、下、左边框的宽度，该属性包含的值有thin(细)、medium(中等)、thick(宽)。另外还可以直接用数字来表示，单位是CSS允许的单位。如果该属性只给出一个值，那么表小所有边框的宽度都相同;如果该属性给出两或三个值，那么没有指定宽度的边框采用对边边框的宽度;如果该属性给出四个数值，那么这四个数值分别表小上、右、下和左边框的宽度。下面是一个使用边框宽度的例子，其源代码如下所示:table{border-width:2px3px}上一页下一页返回6.4CSS单位与常用属性
7.border(边框)语法border:边框样式|边框宽度|边框颜色说明:我们不仅可以单独定义边框的各种属性，而且还可以使用border属性定义边框的所有属性，各个属性之间使用空格隔开。在指定各种属性时，样式、宽度和颜色并没有顺序要求。另外，我们还可以单独定义某一边的属性，如border-topaolid2pxred表小上边框是实线，宽度为两个像素的红色边框。同样，可以用border-bottom,border-left,border-right分别定义下、左、右边框的属性。下面是一个使用border属性的例子，其源代码如下所示:h1{border:Spxsolidred}上一页下一页返回6.4CSS单位与常用属性
8.float(浮动)语法float:参数说明:使用该属性可以设置一个页面元素相对另一个页面元素的浮动，也就是控制页面元素之间的相对位置排列。该属性所包含的值有none(无)、left(在左边浮动)和right(在右边浮动)，默认值为none。该属性与HTML中的align属性类似，只是align只能设定文本、图像和表格的对齐属性，而float却可以设置任何页面元素的对齐属性。下面是一个使用浮动属性的例子，其源代码如下所示:<html><head><title>float属性实例</title><style>span{floataeft;font-family:ArialBlack;font-size:l8pt}上一页下一页返回6.4CSS单位与常用属性
</style></head><body><span>T</span>hebraincanbedevelopedjustthesameasthemusclescanbedeveloped,ifonewillonlytakethepainstotrainthemindtothink.</body></html>
在浏览器中打开该文件，效果如图6.18所示。源代码中出现的span标记符是用于控制行内特定内容的标记符，通常都是与样式表结合使用，如本例所示。上一页下一页返回6.4CSS单位与常用属性
9.布局属性综合实例下面是一个包含边框属性的综合实例，其源代码如下所示:<ntml><head><title>布局属性综合实例<</title><style>body{margin:50px}.w1{border-style:groove;border-width:3;border-color:red}.w2{border-styleaolid;border-width:3;padding:20px}.w3{border-style:double;border-width:5px10px15px20px;border-color:redyellowblackblue;padding:20px40px30px50px}</style></head><body>上一页下一页返回6.4CSS单位与常用属性
<pclass="wl">没人相信我绝望!</p><pclass="w2">没人相信我绝望!</p><pclass="w3">没人相信我绝望!</p></body></html>在浏览器中打开该文档，如图6.19所示。上一页下一页返回6.4CSS单位与常用属性
6.4.6列表属性
CSS列表属性允许创作者设置列表的效果，包括:list-style-type(列表样式类型)、list-style-image(列表样式图像)、list-style-position(列表样式位置)和list-style(列表样式)等。1.list-style-type(列表样式类型)语法list-style-type:参数值说明:使用该属性可以设置列表样式的类型，即有序列表的数字编号类型和无序列表的项目符号类型。该属性所包含的值有disc(实心圆点)、circle(空心圆圈)、square矩形方框)、decimal(十进制数字)、lower-roman(小写罗马数字)upper-roman(大写罗马数字)、lower-alpha(小写希腊字母)、upper-alpha(大写希腊字母)和none(无)，默认属性为disc。上一页下一页返回6.4CSS单位与常用属性
下面是使用列表样式类型的例子，其源代码如下所示li.square{list-style-type:square}ul.plain{list-style-type:none}ololol{list-style-type:lower-roman}/*表示二层嵌套的有序列表中第三层列表的编号样式为小写罗马数字*/2.list-style-image(列表样式图像)语法list-style-image:url(地址)
说明:使用该属性可以设置列表样式为指定的图像，该属性的参数只有一个，就是图像文件的地址和名称。使用该属性可以丰富列表样式，使页面更加活波。上一页下一页返回6.4CSS单位与常用属性
下面是一个使用列表样式图像的例子，其源代码如下所示:ul{list-style-image:url(images/checkmark.gif）}3.list-style-position(列表样式位置)语法list-style-position:说明:使用该属性可以设置列表的缩进方式。该属性有两个值，inside(内部)和outside(外部)，前者向右缩进较多，后者向右缩进较少。该属性的默认值为outside。下面是一个使用列表位置的属性，其源代码如下所示:ulli{list-style-position:inside}上一页下一页返回6.4CSS单位与常用属性
4.list-style(列表样式)语法list-style:列表样式类型|列表位置|列表样式图像说明:我们不仅可以单独定义列表的属性，而且还可以使用list-sty1e定义列表的所有的属性，各个属性之间用空格隔开，没有先后顺序。如果同时指定了列表样式类型和列表样式图像，那么只有当浏览器不能显示图片作为项目符号时，所指定的列表样式类型才有效。下面是一个使用列表样式的例子，其源代码如下所示:olol{list-style:lower-romaninside}5.列表属性综合实例下面是一个使用列表的综合实例，其源代码如下所示:上一页下一页返回6.4CSS单位与常用属性
<html><head><title>list-style实例</title><style>.typel{list-style-type:square}.type2{list-style-type:circle}.image{list-style-image:url(list.gio}.positionl{list-style-position:inside}</style></head><body><palign="center">学校情况</p><ulclass="type1">上一页下一页返回6.4CSS单位与常用属性
<1i>大学
<ulclass="type2"><liclass="positionl">清华大学</li><li>北京大学</li><li>复旦大学</li>
</ul></li><li>中学
<ulclass="image"><li>115中学</li><li>北京市四中</li><li>北京市80中</li>上一页下一页返回6.4CSS单位与常用属性
</ul></li></ul></html>在浏览器中打开该文档，如图6.20所示。上一页返回6.5使用css定位
CSS定位是一种提供页面元素位置信息的方法。CSS定位不是原来的CSS标准的一部分，所以不是所有支持CSS的浏览器都支持CSS定位。6.5.1定位方式Web上的定位方式有二种，分别为静态定位、绝对定位和相对定位。1.静态定位静态定位是浏览器默认的定位方式。当Web页传送到浏览器窗口时，浏览器按顺序读取页面元素并按照HTML的顺序将它们在窗口中定位。例如，如果在页面中依次使用了P、hr,img标记符，那么浏览器就会从上到下，从左到右依次显示段落文本、水平线和图像。静态定位是浏览器用来反映简单的HTML页所使用的定位方法。下一页返回6.5使用css定位
2.绝对定位绝对定位能够让创作者在Web页中定义一个“容器”，然后可以往“容器”中放置页面元素。绝对定位能够明确地说明“容器”在Web页面上的位置，这是通过坐标系来实现的。绝对定位坐标系
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 住院医师规范化培训《口腔病理科》习题含答案
- 城市交通流优化AI项目可行性研究报告
- 微信朋友圈营销案例分析
- 深度学习在图像识别领域的应用与发展趋势分析
- 智能家居设备市场趋势与原材料供应研究
- 电力设备检修与维护规程
- 广告设计与创意策略培训手册
- 体育产业发展趋势及市场机遇分析
- 旅游行业酒店总经理的职责与面试要点
- 电影制作流程及后期处理技术详解
- 药厂称量工作流程
- 中兴通讯网络设备调试与优化手册
- 2025年内蒙古行政执法人员执法证考试题库及答案
- 军事识图用图课件
- 手扶梯应急安全培训意义课件
- 企业文化建设咨询服务合同书
- 病房持续改进PDCA案例课件
- （2021-2025）5年高考1年模拟化学真题分类汇编专题08 化工流程综合题（广东专用）
- 舰艇维修监督管理办法
- 煤矿安全监控系统(AQ1029-2026)
- 复合保温板外墙外保温薄抹灰系统施工方案及技术交底
评论
0/150
提交评论