在建立样式表之前,我们必须要具体一些 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: " 黑体 "
}
注意各个标志属性之间用分号隔开。