CSS基础

返回文章首页
创建时间：十二月 27th, 2007修改时间：十二月 28th, 2007 Traffic(495)

我们说XHTML最大的特点就是使内容与表现形式相分离，使网页更具结构化和逻辑性。那么网页怎么与分离出来的表现结合，构建出内容丰富，设计美观的网页呢？答案是CSS。

一、什么是CSS

CSS是Cascading Style Sheets（层叠样式表）的缩写。是一种对Web文档添加样式的简单机制，属于表现层的布局语言。

二、CSS的语法结构

CSS的语法结构由三部分组成：Selector {Property:Value;}。

1、选择符（Selector）：是指针对的对象。可以是XHTML标签，如：body，div等；也可以是一个已定义了特定id或class的标签。例如：#main表示一个被指定了id为main的对象，如<div id="main">。每组样式都会被浏览器准确的对应到相应的对象上。

2、属性（Property）：对于每个XHTML的标签，CSS都提供了非常丰富的样式属性，如颜色、显示形式、浮动方式、对象中文字的大小等等。

3、属性值（Value）：属性值有两种形式，一种是指定范围的值，如float（浮动）属性，其值有inherit、left、right和none四种；另一种为数值，如width（宽）属性，其值为0到9999px或其他数学单位来指定。

选择符和属性可以有多个，分别用逗号“,”和分号“;”分隔，最后一个属性可以不加后面的分号。

下面来看一个实际应用的例子：

这个例子要表现的是：将网页中除了id为a的对象背景颜色为灰，文字为12像素的蓝色文字外，其它的均为12像素的黑色文字。id为b的对象的边框是用1像素黑色直线围起来的。

由例子可以看出：当子对象和父对象做了相同的设置时，子对象遵循自己的设置；如果子对象没有而父对象做了某项设置时，子对象遵循父对象的相关设置。

就像例子表现的一样，body设置了网页中文字的大小与颜色，但id为a的层也做了文字大小、颜色的设置，所以id为a的层就按照自己设置的样式显示。而id为b的层未对文字大小、颜色做相应的设置，所以在显示文字的大小和颜色上遵循body的设置。

三、选择符的分类

1、类型选择符：是指以网页中已有的标签类型作为名称的选择符。如上面的body就是，还有div，p等等。写法为：

div {font-size:12px}

2、群组选择符：如果不同的XHTML对象具有相同的样式时，还可以指定多个对象，个对象之间用逗号“,”分隔。这就使得div，p，span，h1具有了相同的文字大小设置。这样在使用相同样式的地方只需书写一次就可以了，极大地提高了代码的重用性。写法为：

div,p,span,h1 {font-size:12px}

3、包含选择符：当我们想对某个对象中的某一个或几个子对象指定样式时，此包含符就派上用场了。写法为：

div span {font-size:12px}

请看下面的例子：

上面的div,span {...}是类型选择符，表示div和span对象；而div span {...}则是包含选择符，表示div下的span对象。

虽然设置了span下是黑色文字，但div span {...}更进一步设置了div下的span，根据子对象和父对象设置相同，遵循子对象设置原则，所以div下的span对象中显示的是红色文字。

细心的朋友会看到，网页背景颜色就是白色，但为什么还要设置背景颜色为白色呢？其实这也是W3C为我们制定的标准之一。设置前景色（文字颜色），就必须设置相应的背景颜色，二者的颜色值不能相同。反之也是如此。详细情况请参考CSS效验的常见问题。

如果您现在对其中的某些CSS属性还不了解，那么大可不必担心，随着学习的深入，本站会在以后的文章中以实例的方式做一一介绍。

4、id和class选择符

两者均是CSS提供的由用户自定义名称的一种选择模式。用id定义的在CSS中用“#”来选择；用class定义的在CSS中用“.”来选择。

例如XHTML中有一段代码：<div id="a">...</a>，则在CSS中要定义其样式用“#”来选择，代码为：

#a {font-size:12px}

