CSS入门教程共44页.docx
《CSS入门教程共44页.docx》由会员分享,可在线阅读,更多相关《CSS入门教程共44页.docx(24页珍藏版)》请在冰豆网上搜索。
![CSS入门教程共44页.docx](https://file1.bdocx.com/fileroot1/2022-11/27/8f842aec-522d-423f-b851-e8f48b710b7a/8f842aec-522d-423f-b851-e8f48b710b7a1.gif)
CSS入门教程共44页
CSS入门教程
1、CSS简介
在了解了HTML或者XHTML之后,我们可以学习CSS。
什么是CSS呢?
让我们先来一点感性体验吧。
看看这个没有添加CSS的HTML文件(http:
//csszengarden/zengarden-sample.html),是一个普普通通的网页。
然而通过给这个文件添加的CSS规则,我们可以得到十分美观的网页(http:
//csszengarden/?
cssfile=/208/208.css&page=0)。
我们不改动HTML,只是通过添加不同的CSS规则,我们就可以得到各种不同样式的网页。
好了,下面我们再来回答什么是CSS这个问题。
CSS是CascadingStyleSheets(层叠样式表)的缩写。
它的作用是定义网页的外观(例如字体,颜色等等),它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。
同学习XHTML一样,在学习CSS的过程中您只需要使用Windows自带的记事本(Notepad.exe)就可以了。
在实际制作网页的时候您可能需要用到FontPage、Dreamweaver等专业的网页设计软件,它们将使得为网页添加CSS的工作变得异常简单。
但是再次强调,在学习CSS的过程中,您不需要这些强大的软件。
本教程只使用visualstudio2008,目的在于练习手写CSS代码的能力,也是为了方便那些还没有Dreamweaver之类软件的读者。
2、样式表的基本语法
本节着重介绍样式表的基本语法,这是学好CSS的基础。
2.1插入样式表前后的网页。
为了更好地理解样式表的作用,我们先看一个CSS的应用实例。
在本例子中,你很容易对比出使用CSS前后两个网页的区别,当然了,现在你可能读不懂CSS部分的代码。
别担心,这些代码将在少后的教程中介绍。
我们首先来看一下未加入CSS的页面。
网页里只有一段话:
“菜鸟吧的站长是大傻瓜!
傻瓜爱吃大西瓜!
”。
而且由于分别是标题1、2、3、4,页面内字体大小也不相同,还有标题的自动换行。
它的源代码如下:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http:
//w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
//w3.org/1999/xhtml">
我真惨!被用来演示CSS!
--这里将要插入CSS-->
//cainiao8/">菜鸟吧
的站长
是大傻瓜!
傻瓜
--我就要被修该啦,郁闷-->
爱吃大西瓜!