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

2022-04-16 09:02:01

代码

<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，如需转载请自行联系原作者

码农公寓

相关文章