CSS教程.docx
《CSS教程.docx》由会员分享,可在线阅读,更多相关《CSS教程.docx(47页珍藏版)》请在冰豆网上搜索。
CSS教程
介绍
级联样式表(CascadingStyleSheets,CSS)是一种为网站添加布局效果的出色工具。
它可以省去你大量时间,令你可以采用一种全新的方式来设计网站。
CSS是每个网页设计人员所必须掌握的。
本CSS教程能够让你在数小时内入门CSS。
它很容易理解,而且将向你介绍所有高级技巧。
学习CSS是很有趣的。
你在学习本教程的过程中,记得留有充分的时间来实践你在每一课中学到的知识。
使用CSS要求你有基本的HTML经验。
如果你不熟悉HTML,那么请在开始学习CSS之前先学习我们提供的HTML教程。
我需要什么软件?
在学习本教程时,请不要使用类似FrontPage、DreamWeaver或Word这样的软件。
这些高级软件对你学习CSS没有帮助。
相反,它们会限制你,并显著减慢你的学习进度。
你所需要的只是一个免费的简易文本编辑器。
例如,微软视窗操作系统(MicrosoftWindows)自带的记事本(Notepad)程序。
你可以依次点击“开始菜单→程序→附件”找到该程序。
如果你用的是其他操作系统,那么也有类似的简易文本编辑器可用,比如Linux上的Pico或Mac(苹果机)上的SimpleText。
采用简易文本编辑器来学习编写HTML和CSS是非常好的,因为它不会影响或修改你所输入的代码。
这样,代码的对错完全取决于你自己,而不是软件。
你可以使用任何浏览器。
但我们建议你把浏览器升级至最新版本。
你所需要的全部软件就是一个浏览器和一个简易文本编辑器。
我们现在开始学习CSS吧!
相关参阅
∙下一课:
CSS是什么?
第1课:
CSS是什么?
也许你曾听说过CSS,但并不真正清楚CSS到底是什么。
在这一课,你将学到更多CSS的知识,并了解CSS可以做些什么。
CSS是CascadingStyleSheets(级联样式表)的缩写。
可以用CSS做什么?
CSS是一种样式表语言,用于为HTML文档定义布局。
例如,CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
拭目以待吧!
HTML可以用于为网站添加布局效果,但有可能被误用。
而CSS则提供了更多选择,而且更为精确、完善。
现在所有浏览器都支持CSS。
经过下面若干课的学习之后,你将能够制作自己的CSS样式表,为自己的网站增添花样了。
CSS跟HTML的区别在哪里?
HTML用于结构化内容;CSS用于格式化结构化的内容。
嗯,这听上去有点技术性并令人疑惑。
不过没关系,我们继续学习。
过会儿你就明白了。
在TimBerners-Lee发明万维网(WorldWideWeb)的那个年代,HTML语言是唯一用于给文本添加结构的语言。
作者可以通过声明“这是一个标题”(利用h1标签)或“这是一个段落”(利用p标签)的方式来标记文本。
随着Web逐渐流行起来,网页设计者们开始寻求为网页增添布局的可能性。
为此,当时的浏览器厂商们(网景公司和微软公司)发明了一些新的HTML标签(比如等),以引入了新的布局——而非新的结构。
这也导致了原本用于进行文本的结构化的标签(比如
等)越来越多地被误用于进行页面的布局。许多新的布局标签(比如
“您需要使用某某浏览器来浏览本页面”成为当时常见于许多网站的声明。
CSS的发明正是为了改善这一状况,它为Web设计师们提供了完善的、所有浏览器都支持的布局能力。
而且,文档的表现样式与内容的分离,也令网站维护容易了许多。
采用CSS有哪些好处?
CSS是Web设计界的一次革命。
CSS的具体优点包括:
∙通过单个样式表控制多个文档的布局;
∙更精确的布局控制;
∙为不同的媒体类型(屏幕、打印等)采取不同的布局;
∙无数高级、先进的技巧。
在下一课,我们将深入考察CSS的工作原理,以及如何上手。
相关参阅
∙下一课:
CSS的工作原理?
∙上一课:
介绍
第2课:
CSS的工作原理
在这一课,你将学习如何制作自己的第一个样式表。
你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。
级联样式表(CSS)里用到的许多CSS属性都与HTML属性相似,所以,假如你熟悉采用HTML进行布局的话,那么这里的许多代码你都不会感到陌生。
我们先来看一个具体的例子。
基本的CSS语法
比方说,我们要用红色作为网页的背景色:
用HTML的话,我们可以这样:
用CSS的话,我们可以这样获得同样的效果:
body{background-color:
#FF0000;}
你会注意到,HTML和CSS的代码颇有几分相似。
上例也向你展示了基本的CSS模型:
但是把CSS代码放在哪里呢?
这正是我们下面要讲的。
为一个HTML文档应用CSS
为HTML文档应用CSS,有三种方法可供选择。
下面对这三种方法进行了概括。
我们建议你对第三种方法(即外部样式表)予以关注。
方法1:
行内样式表(style属性)
为HTML应用CSS的一种方法是使用HTML属性style。
我们在上例的基础之上,通过行内样式表将页面背景设为红色:
例子#FF0000;">
这个页面是红色的