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.divcss5.com我字体大小为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 基础知识点。

时间: 2024-12-28 16:06:17

CSS中id和class的区别和用法的相关文章

html-本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题

问题描述 本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题 FIREFOX浏览器,代码如下: HTML代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> @import url(template/default/styl

DIV+CSS中id和class的使用原则

本文向大家描述一下DIV CSS中id与class使用原则,在前面的文章里讨论过很多DIV CSS布局的技巧,我们在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?这里和大家说明一下,相信本文介绍一定会让你有所收获. DIV CSS中id与class使用原则 在51cto.com前面的文章里讨论过很多DIV CSS布局的技巧.在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?今天51cto.c

mfc-关于MFC中nEscapement和nOrientation的区别和用法

问题描述 关于MFC中nEscapement和nOrientation的区别和用法 我使用的是cEscapement的方式调整字体角度,结果是以每行的首字为原点的角度变化,即如果换行了,文字变换角度是对的但上下两行仍然是对齐的. 有没有什么办法使得角度变换后能够将整个字体作为整体一起改变. (_T("字体角度") == strName) { lf.lfEscapement = _ttol(strVal) *10; pText->m_pFont = pText->m_pLay

CSS中em和px的区别

Font-size:1.5em; 其实在国外CSS编写中,使用em作为单位是很多的,一是人性化考虑,二是受到美国劳工部Section508法案的强行限制.那么在网页设计中,常用到的度量单位一共有三种,分别是px/em/pt: *px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的,国内的网站很多都是采用px作为单位的. *em单位名称为相对长度单位.相对于当前对象内文本的字体尺寸.在国外使用的很多.众多先进浏览器[IE除外的基本都是]都支持字体调整. *pt单位名称为点(

图论中DFS与BFS的区别、用法、详解?

  DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵和邻接表.这里为简单起 见,均采用邻接矩阵存储,说白了也就是二维数组. 3.本文章的小测试部分的测试实例是下图:   一.深度优先搜索遍历 1.从顶点v出发深度遍历图G的算法 ① 访问v ② 依次从顶点v未被访问的邻接点出发深度遍历. 2.一点心得:dfs算法最大特色就在于其递归特性,使得算法代

浅谈html中id和name的区别实例代码_经验交流

我们可以通过一段代码来分析一下其中的微妙差别: <form method="post" action="" name="demoform"> <input type="text" name="oDemo" id="oDemo2" value="DEMO" /> </form> 在IE浏览器里,我们可以通过多少方法来索引到这个文本框对

css中link和@import的区别分析详解

导入CSS文件主要有两种方式: 链接式(link)  代码如下 复制代码 <link rel="stylesheet" href="style.css" type="text/css"/>   导入式(@impot) <style type="text/css">      @import url("style.css"); </style> 以上是这两种方式的语法区别.

CSS中display与visibility的区别

css|区别 起因: 前几天在做一个图片无间隙滚动的效果,要利用到一个隐藏的层. 问题: 之间复制以前文字滚动的效果代码(文字滚动时无错误),结果发现页面被拉长了一倍,也就是隐藏的层. 解决: 查CSS手册后发现了隐藏内容原来是有区别的,一种是保留对象的物理空间,一种是不保留. ------------------------------- display:none CSS1 隐藏对象.与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间 visibility:h

HTML中Id和Name的区别

 html中:name指的是用户名称,ID指的是用户注册是系统自动分配给用户的一个序列号. name是用来提交数据的,提供给表单用,可以重复: id则针对文档操作时候用,不能重复.如:document.getElementById(): 一.ID是在客户端脚本里用!NAME是用于获取提交表单的某表单域信息,在form里面,如果不指定Name的话,就不会发送到服务器端. 二.以下元素input.select.form.frame.iframe用name,而以下元素table.tr. td.div.