7-8 总有个先来后到吧 - 三种链接方式的优先级
本节编程练习不计算学习进度,请电脑登录imooc.com操作

总有个先来后到吧 - 三种链接方式的优先级

有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在右边编辑器就出现了这种情况

1、使用内联式CSS设置“超酷的互联网”文字为粉色

2、然后使用嵌入式CSS来设置文字为红色

3、最后又使用外部式设置文字为蓝色(style.css文件中设置)。

但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式

但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。

其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)

但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下,什么是权值呢?在后面的小节中会讲解到。

任务

我来试试:

分别使用内联式、嵌入式和外部式CSS样式,把“超酷的互联网”文本字号进行设置,感受一下这三种方法的优先级。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>css3中三种引入样式优先级</title>
  7. <link href="style.css" rel="stylesheet" type="text/css">
  8. <style type="text/css">
  9. span {
  10. color: red;
  11. }
  12. </style>
  13. </head>
  14.  
  15. <body>
  16. <p>慕课网,<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!</p>
  17. </body>
  18. </html>
  1. span{
  2. color:blue;
  3. }
下一节