CSS简明教程（二）——样式表解析

一个样式表就是一个文本文件，在web服务器上通常与html页面放在一起。样式表中包含若干样式规则，规则的先后顺序不重要。每条样式规则会为一个或者多个html元素指定一个或者多个格式化信息。下面是简单的样式规则的结构：

以下是样式规则各个部分的说明：

selector（选择符）：表示要格式化什么内容。浏览器会在整个页面中查找选择符想要匹配的元素。编写选择符的方式也不止一种，但最简单的就是直接给出你想要为其应用样式的元素名。例如，可以编写一个选择符。选出页面中的所有一级标题。

property（属性）表示要应用什么样式。属性就是颜色、字体、对齐方式、等。一条样式规则里可以设置任意多个属性。

value（值）表示给样式设置什么样的值。例如，如果属性是颜色，那么值可以是红色或者蓝色。

例子：

把这条规则复制粘贴到样式表里，比如，保存在一个style.css中，然后找一个简单的网页，至少要包含一个<h1>元素。添加一个<link>元素引用该样式表。最后，在浏览器中打开这个网页，你会发现<h1>元素不再是默认的格式，而是会变成红色，并且居中。

css属性

前面的例子介绍了两个格式化属性：text-align（设置文本在水平方向上如何对齐）和color（设置文本颜色）。除此之外，还有很多可以使用的格式化属性，下面列出一些常用的样式属性。

	属性
颜色	color、background-color
空距	margin、padding、margin-left、margin-right、margin-top、margin-bottom、padding-left、padding-right、padding-top、padding-bottom
边框	border-width、border-style、border-color、border（一次性设置宽度、样式和颜色）
文本对齐	text-align、text-indent、word-spacing、letter-spacing、line-height、white-space
字体	font-family、font-size、font-weight、font-style、font-variant、text-decoration、@font-face
尺寸	width、height
布局	postion（left、right）float、clear
图片	background-image、background-repeat、background-postion

 使用类格式化正确的元素

前面的样式规则格式化的所有文档中的<h1>标题。但是比较复杂的文档中，则需要指定具体的元素，为它们应用不同的样式。为此，需要使用class属性为这些元素起一个名字。下面是一个例子：

<h1 class="articletile">html5</h1>

好了，现在可以只为这个标题写一条样式规则。关键在于选择符要以一个句点开头，然后才是类名。像这样：

表示文章标题的<h1>放大到了40像素高。

可以给任意多个元素指定相同的类属性。几乎所有样式表里都可以看到类选择符规则，这些类选择符把网页标记有效得分成了可以承载样式的单位。

最后有必要提一下，可以组合使用元素类型和类名。比如：

h1.articletile{font-size:40px}

这个选择符只适用于类为articletile的<h1>元素。有时候，这样写只是为了清晰而已——比如，你想提醒自己只为<h1>元素添加articletile类，而其他元素都不会有这个类。但大多数情况下，web设计人员只会给出一个类名，不会限定任何元素。

样式表注释

与html一样，在css中也可以写注释，浏览器同样会忽略这些注释。不过css注释与html注释不一样，css注释以/*字符开头，以*/字符结尾。

/*这是页面中文章的标题*/

Tags：css   教程

转载：感谢您对杨青青个人博客网站平台的认可，以及对我们原创作品和文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源杨青青个人博客”。https://www.yangqq.com/jstt/bj/2013-07-24/522.html

很赞哦！ ()