DIV+CSS 学习心得<3>:CSS是怎么给力的

[ 作者:笑傲江湖 发布于:2011年-2月-8日 6:18 星期二  分类:百 宝 箱 ]

  当咱们用浏览器访问一个站点时,浏览器会去读页面的源码,当然俺觉得首当其冲的肯定是要把CSS文件读到,神马是CSS?是个缩写,Cascading Style Sheets,层叠样式表。这样式表在一个页面里有三种使用方式:1、就是外部样式表;2、内部样式表;3、行内样式。第一种就是通常说的css文件了,可以在DW里编辑,纯文档编辑器也行,不推荐记事本,最好用UltraEdit之类的,还能有提示和高亮显示什么的,使用很方便,具体用啥去编辑这个css文件看你自己喜好了,外部样式表文件的扩展名就是.css,然后通过下面的HTML语句在页面里调用外部样式表文件去控制页面内容显示的样式:

<link href="/main.css" rel="stylesheet" type="text/css" />

  语句里要注意的是样式表文件的地址问题,就是传说中的相对地址和绝对地址的问题,俺就不罗嗦了,不明白的Google之搞明白。要是搞不明白您还是不要折腾做网页了,其实很简单,我相信都能搞明白。
  第二种就是内部样式表,就是网页本身HTML代码里就可以定义样式,一般是位于</title>和</head>之间,如果你的样式内容比较多,个人建议还是全都写到外部样式表文件里去,毕竟以后要更改页面上什么东西的样式,可以直接下载编辑更新css文件即可,不用把网页文件下载下来修改在上传,还是个习惯问题,看你自己吧,好的习惯可以提高工作效率,自己也会很轻松。
  另外,如果你的网页文件很多的话,你总不能每个网页文件都修改吧,那将是很难看的一件事,我都能想象到你的脸色是如何的,呵呵。所以为了你将来不会恨自己,当初为何要把样式表写在每个网页文件懊恼,您还是听我的,这种内部样式表少用,尽量写到外部的css文件里,可以根据网站不同栏目或者模块去区分,都可以单独制定css文件而分别调用。如果您是临时测试css的效果,或者是本身网页稀少,这种内部样式表也行。罗嗦了一大通,都是个人体会,回归正题,下面是内部样式表,从<style type="text/css">开始,到</style>结束。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>丝路博傲</title>
<style type="text/css">
<!--
#header{
    width:800px;
    background-color:#D2D2D2;
    font-size:14px;
    color:#CC3333;
}

#footer{
    width:800px;
    background-color:#D2D2D2;
    font-size:14px;
    color:#CC3333;
}

.headertext{text-align:center;font-size:14px; color:#3333FF;font-weight:bold;}
.contenttext{text-align:center;font-size:12px; color:#000000;font-weight:normal;}
.footertext{text-align:center;font-size:14px; color:#999999;font-weight:bold;}

p{text-align:center;font-size:14px; color:#3333FF;font-weight:bold;}
span{font-size:14px; color:#FF0000;font-weight:bold;}
pre{text-align:center;font-size:14px; color:#339933;font-weight:bold;}

-->
</style>

</head>
<body>

  最后一种就是行内的样式定义了,就是在你做网页的时候,在各种HTML元素代码之中写入的样式,例如这种:

<p style="color:red;margin-left:20px">丝路博傲</p><span style="color:blue;margin-left:20px">丝路博傲</span>

  行内样式表很直接,直接就和HTML代码在一起,至于具体什么时候用,看你实际需要,个人建议和内部样式表一样,少用,尽量使用外部样式表。
  这三种样式表的话,俺最喜欢的当然是第一种了,它可以被不同的页面去调用,只要你在外部样式表里区分了什么部分是什么文件调用,内部的和行内的样式表,那就只能那一个网页使用了,别的网页是无法享受你的css成果的。然后还有个优先级的问题,既然有三种方式定义样式,那谁是带头大哥呢?行内方式定义的样式是老大,内部定义的样式老二,外部样式表老三,不过还有最后一种,就是浏览器的设置里也能定义网页的样式,如果你定义了浏览器的样式,而网页上有某个元素,没有被上面说的三种样式表去定义显示效果,那就按照浏览器里你设置的样式去显示。行内定义的样式级别最高,会覆盖内部和外部样式还有浏览器的样式。还得注意,如果你链接外部样式表的位置放在了内部样式表代码之后,那外部样式将覆盖内部样式表。如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>丝路博傲</title>
<style type="text/css">
<!--
#header{
    width:800px;
    background-color:#D2D2D2;
    font-size:14px;
    color:#CC3333;
}

#footer{
    width:800px;
    background-color:#D2D2D2;
    font-size:14px;
    color:#CC3333;
}

.headertext{text-align:center;font-size:14px; color:#3333FF;font-weight:bold;}
.contenttext{text-align:center;font-size:12px; color:#000000;font-weight:normal;}
.footertext{text-align:center;font-size:14px; color:#999999;font-weight:bold;}

p{text-align:center;font-size:14px; color:#3333FF;font-weight:bold;}
span{font-size:14px; color:#FF0000;font-weight:bold;}
pre{text-align:center;font-size:14px; color:#339933;font-weight:bold;}

-->
</style>

<link href="/main.css" rel="stylesheet" type="text/css" />

</head>
<body>

  其实这个很容易理解,HTML代码是逐行被浏览器去解释的,同一个网页元素,如果内部定义了样式,外部也定义了样式,那后面读到的自然会覆盖前面的,行内的样式定义自然是最后被读到的,所以级别更高了。洋洋洒洒又码了这么多,基本上CSS的基础内容差不多就这么多吧,至少你得先了解,然后才能去真正的去使用它,后面就陆续会写一些关于具体样式(Style)的定义了,俺也是现学现卖,能看懂的你就看看,看不懂的就Google吧,很多东西我也只Google之,然后自己动手实验,然后自己在总结一下,仅此而已。

标签: CSS DIV

评论0 引用0 浏览2675

说点什么:

正文内容:

 




图片博文