HTML为标签设置CSS的三种方法以及权值问题

内联式

内联式是直接把CSS代码写在HTML标签的开始标签中
如

这里是文字是红色的。

## 嵌入式嵌入式是把css样式代码直接写在`` 如

<style type="text/css">
span{
color:red
}
</style>

注意：嵌入式CSS样式代码必须写在<style></style>之间，且一般会写在<head></head>之间

外部式(外联式)

外联式是把css代码写到一个单独的外部文件中，然后文件名是以“.css”为扩展名，在<head>标签内用<link>标签将css样式代码文件链接到HTML文件内。

<link href="base.css" rel="stylesheet" type="text/css"/>

注意：
rel=“stylesheet” type="text/css"是固定写法不能修改

三种方法的优先级

优先级：内联式>嵌入式>外部式
注意：嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面
其实就是就近原则（离被设置元素越近优先级越高）
但是上面总结的优先级是在内联式、嵌入式、外部式样式表中css样式是在相同权值的情况下的

css样式的权值

浏览器是根据权值来判断使用哪种CSS样式的，哪种权值高就使用哪种
规则：标签的权值为1，类选择符的权值为10，ID选择的权值最高为100
例子

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：内联式其实最高的，无论嵌入式和外联式的权值多高，如果该标签有内联式的话，就采用内联式的css
例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
#id{
   color:red;
}
</style>
</head>
<body>
    <p>慕课网，<span id="sp" style="color:pink">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>
</body>


</html>

在这里插入图片描述

上面例子中，用了权值为100的id选择器，但是最终结果是字的样式是按照内联式的样式。
我的简书博客 https://www.jianshu.com/p/e07a02d222f0