页面使用CSS的方式主要有三种：
- 分别是行内书写（行内添加定义style属性值）；
- 内部书写（页面当中使用标签调用样式）；
- 外部引入（通过外部链接，引入CSS文件）。
行内书写——最简单的样式操作
- 基本语法
<标签名 style = "具体样式属性：属性值">content</标签名> - 代码示例
<div style="boder:1px solid red">1</div> <div style="boder:1px solid red">1</div> <div style="boder:1px solid red">1</div> <div style="boder:1px solid red">1</div> <div style="boder:1px solid red">1</div> <div style="boder:1px solid red">1</div>
内部书写
- 由于上面的行内书写，产生了大量的重复，一旦修改也很麻烦，所以..
<head> <style> div{ border:1px solid black; } </style> </head> <body> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </body>- 将CSS属性、属性值放在了一个标签当中，这种方式叫内部书写。
- 在里面div当选择器，能找到body中的所有div元素，大括号{}包含具体的样式，应用到选择器选择到的所有标签；
外部引入
-
当一个网站中有，有10个相同的HTML页面，必然会有相同的头部、底部、导航区、某些模块等。
-
如果一次性控制这些不同的HTML文件，内部书写就无法实现这个需求了；
-
引入原理：
- 外部引入是将CSS代码书写在一个CSS文件里，然后通过link标签，使用正确的路径，将这个CSS文件引入到HTML文件当中。
- link标签，href定义外部样式（CSS）文件的地址，该属性值可以使用URL地址，也可以使用相对路径和绝对路径；rel是文件类型；
- 字符编码，外部引入的CSS文件，需要进行字符编码的设置：
@chaeset"UTF-8"- 代码示例
<html> <head> <link rel="stylesheet" href="css/index.css"> </head> <body> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> </body> </html>- CSS文件代码如下
@charset 'UTF-8'; div{ border:1px solid black; }外部引入CSS的扩展知识
- @import的基本语法 除了上面的link标签能够引入外部CSS文件之外，还可以使用@import。
<style type="text/css"> @import url("CSS文件")； </style>
