html css中id和class的区别比较

 我来答
八哥说科技
高粉答主

2019-08-09 · 分享科技资讯,共享科技生活
八哥说科技
采纳数:111 获赞数:78610

向TA提问 私信TA
展开全部

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相反先定义一类样式,然后再页面中根据需要把类样式应用到不同的元素和内容上面。

参考资料来源:百度百科-CSS语法 

千锋教育
2016-08-14 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI&UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
展开全部
class可以在页面里面重复使用,
id由于在页面里面只能出现一次,所以不能重复使用,
所以尽量用class来写,这样能在页面里面重复引用你写的css,减小工作量和代码量。

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

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

补充:class和id在页面里面的使用方法:
class:
<style type="text/css">
.footer{background:red;}
</style> <div class="footer">footer</div>
id: <style type="text/css">
#footer{background:red;}
</style>
<div id="footer">footer</div>

定义class的css是用点:“.”,如.footer
定义id的css是用井号“#”,如#footer

//让div居中对齐

让div内的内容(包括文字及图片)居中的代码是: text-align:center;

<style type="text/css">
刚刚入门,要记住。

.align-center{
margin:0 auto; /* 居中 这个是必须的,,其它的属性非必须 */
width:500px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
background:red; /* 背景色 */
text-align:center; /* 文字等内容居中 */
}
</style>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
育知同创教育
2016-08-14 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部
.是类 #是id
id是唯一的,类是可以重用的.
比如你有多个地方样式要求一样的话,就用类.这样就不用些多个#了.
.name{.....}
<div class="name"></div>
<div class="name"></div> /*就像这样.你多个地方都想要同一个样式就这样写.

#Idname{.......}
<div id="Idname"></div> /*id只有一个.
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
叶孤楚洁24
2020-04-23
知道答主
回答量:4
采纳率:0%
帮助的人:2384
展开全部
class可以被重复调用,而id不可以
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式