3天驾驭xhtml+css

•2011-05-10 08:49:27•建站知识

第一：如何让CSS去控制HTML页面？

有4种样式(方式)，行内样式、内嵌样式、链接样式、导入样式。

1）行内样式
行内样式是4种样式中最直接最简单的一种，直接对HTML标签使用style=""，例如：

2）内嵌样式
内嵌样式就是将CSS代码写在<head></head>之间，并且用<style></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=gb2312" />
<title>lz-studio.net:打造中国Web前端开发人员最专业的贴心社区！</title>
<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
a{color:#FFF;}
img{float:left;}
#container{width:500px; height:350px; position:relative; margin:0 auto;}
#container p{width:380px; height:40px; position:absolute; left:60px; bottom:60px; color:#fff; font-size:12px; line-height:18px; text-align:center; font-family:"微软雅黑", Verdana, Geneva, sans-serif;}
#reg{display:block; width:114px; height:27px; position:absolute; left:191px; bottom:28px;}
</style>
</head>
<body>
<div id="container">
<p>全国的Web前端开发工程师欢聚于<a href=http://www.lz-studio.net target="_blank">W3CFuns.com</a><br />我们的口号是“打造中国Web前端开发人员最专业的贴心社区！”</p>
<a href=http://www.lz-studio.net/blog target="_blank" id="reg"></a>
</div>
</body>
</html>

3）链接样式
链接样式是使用频率最高，最实用的样式，只需要在<head></head>之间加上<link…/>就可以了，如下：

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

4)导入样式
导入样式和链接样式比较相似，采用import样式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌样式。具体导入样式和链接样式有什么区别，不过我还是建议大家用链接样式！例如：

link
link就是把外部CSS与网页连接起来。

@import
import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。

为什么使用@import
大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.
另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

为什么使用link
使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

@import的小毛病
如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.
04-11更新: @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

到底要用那种方式
就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

本文关键词: 3天学会css