阅读(4814) (0)

CSS的概念详解

2016-09-23 15:58:21 更新

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


CSS概念

一、网页中标记的概念

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


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


<html>

<head>

<title>网页标题</title>

</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的支持是最全面的,所以本教程中的示例大多是在火狐浏览器下运行的。