标签：一起 情况 基础 code char htm 原则 属性 url
CSS的样式可以写在哪呢？其实CSS的样式插入式十分灵活的
按照插入的形势来看，可以分为三种情况
而接下来就对这三种情况进行简单的讨论
CSS样式表是可以直接把代码放在现有的标签里面去的
这种方法就称为内嵌式：
<p style='color:red;'>文字颜色为红色</p>把对应的style属性，写在p标签的开始标签中
CSS样式代码要写在style=“”双引号中，如果有多条CSS样式代码设置可以写在一起，中间用分号隔开
<p style='color:red;font-size:12px;'>文字颜色为红色</p>有个新的任务百因必有果！你的报应就是我！，我想把百因必有果，你，我这三个变成红色
要是用内嵌式的话，那可就太难了（每一个<span>标签加入style=”color:red;”语句，如果有多个span呢？）
那么嵌入式CSS样式的编写就能让我们很快的解决这个问题
嵌入式样式就是把CSS样式代码写在<style type=‘text/CSS‘></style>标签之间
统一设置span标签的样式：
<style type='text/CSS'>
span{
color:red;
}
</style>嵌入式的CSS样式必须写在<style></style>之间
并且一般情况下嵌入式CSS样式写在<head></head>之间
大家试想一下，如果我们做一个类似淘宝那样的商城网站
那么随着项目需求的增多，我们的CSS代码量也会更庞大，越发到了后期
我们上述的内联式和嵌入式CSS样式的方式肯定是不行的，那我们应该怎么办?
这个时候，我们可以使用将我们的CSS代码编写到另一个单独的文件中，以为了后期方便维护我们的代码
那么这就是外部式CSS样式
外部式CSS样式(也可称为外链式)就是把CSS代码写一个单独的外部文件中，这个CSS样式文件以”.CSS”为扩展名
在<head>内（不是在style标签内）使用<link>标签将样式文件链接到HTML文件内，如下代码：
<link rel="stylesheet" href="index.CSS" type="text/CSS"><link>标签位置一般写在<head>标签之内这么多方式，要是叠加使用，应该用谁的样式呢？？？这就是我们现在要考虑的问题
我们做个测试：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span style="color: red">百因必有果！</span>你的报应就是我！</p>
</body>
</html>span{
color: pink;
}我们发现，颜色是红色，为什么呢？因为这三种引入方式是优先级的，谁的优先级高浏览器就会显示谁的样式属性
内联式>嵌入式>外部式
重点来了！！嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面！
绿色：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>粉色：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
color: green;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>所以根本的优先级其实是就近原则！，哪个离被修饰的元素近，用哪个样式！
这也就是为什么CSS叫层叠样式表！
标签：一起 情况 基础 code char htm 原则 属性 url
原文地址：https://www.cnblogs.com/jevious/p/11504914.html
