Web网页设计之css_3. css 核心基础知识2

一、在 HTML 中引入 css 样式

我们这个 css 可以写在三个地方，不同的地方有不同的写法，我们根据写的地方进行区分，也就是下面的这三个

1. 内联样式(Inline style)

内联样式呢，就是和这个标签写在一起，大概写法这样：

可以看到啊，我们使用 HTML 中标签中带的这个 style 属性，然后将样式写在这里，并且用分号相隔

2. 内部样式表(Internal style sheet)

内部样式，就是写在所需要的 HTML 页面中，随着页面是一起的

可以看到啊，这个之前我们见过，这个就是内部样式，会跟随着 HTML 一起走动

内部样式的定义，是在这个 head 中进行定义，关键词是 style ，然后给一个 type 是 text/css 这个是固定写法，记住即可

然后我们将我们所需要写的样式填充在这个 style 标签中

3. 外部样式表(External style sheet)

外部样式我们之前没有说过，这个是引入外部的 css，因为有一些 css 可以是一些页面都去使用的，但是我们每个页面写一次，到时候维护也麻烦，如果使用这种外部引入的话，这样就方便多了，相当于一次封装。来看一下如何去使用

首先先弄一个 test.css 的文件

然后我们定义一些样式

接着我们将这个 test.css 引入到旁边的 class1.html 中

引入呢，需要使用到另外一个标签，就是 link 标签，除去这个标签你之外，我们还需要使用到它里面三个主要的属性

1. rel ：规定当前文档与被链接文档之间的关系（css 的 rel 是 stylesheet）

2. type ：规定被链接文档的 MIME 类型（css 的 type 是 type/css ）

3. href ：规定被链接文档的位置

知道了这些之后，我们来引入一下

当然啊，可能有人不相信，我们这里呢再来添加一个声明，我们再来看一下

是OK的啊，说明我们引入了

二、优先级比较

上面我们知道了 HTML 加载 css 的几种方式和如何去加载，但是有没有想过如果我们同时写了一个属性，那么谁会执行谁的？

这里我们做一个实验，来验证一下

我们先来对比一下内联样式和内部样式，来看一下，HTML 会显示什么颜色

红色的哈，然后我们再对比一下外部样式和内部样式

这个外部样式的颜色是黄色，再来看看到底是啥颜色

是绿色啊，这就说明外部样式的优先级要低于内部样式

总结： 内联样式优先级 > 内部样式优先级 > 外部样式优先级

三、叠加

我们知道啊，这个 css 样式可以写很多，好比让字体变大，变一个颜色啥的，如果我们把这些写在两个地方怎么样呢？现在我们来试一下

效果如下

我们可以发现，这个颜色使用的是内部样式表中的蓝色，而大小是用的外部样式表中的 50px ，这也就说明，这个东西是可以叠加的，如果碰到重复的，按照优先级进行选择

 

就先这么多，大家多练习一下~~