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

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

代码

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>
css案例学习之全局声明*{} 与body{}的区别

说明:

全局声明之后,h1、h2、h3的大小都变成了15px

 

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

代码

css案例学习之全局声明*{} 与body{}的区别
<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>
css案例学习之全局声明*{} 与body{}的区别

说明

body声明之后,下面继承的元素,又会改变样式,比如h1、h2、h3等等,会在此基础上,加上h1、h2、h3的样式

 

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

代码

css案例学习之全局声明*{} 与body{}的区别
<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>
css案例学习之全局声明*{} 与body{}的区别

说明

*之后,执行class,会覆盖掉*的样式,指定元素后的class会继续覆盖class下的样式




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

上一篇:重磅发布 | 380 页高德核心技术公开,速度收藏!| 1月10号云栖号夜读


下一篇:《HTML 5与CSS 3 权威指南(第3版·上册)》——第2章 HTML 5与HTML 4的区别