等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在1997年W3C(TheWorldWideWebConsortium)颁布HTML4标准的同时,公布了有关样式表的第一个标准CSS1。1998年5月12日,CSS2.0成为了W3C的新标准,使样式表得到了更多的充实。
现在CSS已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。
CSS的全称是层叠样式表(CascadingStyleSheets),简称样式表。
是近几年才发展起来的一种制作网页的新技术,CSS样式表是一组样式,以往如果想使HTML文档中的多个“标记”具有同一种样式(如使多个段落P中的字体都为红色),则必须各自设定其显示方式,但通过CSS只要定义一个样式就可将它应用到多个使用该样式的标记上。
因而大大简化了HTML文档的设计。
CSS是一种设计网页样式的工具。
用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
网页内容结构和格式控制相分离,使得网页可以仅由内容构成,而将所有网页的格式控制指向某个CSS样式表文件,大大地方便了网页的查看和修改。
用css技术制作主页,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
可以实现一些以前必须通过图片转换才能够实现的功能;从而更快地下载页面;可以使页面的字体变得更漂亮,更容易编排,页面真正赏心悦目;可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件,那么整个站点的所有页面都会随之发生变动,不用再一页一页地更新了。
使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量。
特别是对于有数百个网页的站点时,CSS的优势更加明显。
W3C把DHTML(DynamicHTML)分为三个部分来实现:
脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括InternetExplorer、NetscapeNavigator等)和CSS样式表。
因而,CSS是制作动态网页必不可少的工具。
9.2CSS样式表的特点
CSS样式表可以将网页内容结构和格式控制相分离,精确地控制文档中的布局、字体、颜色、背景、图象等效果的显示。
其主要特点可概括如下:
只需修改一个.CSS文件,就可以改变所有使用其中样式的页面的外观和格式。
在修改页面数量庞大的站点时,这一点显得格外有用。
避免了一个一个网页的修改,大大减少了重复劳动的工作量。
可以随意地控制页面布局和外观。
由于HTML是一种简洁的语言,只是定义了网页的结构(正文、段落等)和各元素的功能,没有过多地控制页面的布局和外观,如行间距、字间距和图象的精确定位等。
但CSS样式表使这一切成为可能。
在所有的浏览器和平台之间具有较好的兼容性。
一方面,由于CSS2.0已经成为了W3C的新标准,所以在几乎所有的浏览器上都可以使用。
另一方面,由于它只是简单的文本,无图象,不需要执行程序,因而具有较好的兼容性。
精简网页,提高下载速度。
一方面,使用CSS样式表可以精简HTML代码;另一方面,可以减少图象的使用(因为以前用图象的地方,现在大多可以用CSS实现),同时外部的样式表还会被浏览器保存在缓存里,因而提高了网页的下载速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。
9.3CSS样式表的定义
9.3.1内部CSS样式表定义
内部样式表是指CSS样式表的代码是置于HTML文件内部的,而无需以独立于HTML文件的形式单独保存。
内部样式表主要包括对HTML标记定义的样式表、用类(Class)属性和ID(标识符)属性定义的样式表。
下面我们将分别进行讲述。
一.为HTML标记定义CSS样式表
为了初步认识和更好地理解CSS样式表的组成,下面我们首先来看一个简单的CSS样式表的例子。
(一)【示例9.1】
本例子的功能是:
说明如何为HTML标记定义样式表。
有关的代码可参见下面的源程序文件E9_1.htm,在浏览器中的显示效果如图9.1所示。
【源程序清单:
E9_1.htm】
为HTML标记定义样式的示例
--/*以下为H3和P标记定义样式*/
h3{font-family:
楷体;color:
blue;text-decoration:
underline;font-style:
italic}
p{background-color:
silver;border-style:
solid;border-color:
green}
-->
为HTML标记定义样式表
H3标记样式:
楷体、蓝色、
下划线、斜体
段落P标记样式:
段落边框为实线、边框
颜色为绿色、段落背景色为银白色。
我是第二个H3标记,我的显示样式和
第一个H3标记一样吧!
我是第二个段落P标记,我的显示样式和
第一个P标记一样吧!
图9.1为HTML标记定义样式
1、【示例解析】
本例中,在内联式样式表中,分别为
标题标记和段落
标记定义了样式。
在
内的所有标题标记和段落
标记的内容将自动应用定义好的样式。
2、【效果展示】本示例的显示效果如图9.1所示。
(二)CSS样式表说明
我们可以在HTML文件内部为各种标记定义CSS样式表,以便HTML文档中的所有该标记都以定义好的样式显示出来。
在上例中我们分别为
标题标记和段落
标记定义了样式。
1、样式表代码的位置:
内部CSS样式表是嵌入在HTML文件,
标记内的其中,语句指明该标记内部嵌入的是以文本形式出现的CSS样式,通常浏览器在执行到这里时,就知道如何显示。
如果浏览器不支持CSS样式表则可以忽略样式表。
因为,有些比较老的浏览器可能不支持CSS样式表,此时会将和之间的样式表代码显示出来,这里把样式表的定义放在注释语句--多个标记的样式定义……-->中,就是为了避免这种情况发生的。
2、样式表代码的组成:
本例我们为两种标记定义了样式表。
标题标记的样式表是:
h3{font-family:
楷体;color:
blue;text-decoration:
underline;font-style:
italic}
段落
标记的样式表是:
p{background-color:
silver;border-style:
solid;border-color:
green}
样式表是由放在{}中的多个“属性:
属性值”对的列表组成,中间用分号隔开。
如上面代码中,h3是被定义的标记名,“font-family:
楷体”是被定义的样式,指明字体名是楷体;样式“color:
blue”指明字体颜色是蓝色;样式“text-decoration:
underline”指明文本的修饰是下划线;样式“font-style:
italic”指明文本的字体样式是斜体。
而P标记中定义的样式“background-color:
silver”指明段落的背景颜色是银白色;样式“border-style”指明段落边框为实线;样式“border-color:
green”指明边框颜色为绿色。
3、样式表代码的作用:
一旦为标记定义了样式表,则HTML文档中的所有该标记将以同样的样式进行显示。
如上例中的所有段落P都将以“绿色、实线边框“和”银白色背景“显示。
这对于设定所有该标记为统一风格,是十分方便的。
(三)【上机实践】
1、输入源程序E9_1.htm,并通过浏览器查看运行效果。
2、分析主要代码的功能,定义其它标记的样式,或对现有样式的属性进行修改,之后重新运行,观察不同设置对显示效果的影响。
二.用类(Class)和ID(标识符)名定义样式表
上面直接给HTML标记定义CSS样式复杂且不灵活,如希望正文中的多个
标记的颜色互不相同,则上面的方法就不方便了。
为此,引入Class(类)和ID(标识符)名来定义CSS样式。
下面我们首先来看一个简单的用类(Class)和ID(标识符)名定义样式表的例子。
(一)【示例9.2】
本例子的功能是:
说明如何用类和ID名定义样式表。
有关的代码可参见下面的源程序文件E9_2.htm,在浏览器中的显示效果如图9.2所示。
【源程序清单:
E9_2.htm】
用类(Class)和ID(标识符)名定义样式表的示例
--/*以下用类Class和ID名定义样式表*/
.myh3{font-family:
楷体;color:
blue;text-decoration:
underline;
font-style:
italic}
#myp{background-color:
silver;border-style:
solid;border-color:
green}
-->
用类(Class)和ID(标识符)名定义样式表
--应用class样式名myh3的H3标记-->
class=myh3的H3标记样式:
楷体、蓝色、下划线、斜体
--应用id样式名myp的P标记-->
id=myp的段落P标记样式:
段落边框为实线、边框颜色为绿色、段落背景色为银白色。
我是第二个普通H3标记,我的显示样式和第一个H3标记不同吧!
我是第二个普通段落P标记,我的显示样式和第一个P标记不同吧!
图9.2用类Class和ID属性定义样式
1、【示例解析】
本例在内联式样式表中,分别定义了class样式名“myh3”和id样式名“myp”的两个样式表。
在
内的第一个标题标记和段落
标记的内容,应用了定义好的样式。
2、【效果展示】本示例的显示效果如图9.2所示。
(二)CSS样式表说明
1、Class(类)和ID(标识符)名命名
用Class(类)和ID(标识符)名来定义CSS样式与给HTML标记定义CSS样式相似,如样式表代码的位置和样式表代码的组成都是相同的。
只是这里不是直接用HTML的“标准标记名”来命名样式名,而是用Class(类)名和ID(标识符)名来命名“样式名”的。
其中Class(类)样式名是以圆点开头,而ID(标识符)样式名则以#号开头。
本例我们分别用Class(类)和ID(标识符)名定义了两种样式表。
用class定义的样式表名是myh3,代码如下:
.myh3{font-family:
楷体;color:
blue;text-decoration:
underline;font-style:
italic}
用id定义的样式表名是myp,代码如下:
#myp{background-color:
silver;border-style:
solid;border-color:
green}
关于上面代码中的各个样式的解释同前面一样,这里不再赘述。
2、注:
ID(标识符)名的主要作用是在调用JavaScript语言时作为一个独立的名称来识别网页中的元素,如不用JavaScript语言,则尽量少用它,因其具有一定的局限性。
3、样式表代码的作用:
前面已经知道,一旦为标记定义了样式表,则HTML文档中的所有该标记将以同样的样式进行显示。
如果要求相同的标记使用不同的样式进行显示,则需要用Class(类)和ID(标识符)名定义样式表。
本例中第一个H3标记应用了class样式名myh3,所以会按照该样式的设定进行显示,而第二个H3标记则以普通H3标记进行显示。
第一个段落P标记应用了id样式名myp,所以会按照该样式的设定进行显示,而第二个段落P标记则以普通段落进行显示。
达到了相同的标记使用不同的样式进行显示的目的,非常灵活、方便。
(三)【上机实践】
1、输入源程序E9_2.htm,并通过浏览器查看运行效果。
2、分析主要代码的功能,定义其它的class或id样式,或对现有样式的属性进行修改,之后重新运行,观察不同设置对显示效果的影响。
9.3.2外部CSS样式表定义
上面所述的内部样式表,由于其代码是置于HTML文件内部的,因而它只能够应用于当前的HTML文件。
如希望站点中的其它文件也使用同样的样式表,则需要重新编写一次代码,上面的方法就不够灵活、也不方便。
为此,引入外部样式表。
外部样式表是指CSS样式表的代码是置于HTML文件外部,并以独立于HTML文件的形式单独保存在扩展名为.css的文本文件中。
优点是,我们可以在站点的每个文件中引用该外部样式表文件中的样式,从而使整个站点的所有文件在风格上保持一致。
下面我们首先来看一个简单的外部CSS样式表的例子。
一、【示例9.3】
本例子是用记事本编写的一个外部CSS样式表文件mycss.css。
其功能是:
说明外部CSS样式表文件的组成。
相关的CSS代码可参见下面的源程序文件mycss.css,在记事本窗口中的显示如图9.3所示。
【源程序清单:
mycss.css】
.myfont{font-family:
楷体;
color:
blue;
text-decoration:
underline;
font-style:
italic}
#myp{background-color:
silver;
border-style:
solid;
border-color:
green}
h3{font-family:
宋体;
color:
blue;
text-decoration:
overline;
font-style:
italic}
图9.3外部CSS样式表文件
二、外部CSS样式表说明
该示例中定义了class样式名“myfont”、id样式名“myp”和标题标记h3三个样式表。
实际上CSS文件的内容可以包括用类(Class)、ID(标识符)以及HTML标记定义的任意多的样式表。
关于上面CSS文件中的各个样式的解释同前面一样,这里不再赘述。
9.4外部CSS样式表基本操作
9.4.1CSS文件编辑和保存
一、CSS文件的编辑
CSS文件的编辑软件有多种,这里我们以windows系统中的“记事本”工具为例,对前面的CSS文件mycss.css进行编辑。
首先打开“记事本”(方法是:
“开始”菜单—>“程序”—>“附件”—>“记事本”),然后在“记事本”的编辑窗口(如图9.3)中输入所有CSS样式代码即可。
输入过程中可以随时进行编辑、修改,非常方便。
二、CSS文件的保存
CSS文件的扩展名可以是.css。
当整个CSS文件编辑完毕后,即可存盘。
方法是在记事本窗口中,选择“文件”菜单—>“保存”命令,此时将打开下面的“另存为”对话框,如图图9.4所示。
图9.4文件“另存为”对话框
在对话框的“保存在”列表框中选择存盘路径,在“保存类型”列表框中选择文本文档(*.txt)文件,然后将此文件命名为“mycss.css”(要包括扩展名),点击“保存”按钮即可。
三、CSS文件编程规范
编写CSS文件代码时,除了遵循HTML编程规范外,还应该注意下面几点。
1、样式分行书写:
为了增加代码的可读性,样式表可以分行书写,每一行一个样式,并用分号结尾,最后一个属性后可以不用分号,但为了以后添加属性时不至于发生错误,最好加上分号。
如下面的代码:
h3{font-family:
楷体;color:
blue;text-decoration:
underline;font-style:
italic}
可以分行书写为:
h3{font-family:
楷体;
color:
blue;
text-decoration:
underline;
font-style:
italic;}
2、可以对一个属性定义多个属性值,多个属性值之间用逗号分隔。
如设置字体名称时,可以设定多个属性值,代码如下:
h3{font-family:
“楷体”,”隶书”,”宋体”}
此时,CSS样式表被执行时,浏览器会顺序地读取字体属性中设定的属性值,直到遇到一个能够识别的字体。
如字体属性中没有浏览器能够识别的字体,浏览器会以当前默认的字体来显示。
3、运用注释语句
和大多数的编程语言一样,为了方便页面设计者或其他相关人员以后对代码的阅读、维护和修改,在源程序的适当位置插入注释语句是一种良好的编程习惯。
CSS注释语句的格式为:
/*注释语句的具体内容*/,这和C语言编程中的注释方法类似。
注释语句会被浏览器忽略。
设计者可以在注释语句中包含任何内容。
在上面的源程序:
E9_2.htm文件的CSS样式表中就使用了注释语句。
四、【上机实践】
利用windows系统中的“记事本”工具,对前面的CSS文件mycss.css进行编辑,并保存。
9.4.2CSS样式表常用编辑软件
因为CSS样式表的内容就是普通的文本,因此任何一个纯文本编辑器都可以作为CSS的编辑器,如windows中的记事本、写字板,Linux中的Kedit、Lxy等,只要在保存文件时扩展名改为.css即可。
除此之外,也可以使用一些“所见即所得”的、功能更为强大的专用的CSS编辑工具,如Dreamweaver、FrontPage等编辑。
这些编辑软件集代码编辑、效果显示功能于一身,而且可以将各种不同的代码用不同的格式显示,便于编辑。
你可以很容易通过鼠标操作来帮助输入CSS代码、创建一个CSS文件,而不需要在纯文本中编写全部代码。
不仅如此,这些编辑软件还提供了许多其它功能,如预先定义了很多JavaScript函数等,而且这些功能都非常方便、易于使用。
不过,编辑工具不是万能的,不能取代对CSS语言的学习。
因为,如果不了解CSS语句的对象、各个参数的意义,就不可能很好地使用这些工具。
而且在很多时候,我们不得不直接修改网页的源代码。
所以,建议你使用纯文本编辑器编写代码,这有助于学习css语言基础。
本书的css文档示例,主要在纯文本编辑器环境下进行的编辑。
有关使用FrontPage建立CSS文件的基本操作请参见附录
9.5CSS样式表的应用
当定义好样式表后,就要将其应用到HTML文档相应的标记上,以便页面能够按照其指定的样式显示。
下面介绍应用CSS样式表的四种方法:
嵌入式方法、内联式方法、外链式方法和导入式方法。
9.5.1内部CSS样式表应用
一.嵌入式方法:
嵌入式方法是指将样式表直接放在了要设定样式的标记后。
如需要定义某个具体段落标记
的样式是:
“背景颜色是银白色、段落边框为实线、边框颜色为绿色”,则代码可以书写如下:
silver;border-style:
solid;border-color:
green">...
。
采用这种方法应用的样式表也称为嵌入式样式表。
嵌入式样式表只能够针对具体的标记起作用,没有体现CSS样式表的优越性,应用比较少。
二.内联式方法:
内联式方法是把样式表定义语句直接写在当前页面的如下位置:
--/*以下用类Class、ID名以及标记名定义的内联式样式表*/
若干样式表定义语句
-->
采用这种方法应用的样式表也称为内联式样式表。
内联式样式表只能够针对当前页面的标记起作用。
当前页面的某个标记如果需要使用以类(Class)样式名和ID样式名定义的内联样式时,只需在该标记中用class="类样式名"或id="id样式名"引用即可。
如果内联样式是直接用HTML标准标记名命名的,则当前HTML文件中的所有该标记都自动应用该样式。
有关内联式样式表的“定义、应用及显示效果”的具体示例可参见源程序:
E9_1.htm和E9_2.htm,此处不再赘述。
本书的大部分示例使用的都是内联式样式表。
9.5.2外部CSS样式表应用
一.外链式方法
(一)链接外部“CSS样式表”文件的标记
外链式方法是指把已经建立好的外部“.CSS样式表”文件,使用标记链接到当前页面,以便应用其中的样式。
标记在当前页面的位置和其中的属性设置如下:
1、标记中的属性说明
属性:
href=".css样式表文件URL",指明被链接(href)的外部“css样式表文件”的URL地址;
属性:
rel="stylesheet"指明被链接的外部“css样式表文件”和当前HTML文件的关系rel(relationship),它是当前HTML文件的样式表(stylesheet)文件;
属性:
type="text/css",指明被链接的外部“css样式表文件”的类型(type),它是文本文件(text)形式的“css样式表文件”。
2、采用这种方法应用的样式表也称为外链式样式表。
当前页面的某个标记如果需要使用以类(Class)样式名和ID样式名定义的外链式样式时,只需在该标记中用class="类样式名"或id="id样式名"引用即可。
如果外链式样式是直接用HTML标准标记名命名的,则当前HTML文件中的所有该标记都自动应用该样式。
下面我们来看一个应用外链式CSS样式表文件的例子。
(二)【示例9.4】
本例子的功能是:
说明如何把已经建立好的外部“.CSS样式表”文件,使用标记链接到当前页面,以便应用其中的样式。
有关的代码可参见下面的源程序文件:
link_mycss1.htm,在浏览器中的显示效果如图9.5所示。
【源程序清单:
link_mycss1.htm】
应用外链样式表文件中的自定义样式--链接自定义的外部样式表文件mycss.css-->
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
-
商务
网站
页面
设计
技术
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。