CSS基础篇

什么是CSS？

网海茫茫，怎样使自己的网页成为一道亮丽的风景线让人过目不忘？怎样使自己的网页的风格独特一致？怎样免除众多HTML标志属性设置的烦恼？一口气说这么多，只是想说，CSS---层叠样式单可以助你一臂之力！ 　　CSS即Cascading Style Sheet(级联样式单)的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。 　　在谈样式表前，我想先谈一下HTML标志与标志属性。 　　如果你学了网络学堂的HMTL教程，对HTML标志应该有一个大体的了解，它是网页的信息表示标示符号，也是构成网页的基本元素，或说是基本成员吧。每个标志表示了某种信息的表示，如<P>标志表示一个段落，<h1>表示一个大标题，<table>表示一个表格....，标志只是表明要表示的信息是什么，而同样的信息可能要求显现给人的样子不一样，如同是标题，一个是<h2>你好</h2>,一个是<h2>网络学堂欢迎你</h2>，我想使前一个呈现出蓝色，另一个是红色，效果如下: 　　　　你好　　　　　　　　　　　 　　　网络学堂欢迎你 　　这就要用到标志的属性，标志属性其实也就是标志的特性，由于HTML中的绝大部分标志是用来显示相关信息的，所以标志属性也多集中于标志的字体、颜色、位置、大小及排版格式等外观特性上。如果你对Windows平台下编程熟悉的话，那么对“对象”这个概念一定不陌生，在HTML中，HTML对象也就是这些代表某种信息类型的标志，而对象的属性也就是标志属性。有人称HTML为语言，我想除了它是网上信息表示的特殊语言符号外，还因为有了标志对象及标志属性，可以通过脚本语言进行程序控制，所以又有程序语言的一面。当然，你不一定要对Window下编程很熟悉，只是你想深入脚本语言进行编程的话，那么就必须熟悉这些属性。 　　为什么称样式单为层叠的呢？在你还没有对它有一个较全面的了解前，可打一个不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的“层叠”，就可大体地知道这个人的品质；即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，你会发现层叠的具体含义及一些妙用的。

 

CSS的基本语法

在建立样式表之前，我们必须要具体一些 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}，效果如下 网络学堂欢迎你；网络学堂欢迎你；网络学堂欢迎你；网络学堂欢迎你； 上面我们分别设置了背景色，字体大小，以及字体颜色等。 　　为了看起来直观一些，上边的例子还可以写成: 　　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}来表示，类似的情况还有关于背景方面的设置，在以后的章节中我们会一一详细讲解的。