【css】内部样式、外部样式和行间样式

首先我们先放置一个<div>，<div>标签没有任何实际语义，可以把它看作一个盒子、容器。

添加方式：在<head>里写一个<style>，在<style>中写入我们想要添加样式的标签名，并加上一个花括号，在花括号内设置各种属性。

我们来为刚刚创建的<div>设置一个宽度和高度为200px，颜色为橙色的内部样式。

图1-1 设置内部样式

图1-2 内部样式效果

添加方式：

第一步：新建一个文件，格式为css，把内部样式写在<style>中的内容写到新建的css文件中保存。

我们来为刚刚创建的<div>设置一个宽度和高度为300px，颜色为红色的外部样式。

图2-1 建立一个css文件

第二步：在<head>内添加<link>标签。

rel=”stylesheet”被连接文档和当前文档之间的关系。

href=””外部样式表的路径。

type=”text/css”外部样式表的类型。

图2-2 关联html与外部样式

这样外部样式就被添加到div上啦：

图2-3 外部样式效果

推荐使用外部样式，原因如下：

（1）一个css可以引入多个html使用，大大减少代码量，我们也可以看到很多网站的各个网页可能很大一部分都是相同的样式。

（2）只需要改变一个css文件样式，就可以改变多个html的样式。

添加方式：放在开始标签内加入style=“”，双引号内的内容和。

我们为div设置一个宽度和高度为100px，颜色为黄色的行间样式。

图3-1 设置行间样式

图3-2 效果图

我们可以看到三种样式都能很好地为元素添加样式，但是当它们都存在的时候，有没有优先级呢？我们把三种样式都同时添加后试一试。

1. 三种样式都存在的情况下，可以看到效果是黄色的，宽高为100px的div，说明行间样式优先。

2.我们删掉行间样式中的background-color，发现颜色采取了上面内部样式的橙色：

当把行间样式全部删掉的时候，效果就完全变成了内部样式的形式啦：

看到这里你也许会猜测，内部样式优先于外部样式，但其实当我们把<style>和<link>交换位置后，优先的就是外部样式了，div会变成红色的。

3. 总结

其实样式的选择是就近原则的，最近的是行间样式，会首先采用，而内部样式和外部样式，哪个在下，哪个近就哪个优先。

css的全称是层叠样式表，就是可以叠加样式的，可以多多体验看看。