CSS外联样式_内联样式

作者: 鲁智深 分类: div+css 发布时间: 2013-10-23 01:59

style外联样式1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外联样式1</title>
    <!--
       TODO <style></style>标签 - 内嵌样式表
       TODO * 用法 - 该标签中定义CSS的内容
       TODO * 好处
       TODO   * HTML的结构与样式分离(相对于内联样式)
       TODO   * 定义的样式可以被重复使用
       TODO   * 不是针对某个指定HTML元素
       TODO * 坏处
       TODO   * CSS的内容依旧被定义在HTML页面中
   -->
    <style type="text/css">
        h1,h2 {
            color: lightsalmon;
            font-size: 84px;
        }
    </style>
</head>
<body>
<h1>这是标题一</h1>
<h2>这是标题二</h2>
</body>
</html>

style外联样式2

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外联样式表</title>
    <!-- TODO 将外部的CSS文件引入 -->
    <link rel="stylesheet" type="text/css" href="09.css">
</head>
<body>
<h1>这是标题一</h1>
<h2>这是标题二</h2>
</body>
</html>

style外联样式3导入方式

导入方式与链接方式比较相似,采用import方式导入CSS样式表,在HTML初始化时,会被导入到HTML文件中,成为文件的一部分,类似于第二种内嵌方式。

效果

1
2
3
  <style type="text/css">
  @import url(CSS文件路径地址);
  </style>

style内联样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式</title>
</head>
<body>
<!--
   TODO 内联样式 - 通过HTML的标准属性 style 实现
   TODO * style="CSS的内容"
   TODO * 问题
   TODO   * 设置的样式只针对当前HTML元素有效
   TODO   * 相同样式设定无法被重复使用
   TODO   * 并没有将结构与样式有效分离
-->
<h1 style="color: lightsalmon;font-size: 84px">这是标题一</h1>
<h2 style="color: lightsalmon;font-size: 84px">这是标题二</h2>
</body>
</html>

这些方式同时出现在同一个页面的优先级

行内的样式优先于》内嵌样式优先于》链接(外部)样式,中国有句古话“县官不如现管”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注