黑马程序员技术交流社区

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

作者: hksahsfh 时间: 2019-9-12 15:58
标题: css样式优先级
关于html页面引入css样式，分为行内样式，页面内样式和外部引入三种方式
这三种方式起作用的优先级并非表面看到的，行内>页面内>外部引入，而是有一个就近原则，所谓就近原则就是，哪一种样式距离要修饰的html代码近，那种方式起作用。
比如：以下案例，标题1会显示10px的大小字体蓝色，而标题2和标题3会显示demo.css中的200px大小绿色的字体。而不是100px大小黄色的字体
[HTML] 纯文本查看复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!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