7-4三种方法的优先级 · 初识HTML+CSS

有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况 1、使用`内联式`CSS设置“超酷的互联网”文字为`粉色`。 2、然后使用`嵌入式`CSS来设置文字为`红色`。 3、最后又使用`外部式`设置文字为`蓝色`（style.css文件中设置）。但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了`粉色`。因为这三种样式是有优先级的，记住他们的优先级：`内联式 > 嵌入式 > 外部式` 但是嵌入式\>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，代码在...代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。其实总结来说，就是`--就近原则（离被设置元素越近优先级别越高）`。但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，什么是权值呢？在后面的9-2小节中会讲解到。 ### 任务分别使用内联式、嵌入式和外部式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"> span{ color:red; } </style> </head> <body> <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p> </body> </html> ``` ***** ``` span{ color:blue; } ```