设为首页收藏本站
网站公告 | 这是第一条公告
     

 找回密码
 立即注册
缓存时间17 现在时间17 缓存数据 你们知道一个听电音的推到古风是什么感受吗[呆]

你们知道一个听电音的推到古风是什么感受吗[呆] -- 红昭愿

查看: 1598|回复: 6

详细了解CSS中的class与id区别及用法

[复制链接]

  离线 

TA的专栏

  • 打卡等级:热心大叔
  • 打卡总天数:205
  • 打卡月天数:0
  • 打卡总奖励:3114
  • 最近打卡:2023-08-27 09:23:14
等级头衔

等級:晓枫资讯-上等兵

在线时间
0 小时

积分成就
威望
0
贡献
416
主题
387
精华
0
金钱
4341
积分
833
注册时间
2022-12-25
最后登录
2025-5-31

发表于 2023-2-11 08:10:03 | 显示全部楼层 |阅读模式
我们平常在用DIV CSS制作Xhtml网页页面时,常会用到class 和id来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的。接下来我们就来详细了解CLASS与ID基本属性及用法。

Class 在程序中称“类”,同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名如: .css5{属性:属性值;} ,而在html页面里则以class="css5" 来选择调用,命名好的CSS又叫css选择器。如: .css5{属性:属性值;} 选择器在html调用为“
我是class例子
”如果不知道怎么引用CSS,那就可以了解下css引用。

而且class(类)在同一个html网页页面可以无数次的调用相同的class类,在这里例子里则可以在对应的网页里可以无数次调用选择“css5”。这也说明class一般是用来调用css中的预配制属性的,比如说有一个预配制属性为如这里的“.class01{属性:属性值;} ”,这样就可以像调用函数一样不用再一个网页页面里重复的配置一个“类”属性,而只需要写上一个class类选择,就可以在同一个页面里任何位置调用选择具有相同的CLASS类。

ID是表示着标签的身份,在JS脚本中会用到id,当JS要修改一个标签的属性时,JS会将id名作为该标签的唯一标识进行操作。也就是说ID只是页面元素的标识,供其他元素脚本等引用。假如你的页面里出现了两个ID那JS效果特性较出现逻辑错误不知道依据哪个ID来改变其标签属性。 在CSS里的ID不一定为JS而设置的,但是同样ID在页面里也只能出现一次,并且是唯一性。虽然可能我们才学DIV+CSS爱好者在一个页面里同时调用相同的ID多次但是仍然没有出现页面混乱错误,但是我们为了W3C及各个标准我们也要遵循ID在一个页面里唯一性。以免出现浏览器兼容问题。

Div css 页面中的ID是怎么个用法呢?
通常我们在CSS样式定义的时候 以“#”来开头命名id名称如:#css5{属性:属性值;} 这个也有点像class的定义,只是class是以小写句号“.”开头命名,而ID是以“#”好开头定义。那id是怎么个用法呢? Css里的ID用法与class用法一样,只是把class换成id。如例子:在CSS样式定义ID --- #css5{height:25px;width: 200px;} ,调用ID ---
我是ID例子


接下来我们来看下完整关于CLASS和ID实例:


复制代码代码如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



DIV CSS中CLASS与ID实例 - -DIV+CSS-www.divcss5.com



我在浏览器下浏览,内容背景将是白色

我在浏览器下浏览,内容背景将是红色




接下来我们分析一下以上实例:class="css5 css5_class" 怎么是这样的?这里是相当于调用选择了class类css5与css5_class 。class="css5" id="css5_id" 这里同样是选择调用了class类 :css5和id :css5_id 。

本页通过CSS实例与CLASS类和ID分别的讲解,相信您能从此深刻认识和区分它们并且灵活。特别注意:在命名id和class类的时候特别要注意大小写,ID和class是对大小写非常敏感的,最好以英文开头,不要用中文命名CSS类名。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
晓枫资讯-科技资讯社区-免责声明
免责声明:以上内容为本网站转自其它媒体,相关信息仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同其观点或证实其内容的真实性。
      1、注册用户在本社区发表、转载的任何作品仅代表其个人观点,不代表本社区认同其观点。
      2、管理员及版主有权在不事先通知或不经作者准许的情况下删除其在本社区所发表的文章。
      3、本社区的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,举报反馈:点击这里给我发消息进行删除处理。
      4、本社区一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
      5、以上声明内容的最终解释权归《晓枫资讯-科技资讯社区》所有。
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
22
积分
24
注册时间
2022-12-29
最后登录
2022-12-29

发表于 2023-4-20 00:49:24 | 显示全部楼层
免费分享的大佬,反手就是一个赞~~~~
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

  • 打卡等级:即来则安
  • 打卡总天数:27
  • 打卡月天数:0
  • 打卡总奖励:361
  • 最近打卡:2025-04-10 12:44:18
等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
411
积分
56
注册时间
2023-4-9
最后登录
2025-4-10

发表于 2023-7-8 09:38:16 | 显示全部楼层
感谢楼主分享~~~~~
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:11
  • 最近打卡:2024-02-02 03:19:50
等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
24
积分
6
注册时间
2023-12-25
最后登录
2024-2-2

发表于 2024-10-28 21:01:17 | 显示全部楼层
感谢楼主分享。
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
19
积分
18
注册时间
2022-12-24
最后登录
2022-12-24

发表于 2024-11-20 13:07:01 | 显示全部楼层
顶顶更健康!!!
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
18
积分
16
注册时间
2022-12-25
最后登录
2022-12-25

发表于 2025-4-18 22:44:34 | 显示全部楼层
路过,支持一下
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

  • 打卡等级:热心大叔
  • 打卡总天数:140
  • 打卡月天数:0
  • 打卡总奖励:2011
  • 最近打卡:2025-03-14 17:49:59
等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
2072
积分
82
注册时间
2023-3-12
最后登录
2025-3-14

发表于 7 天前 | 显示全部楼层
感谢楼主,顶。
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~
严禁发布广告,淫秽、色情、赌博、暴力、凶杀、恐怖、间谍及其他违反国家法律法规的内容。!晓枫资讯-社区
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1楼
2楼
3楼
4楼
5楼
6楼
7楼

手机版|晓枫资讯--科技资讯社区 本站已运行

CopyRight © 2022-2025 晓枫资讯--科技资讯社区 ( BBS.yzwlo.com ) . All Rights Reserved .

晓枫资讯--科技资讯社区

本站内容由用户自主分享和转载自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。

如有侵权、违反国家法律政策行为,请联系我们,我们会第一时间及时清除和处理! 举报反馈邮箱:点击这里给我发消息

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表