精华内容
下载资源
问答
  • CSSCLASS和ID区别.doc CSSCLASS和ID区别.doc
  • CSS Id Class

    万次阅读 2019-09-20 15:59:38
    HTML元素以id属性来设置id选择器,CSSid 选择器以 "#" 来定义。 以下的样式规则应用于元素属性 id="para1": 实例 <!DOCTYPE html> <html> <head&...

    CSS Id  Class


    id 和 class 选择器

    如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。


    id 选择器

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

    HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

    以下的样式规则应用于元素属性 id="para1":

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <title>test</title> 
    <style>
    #para1
    {
    	text-align:center;
    	color:red;
    } 
    </style>
    </head>
    
    <body>
    <p id="para1">Hello World!</p>
    <p>这个段落不受该样式的影响。</p>
    </body>
    </html>

    ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。


    class 选择器

    class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

    class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

    在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <title>test</title> 
    <style>
    .center
    {
    	text-align:center;
    }
    </style>
    </head>
    
    <body>
    <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p> 
    </body>
    </html>

    你也可以指定特定的HTML元素使用class。

    在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <title>test</title> 
    <style>
    p.center
    {
    	text-align:center;
    }
    </style>
    </head>
    
    <body>
    <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p> 
    </body>
    </html>

    类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。  

     

     

    展开全文
  • cssid和class区别

    千次阅读 2013-06-03 16:58:01
    首先,在表现形式上 ID 的优先级比css高,例如: ...id和class都定义了背景颜色的属性,但是由于id的优先级比class高,所以背景色为id所定义的红色 再次,class是通用属性,就是说几个div可以调用同一个class

    首先,在表现形式上 ID 的优先级比css高,例如:

    <style>
    #id {background-color:Red}
    .class {background-color:blue}
    </style>
    <div id="id" class="class">
    蓝色理想
    </div>

    id和class都定义了背景颜色的属性,但是由于id的优先级比class高,所以背景色为id所定义的红色


    再次,class是通用属性,就是说几个div可以调用同一个class ,而ID是唯一的,web标准中不允许出现两个div的id标识是相同的,id也是js获取对象的一个标识,所以也必须是唯一的,(就像如果一个房子里面如果有两个相同名字的人,我要这个名字的人去做某事,谁去呢?就会混乱)
    class还有个好处就是,一个div可以调用几个css,如

    <style>
    #id {background-color:gray}
    .class1 {color:red;}
    .class2 {width:200px;height:100px}
    </style>
    <div id="id" class="class1 class2">
    蓝色理想
    </div>
    class1控制文本颜色为红色,class2控制div的大小



    展开全文
  • css中的id和CssClass区别

    千次阅读 2008-01-22 10:22:00
    class可以在页面里面重复使用,id由于在页面里面只能出现一次,所以不能重复使用,所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量代码量。这种情况尽量用id:页面大的模块里面,用id来区分...



    class可以在页面里面重复使用,
    id由于在页面里面只能出现一次,所以不能重复使用,
    所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量和代码量。

    这种情况尽量用id:页面大的模块里面,用id来区分不同的模块。
    比如页面里面有这样的模块:最新新闻,推荐新闻等。就可以考虑用id来区分。

    还有一点,由于id是页面中唯一的,更多的是定义来留给给页面里面的javascript用。

    CssClass:
    < style type = " text/css " >
    .footer
    {background:red;}
    </ style >   < div CssClass = " footer " > footer </ div >

    id: 
    < style type = " text/css " >
    #footer
    {background:red;}
    </ style >
    < div id = " footer " > footer </ div >
     
    展开全文
  • cssclass和id

    万次阅读 2021-03-26 10:23:25
    cssclass和id <!DOCTYPE html> <html> <style> body{ margin: 0; padding: 10px; } .a_1{ display: block; width: 100px; height: 50px; overflow: hidden; ...

    css的class和id

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<style>
    		body{
    			margin: 0;
    			padding: 10px;
    			
    		}
    		.a_1{
    			display: block;
    			width: 100px;
    			height: 50px;
    			overflow: hidden;
    			padding: 10px;
    			border: dashed;
    			margin: 10px;
    			background-image: url(img/1.jpg);
    		}
    		#a_1img{
    			width: 100%;
    			height: 100%;
    		}
    		.BgImg{
    			background-size:contain;
    			
    			
    		}
    		
    		#BgImg{
    			background-size:contain;
    			
    			
    		}
    		
    		#a_1{
    			display: block;
    			width: 100px;
    			height: 50px;
    			overflow: hidden;
    			padding: 10px;
    			border: dashed;
    			margin: 10px;
    			background-image: url(img/1.jpg);
    		}
    		
    		
    		
    	</style>
    	<head>
    		<meta charset="{CHARSET}">
    		<title></title>
    	</head>
    	<body>
    		
    		<div  class="a_1 BgImg "<!--id="a_1 BgImg"--> >
    			
    			<!--<img id="a_1img" src="img/1.jpg"/>-->
    			
    		</div>
    		
    		
    		
    	</body>
    </html>
    
    

    用这个属性的时候,我们看到,一切正常。但是我们用id来试试

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<style>
    		body{
    			margin: 0;
    			padding: 10px;
    			
    		}
    		.a_1{
    			display: block;
    			width: 100px;
    			height: 50px;
    			overflow: hidden;
    			padding: 10px;
    			border: dashed;
    			margin: 10px;
    			background-image: url(img/1.jpg);
    		}
    		#a_1img{
    			width: 100%;
    			height: 100%;
    		}
    		.BgImg{
    			background-size:contain;
    			
    			
    		}
    		
    		#BgImg{
    			background-size:contain;
    			
    			
    		}
    		
    		#a_1{
    			display: block;
    			width: 100px;
    			height: 50px;
    			overflow: hidden;
    			padding: 10px;
    			border: dashed;
    			margin: 10px;
    			background-image: url(img/1.jpg);
    		}
    		
    		
    		
    	</style>
    	<head>
    		<meta charset="{CHARSET}">
    		<title></title>
    	</head>
    	<body>
    		
    		<div  id="a_1 BgImg"<!--class="a_1 BgImg "--> >
    			
    			<!--<img id="a_1img" src="img/1.jpg"/>-->
    			
    		</div>
    		
    		
    		
    	</body>
    </html>
    
    

    在这里插入图片描述
    用id包括两个,直接这样!

    在这里插入图片描述
    说明什么?说明id全场每个元素有且仅有一个,style里面的#的也一样,全场只能给一个人。双向唯一!!!否则报错,就像你的身份证一样,不可能两个人身份证号码是一样的,对吧


    1、语法区别:
    id对应css是用样式选择符“#”(井号)。
    class对应css是用样式选择符“.”(英文半角输入句号)。
    2、使用次数区别:
    id属性,只能被一个元素调用(以“#”选择符命名CSS样式在一个页面只能使用调用一次)。在同一个页面,只可以被调用一次,在CSS里用“#”表示。
    class类标记,可以用于被多个元素调用(以“.”选择符命名样式可以一个页面使用多次)是类标签,在同一个页面可以调用无数次(没限制的),在CSS里用“.”表示。
    ID就像一个人的身份证,用于识别这个DIV的,Class就像人身上穿的衣服,用于定义这个DIV的样式。一般一个网页不设二个或二个以上同ID的div,但Class可以多个DIV用同一个Class。
    3、语义和使用不同:
    id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到任何结构和内容上。在布局思路上,一般坚持这样的原则:id是先确定页面的结构和内容,然后再为它定义样式:而class相反先定义一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面。

    展开全文
  • CSSid和class的引用

    千次阅读 2017-04-03 22:27:43
    今天在学习过程中,遇到了class和idcss文件中的引用问题,被搞得很晕 如果想要指定在一个id里面的某一种元素,在CSS中应该用空格隔开,而不是像其他编程语言一样用“.”隔开,比如 fuck 姓名 ...
  • CSSclassid区别及应用

    千次阅读 2012-07-10 19:55:13
    中国asp之家注:也许很多人对网页设计中的,id和class和name的区别不是很清楚,好像觉得都可以使用,没什么不同。就我个人来讲,我的理解是ID是一个HTML中唯一的元素标志,最好不要出现重复,如果重复就会给调用该...
  • CSSid,name与class区别

    千次阅读 2018-07-13 15:49:13
    4. 在CSS文件里书写时,ID加前缀"#";CLASS用"."6. ID是一个标签,用于区分不同的结构内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构内容上,...
  • cssid选择器和class选择器的区别

    万次阅读 2011-02-17 22:16:00
     id 选择器以"#" 来定义。  下面的两个id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: #red {color:red;} #green {color:green;} 下面的HTML 代码中,id ...
  • 通过分析我们发现,js中的代码之所以复杂,是因为每个li元素的需求1原始样式由id控制,如#level1{......},而需求2的交互样式由class属性控制,如.level1_selected{......},,而且每个li元素的原始样式交互样式...
  • id和class区别

    千次阅读 2012-03-15 09:00:14
    首先,介绍id和class区别: 1、id是一个标签,用于区分不同的结构内容;id是先找到结构/内容,再给它定义样式;class是一个样式,可以套在任何结构内容上;class是先定义好一种样式,再套给多个结构/内容。 ...
  • CSS样式id和class属性优先级问题

    千次阅读 2013-11-10 18:22:38
    在DIV+CSS设计网页时, 总会碰到一些CSS属性优先级问题. 如果不清楚优先级的等级, 直接想当然的认为应该是这样, 就很容易出错. 这里分析一个本人碰到的问题, 学习一下属性优先级问题.   下面是代码测试代码: ...
  • id,class选择器(CSS)

    万次阅读 2021-08-16 12:37:44
    CSSid,class选择器一、id选择器1.简介2.案例二、class 选择器1.简介2.语法3.案例 一、id选择器 1.简介 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 2.案例 HTML元素以id属性来设置id选择...
  • CSS ID选择器与CLASS选择器

    千次阅读 2015-08-22 17:10:11
    CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 属性选择器可以根据元素的属性及属性值来选择元素。  三种基本的选择器类型:标签名选择器、类选择器、ID选择器 具体语法如下:  1、标签名选择器,...
  • ID和class区别

    千次阅读 2018-09-15 20:46:23
    本次讲的id和Class就是id选择器类选择器。     二、知识剖析 什么是ID 从语义上来说,id是identity(ai'dentiti)的简写,identity是身份的意思,比如我们的身份证就叫做id-card。 在ht...
  •     相信大家都知道 .class1 .class2 .class1.class2 是两种不同的选择规则,但具体怎样不同呢? 首先中间有空格的情况: 是选择到.class1类下的.class2类子节点,即.class2类的节点要是.class1类子节点 代码...
  • CSSid选择器和class选择器

    千次阅读 2016-12-23 11:44:45
    CSS中对html元素的样式进行控制是通过CSS选择器来完成的,最常用的两种选择器为id选择器和class选择器。id选择器和class选择器介绍id选择器:用来为标有特定id的html元素指定特定的样式,html元素以id属性来设置id...
  • 这两个区别都是比较容易混淆的问题,尤其是ClassID,相信很多人并没有仔细了解过之中区别。以下是我的一些理解:1.ClassID区别一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的...
  • CSS中什么时候用id什么时候用class

    千次阅读 2016-06-22 12:57:03
    CSS中的选择符除了可以选择HTML预定义的标签,比如,,。还可以选择用户自己定义的id或者class。...实际上从名称就能看出来idclass区别id是识别符,而class是类。  那么什么时候使用id,什么时候使用cl
  • HTML,CSSclassid命名规则

    万次阅读 多人点赞 2019-07-14 12:02:44
    - 友情链接 #title - - 标题 #summary - - 摘要 #loginbar - - 登录条 #searchInput - - 搜索输入框 #hot - - 热门热点 #search - - 搜索 #search_output - - 搜索输出搜索结果相似 #searchBar - - 搜索条 #search...
  • html中class和id区别

    千次阅读 2018-12-25 13:52:23
    class用来声明类别, 主要是指向css表中的类,可以给html元素赋予多个class, 例如: &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; h1.intro { color:blue; ...
  • ID和class有什么区别

    千次阅读 2018-07-29 16:48:08
    今天给大家分享一下,修真院官网前端js任务1,深度思考中的知识点——ID和class有什么区别? 一,背景介绍 HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的 元素就是...
  • (1) 一个页面id命名不能一样,class可以一样 (2) 调用id用#号,class用点. (3) Id页面只用一次,用于整个布局;class应用于多个页面,用于样式 (4) 用到js或调用对象时,用id   注意: ...
  • CSS网页布局有很多值得学习的地方,这里大家重点讨论一下CSSidclass命名及编码的6个最佳习惯,相信本文介绍一定会让你有所收获。 一、用class_name方式写类名 以前喜欢用class-name写,不过好像两样也没...
  •  在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局设计放置各种元素较有用。    2.Margin与Padding的区别    两者都是代替表格最重要的作用->分割块的好方法,区别在于Margin是不同的...
  • 浅析IDCLASS区别

    千次阅读 2011-09-21 23:01:53
    转载:http://www.yangqiqi.com/on-the-difference-between-id-and-class/ ...关于cssID和class这两种选择符,就页面效果而言,两个的视觉效果几乎无差别,但W3C对于IDCLASS的设定是ID具有唯一性,CLAS

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 486,685
精华内容 194,674
关键字:

cssid和class的区别