css案例学习之全局声明*{} 与body{}的区别
代码
<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下的样式
暂时理解到这
css案例学习之全局声明*{} 与body{}的区别的更多相关文章
- CSS全局声明*与body的区别
通常在写CSS前,为了保证兼容性及展示效果的一致,先会清除浏览器默认样式.此时有两种用法比较常用:1.*{}; 2.body{}; 之前我比较偏好于用*{},比较便于把控样式的设置.一直也没试过bo ...
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- css案例学习之继承关系
代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...
- css案例学习之并集选择器
代码 <html> <head> <title>并集选择器</title> <style type="text/css"> ...
- CSS 案例学习
1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...
- css案例学习之用thead、tbody、tfoot实现漂亮的table布局
首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- css案例学习之按钮超链接
效果 css实现 <html> <head> <title>按钮超链接</title> <style> a{ /* 统一设置所有样式 */ ...
随机推荐
- win8上安装 Pillow
1.确保正确安装pip(2.7.9默认安装) 2. pip install wheel 3.下载 pillow-*.whl 根据自己的电脑和python版本 地址 4.安装 pip install x ...
- TensorFlow 深度学习笔记 从线性分类器到深度神经网络
转载请注明作者:梦里风林 Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到Issue区讨论 官方教程地址 视频/字幕下载 L ...
- 由PhysicalFileProvider构建的物理文件系统
由PhysicalFileProvider构建的物理文件系统 ASP.NET Core应用中使用得最多的还是具体的物理文件,比如配置文件.View文件以及网页上的静态文件,物理文件系统的抽象通过Phy ...
- Oracle EBS-SQL (OM-1):查询订单发货明细.sql
select mtrh.request_number 发货单号, mmt.transaction_date 发货时间, ...
- NEC遥控信号解码（包含完整代码）
一.遥控器解码说明 1.遥控器的编码格式常见有两种,一种是NEC 格式,一种是RC5 格式.遥控器发出的信号,通过一个红外的接收头之后,信号被送到MCU 的一个中断引脚.通过MCU 来识别不同的时序, ...
- MFC 动态创建按钮
首先在对话框(模式对话框,无模式对话框)中添加一个ADD按钮,通过点击按钮产生的通告消息调用::OnBtnAdd()方法.此方法会在对话框的左上角创建一个按钮. 当然首先要在和次对话框相关联的类中添加 ...
- PDM使用问题总结
1.连接postgres生成pdm 直接连postgres数据库生成的可以生成表名,但表结构为空,不知为何,后来直接用生成数据库sql脚本后转成pdm成功.但是列注释没有了. 2.sql语句生成的pd ...
- 关于App的一些迷思以及一些动画效果开源库的推荐
http://www.open-open.com/lib/view/open1427856817396.html
- Java面试题之九
四十六.Math.round(11.5)等於多少? Math.round(-11.5)等於多少? 对于这个题,只要弄清楚Math提供的三个与取整相关的方法就OK了. 1.ceil,英文含义是天花板,该 ...
- crm使用soap创建下拉框
//C#代码 //#region OptionMetadataCollection //OptionMetadataCollection opCollection = new OptionMetada ...