转自:微点阅读(www.weidianyuedu.com)微点阅读 - 范文大全 - 免费学习网站
网海茫茫,怎样使自己的网页成为一道亮丽的风景线让人过目不忘?怎样使自己的网页的风格独特一致?怎样免除众多HTML标志属性设置的烦恼?一口气说这么多,只是想说,CSS---层叠样式单可以助你一臂之力!
CSS即Cascading Style Sheet(级联样式单)的缩写,我们又常称这为风格样式单Style Sheet,顾名思义,是用来进行网页风格设计的。比如,我想让我的链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,我们可以统一地控制HMTL中各标志的显示属性。
在谈样式表前,我想先谈一下HTML标志与标志属性。
如果你学了网络学堂的HMTL教程,对HTML标志应该有一个大体的了解,它是网页的信息表示标示符号,也是构成网页的基本元素,或说是基本成员吧。每个标志表示了某种信息的表示,如<P>标志表示一个段落,<h1>表示一个大标题,<table>表示一个表格....,标志只是表明要表示的信息是什么,而同样的信息可能要求显现给人的样子不一样,如同是标题,一个是<h2>你好</h2>,一个是<h2>HaoTian 的个人图书馆欢迎你</h2>,我想使前一个呈现出蓝色,另一个是红色,效果如下:
这就要用到标志的属性,标志属性其实也就是标志的特性,由于HTML中的绝大部分标志是用来显示相关信息的,所以标志属性也多集中于标志的字体、颜色、位置、大小及排版格式等外观特性上。如果你对Windows平台下编程熟悉的话,那么对“对象”这个概念一定不陌生,在HTML中,HTML对象也就是这些代表某种信息类型的标志,而对象的属性也就是标志属性。有人称HTML为语言,我想除了它是网上信息表示的特殊语言符号外,还因为有了标志对象及标志属性,可以通过脚本语言进行程序控制,所以又有程序语言的一面。当然,你不一定要对Window下编程很熟悉,只是你想深入脚本语言进行编程的话,那么就必须熟悉这些属性。
为什么称样式单为层叠的呢?在你还没有对它有一个较全面的了解前,可打一个不很准确的比喻:如我们评价一个人,需要听取大家的意见再汇总,有人说,这个人诚实,有的说干事踏实,有的说很有责任心.....,这样通过这些意见的“层叠”,就可大体地知道这个人的品质;即使是同样的标志,也可以通过层叠使它们显示出不同的特性来,随着学习的深入,你会发现层叠的具体含义及一些妙用的。
在建立样式表之前,我们必须要具体一些 HTML 的基础知识。我们知道, HTML 语言由标志和属性构成, CSS 也是如此。
样式表基本语法:
HTML 标志 { 标志属性:属性值;标志属性:属性值;标志属性:属性值;…… }
放置样式表有内联和外联等三种不同的方法。现在首先讨论在 HTML 页面内直接引用样式表的方法。
这个方法必须把样式表信息包括在 < style> 和 < /style> 标记中,为了使样式表在整个页面中产生作用,应把该组标记及其内容放到 < HEAD> 和 < /HEAD> 中去。
例如我们要设置一 HTML 页面中所有 H1 标题字显示为蓝色,其代码如下:
< HTML>
< HEAD>
< TITLE>This is a CSS samples< /TITLE>
< STYLE TYPE="text/css">
< !--
H1 { color: blue }
-->
< /STYLE>
< /HEAD>
< BODY>
... 页面内容…
< /BODY>
< /HTML>
注意, < STYLE> 标记中包括了 TYPE = "text/css" ,这是让浏览器知道你是使用 CSS1 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则,可以把该段代码忽略不计。
在使用样式表过程中,经常会有几个标志用到同一个属性,比如我们规定 HTML 页面中凡是粗体字、斜体字、1 号标题字显示为红色,按照上面介绍的方法应书写为:
B { color: red}
I { color: red}
H1 { color: red}
显然这样书写十分麻烦,引进分组的概念会使其变得简洁明了,我们可以写成:
B,I,H1 {color: red}
用逗号分隔各个 HTML 标志,把三行代码合并成一行。
此外,同一个 HTML 标志,可能定义到多种属性,例如,我们规定把从 H1 到 H6 各级标题定义为红色黑体字,带下划线,则应写为:
H1,H2,H3,H4,H5,H6 {
color: red;
text-decoration: underline;
font-family: " 黑体 "
}
注意各个标志属性之间用分号隔开。
如何建立样式表
样式表的建立要符合CSS规则,它们一般被定义成以下形式的句法:
HTML标志{标志属性:属性值;标志属性:属性值;标志属性:属性值;标志属性:属性值;...}
下面我们分别讲述:
.HTML标志:在上一节我们已简要地介绍了一下, 有点需要注意的是,这些标志不带尖括号,如P,Div、Table等而不是<P>、<Div>以及<Table>。
.标志属性:属性值,这是一一对应的,每个属性与属性值对之间用分号隔开。有一点要说明的是,在CSS的属性设置与脚本语言中对属性设置有一点不同,即属性名称的写法,在CSS中,凡属性名为两个或两个以上的单词构成时,单词之间以"-"隔开,比如,背景颜色属性background-color, 而在脚本中,对象属性则连写成backgroundColor,第二个单词首字母大写,如有三个单词则第三个单词首字母也要大写,注意,在Javascript中,是严格区分大小写的。
下面看一个具体的例子,比如我们对一个段落建立一个样式表:
P{background-color:#0000ff;font-size:12pt;color:#ffff00},效果如下
HaoTian 的个人图书欢迎你;HaoTian 的个人图书欢迎你;HaoTian 的个人图书欢迎你;HaoTian 的个人图书欢迎你;
上面我们分别设置了背景色,字体大小,以及字体颜色等。
为了看起来直观一些,上边的例子还可以写成:
P{background-color:#0000ff;
font-size:12pt;
color:#ffff00}
有一点值得注意的是,有些属性可以表示多个属性的值,如字体设置,有字体字样:font-family、字体大小:font-size、字体风格:font-style,这些可用一个font属性来表示,
如:H2{font-size:15pt;
font-family:"宋体";
font-style:italic }
可直接用 H2{font:15pt 宋体 italic}来表示,类似的情况还有关于背景方面的设置,在以后的章节中我们会一一详细讲解的。