黑马程序员技术交流社区

标题: css样式优先级 [打印本页]

作者: 王超举 时间: 2017-10-31 12:03
标题: css样式优先级
关于html页面引入css样式，分为行内样式，页面内样式和外部引入三种方式
这三种方式起作用的优先级并非表面看到的，行内>页面内>外部引入，而是有一个就近原则，所谓就近原则就是，哪一种样式距离要修饰的html代码近，那种方式起作用。
比如：以下案例，标题1会显示10px的大小字体蓝色，而标题2和标题3会显示demo.css中的200px大小绿色的字体。而不是100px大小黄色的字体

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

        <head>

                <meta charset="UTF-8">

                <title></title>

                

                <style>

                        h1{

                                color: yellow;

                                font-size: 100px;

                        }

                </style>

                <link rel="stylesheet" href="css/demo.css" />

        </head>

        <body>

                <h1 style="color: blue; font-size: 10px;">标题1</h1>

                <h1>标题2</h1>

                <h1>标题3</h1>

        </body>

</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2