CSS Tutorial(一)：基本知识

1.简介

CSS（Cascading Style Sheets）：叠层样式表。主要用来定义如何去显示HTML的元素。HTML4中添加CSS主要是为了达到内容与显示分离。

HTML原本是设计用来用来定义一个文档的内容，而不是用来定义如何显示这些内容。然而曾经有一段时间，大量网页充斥着类似于<font>标签和color属性的东西，导致页面难以维护。为了解决这个问题W3C提出了CSS。

2.CSS语法

CSS并不是编程语言，而且CSS的语法非常简单。CSS规则非常简单，包含两部分：选择器和一个或者多个定义，其语法如下图所示：

其中，selector（选择器）用来选择并且制定页面中哪些元素需要应用样式，而没一个定义包含一个属性及其对应的属性值。下面就是一个典型的CSS样式：

p {
    color:red;text-align:center;
}

他的意思是，对于页面中所有的<p>元素，颜色为红色，文字居中对齐。每一个定义以分号结尾，若干个定义一起被左右花括号括起来。一般来说，为了使得CSS的可读性更好，一般会将一个定义放在一行，如下：

p {
    color:red;
    text-align:center;
}

CSS也有注释：

/*
这里面都是
注释
*/

3.Id选择器和类选择器

Id选择器用来给HTML文档中的一个元素设置样式。Id选择器使用被设置样式的元素的id属性，并且以"#"开头。例如：

#para1 {
    text-align:center;
    color:red;
}

这个例子中，样式是设置给HTML中id为para1的元素的。

class选择器和Id选择器不同，他可以为一组HTML元素，而不是单个元素设置相同的样式。这就允许对具有相同class的很多元素设置一样的样式。class选择器以"."开头。例如：

.center {
    text-align:center;
}

这样一来的话，只有class为center的<p>元素的文字对齐是居中的了。

4.插入CSS的三种方法

外部样式表适用于一个样式表控制多个HTML文件的显示。这样你可以通过只修改一个CSS文档，就能使整个站点的样式更新的效果。这种情况下，需要给每个网页添加一段代码引用这个外部样式表文件：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

其中mystyle.css就是这个文件。外部样式表可以使用任何文本编辑器编辑，以css作为后缀名，其中不允许包含HTML标签。下面就是一个外部样式表的例子：

hr {
    color:sienna;
}
p {
    margin-left:20px;
}
body {
    background-image:url("images/back40.gif");
}

需要注意的是，属性值与单位之间不能有空格，有空格的话，IE可以正常显示但是FF和Opera不行。

内部样式表则是在HTML的<head>标签中增加<style>标签，并且在里面写样式，例如：

<style>
hr {
    color:sienna;
}
p {
    margin-left:20px;
}
body {
    background-image:url("images/back40.gif");
}
</style>

内联样式表就是在对应的标签属性中定义样式，如下：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

很明显，这种方式达不到将内容与现实分开的目的，因此尽量少用或不用。

5.多个样式表的问题

既然上面提到样式表可以以三种方式插入，那么一定会存在对于某个元素，多个样式表中都对其进行了样式规定的情况，那到底以哪个为准呢？CSS有如下的标准：

其中第四个优先级是最高的。

参考资料：

本系列文章的内容，结构，例子都来源于上面的链接。我这里主要是提取其中的要点翻译整理。一方面备忘，也方便不喜欢看英文的同学。有任何不当，欢迎交流！

posted @ 2012-03-12 16:22 wawlian 阅读(665) 评论(0) 编辑收藏举报

刷新页面返回顶部

wawlian