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

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

内联式

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

这里是文字是红色的。

嵌入式

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

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

外部式(外联式)

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

注意：
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
例子

    
慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！

[图片上传失败...(image-5dfdae-1543072596326)]

上面例子中，用了权值为100的id选择器，但是最终结果是字的样式是按照内联式的样式。