将CSS链入HTML的三种方法和样式的优先级问题

1 内部样式

将style标签放到head标签或者body标签内。

<style>xxx</style>

2 内联样式

可以把样式直接作为一个标签的属性，写入到标签中，使用style属性。

<div width="20px" height="20px">xxx</div>

3 外部样式

有一个后缀名为.css的文件专门用来存放css代码，只需要在html代码中使用link标签将css文件引入即可。

<link rel="" type="" href=""></link>

1. 如果rel为icon，表示给页面标签页设置图标，type为image/图片格式，表示引入xxx格式的图片。修改后图片成为该网页标题旁边的小logo。

<link rel="icon" type="image/图片格式（png、jpg）" href="图片的链接和路径"></link>

2. 如果rel为stylesheet时，表示给页面引入样式表，type固定为text/css。换句话说，就是将css文件引入html文件，用以修改网页个样式。

<link rel="stylesheet" type="text/css" href="css文件的链接或路径"></link>

4 样式的优先级问题你知道吗？

首先，样式的优先级和选择器相关。

1. 第1级：属性后面添加：!important
2. 第2级：内联样式
3. 其他的任何样式都小于这两级，优先级看权重，权重越大，优先级越高
   权重如下：
   (1) * 的权重为 1
   (2) 标签选择器 的权重为 1
   (3) class选择器 的权重为 2
   (4) id选择器 的权重为 4
   (5）父子、后代、兄弟、相邻兄弟 : 看符号之间各个选择器的权重和。
   • 先看符号前边的，如果前边的相等，再比较后边。
   • 如果权重相等，最后写的谁，就实现谁。
   • 如果权重不一样，但是都是修改的一个标签，不重叠样式都能够实现。