CSS基础知识
1.1 CSS概念
CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,是用于控制网页样式并允许样式信息与网页内容分离的一种技术。CSS是1996年由W3C审核通过并推荐使用的。它以HTML语言为基础,提供了丰富的格式化功能,如字体、颜色、背景以及排版等,由网页设计者针对各种显示设备(如显示区、打印机、投影仪、移动终端等)来设置不同的样式风格。CSS扩展了HTML的功能,使网页设计者能够 以更有效的方式设置网页格式。
CSS是由W3C组织负责制定和发布的。1996年12月,发布了CSS1.0规范;1998年5月,发布了CSS2.0规范。
在CSS还没有被引入页面设计之前,传统的HTML语言要实现页面美工设计是非常麻烦的。比如要在一个网页中定义一段文字为红色字体,并作为标题,我们可以使用<font>标记来实现,代码如下:
<h1><font color="#FF0000" face="宋体">CSS标记</font></h1>
这样做似乎没有什么问题。但如果页面中需要设置这种格式的文字很多:问题就出来了:要在每个地方都重复这段代码吗?如果这种格式还出现在网站中的其他页面,我们能忍受这种无聊的大量重复的工作吗?更严重的问题是如果这个格式需要修改,比如红色字体要改为蓝色字体,我们需要一个个找出来并保证不遗漏任何一个,然后去修改,这需要浪费多少时间和精力?
所以,传统的HTML进行网页设计时存在大量的缺陷,而我们引入了CSS技术和HTML结合后,情况得到了明显的改善。CSS带来以下好处。
1.将格式和结构分离
格式和结构的分离,有利于格式的重用及网页的修改维护。
2.精确控制页面布局
能够对网页的布局、字体、颜色、背景等图文效果实现更加精确的控制。
3.制作体积更小、下载更快的网页
CSS只是简单的文本、使用它可以减少表格标记、图像用量及其他加大HTML体积的代码。
4.可以实现许多网页同时更新
利用CSS样式表,可以将站点上所有网页都指向同一个CSS文件。
1.2 应用CSS的步骤
CSS文件与HTML文件一样,都是纯文本文件,因此一般的文字处理软件都可以对CSS进行编辑。记事本和Editplus等常用文本编辑器都可以很方便地编写代码。Dreamweaver代码模式下同样对CSS代码有着非常好的语法着色以及代码提示功能,可以帮助我们更高效得的编辑CSS代码。使用CSS格式化网页,需要将CSS应用HTML文档中。简单的说,CSS的应用涉及两个步骤,首先是定义CSS样式表,然后是将定义好的CSS在HTML文档中进行应用。定义CSS的基本语法是:选择器{属性:属性值},其中选择器可以是HTML标记,或自定义的类名或ID名。
【示例1】在HTML文件中应用CSS样式。
h1{
color:#F00;
}
【示例2】新建first.html文件,代码如下:
<html>
<head>
<meta charset="utf-8">
<title>CSS示例</title>
<link href="first.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>欢迎应用CSS的步骤</h1>
</body>
</html>
目前使用的浏览器各式各样,绝大多数浏览器对CSS都有很好的支持,一般不用担心设计的CSS文件不被浏览器支持。但需要注意,不同浏览器对CSS的支持在细节上会有差异,不同浏览器显示的CSS效果可能会不同。所以,使用CSS设计网页一般需要对几个主流浏览器显示效果进行测试,以保证网页的兼容性良好。通常的做法是一边编写HTML和CSS代码,一边在不同的浏览器上进行预览,及时作出调整。