没有合适的资源?快使用搜索试试~ 我知道了~
CSS教程(高清PDF文档)
需积分: 13 76 下载量 19 浏览量
2009-12-09
10:50:20
上传
评论 1
收藏 1.51MB PDF 举报
温馨提示
试读
123页
CSS教程 介绍 CSS是什么? CSS的工作原理 颜色与背景 字体 文本 链接 元素的分类与标识(class和id) 组织元素(span与div) 盒状模型 盒状模型——外边距和内边距 盒状模型——边框 盒状模型——高度和宽度 浮动元素(float) 元素的定位 用z-index进行层次堆叠 Web标准与验证
资源推荐
资源详情
资源评论
HTML.net
介绍
级联样式表(Cascading Style Sheets,CSS)是一种为网站添加布局效果的出色工具。它可以省去你大
量时间,令你可以采用一种全新的方式来设计网站。CSS是每个网页设计人员所必须掌握的。
本CSS教程能够让你在数小时内入门CSS。它很容易理解,而且将向你介绍所有高级技巧。
学习CSS是很有趣的。你在学习本教程的过程中,记得留有充分的时间来实践你在每一课中学到的知
识。
使用CSS要求你有基本的HTML经验。如果你不熟悉HTML,那么请在开始学习CSS之前先学习我
们提供
的HTML教程。
我需要什么软件?
在学习本教程时,请不要使用类似FrontPage、DreamWeaver或Word这样的软件。这些高级软件对你学习CSS没有帮助。
相反,它们会限制你,并显著减慢你的学习进度。
你所需要的只是一个免费的简易文本编辑器。
例如,微软视窗操作系统(Microsoft Windows)自带的记事本(Notepad)程序。你可以依次点击“开始菜单→程序→
附件”找到该程序。如果你用的是其他操作系统,那么也有类似的简易文本编辑器可用,比如Linux上的Pico或Mac(苹果
机)上的Simple Text。
采用简易文本编辑器来学习编写HTML和CSS是非常好的,因为它不会影响或修改你所输入的代码。这样,代码的对错完
全取决于你自己,而不是软件。
你可以使用任何浏览器。但我们建议你把浏览器升级至最新版本。
你所需要的全部软件就是一个浏览器和一个简易文本编辑器。
我们现在开始学习CSS吧!
相关参阅
z 下一课:CSS是什么?
免费的HTML和CSS教程——构建自己的网站
有她,你立刻就会15国外语
神奇翻译机让你2秒钟精通15外语 韩语,英语,法语,德
语,俄语,泰语,日语
www.15fyg.com
1000元开店当老板 稳赚不赔
想自己当老板?小本创业0风险 给项目留言 做别人想
不到的好生意!
www.sooe.cn
卓美网数码相机年底大促销
佳能尼康单反套装,镜头三脚架全场低价 正品联保,9
年实体店信誉,免费摄影指导
www.zm7.cn
Pa
g
e 1 of 1介绍
|
CSS教程
|
HTML.net
2009-12-9http://zh.html.net/tutorials/css/introduction.asp
HTML.net
第1课:CSS是什么?
也许你曾听说过CSS,但并不真正清楚CSS到底是什么。在这一课,你将学到更多CSS的知识,并了解CSS可以做
些什么。
CSS是Cascading Style Sheets(级联样式表)的缩写。
可以用CSS做什么?
CSS是一种样式表语言,用于为HTML文档定义布局。例如,CSS涉及字体、颜色、边距、高度、宽度、背景图
像、高级定位等方面。拭目以待吧!
HTML可以用于为网站添加布局效果,但有可能被误用。而CSS则提供了更多选择,而且更为精确、完善。现在
所有浏览器都支持CSS。
经过下面若干课的学习之后,你将能够制作自己的CSS样式表,为自己的网站增添花样了。
CSS跟HTML的区别在哪里?
HTML用于结构化内容;CSS用于格式化结构化的内容。
嗯,这听上去有点技术性并令人疑惑。不过没关系,我们继续学习。过会儿你就明白了。
在Tim Berners-Lee发明万维网(World Wide Web)的那个年代,HTML语言是唯一用于给文本添加结构的语
言。作者可以通过声明“这是一个标题”(利用h1标签)或“这是一个段落”(利用p标签)的方式来标记文
本。
随着Web逐渐流行起来,网页设计者们开始寻求为网页增添布局的可能性。为此,当时的浏览器厂商们(网景公
司和微软公司)发明了一些新的HTML标签(比如
<font>等),以引入了新的布局——而非新的结构。
这也导致了原本用于进行文本的结构化的标签(比如
<table>等)越来越多地被误用于进行页面的布局。许多
新的布局标签(比如
<blink>)只有一种浏览器支持。“您需要使用某某浏览器来浏览本页面”成为当时常见
于许多网站的声明。
CSS的发明正是为了改善这一状况,它为Web设计师们提供了完善的、所有浏览器都支持的布局能力。而且,文
档的表现样式与内容的分离,也令网站维护容易了许多。
采用CSS有哪些好处?
CSS是Web设计界的一次革命。CSS的具体优点包括:
z 通过单个样式表控制多个文档的布局;
z 更精确的布局控制;
z 为不同的媒体类型(屏幕、打印等)采取不同的布局;
z 无数高级、先进的技巧。
在下一
课,我们将深入考察CSS的工作原理,以及如何上手。
相关参阅
z 下一课:CSS的工作原理?
免费的HTML和CSS教程——构建自己的网站
Pa
g
e 1 of 2第1课:CSS是什么?
|
CSS教程
|
HTML.net
2009-12-9http://zh.html.net/tutorials/css/lesson1.asp
z 上一课:介绍
Pa
g
e 2 of 2第1课:CSS是什么?
|
CSS教程
|
HTML.net
2009-12-9http://zh.html.net/tutorials/css/lesson1.asp
HTML.net
第2课:CSS的工作原理
在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必
需的代码。
级联样式表(CSS)里用到的许多CSS属性都与HTML属性相似,所以,假如你熟悉采用HTML进行布局的话,那
么这里的许多代码你都不会感到陌生。我们先来看一个具体的例子。
基本的CSS语法
比方说,我们要用红色作为网页的背景色:
用HTML的话,我们可以这样:
<body bgcolor="#FF0000">
用CSS的话,我们可以这样获得同样的效果:
body {background-color: #FF0000;}
你会注意到,HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型:
但是把CSS代码放在哪里呢?这正是我们下面要讲的。
为一个HTML文档应用CSS
为HTML文档应用CSS,有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法(即外
部样式表)予以关注。
方法1:行内样式表(style属性)
为HTML应用CSS的一种方法是使用HTML属性
style。我们在上例的基础之上,通过行内样式表将页面背景设为
红色:
免费的HTML和CSS教程——构建自己的网站
Pa
g
e 1 of 4第2课:CSS的工作原理
|
CSS教程
|
HTML.net
2009-12-9http://zh.html.net/tutorials/css/lesson2.asp
<html>
<head>
<title>例子</title>
</head>
<body style="background-color: #FF0000;">
<p>这个页面是红色的</p>
</body>
</html>
方法2:内部样式表(style元素)
为HTML应用CSS的另一种方法是采用HTML元素
style。比如像这样:
<html>
<head>
<title>例子</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>这个页面是红色的</p>
</body>
</html>
方法3:外部样式表(引用一个样式表文件)
我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中,我们将全部采用该方法。
外部样式表就是一个扩展名为css的文本文件。跟其他文件一样,你可以把样式表文件放在Web服务器上或者本
地硬盘上。
例如,比方说你的样式表文件名为style.css,它通常被存放于名为style的目录中。就像下面这样:
现在的问题是:如何在一个HTML文档里引用一个外部样式表文件(style.css)呢?答案是:在HTML文档里创建
一个指向外部样式表文件的链接(link)即可,就像下面这样:
<link rel="stylesheet" type="text/css" href="style/style.css" />
注意要在href属性里给出样式表文件的地址。
这行代码必须被插入HTML代码的头部(header),即放在标签
<head>和标签</head>之间。就像这样:
Pa
g
e 2 of 4第2课:CSS的工作原理
|
CSS教程
|
HTML.net
2009-12-9http://zh.html.net/tutorials/css/lesson2.asp
剩余122页未读,继续阅读
资源评论
zj_312
- 粉丝: 17
- 资源: 56
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功