HTML为标签设置CSS的三种方法以及权值问题
内联式
内联式是直接把CSS代码写在HTML标签的开始标签中
如
<p style="color:red; font-size:12px">这里是文字是红色的。</p>
嵌入式
嵌入式是把css样式代码直接写在<style type="text/css"></style>
如
<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>
[图片上传失败...(image-5dfdae-1543072596326)]
上面例子中，用了权值为100的id选择器，但是最终结果是字的样式是按照内联式的样式。
网友评论