合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

3天驾驭xhtml+css

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

第一:如何让CSS去控制HTML页面?Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

有4种样式(方式),行内样式、内嵌样式、链接样式、导入样式。Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

1)行内样式Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
      行内样式是4种样式中最直接最简单的一种,直接对HTML标签使用style="",例如:Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<p style="color:#F00; background:#CCC; font-size:12px;"></p>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

2)内嵌样式Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
      内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如:Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<html xmlns="http://www.w3.org/1999/xhtml">Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<head>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<title>lz-studio.net:打造中国Web前端开发人员最专业的贴心社区!</title>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<style type="text/css">Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
body,div,a,img,p{margin:0; padding:0;}Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
a{color:#FFF;}Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
img{float:left;}Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#container{width:500px; height:350px; position:relative; margin:0 auto;}Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#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;}Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#reg{display:block; width:114px; height:27px; position:absolute; left:191px; bottom:28px;}Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</style>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</head>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<body>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<div id="container">Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<p>全国的Web前端开发工程师欢聚于<a href=http://www.lz-studio.net target="_blank">W3CFuns.com</a><br />我们的口号是“打造中国Web前端开发人员最专业的贴心社区!”</p>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<a href=http://www.lz-studio.net/blog target="_blank" id="reg"></a>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</body>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</html>Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

3)链接样式Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
      链接样式是使用频率最高,最实用的样式,只需要在<head></head>之间加上<link…/>就可以了,如下:Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<link type="text/css" rel="stylesheet" href="style.css" />Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
4)导入样式Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
导入样式和链接样式比较相似,采用import样式导入CSS样式表,在HTML初始化时,会被导入到HTML文件中,成为文件的一部分,类似第二种内嵌样式。  具体导入样式和链接样式有什么区别,不过我还是建议大家用链接样式!例如:Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

linkY0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
link就是把外部CSS与网页连接起来。Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
@import
Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
为什么使用@importY0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
为什么使用linkY0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
@import的小毛病Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
04-11更新:  @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
到底要用那种方式Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.Y0i合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

本文关键词
3天学会css