css案例学习之全局声明*{} 与body{}的区别

最新推荐文章于 2023-11-10 17:44:05 发布
最新推荐文章于 2023-11-10 17:44:05 发布
阅读量175 收藏 1
点赞数
原文链接：https://yq.aliyun.com/articles/338956
版权

代码

复制代码 
<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下的样式




本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/4984259.html，如需转载请自行联系原作者

weixin_33881050
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
计网之HTML网页与CSS学习设计.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
body{},和.body{}的区别
RK
12-24 1331
一个是html标签<body>; 另一个是类body,也就是.body;比如<div class="body"></div> .body{}是一个类。只有引用class="body"时才有效（如<div class="bocy">）. 而body{}则不需要引用。只要页面中有<body>这个标签就有效！ 效果是这样的 要是写成.body{} 效果就是 ...
style标签放在body前和body后的区别
喜欢前端的后端 MelodyJerry
11-15 3523
转载自：https://blog.csdn.net/qq_44721831/article/details/102528073 style标签写在body后与body前有什么区别？ 从有html标准以来到目前为止（2017年5月），标准一直是规定style元素不应出现在body元素中。（除非style处于template元素中，因为template中的内容是不直接在dom树中的。另外曾经 如果style元素出现在body元素，最终效果和style元素出现在head里是一样的。但是可能引起FOUC、重绘或.
html{} body{}用途
weixin_30907935的博客
02-07 275
1. html{background-color:white;}浏览器能看到的所有范围 ，不包括边框body{background-color:green;}与htm一样，浏览器能看到的所有访问但无像html一样包括边框,级别html>body 如: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
由html,body{height:100%}引发的对html和body的思考
热门推荐
javaloveiphone的专栏
04-08 3万+
一、html,body{height:100%}今天看到一个CSS样式：html,body{height:100%}，第一次看到，感觉挺奇怪，为什么html还需要设置height:100%呢，html不就是整个窗口吗？我是这样认为的。然后就把html去掉只剩下body的height:100%，麻烦了，页面内容消失了(页面里只有一个空div通过百分比设置height)。html代码：<body> <d
CSS里定义body{ }和定义*{ }的区别
guorun18的专栏
12-04 3528
* {  margin: 0;  padding: 0;  border: 0;  }  body {  background: #CCC;  padding-top: 20px;  text-align: center;  } * 代表所有元素  所以对*设置了属性 也就是对xhtml标签的所有元素设定了属性  而body只是一个标签  但是他是结构标签的开始 
一些平时学习 HTML、CSS 的案例.zip
01-05
一些平时学习 HTML、CSS 的案例一些平时学习 HTML、CSS 的案例 一些平时学习 HTML、CSS 的案例一些平时学习 HTML、CSS 的案例 一些平时学习 HTML、CSS 的案例一些平时学习 HTML、CSS 的案例 一些平时学习 HTML、CSS ...
pink老师htmlcss学习 - 学成在线案例
03-26
2023.3.26
CSS学习案例图片素材
最新发布
04-17
CSS学习案例图片素材
【CSS】全局声明引入自定义字体
y_coder的博客
11-10 904
在Vue.js中可以使用全局样式表来定义字体。通常，可以在项目中的主样式表中定义全局字体，然后确保该样式表在整个应用程序中被引入。这样自定义字体就会在整个Vue应用程序中全局生效了。确保测试在不同浏览器和设备上的兼容性。或者如果你的项目使用了Vue CLI，可以在。以下用vue项目为例，其他的也是类似！为你实际字体文件的路径。
Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器
小宇y的博客
08-29 529
目录前言一、CSS选择器（一）标签选择器（二）id选择器（三）类别选择器二、针对标签的选择器嵌套三、集体声明和全局声明（一）集体声明（二）全局声明结语 前言 CSS代码由选择器和一条或多条声明组成的，选择器是需要改变样式的 HTML标签，在CSS中由分号隔开每条代码为声明，且声明是以大括号{}括起来的。 之前我们阐述了CSS的基本概念，其中选择器是需要改变样式的 HTML标签，然而选择器分为三种：标签选择器、id选择器、class选择器，它们的作用都是设置CSS样式。 一、CSS选择器 （一）标签选择
css全局变量声明
m_review的博客
12-02 1244
:root css 伪类，匹配文档的根元素 ， 可以用于声明全局 css 变量 CSS/CSS3 原生变量 var :root { --PC: @primary-color; } body { color: var(--PC); } 注意：作用域问题
【转载】html和body
陌笙以笙箫
02-28 509
by zhangxinxu from http://www.zhangxinxu.com转载地址：http://www.zhangxinxu.com/wordpress/?p=259关于html与body的一些表现1.背景色一般情况下，我们css控制的最高节点就是body，例如设置：body{background:#069;}则浏览器界面就是完全的#068的背景色。这里看上去是&lt;body&g...
关于html,body{height:100%}的理解
suandfei的博客
10-27 4752
有时候你看到别人写css代码的时候会发现:html,body{height:100%} 首先我们先看下w3c 对于height的定义 : 首先这个height:可能为百分数 就是相当于包含块的高度,如果为1个div没有设置宽度和高度呢. 不可否认的是,div会继承父元素的宽度100%,但是高度不会.如果div里面有文字就是内容撑开高度. 我们现在考虑的是div里面没有文字. <!DOCTY...
html5页面声明正确,HTML5之全局属性 （声明：内容节选自《HTML 5从入门到精通》）...
weixin_31002379的博客
06-04 154
contentEditable————————————————————————————————————————————————————————功能：允许用户编辑元素中的内容。功能说明：该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。注意：contentEditable是一个布尔类型属性，因此可以将其设置为true或false。说明：该...
CSS基础
weixin_33905756的博客
10-22 140
概念：CSS层叠样式表，也称级联样式表；包含一个或多个规则的文本文件 作用：进行网页风格设计 特点： 1.是页面字体变得更漂亮，更容易编排 2.可以轻松控制页面布局 3.可以在大多数浏览器上使用 4.以前一些必须通过图像转换才能实现的功能，现在只要用CSS就可以轻松实现，页面下载更快 5.可以使用一个CSS文件控制整个网站的显示风格。只要修改CSS文件中相应的行，就可以改变整个网站上...
06、CSS基础笔记01-----全局声明以及嵌套声明
篱笆的专栏
05-30 922
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;
纯css定义样式变量，可全局使用
weixin_53474595的博客
12-09 1365
使用 CSS 变量会是更好的选择，有利于后期更改，精简代码，减少冗余，代码更直观，有利于响应式开发借助结构性伪类中的 :root{ } 中，在全局 :root{ } 中定义了一个 CSS 变量，命名为 --xxxx，名字前面一定要注意符号（--）
html 和 body 的区别
圣诞老人村的来信
08-30 4939
注意html和body的一些区别
js html css案例
12-25
整个案例的编写过程中，我遇到了一些挑战，比如在CSS中如何实现页面的响应式布局，以及在JavaScript中如何实现页面元素的动态交互效果等。但是，通过不断的学习和摸索，我最终成功地完成了整个案例，并且取得了不错...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值