【CSS】如何在一个页面中引入样式css

CSS（Cascading Style Sheet）又叫层叠样式表。是我们学习前端必不可少的一门语言，学习它其实就是为了学会如何去更改页面标签的样式。目前使用最广的是css3，但同样的，他是从css2演变过来的，所以我们还是要从css2开始学起。今天就先聊聊如何在html中引用css，以改变页面样式。

1.行内引用（行内式）

所谓行内式就是通过style属性在标签内部写。但是这种方法及其不推荐。因为w3c标准就是一直倡导结构和样式分离，在标签内部写会使得css和html代码交织在一起。

1css.html

<p style="font-size:20px; color:red">行内式p>

实现效果：

2.内部引用（嵌入式）

所谓内部引用就是在head标签内添加子标签style，在子标签内写css代码。当文件的css较少，或者我们自己做测试时多使用这种方式。

1css.html（head部分）

1 <style type="text/css">
2     /* 嵌入式/内嵌式 */
3      p {
4           color: aqua
5        }
6 style>

1css.html（body部分）

1 <p>内部引用p>

实现效果：

3.外部引用（外部式）

所谓外部引用就是在一个html文件写标签结构，在另一个css文件中写样式代码。然后把css文件连接到html文件中。这种方法贯彻了w3c关于结构样式分离的标准，在实际开发环境中我们往往采用这种方法。因为它维护简单，可利用性强。

1css.html（head部分）

1 <link rel="stylesheet" href="index.css">

 1css.html（body部分）

1 <div>
2     外部引用
3 div>

index.css

1 div {
2     width: 100px;
3     height:100px;
4     background-color:orange;
5 }

实现效果：

 

以上就是三种css引用的介绍和小示例，在写项目时推荐使用外部式，但我们接下来的学习基本都写的是嵌入式。对于行内式，因为有人这么写，所以我们要能够读懂它，但自己开发时要避免使用。