[连载]Web前台开发（三）——CSS初识

JAY · 发表于 2007-10-12 12:43:09

上次介绍了XHTML，这次接着说CSS。

说到CSS，首先要提到DOCTYPE，什么是DOCTYPE？你用右键点击本页，查看原文件，第一行的那个<!DOCTYPE...>就是DOCTYPE。那么DOCTYPE是干什么用的呢，接着看吧。
比如EMAX现在用的是DZ6.0，她生成的页面的DOCTYPE都是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

复制代码

表明了这是一个遵循"XHTML 1.0 Transitional"标准的页面，此外常见的还有如下标准：

HTML 4.01 Transitional
HTML 4.01 Strict
XHTML 1.0 Strict

复制代码

这些标记帮助指导浏览器按照各个标准的不同要求和规定去解释页面里面的别的标签的表现形式。如果你偷懒不写DOCTYPE，浏览器将认为你这个页面是一个“古老”的页面，古老到N年以前DOCTYPE还没有正式出现的时候，这时浏览器将进入一种“古怪”模式，用N年以前没有标准的时候的“标准”（即浏览器自己的标准）来解释页面，这样的话你的页面很可能在不同的浏览器里面完全不是一个样。

说了这么多DOCTYPE，其实她是和CSS关系很重要的，就像前面讲的“古怪”模式会导致不同浏览器表现不同一样。要做到页面的统一，我们需要给页面定一个标准，虽然前面提到了几种常见的标准，但是还是推荐使用"XHTML 1.0 Transitional"（如果你的页没有用到<frameset/>等框架集标签，则可以放心使用"XHTML 1.0 Strict"）。为了以后HTML到XML的转变，过渡阶段选择XHTML是最好不过的。

下面进入正题说说CSS。
什么是CSS？CSS全程是Cascading Style Sheets，即层叠样式表。再说明白一点就用来控制这个页面上个元素表现形式的一种语言。
CSS能干什么？CSS能修改页面上字体的样式、颜色、大小、粗细，能修改元素的位置、大小、边框、现实方式、浮动情况，内修改输入框内容与边框的间隔、对齐方式……等等等等，CSS就是你页面的美容师。

CSS的使用方式。目前CSS常见的有4种使用方式：
1. 通过<link/>标签引入，例如：

<link rel="stylesheet" type="text/css" href="forumdata/cache/style_1.css" />
<link rel="stylesheet" type="text/css" href="forumdata/cache/style_1_append.css" />

复制代码

这里就引入了两个CSS文件，使用<link/>标签引入CSS需要rel="stylesheet" type="text/css"两个属性表示当前引入的是一个CSS文件，以便浏览器能正常加载。

2. 通过@import指令引入，例如：

<style type="text/css">
@import url(forumdata/cache/style_1.css);
</style>

复制代码

这个@import指令需要写在<style/>标签一类，同样可以引入多个CSS文件。

3. 直接写在<style/>标签里，例如：

<style type="text/css">
body{font:12px Tahoma;}
</style>

复制代码

这就指定了整个页面的默认字体采用12像素大小的Tahoma。

4. 直接写在元素的"style"属性里面，例如：

<body style="background:#CCCCCC">
....
</body>

复制代码

这就指定了<body/>标签的背景色为灰色。

其中<link/>标签和@import指令的方法，都可以使得同样的CSS文件被多个页面共享，使得这些页面风格保持一致。直接在<style>标签里面写只能对当前页面有效，而直接在"style"属性里面写则只能对单个元素有效。

到底该怎么选择用哪一种方法使用CSS，以及CSS的一些基本应用请关注下一次"CSS的基本使用"。

jason · 发表于 2007-10-14 10:08:09

^_^原来第四种也属于CSS啊，那CSS岂不是已经出现十多年了……

JAY · 发表于 2007-10-14 12:43:50

是有很长时间了，不过提出统一标准以后才逐渐的到重视，到国内又晚了几年。

116205035 · 发表于 2007-10-14 13:16:03

继续连载吧……

jason · 发表于 2007-10-14 13:28:09

国内一向都要落后许多，首先英文资料翻译成中文要落后一段时间，而且翻译出来的往往质量又不是很高……
现在才发现英语还是很重要的，大家都努力学好英语，不要把英语当作学习的任务，也不要为了应付考试。应该以实用为主，英语是用来交流的工具！就如同程序语言是和电脑交流的一样。

jason · 发表于 2007-10-15 10:11:01

在网上下了个《无废话xml》1.92MB的PDF文件，竟然不是完全版的，CSS章节是空白……

twl859588 · 发表于 2007-10-16 12:59:37

恩，校内网就用这个.....

jason · 发表于 2007-10-16 13:58:31

=3=樓上的是強人……

		自动登录	找回密码
密码			加入易码

[教程] [连载]Web前台开发（三）——CSS初识