新鲜打造个人网站系列教程之四 CSS——神奇的层叠样式表(上)
IT- 网站技术 2008-02-23 12:36:03 阅读 31 评论 0 字号:大中小&订阅
■Simple Palace 工作室
网站定位、色彩搭配、HTML 语法你全会了,那还有什么能让你提起兴趣呢?接下来我将为你讲述另
一个非常重要的网页美化工具,可使你的网站具有凝聚精华、吸引眼球之功效,它就是 CSS——神奇的
层叠样式表。
当今的网页制作中,几乎所有漂亮的网页都会用到 CSS,CSS 是 Cascading Style Sheet 的缩写,中
文名为“层叠样式表”。通过设立 CSS,可以统一调整 HMTL 中各元素的显示属性,对网页中的布局、字体、
颜色、背景和其他文图效果实现更加精确的控制。只需简单添加或修改一个文件就可轻松改变各个网页的
外观和格式,全面支持常用的大多数浏览器,拥有更少代码、更少页面数和更快下载速度……而你的网页
会给人赏心悦目、工工整整的感觉,同时字体的色彩变化也会使页面变得更加生动活泼。短短的十几行
CSS 代码,得到的视觉效果却不同凡响!
CSS 基本属性和语法
一提到语法,自然而然就要联想到那些密密麻麻的代码,是不是有些害怕呢?其实掌握了 HTML 语言
之后再来学习 CSS 并不难,因为 CSS 跟 HTML 一样也是一种标记语言,甚至很多属性都是来源于
HTML。它与 HTML 就犹如一对孪生姐妹,一道在网页中起着非常重要的作用。
CSS 的编辑方法也同 HTML 一样,可以使用任何文本编辑器或网页制作软件。如果你写的 CSS 语句
是以外部样式表在 HTML 文件中调用,将它的扩展名存成.css 即可。假如你的网站每页都使用这个样式表,
那么你修改这个文件也就修改了整个网站的外观,可以说是一劳永逸,而且所花的时间也只要两三分钟!
1.CSS 的基本语法
首先来看一段最基本的 HTML 文档:
<HTML>
<BODY>
<P>HTML 文档还有比这更简单的吗?呵呵<P>
</BODY>
</HTML>
接下来,我们用 CSS 来创建如下一段代码,比较一下有何不同。
<HTML>
<HEAD>
<STYLE>
A {color:red}
P {background-color:blue;color:white}
</STYLE>