CSS 引入方式

[ CSSReset 清除默认样式？↓ ] CSS 引入方式主要包括外部样式、内部样式、内联（行内）样式三种。

外部样式表

～是将所有样式放在一个或多个以 .css 为后缀的外部样式表文件中，通过 link 标签将 css 文件引入到 HTML 文档中。

使用link标记，属性 rel 和 href 是必须的，type 和 media 可省略。           // 一般通过link + tab键，自动生成
    href：定义所链接的外部样式文件的URL，可以是相对路径，也可以是绝对路径；
    type：定义所链接的文档的类型，需要指定为 "text/css"，表示链接的外部文件为css样式表；
    rel：定义当前文档与被链接文档之间的关系，需要指定为“stylesheet”，表示被链接的文档是一个样式表文件；

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sheet1.css">
<title>Document</title>
</head>
<body></body>    
</html> 

body{
    background-color: red;
}

// 样式表中不能包含HTML标记语言，只能有CSS规则和<!-- CSS注释 -->

使用link标记，属性 rel 和 href 是必须的，type 和 media 可省略。 // 一般通过link + tab键，自动生成

href：定义所链接的外部样式文件的URL，可以是相对路径，也可以是绝对路径；

type：定义所链接的文档的类型，需要指定为 "text/css"，表示链接的外部文件为css样式表；

rel：定义当前文档与被链接文档之间的关系，需要指定为“stylesheet”，表示被链接的文档是一个样式表文件；

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

</html>

body{

background-color: red;

}

// 样式表中不能包含HTML标记语言，只能有CSS规则和

内部（内嵌式）样式表

使用 style 元素包含样式表，它在文档中单独出现；文档中可出现多个 style 标签，且样式规则与层叠样式规则一致。

<head>
    <style type="text/css">               // 在html5中，type="text/css"可以省略，写上也比较符合规范，都可以
        body{margin: 0;padding: 0;}
    </style>
</head>

// style标签一般位于head标签中的title标签之后，当然，也可以把它放在HTML文档的任何地方。

<head>

body{margin: 0;padding: 0;}

</style>

</head>

// style标签一般位于head标签中的title标签之后，当然，也可以把它放在HTML文档的任何地方。

通常，一个网站很多样式是公有的，一般会把公有的样式写在一个或多个文件里，然后通过外部样式表引入，便于维护；对于每个页面特有的样式，内容较少，会放入内部样式表，为了不影响页面的加载，也会放入外部样式表。

[ 导入式 - import 指令 ]

与link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。 @import指令常用于样式表需要使用另一个样式表中的样式的情况。 <style> @import './common/css/base.css'; @import './common/css/iconfont.css'; body{ background-color: red; } </style> @import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用。可以使用@import指令导入多个CSS样式表，且可以使用media来限制应用场景。 <style> @import url(sheet1.css) all; @import url(sheet2.css); </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

与link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。
唯一的区别在于命令的具体语法和位置。
@import指令常用于样式表需要使用另一个样式表中的样式的情况。

<style>
   @import './common/css/base.css';
   @import './common/css/iconfont.css';

   body{
       background-color: red;
   }
</style>

@import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用。
可以使用@import指令导入多个CSS样式表，且可以使用media来限制应用场景。

<style>
    @import url(sheet1.css) all;
    @import url(sheet2.css);
</style>

内联（行内）样式

如果只是想为单个元素指定一些样式，可以使用 HTML 的 style 属性来设置一个行间样式。

<p style="color:red;margin-left:20px"></p>

// 任何HTML标签都拥有style属性，用于设置行内样式，其书写规范同CSS样式规则。

// 任何HTML标签都拥有style属性，用于设置行内样式，其书写规范同CSS样式规则。

行间样式若存在多个 style 属性，只能识别第一个。
内嵌样式，使得 HTML 和 CSS 杂糅在一起，不利于后期的维护，所以，制作静态页面时，不建议使用；
在制作动态效果时，可能使用 JS 改变 style 属性，引入一些 CSS 样式。

CSS 引入方式

外部样式表

内部（ 内嵌式 ）样式表

内联（ 行内 ）样式

内部（内嵌式）样式表

内联（行内）样式