CSS教程_CSS免费实例教程_全面精通Css样式(4)

 2012-02-12 02:06:17   评论   487次浏览

今天我们继续介绍下:CSS样式表能为我们做什么?

你可以制作出体积更小下载更快的网页

还有更好的消息:样式表只是简单的文本,就象HTML那样。它不需要图象,不需要执行程序,不需要插件,不需要流式。它就象HTML指令那样快。

有了CSS之后,以前必须求助于GIF的事情现在通过CSS就可以实现。还有,正如我先前提到的,使用串接样式表可以减少表格标签及其它加大HTML体积的代码,减少图象用量从而减少文件尺寸。

你可以更快更容易地维护及更新大量的网页。

没有样式表时,如果我想更新整个站点中所有主体文本的字体,我必须一页一页地修改每张网页。即便站点用数据库提供服务,我仍然需要更新所有的模板,而且更新每一模板中每一个实例实例的<FONT FACE>。

样式表的主旨就是将格式和结构分离。利于样式表,我可以将站点上所有的网页都指向单一的一个CSS文件,我只要修改CSS文件中某一行,那么整个站点都会随之发生变动。

浏览器将成为你更友好的界面。

不象其它的的网络技术,样式表的代码有很好的兼容性,也就是说,如果用户丢失了某个插件时不会发生中断,或者使用老版本的浏览器时代码不会出现杂乱无章的情况。

只要是可以识别串接样式表的浏览器就可以应用它。

怎么样,样式表的确是一个很不错的注意吧?

那么,现在我们就开始制作一份样式表。 zzz1.3 你的第1张样式表

现在我们就开始制作样式表。

打开你最喜欢的HTML编辑器生成基本的网页:

<HTML>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>

 

很好。现在,让我们给它加一些样式表。只需在最初的<HTML>和 <BODY>标签之间插入以下代码:

<STYLE TYPE="text/css">
<!--
H1 { color: green; font-size: 37px; font-family: impact }
P { text-indent: 1cm; background: yellow; font-family: courier }
-->
</STYLE>

 

从浏览器中打开页面,你将会看到:

 

Stylesheets: The Tool of the Web
Design Gods

 

Amaze your friends! Squash your enemies!

 

蚂蚁森林为我浇水吧!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: