HTML连载17-id选择器&类选择器
2019-08-14 09:41:23来源:博客园 阅读 ()
一、问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式
二、id选择器
1.定义:根据指定的id名称找到对应的标签,然后设置属性
2.格式:
#id名称{
属性:值;
}
3.例如:
<style> p{ color: rgb(255,45,45); } #label1{ color:black; } #label2{ color: #37fa1e; } #label3{ color: blue; } #label4{ color:green; } </style> </head> <body> <b id="label1"></b> <p id="label2">迟到毁一生</p> <p id="label3">早退穷三代</p> <p id="label4">按时上下班</p> <p id="label5">必成高富帅</p>
4.注意:
(1)每个HTML标签中都有一个属性叫做id ,也就是说每个标签都可以设置id
(2)在同一个界面中id名称是不可以重复的
(3)在编写id选择器的时候一定要在id名称前面加上#
(4)id名称是有规范的:只能由字母、数字、下划线组成的,且不能以数字开头;id名称不能以HTML标签名来命名
(5)在企业开发中一般情况下如果仅仅是为了设置样式,我们一般不会使用id,因为在前端开发中id是留给js使用的,可以使用类选择器
三、类选择器
1.定义:根据指定的类名称找到对应的标签,然后进行设置属性
2.格式:
(1)写在HTML中的与id的格式是一致的
(2)在style中:
.类名{
? ?属性?:值;
}
?3.例子:
<style> .pp2{ color: aqua; } .pp3{ color:blue; } </style> </head> <body> <p class="pp2">迟到毁一生</p> <p class="pp3">早退穷三代</p> <p class="pp2">按时上下班</p> <p class="pp2">必成高富帅</p> ? </body>
?4.注意点:
(1)每个HTML标签中都有一个属性叫做class ,也就是说每个标签都可以设置class
(2)在同一个界面中class名称是可以重复的
(3)在编写class选择器的时候一定要在class名称前面加上.
(4)class名称是有规范的:只能由字母、数字、下划线组成的,且不能以数字开头;class名称不能以HTML标签名来命名(和id的命名规范一样)
(5)使用类选择器就是为了设置样式的
(6)在HTML中每个标签可以同时绑定多个类名
格式?:
<标签名称 class=“class名1 class名2 class名3”>
例如:
.ppp{ font-size: 50px; } .pppp{ color:red; } .ppppp{ font-family: 微软雅黑; } ? .......(省略中间的) <p class="ppp pppp ppppp">实验一下</p>
多个类名?控制不同的属性。
四、源码:
d69_class_selector
d68_id_selector
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,后台回复“礼包”获取Java大数据学习视频礼包
原文链接:https://www.cnblogs.com/ruigege0000/p/11105393.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash