CSS id与class
来源:互联网 发布:名字抽奖软件 编辑:程序博客网 时间:2024/05/01 05:07
CSS id与CSS class
CSS ID与CSS CLASS
前面我们介绍过了id与class区别,接下来再简单介绍CSS id与CSS class区别与用法。
id与class对应图
CSS id知识:
在一个网页里ID只能使用一次。当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次。因为ID在html里可以赋予html标签特殊的属性如一下JS动作、表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作、传的表单值的兼容性特性错误即使没有其它JS脚本动作、表单传值特性但是我们也一定执行一个页面只能使用一次。
id 选择器以 "#" 来定义,命名CSS选择器。
定义命名css id选择器例子:
#yangshi1{color:#F00;}定义红色www.divcss5.com实例
#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.divcss5.com我字体大小为28px</div>
- <div class="yangshi1 yangshi2">我颜色为红色文字大小为28px</div>
以上即是“yangshi1”“yangshi2”类的正确使用方法
扩展知识:能否使用数字命名CSS 属性选择器css 命名规范-CSS命名大全集合
以下为错误的css类使用方法:
<div class="yangshi1" class=" yangshi2">我将无效</div>
这样的引用方法即是错误的引用方法,同样可以得出一个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 基础知识点。
文章来源(http://www.divcss5.com/rumen/r117.shtml)
- CSS id与class
- CSS中的class与id
- CSS中ID与CLASS的区别
- css中Class与ID的区别
- CSS: ID与Class的使用区别
- css中ID与class的区别
- css中class与id的区别
- CSS ID选择器与CLASS选择器
- CSS中id与class的区别
- css 中class与id的区别
- css选择器class与id的区别
- html中id与name,css中id与class
- [CSS基础知识]CSS中Class与ID的区别
- CSS Id and Class
- CSS Id和Class
- CSS id区分class
- CSS 选择器 element.id 与element .id element.class 与 element .class
- ID与Class的区别(#与。的区别)CSS
- 行内元素,块级元素与空元素
- Pow(x, n)
- 欢迎使用CSDN-markdown编辑器
- 软件测试员----面试,你准备好了么?
- 阿拉伯数字转换成罗马数字
- CSS id与class
- 用oracle的rollup函数进行合计操作
- 前端问题和解决方法
- MAC --消息认证码
- 获取当月天数的方法
- wex5组件--messageDialog
- SDUT-1162 C语言实验——保留字母
- 使用oradebug ipc来检查cluster interconnect
- LSTM(一)