日期:2013-11-27  浏览次数:20986 次

网页制造aiyiweb文章简介:css中id和class的运用。

简单引见CSS id与CSS class区别与用法。

CSS id知识:
在一个网页里ID只能使用一次。当然即便一个id在一个网页内被使用多次,其CSS款式仍然可以实现生效,但是普通规定W3C标准是使用一次。由于ID在html里可以赋予html标签特殊的属性如一下JS动作、表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作、传的表单值的兼容性特性错误即便没有其它JS脚本动作、表单传值特性但是我们也一定执行一个页面只能使用一次。

id 选择器以 "#" 来定义,命名CSS选择器。
定义命名css id选择器例子:
#Aiyiweb.Com1{color:#F00;}定义红色www.Aiyiweb.Com实例
#Aiyiweb.Com2{color:#0F0;}定义绿色

对应html中div援用
<div id="Aiyiweb.Com1">我颜色为红色</div>
<div id="Aiyiweb.Com2">我颜色为绿色</div>

一个div标签的定义只能使用一个id如:
<div id="Aiyiweb.Com1" id="Aiyiweb.Com2">www.aiyiweb测试内容</div>

<div id="Aiyiweb.Com1 Aiyiweb.Com2">www.aiyiweb测试内容</div>
两个都是不正确的,并且CSS款式属性也不能生效- 成为CSS 失效之一。

CSS class知识:
与CSS ID不同特性是clsss类可以在一个网页内无限次援用。

Class 选择器定义以“.”来定义。定义css class选择器例子:.Aiyiweb.Com1{color:#F00;} 定义文字为红色.Aiyiweb.Com2{font-size:28px;}定义文字大小为18px

对应html中div+css援用:
<div class="Aiyiweb.Com1">我颜色为红色</div>
<div class="Aiyiweb.Com2">www.Aiyiweb.Com我字体大小为28px</div>
<div class="Aiyiweb.Com1 Aiyiweb.Com2">我颜色为红色文字大小为28px</div>
以上即是“Aiyiweb.Com1”“Aiyiweb.Com2”类的正确使用方法

扩展知识:能否使用数字命名CSS 属性选择器css 命名规范

以下为错误的css类使用方法:
<div class="Aiyiweb.Com1" class=" Aiyiweb.Com2">我将无效</div>
这样的援用方法即是错误的援用方法,同样可以得出一个div标签内只能出现一个"class=",如果出现多个css类要使用到一个div标签内,即可以使用<div class="Aiyiweb.Com1 Aiyiweb.Com2">来表达。
一个div标签内运用id和class是可以的:
.Aiyiweb.Com1{... ...}
#Aiyiweb.Com2{... ...}
.Aiyiweb.Com3{... ...}
<div class="Aiyiweb.Com1" id="Aiyiweb.Com2">这样是可以的也是正确的.
<div class="Aiyiweb.Com1 Aiyiweb.Com3" id="Aiyiweb.Com2">同样是正确的可取的。

总结:
本文分别从知识点到实例讲解了div css中id和class的运用、需求留意地方、正确运用援用方法。通过aiyiweb中css实例方式正确与错误运用css id和css class让大家能掌握css 基础知识点。