第一章CSS简介
一、什么是CSS?
CSS可以称为级联样式表或者层叠样式表(Cascading Style Sheets,CSS),是一种为网站添加布局效果的出工具。它可以省去你大量时间,令你可以采用一种全新的方式来设计网站。CSS是每个网页设计人员所必须掌握的。
二、HTML语言存在的问题
通过前面课程的学习,我们已经初步认识和掌握了,网站网页的设计语言是HTML语言,即超文本标识语言,用它我们可以架设内容丰富,形式多样的网站。
那么为什么我们还要学习使用CSS呢?
这是因为HTML标识原本被设计为用于定义文档内容。通过使用如<h1>、<p>、<table>这样的标识,HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的修饰作用的标识。
思考一下,为什么HTML语言中不用修饰作用的标识?
随着个人电脑的普及,网络越来越民用化,普通的个人用户对网站网页的美观性要求越来越高,因此两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的HTML标识和属性(比如字体标识和颜属性)添加到HTML规范中,于是便有了我们现在所看到的HTML语言。
由此可见,HTML语言最初只用来传输数据,它设计最初用来表现的是内容本身,而为了满足普通用户对网页美观性的要求,才添加了修饰性的标识到HTML语言中。这就带来了一些问题。
1、修饰方式不够多。因为HTML语言设计之初不是用来修饰网页,所以一些常见的排版方式,
如word里的字间距,行间距,段落间距,HTML语言虽然经过了拓展,但还是无法实现。
2、代码冗余。用HTML语言修饰网页,缺乏整体意识,需对每一处需要修饰的部分进行修饰,所以代码会变得很长,这对于设计本身,以及后期的维护修改,搜索引擎的检索等都会带来问题。
3、内容和结构混杂。由于HTML语言的标识和网页内容本身都在一起,所以对于一些搜索引擎来说无法分清哪些是内容哪些是修饰性的标识,对于搜索引擎对网页的分类会带来问题。
如下图,要实现一个简单的表格:
却需要下列非常多的代码
css实现三列布局<table width="783" height="141" border="1" bordercolor="#9966FF">
<tr>
<td height="46"><center>
<strong><font size="4">铅笔</font></strong>
</center></td>
<td><center>
<strong><font size="4">橡皮</font></strong>
</center></td>
<td><center>
<strong><font size="4">练习簿</font></strong>
</center></td>
</tr>
<tr>
<td height="43"><center><font size="3">2枝</font></center></td>
<td><center><font size="3">3块</font></center></td>
<td><center><font size="3">4本</font></center></td>
</tr>
<tr>
<td height="42"><center><font size="3"><font color="#FF0000">单价0.5元</font></font></center></td>
<td><center><font size="3"><font color="#FF0000">单价1.0元</font></font></center></td>
<td><center><font size="3"><font color="#FF0000">单价1.5元</font></font></center></td>
</tr>
</table>
为了解决上述问题,万维网联盟(W3C),这个非营利的标准化联盟创造出了层叠样式表。现在所有的主流浏览器均支持层叠样式表。
三、CSS的作用
CSS即层叠样式表定义如何显示HTML标识,就像前面所说的字体标识和颜属性所起的作用那样。样式通常保存在外部的.css文件中,也可以保存在网页的头部<head>标识之间。通过仅仅编辑一个简单的CSS,层叠样式表使你有能力同时改变站点中所有页面的布局和外观。简单来说,层叠样式表将HTML语言不擅长的修饰功能接手过去,专门负责网页的布局和美工,而HTML语言负责内容的传输和显示,最终实现了内容和样式的分离。
由于允许同时控制多重页面的样式和布局,CSS可以称得上WEB设计领域的一个突破。作为网站开发者,你能够为每个HTML元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。
四、如何编写CSS
在前面的学习中,我们学会了一些工具软件的使用,如FrontPage、DreamWeaver等,它们对于简化网页的编写过程带来一定的便利,但是在编写CSS时,请不要使用类似FrontPage、DreamWeaver或Word这样的软件。这些高级软件对学习CSS没有帮助。相反,它们会限制你,并显著减慢你的学习进度。
因为CSS与HTML一样是纯文本的,所以我们需要的只是一个免费的简易文本编辑器。例如,微软视窗操作系统(Microsoft Windows)自带的记事本(Notepad)程序。你可以依次点击“开始菜单→程序→附件”到该程序。采用简易文本编辑器来学习编写HTML和CSS是非常好的,因为它不会影响或修改你所输入的代码。这样,代码的对错完全取决于你自己,而不是软件。
我们现在开始学习CSS吧!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论