没有合适的资源?快使用搜索试试~ 我知道了~
首页CSS教程(高清PDF文档)
资源详情
资源评论
资源推荐
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币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0