css案例学习之全局声明*{} 与body{}的区别
2023-09-27 14:24:31 时间
代码
<html> <head> <title>全局声明</title> <style type="text/css"> *{ /* 全局声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } </style> </head> <body> <h1>全局声明h1</h1> <h2 class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <p class="special">全局声明p2</p> <p id="one">全局声明p3</p> </body> </html>
说明:
全局声明之后,h1、h2、h3的大小都变成了15px
代码
<html> <head> <title>全局声明</title> <style type="text/css"> body{ /* 全局声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } </style> </head> <body> <h1>全局声明h1</h1> <h2 class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <p class="special">全局声明p2</p> <p id="one">全局声明p3</p> </body> </html>
说明
body声明之后,下面继承的元素,又会改变样式,比如h1、h2、h3等等,会在此基础上,加上h1、h2、h3的样式
代码
<html> <head> <title>全局声明</title> <style type="text/css"> *{ /* 全局声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ color:red; /* 文字颜色 */ font-size:30px; } </style> </head> <body> <h1>全局声明h1</h1> <h2 class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <p class="special">全局声明p2</p> <p id="one">全局声明p3</p> </body> </html>
说明
*之后,执行class,会覆盖掉*的样式,指定元素后的class会继续覆盖class下的样式
暂时理解到这
相关文章
- JMeter基础脚本编写介绍及案例演示
- 【MATLAB教程案例54】Alexnet网络的MATLAB编程学习和实现,以步态识别为例进行仿真分析
- 【MATLAB教程案例51】传统神经网络学习——使用matlab神经网络工具箱实现BP、PNN、GRNN神经网络等
- 【MATLAB教程案例48】初识点云——pcshow,pointCloud,pcwrite,pcread,pcdenoise等点云基本操作函数学习
- 【MATLAB教程案例41】语音信号的语谱图matlab仿真与应用分析
- 【MATLAB教程案例38】语音信号的去噪方法matlab仿真学习——LMS自适应滤波,谱减法去噪滤波及维纳滤波等
- 【MATLAB教程案例35】指纹识别系统中图像处理环节相关理论学习和MATLAB仿真实现——图像二值化、锐化、细化、特征提取、伪特征去除等综合应用学习
- 阿里面试——机器学习案例
- 大数据与机器学习:实践方法与行业案例导读
- Spring Cloud Gateway实战案例(限流、熔断回退、跨域、统一异常处理和重试机制)
- 《Oracle性能优化与诊断案例精选》——2.5 回首向来萧瑟处,也无风雨也无晴
- 《Android 应用案例开发大全(第3版)》——第2.8节壁纸中的着色器开发
- promise数据库操作案例
- 【高项备考】整体管理,过程域、知识点、案例学习
- 微信开发学习日记(二):3个案例
- Android Studio 爬虫 之 简单实现使用 jsoup/okhttp3 爬取购物商品信息的案例demo(附有详细步骤)
- 优先队列(PriorityQueue)常用方法及简单案例
- JS学习第6天——PC端网页特效(元素偏移量offset、元素可视区client、元素滚动scroll、动画函数封装、节流阀、网页轮播图案例、mouseenter与mouseover区别)
- Vue学习第27天——路由vue-router的详解及案例练习
- 用户角色权限-数据库设计案例(转载)