分享
 
 
 

WEB标准中使用CSS的基础教程

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

CSS过去经常被用来定义字体的属性,而现在可以用它来控制整个文档的布局。然而,为了有效的用CSS来控制布局,需要做一些不同的处理,这种不同是跟用表格布局相对比的。

为了CSS可以高效的控制布局,结构化、语义化的XHTML是必不可少的。

浏览器的支持

在过去几年,浏览器对CSS的支持程度已经改进了很多。不幸的是,浏览器的开发商好象对实施开放的标准并不感兴趣,所以不同浏览器对CSS的支持程度也大相径庭。就算是支持程度最好的浏览器,在软件中仍然有一些bug,使得浏览器以错误的方式运行。

现在对CSS支持比较好的浏览器有Mozilla (还有以Gecko为内核的: Firefox, Camino, Netscape 6+), OperaSafari (还有以 WebCore为内核的: OmniWeb 4.5 and later)。 Internet Explorer 6/Win并没有如此好的CSS支持程度,但是它将让你为其做出大量的基础工作。Internet Explorer 5/Mac对CSS 1的支持很出色, 但是却不支持CSS 2。 IE 5.* for Windows的支持性也很好, 但是仍然有一些问题值得你去注意。早期版本的IE以及Netscape 6以前的版本就没有必要提及了。

因为现在大多数人都使用IE/WIN,所以你将不得不让它成为特殊分子。这并不是说,你不能或者不应该使用有更好支持CSS能力的浏览器来提高他们的设计能力。

现在在用的浏览器中,并不是所有的浏览器都有很好的CSS支持能力,使其能够具有解释用CSS布局的优秀图形化站点的能力。幸运的是,对于大多数网站,只有很小比例的访问者还在使用不能解释CSS的老浏览器。

值得注意的是,这些人并不会被排斥在外的。在90年代,浏览器检验脚本是一个很流行的方法,它告诉那些使用“错误”浏览器的使用者一个新的网址,那个网址告诉他们去升级浏览器,好重新连接到那个网站。

现在,你可以以一种更好的办法应付不被支持的浏览器。使用逻辑化、语义化的一个最大的好处就是它使文档在没有CSS时,仍然可以使用和访问。表现(就是文档看上去的样子)在一个支持性好的浏览器中也将呈现的不一样,但是它的内容将永远不变,大多数情况,对于访问网站的人来说,内容实际上比表现的方式更加重要。这就是为什么给那些支持性不好的浏览器发送一个没有样式的页面,要比把他们排斥在外要好的原因。

有好几种方式去解决这个问题:一种最常见的方法是使用 @import来链接相应的的CSS文件。Netscape 4和老的浏览器不支持@import所以将不会导入CSS文件。还有许多方法来向浏览器隐藏CSS。大多数隐藏CSS的方法是利用了浏览器对CSS解释时的漏洞。这意味着总会存在浏览器通过升级弥补漏洞的危险。所以越少的依赖CSS hacks(CSS漏洞)越好。

很明显的,你可以使用服务器端技术去做一个浏览器检测,然后针对不同的浏览器,发送不同的CSS文件。如果你这么做了,你必须要确保检测脚本是通用的,以避免因为浏览器的升级或者新的浏览器发布导致发送错误的CSS文件。

用不同的方法应用CSS

有以下几种方法使一个HTML文档中的元素应用CSS。

外链式

把所有的CSS规则都写在一个或几个单独的文件中,这种做法有许多优点。HTML文档会变得非常的小,CSS文件被存在浏览器的缓存中,仅仅需要下载一次即可,并且你只需要修改一个文件就可以改变整个网站的样式。一个外链式的CSS文件,见如下:

h1 { font-weight:bold; }

注意:在外链的CSS中没有<style>标签。

你可以使用 <link>标签来把一个CSS链接到HTML文档中:

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

或者在<style>中使用一个@import标签 :

<style type="text/css"> @import url("styles.css"); </style>直接引用

通过使用style属性,你可以直接的在HTML中应用CSS:

<h1 style="font-weight:bold;">webjx.com</h1>

这种情况,应尽量的避免,因为他把结构和表现混在一起了。

内嵌式

内嵌式CSS是写在<style>标签中,也是写在文档的<head>中:

<style type="text/css"> h1 { font-weight:bold; } </style>

这种情况也应该尽量避免,最好还是把HTML和CSS用单独的文件存放。

CSS的语法

一条CSS的规则是由一个选择器和一个或多个声明组成。选择器决定了CSS规则可作用于文档中的哪个或哪些元素。一个属性和一个值组成了一个声明,声明要用大括号({})括起来,并且每个声明要用分号(;)结束。

