首页客户案例企业网站建设外贸独立站SEO优化小程序+APP开发自媒体运营关于动态联系咨询

CSS中id和class的区别和用法

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

id 选择器以 "#" 来定义,命名CSS选择器。

定义命名css id选择器例子:

#yangshi1{color:#F00;}定义红色

#yangshi2{color:#0F0;}定义绿色

对应html中div引用

<div id="yangshi1">我颜色为红色</div>

<div id="yangshi2">我颜色为绿色</div>

一个div标签的定义只能使用一个id如:

<div id="yangshi1" id="yangshi2">www.divcss5测试内容</div>



<div id="yangshi1 yangshi2">www.divcss5测试内容</div>

两个都是不正确的,并且CSS样式属性也不能生效- 成为CSS 失效之一。

CSS class知识:

与CSS ID不同特性是clsss类可以在一个网页内无限次引用。

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

对应html中div+css引用:

<div class="yangshi1">我颜色为红色</div>

<div class="yangshi2">www.wzsky.net我字体大小为28px</div>

<div class="yangshi1 yangshi2">我颜色为红色文字大小为28px</div>

以上即是“yangshi1”“yangshi2”类的正确使用方法

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

以下为错误的css类使用方法:

<div class="yangshi1" class=" yangshi2">我将无效</div>

这样的引用方法即是错误的引用方法,同样可以得出一个只能出现一个"class="如果出现多个css类要应用到一个div标签内,即可以使用<div class="yangshi1 yangshi2">来应用。

一个div标签内运用id和class是可以的:

.yangshi1{... ...}

#yangshi2{... ...}

.yangshi3{... ...}

<div class="yangshi1" id="yangshi2">这样是可以的也是正确的.

<div class="yangshi1 yangshi3" id="yangshi2">同样是正确的可取的。

总结:

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

本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司!

日期:2015年01月27日

标签: 广州网站设计公司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作 、 高端网站设计 、 高端网站建设 、 广州高端网站设计 、 广州高端网站建设

获取您的项目定制及优化报价。

* 为广州天河、白云、海珠、番禺、花都、南沙区提供网站建设服务。
微信二维码15876521776免费获取诊断报告