WEB标准中使用CSS的基础教程
发布时间：2025-05-20 点击：8
css过去经常被用来定义字体的属性，而现在可以用它来控制整个文档的布局。然而，为了有效的用css来控制布局，需要做一些不同的处理，这种不同是跟用表格布局相对比的。
为了css可以高效的控制布局，结构化、语义化的xhtml是必不可少的。
浏览器的支持在过去几年，浏览器对css的支持程度已经改进了很多。不幸的是，浏览器的开发商好象对实施开放的标准并不感兴趣，所以不同浏览器对css的支持程度也大相径庭。就算是支持程度最好的浏览器，在软件中仍然有一些bug，使得浏览器以错误的方式运行。
现在对css支持比较好的浏览器有mozilla (还有以gecko为内核的: firefox, camino, netscape 6+), opera和safari (还有以 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布局。建议您从简单的例子开始，学习它的原理，然后再去学习复杂的布局。
为什么要对网站源代码进行加密处理？
如果微信小程序加载商家模板，会怎样？
如何快速分辨一家手机网站值不值得看
企业营销网站制作的注意细节
济南网站制作为什么seo的优化效果不好？是否是缺乏SEO指导思想？
HTML5是什么？HTML5能做什么？
我们应该从哪几方面加强站点的安全，网站建设的安全
深圳网站建设——使用纹理图案做网页的作用
为了css可以高效的控制布局，结构化、语义化的xhtml是必不可少的。
浏览器的支持在过去几年，浏览器对css的支持程度已经改进了很多。不幸的是，浏览器的开发商好象对实施开放的标准并不感兴趣，所以不同浏览器对css的支持程度也大相径庭。就算是支持程度最好的浏览器，在软件中仍然有一些bug，使得浏览器以错误的方式运行。
现在对css支持比较好的浏览器有mozilla (还有以gecko为内核的: firefox, camino, netscape 6+), opera和safari (还有以 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布局。建议您从简单的例子开始，学习它的原理，然后再去学习复杂的布局。
为什么要对网站源代码进行加密处理？
如果微信小程序加载商家模板，会怎样？
如何快速分辨一家手机网站值不值得看
企业营销网站制作的注意细节
济南网站制作为什么seo的优化效果不好？是否是缺乏SEO指导思想？
HTML5是什么？HTML5能做什么？
我们应该从哪几方面加强站点的安全，网站建设的安全
深圳网站建设——使用纹理图案做网页的作用