CSS的基本语法.docVIP

CSS的基本语法 在建立样式表之前，我们必须要具体一些 HTML 的基础知识。我们知道， HTML 语言由标志和属性构成， CSS 也是如此。 　　样式表基本语法： 　　 HTML 标志 { 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… } 　　放置样式表有内联和外联等三种不同的方法。现在首先讨论在 HTML 页面内直接引用样式表的方法。 　　这个方法必须把样式表信息包括在 style 和 /style 标记中，为了使样式表在整个页面中产生作用，应把该组标记及其内容放到 HEAD 和 /HEAD 中去。 　　例如我们要设置一 HTML 页面中所有 H1 标题字显示为蓝色，其代码如下：  HTML  HEAD  TITLEThis 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}，效果如下 网络学堂欢迎你；网络学堂欢迎你；网络学堂欢迎你；网络学堂欢迎你； 上面我们分别设置了背景色，字体大小，以及字体颜色等。　　为了看起来直观一些，上边的例子还可以写成:　　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}来表示，类似的情况还有关于背景方面的设置，在以后的章节中我们会一一详细讲解的。 将层叠样式单放在何处 　　层叠样式单写好后，放在什么地方呢？大体说来有三种方式，一种是外部文件方式；一种是内部文档头方式；另一种是直接插入式。三种方式各有妙用，主要的差别在于它们规定的