阅读(12.5k) 书签赞(3) 我要纠错

CSS的概念详解

2018-09-24 11:43 更新

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面格式，可将页面的内容与表现形式分离。CSS最早是1996年由W3C审核通过并推荐使用的，CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

CSS概念

一、网页中标记的概念

我们知道CSS是用来表示Web页面外观的，在学习CSS之前，要先了解一些网页中的基本知识，那就是网页中的标记。标记语言，也称置标语言，是一种将文本以及与文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。当前广泛使用的网页标记语言有两种：超文本标记语言（HTML）和可扩展超文本语言（XHTML）

为了便于读者从整体上把握HTML文档结构，通过一个HTML页面的整体结构，示例代码如下所示：

<html>

<head>

</head>

<body>

网页内容

</body>

</html>

从上面代码可以看出，一个基本的HTML页由以下几个部分构成。

（1）<html></html>。说明本页面使用HTML语言编写，使浏览器软件能够准确无误地解释、显示。

（2）<head></head>。head是HTML的头部标记，头部信息不显示在网页中，此标记内容可以保护一些其他标记，可以说明文件标题和整个文件的一些公用属性，可以通过<style>标记定义CSS样式表，通过<script>标记定义JavaScript脚本文件。

（3）<title></title>。title是head中的重要组成部分，它包含的内容显示在浏览器的窗口标题中。如果没有title，浏览器标题栏显示本页的文件名。

（4）<body></body>。body包含HTML页面的实际内容，显示在浏览器窗口的客户区中。例如页面中文字、图像、动画、超链接、以及其他HTML相关的内容都是定义在body标记里面。

二、HTML与CSS的互补

HTML发展到今天存在3个主要的缺点：

第一：由于HTML代码不规范、臃肿、需要足够智能和庞大的浏览器才能够正确显示HTML；

第二：数据与表现混杂，当页面要改变显示时就必须重新制作HTML；

第三：不利于搜索引擎搜索。

CSS+DIV

HTML也有两个显著的优点：

第一：使用Table的表现方式不需要考虑浏览器兼容问题；

第二：简单易学，易于推广。CSS的产生恰好弥补了HTML的主要缺点，主要表现在以下几个方面。

1、表现与结构分离

CSS从真正意义上实现了设计代码与内容的分离，它将设计部分剥离出来并放在一个独立样式文件中，HTML文件中只存放文本信息，这样的页面对搜索引擎更加友好。

2、提高页面浏览速度

对于同一个页面视觉效果，采用CSS布局的页面内容量要比Table编码的页面文件容量小得多，前者一般只有后者的1/2.浏览器不用去解释大量冗长的标签。

3、易于维护和改版

开发者只要简单修改几个CSS文件就可以重新设计整个网站的页面。

4、继承性能优越（层叠处理）

CSS的代码在浏览器的解析顺序上会根据CSS的级别进行，它按照对同一元素定义的先后来应用多个样式。良好的CSS代码设计可以使代码之间产生继承关系，能够达到最大限度的代码重用，从而降低代码量及维护成本。

三、浏览器对CSS的支持

目前CSS 3是众多浏览器普遍支持的最完善的版本，最新的浏览器均以该版本为支持原型进行设计，例如IE9、Firefox和谷歌浏览器等。使用CSS 3样式设计出来的网页，在众多平台及浏览器下对样式的表现最为接近。火狐浏览器对CSS的支持是最全面的，所以本教程中的示例大多是在火狐浏览器下运行的。

以上内容是否对您有帮助：

← 第一章 CSS入门

网页设计中的CSS样式 →

写笔记

我要补充