一个标签内可以携带多个类名 | 学习笔记

简介: 快速学习一个标签内可以携带多个类名。

开发者学堂课程【CSS 快速掌握一个标签内可以携带多个类名】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9183


一个标签内可以携带多个类名


内容介绍

一、一个标签内可以携带多个类名

 

一、一个标签内可以携带多个类名

类名指的是 class 的属性值。

一个标签内可以携带多个类名,指的是 class 的属性值可以有多个,每一个属性值之间使用空格分隔。

例子:

<标签名 class = ”1 2 3”></标签名>

多个类名的优点:

1.减少 css 的代码量

2.多个类名的样式会叠加到当前元素上面

范例:

/*

先给class=div1的这个元素将其内容设置为加粗的效果

class=div2的这个元素将其内容的颜色设置为红色

class=div3的这个元素内容将其设置为加粗并且颜色也设置为红色

*/

.div1{

font-weight: bold;

}

.div2{

Color:#f00;

}

.div3{

font- weigh:bold;

Color:#f00;

}

用上class标签

<div class=”div1”></div>

<div class=”div2”></div>

<div class=”div1 div2”></div>

缺点:一个标签内有多个类名,它们设置的样式如果一样,那么就会存在样式冲突以 css 中的代码作为标准,谁写在后面就以谁作为标准,和 HTML 中的 class 属性值顺序没有关系。

相关文章
vw、px、vh 和 rem应用场景以及区别
【4月更文挑战第2天】 vw、px、vh 和 rem应用场景以及区别
1475 10
|
缓存 监控 前端开发
优化前端性能:提升网页加载速度的10个技巧
在当今互联网时代,网页加载速度成为用户体验的重要指标之一。本文将介绍10个有效的技巧,帮助前端开发人员优化网页性能,提升用户的访问体验。
|
9月前
|
前端开发 搜索推荐
使用DeepSeek快速创建的个人网站
这是一份使用DeepSeek快速创建个人网站的10分钟指南。内容分为四个步骤:搭建基础架构(HTML框架)、设计核心内容区块(关于我、作品展示等)、快速配置样式(CSS美化页面)以及添加联系表单并部署到GitHub Pages。通过简单的代码和DeepSeek的智能辅助功能,用户可以轻松实现个性化调整,如更换主题色、增加模块或优化响应式设计。虽然整体流程简单高效,但可能因功能有限或美观度不足而需进一步扩展与改进。
715 11
|
存储 运维 Oracle
国产数据库:目前最火的五款国产数据介绍
随着互联网的高速发展,目前数据的存储越来越多,传统的数据库逐渐不能满足人们对海量数据、高效查询的需求,国产的数据库如雨后春笋一样,一个个冒了出来来解决我们高速科技发展的数据库瓶颈,今天就给大家聊一聊目前最火的五款国产数据库,大家一起来交流一下。
国产数据库:目前最火的五款国产数据介绍
|
6月前
|
安全 Linux 定位技术
解决CentOS中挂载/dev/mapper/centos-root到sysroot失败的问题
记住,在攀爬这座挂载的高峰时,细心和耐心是你最好的朋友。不要走捷径,不要惧怕其中的复杂性,一步一个脚印地检查每个环节,最后达到山顶的那一刻,系统平稳地响应你的每条指令,你会发现这一切努力都是值得的。
334 2
|
数据采集 机器学习/深度学习 数据可视化
最大值归一化介绍
【10月更文挑战第2天】
898 0
em/px/rem/vh/vw区别
【10月更文挑战第24天】理解和掌握 em、px、rem、vh、vw 这几种单位的特点和应用,能够帮助我们更好地进行网页设计和布局,实现更优秀的用户体验和适应不同屏幕尺寸的能力。
|
Java
如何捕获和处理 EOFException 异常
EOFException 异常通常在尝试从输入流中读取数据但已到达文件末尾时抛出。要捕获和处理该异常,可以使用 try-catch 语句块,在 catch 块中进行相应的错误处理或提示。例如: ```java try { // 读取数据的代码 } catch (EOFException e) { System.out.println(&quot;已到达文件末尾&quot;); } ```
586 4
|
前端开发
[巨详细]使用HBuilder-X新建uniapp项目教程
【6月更文挑战第6天】安装HBuilder-X 详细步骤可看上文》》 启动uniapp项目 先打开HBuilder-X
872 5
|
算法 数据挖掘 数据库
[软件工程导论(第六版)]第5章 总体设计(复习笔记)
[软件工程导论(第六版)]第5章 总体设计(复习笔记)