01-CSS的引入方式

1.CSS介绍

1.1 什么是CSS

　　叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

　　CSS 将网页内容和显示样式进行分离，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

1.2 CSS的优点

  • 使数据和显示分开
  • 降低网络流量
  • 使整个网站视觉效果一致
  • 使开发效率提高了（耦合性降低，html和css分开）

2.CSS的引入方式

2.1 行内样式

在需要修饰的标签内添加style属性引入css样式

# 在需要修饰的标签内添加style属性进行修饰
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 style="color: blue">行内样式</h1>
</body>
</html>

2.2 内接样式

在head标签内添加style标签，添加css样式

# 在head标签内添加style标签，添加样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>内接样式</h1>
</body>
</html>

2.3 外接样式

2.3.1 链接式

在head标签内通过link标签引入css样式

链接式引入css目录结构

代码：

# index.html文件，在head标签内通过link标签引入css样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <h1>外接样式-链接式</h1>
</body>
</html>

# index.css文件
h1 {
    color: blue;
}

2.3.2 导入式

在head标签内添加style标签，通过@import引入css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @import "css/index.css";
    </style>
</head>
<body>
    <h1>外接样式-导入样式</h1>
</body>
</html>
posted @ 2019-03-26 14:47  niuxiang  阅读(125)  评论(0)    收藏  举报