再如XHTML中有一段代码：<div class="a">..</a>，则在CSS中要定义其样式用“.”来选择，代码为：

.a {font-size:12px}

二者相同的是，一个对象一旦定义了id或class属性，在CSS中就可以直接用属性值（既定义的名称）来选择，设置应用于所有定义了相同名称的对象上。

但不同的是，id也可以理解为一个标识，在一个页面中每个id的名称是不能重复的，而class的名称是允许重复的。如果需要定义相同的样式，那么建议使用class定义。class选择符也是对CSS代码重用性的良好体现，众多标签均可以使用同一个class进行样式指派，不需要再为每个分别编写样式代码了。

5、标签指定式选择符

应用于即想使用id或class定义的名称，又想同时使用标签选择时使用。如果当页面中有这样的代码：<h1>第一个</h1><h1 class="a">第二个</h1>，想更准确的定义<h1 class="a">第二个</h1>时，代码为：

h1.a {font-size:12px}

表示针对所有class为a的h1标签。

6、组合选择符

对于上述所有CSS选择符而言，无论是什么类型的，都可以组合使用。代码为：

body, div span, h1.a {font-size:12px}

CSS在选择符上的使用可以说是非常自由的，可根据页面需求灵活使用。

7、伪类及伪对象

伪类及伪对象是一种特殊的类和对象，它有CSS自动支持，名称不能被用户自定义，只能够按照标准的格式使用，属于CSS一种扩展的类和对象。因为此类并不常用，所以只介绍几种常用的。如链接的样式。

（1）a:link：链接未被访问（点击）前的样式；

（2）a:visited：链接被点击与鼠标弹起之间的样式；

（3）a:hover：鼠标移动到链接上（鼠标经过）时的样式；

（4）a:active：链接被访问（点击）后的样式。

如代码：a:hover {text-decoration:underline}表示当鼠标经过时，链接文字底部出现横线。

8、通配选择符

用一个星号代替选择符，表示应用到所有页面对象上。我们不推荐这样使用，这样可能会带来不可预见的风险。

四、CSS数值单位

（1）px：像素（Pixel），如：font-size:12px；width:100px等。

（2）em：相对于当前对象内文本的字体尺寸，如font-size:1.2em。

（3）ex：相对于字符的高度的相对尺寸，如font-size:1.2ex，相对于当前字符的1.2倍高度。

（4）pt：点/镑（Point），如font-size:9pt。

（5）pc：派卡（Pica），如font-size:0.5pc。

（6）mm：毫米（Millimeter），如font-size:4mm。

（7）cm：厘米（Centimeter），如font-size:0.2cm。

（8）in：英寸（Inch），如height:12in，对象的高度为12英寸。

（9）rgb：颜色单位，如color:rgb(255,0,0)，对象的文字为红色。

（10）#RRGGBB：十六进制颜色单位，如color:#FF0000，可以简写为color:#F00，但要是color:#165AB3就不可以简写。

（11）颜色名称：浏览器所支持的颜色名称，如color:red。

五、CSS的调用形式

1、行间样式表：指把CSS代码编写在XHTML网页的标签之中。代码为：

<div style="font-size:12px;...">文本</div>

2、内部样式表：同行间样式表一样是编写在XHTML页面中的，不同的是内部样式表把样式代码统一放在一个固定的位置。本文中的两个实例就是这种形式。

3、外部样式表：将CSS代码单独编写在一个文件之中，由网页进行调用，多个页面可以同时调用同一个样式文件，因此能够实现最大化的代码重用及网站文件的最优化配置。本站就是采用这种形式。调用写法是：<link type="text/css" href="main.css" rel="stylesheet" rev="stylesheet" media="all" />

到这里我们就把Web标准最基本的设置说完了，接下来我们会通过一系列的实例来讲解CSS各属性的应用及Web标准的div+css网站实现的全过程。

Posted by: 近水社区
相关文章：
相关模板：
暂无相关模板

Comments(0)

暂无留言。
User Name:
（必添）
User Email:
（必添）
User URL:
Comment:
（必添）