CSS开篇介绍

来源：互联网发布：广州学校数据编辑：程序博客网时间：2024/06/05 16:55

CSS是Cascading Style Sheets(层叠样式表)的简称，它是一种用来表现HTML或XML等文件样式的计算机语言。在学习CSS之前，我觉得我们有必要先来了解一下HTML和XML。

一、HTML与XML

HTML是一种超文本标记语言，使用标记标签来描述网页。HTML标签通常用尖括号包围起来的关键字，通常是成对出现，第一个是开始标签，第二个是结束标签。Web浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

HTML:就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括头部分（Head）、和主体部分（Body），其中头部（head）提供关于网页的信息，主体（body）部分提供网页的具体内容。

XML指可扩展标记语言（Extensible Markup Language) ,它是一种标记语言，很类似HTML.XML的设计宗旨是传输数据而非显示数据。

可见：HTML 与XML是为不同的目的而设计的。HTML旨在显示数据，注重数据的外观，XML旨在传输和存储数据，注重数据的内容。

好了，可以介绍我们的主题了。CSS，额，可是他跟我们前面那两个有什么关系呢？

CSS主要是用来进行网页风格设计的。通俗的说就是进行网页美化的。所以他跟HTML还是有一定的相似之处。

二、CSS定义：

三、CSS分类

1.外部样式表，主要应用于多个页面时，使用外部样式表，可以通过改变一个整个站点的外观。每个页面使用<link>b标签链接到样式表。例如:

<head><link>mystyle.css" /></head>

2.内部样式表：单每个文档需要特殊的样式时，就应该使用内部样式表。使用方法：

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

3.内联样式：当样式仅需要在一个元素上应用一次时，要使用内联样式。注意：内联样式将内容与表现混合一起，所以会损失掉样式表的许多优势，切记，需慎用之。使用方法：在相关的标签内使用样式(style)属性。

<p style="color:>>This heading will be center-aligned</h1><p class="center">This paragraph will also be center-aligned.</p>

另外，一个标签可以有多个类选择器，不同的值用空格隔开，这样多个样式便可以应用的一个标签上。

四、语法：

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

1.标签选择器

每个html页面都由很多个标签组成，通过标签选择器可以对某类标签应用相应的样式，如对p标签应用下面的样式，则页面中所有的p标签都会生效

p{ font-size:12px; color:red; background:blue; }

2.类选择器，类选择器以一个点号显示：在html中可以为某个标签增加class属性，如

<divclass="error"> </div>

对应的class设置样式：.error{ width:200px; padding:5px; color:red;}

另外，一个标签可以有多个类选择器，不同的值用空格隔开，这样多个样式便可以应用的一个标签上。

3.ID选择器：选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id在每个html页面的值必须是唯一的，所以它不可以复用。以"#"来定义：

<div>"content"> </div>

五、总结：

　　* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
　　* 在标准网页设计中CSS负责网页内容(XHTML)的表现.
　　* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.

.CSS与HTML的关系：好搭档!

在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网页的表现形式（布局）。

CSS有一个优越的特性，即它可以对页面布局进行集中管理。也就是说，你不必在每个标签里都使用style属性；相反，你可以只声明一次，浏览器便会按相应的页面布局效果来显示文本：

通过把CSS文档独立出来，你就可以同时对多个页面的布局进行集中管理, 方便统一风格。这也是现在网站上的通行方式, 最佳选择。

1 0