一个简单的CSS规则如下:

p { color:#0f0; font-weight:bold; }

这个例子中, p就是选择器,表示这条规则将作用于文档中的所有被<p>包围的内容。这个规则中,有两条声明,它们共同作用,使 <p>中的内容所有字体为绿色并且加粗。

想了解更详细的CSS规则,可以下载一个CSS使用手册

多余的元素和类

当我们刚开始学CSS时,很容犯一些错误:使用不必要的XHTML元素、多余的类和额外的 <div>。并不是说这些代码是不规范的,而是它与一些原则(如结构与表现相分离,使用简单的整洁的标记)相矛盾。

下面是一个使用不必要XHTML元素的例子:

<h3><em>Headline</em></h3>

如果你想使标题行变成斜体,可以使用CSS来重新定义 <h3>元素:

h3 { font-style:italic; }

下面是一个使用多余的类的例子:

<div id="main"> <div class="maincontent"> <p class="maincontenttext"> 网页教学网CSS技术 </p> </div> </div>

下面这么写可能更好:

<div id="main"> <div> <p> 网页教学网CSS技术 </p> </div> </div>

为了控制div#main中的元素,你可以在CSS代码中使用相关的的选择器,例如:

div#main p { /* rules */ }

多数情况下,CSS允许你把想要的样式来定义XHTML,而不用增加额外的的标记。但是有的时候,增加一些额外的代码也是必要的。

CSS小窍门

很明显,一旦你去很认真的学习使用CSS,你一定会发现某些问题,这些问题可能是由误解造成的,可能是由对规则的不了解或者浏览器的漏洞造成的。CSS Crib Sheet就是一个好建议的荟萃,有Dave Shea整理,下面还将有一些重要的而且是Dave没有提及的小窍门。

先校验:在调试的时候,先由校验开始吧,HTML和CSS都要进行校验。许多问题都是由不规范代码引起的。

先在最先进的浏览器中调试,然后才轮到其他的浏览器: 如果你刚开始就用对CSS支持不好的浏览器调试,那么你所编的CSS将会逐渐适应这种错误的处理。当你继续在更先进的浏览器中测试,一些你所不希望的内容就会出现了。最好还是首先在一个有很好标准兼容性的浏览器中运行,然后再把代码拿到老一点的浏览器中去测试。

理解CSS的盒模型:为了获得一个元素的实际的宽度和高度,你需要用padding和border来增加它的 width或者height。在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。

假设你有如下的CSS代码:

div.box { width:300px; padding:20px; border:10px solid; }

所以这个div的总宽度是360px.

10px + 20px + 300px + 20px + 10px = 360px

在Internet Explorer 5.*/Win中,实际上总宽度为300px, 内容的宽度为240px.

300px - 10px - 20px - 20px - 10px = 240px

为了绕过这个问题, 你同样可以使用CSS hack来给不同的浏览器提供不同的值,或者你尽量避免在同一个元素中同时定义width 和 padding或者width和border。

为非零的数值加上单位:CSS要求一些属性值(如width、 height、font-size)必须要有单位。当属性值为0时是可以例外的。在那种情况下,没有单位也是必须的,因为0就是0,什么单位也都无所谓了。

理解漂浮物:尽管漂浮物这个概念很难理解,但是它很重要,因为CSS中会频繁的使用它来布局。

“LoVe/HAte?” 按照如下顺序为链接定义伪类:Link, Visited, Hover, Active.

“TRouBLed?”当使用简写来定义margin、padding和border时, 他们的顺序是从上开始的顺时针方向: 上、右、下、左。

以其功能给CLASS和ID命名,而不是它的表现: 如果你有一个CLASS名为.smallblue, 过后你决定用它来定位文本,使其为大号、红色,那么CLASS的名字就会被弄混淆的。最好能用名字来描述功能和结构,如.copyright和.im portant。

CSS是个敏感的东西:当HTML属性中的 class和id与CSS一起使用时,那可就要小心了。

检查你的ID:文档中一个元素只能使用一个id,且id必须唯一,而class可以被多个元素所共享。

使用合法的字符为class和 id命名: Class和id的名字只能由数字、字母和连字符组成,数字和连字符是不可以开头的。

正确的注释:CSS的注释是以/*开头,以*/结尾的:

/* This is a comment */

CSS布局

有很多例子和阶梯教程指导您如何使用CSS布局。建议您从简单的例子开始,学习它的原理,然后再去学习复杂的布局。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有