首先,大家来了解一下浏览器默认样式,它是默认应用于所有HTML元素的样式,如果大家不重置它的话,那么所有的HTML元素都会有浏览器的默认样式。
/* 重置浏览器默认样式 */ *{ margin: 0; padding: 0; box-sizing: border-box; }
接下来,是内部样式,它是写在HTML文件头部的样式,它的优先级比浏览器默认样式高。
<head> <style> p{ color: red; } </style> </head>
最后,是外部样式,它是写在CSS文件中的样式,也就是大家所熟知的样式表。它的优先级比内部样式更高,而且它还可以应用到多个HTML文件中。
/* 外部样式表 */ <head> <link rel="stylesheet" href="styles.css"> </head> /* styles.css */ p{ font-size: 16px; line-height: 1.5; }
在CSS层级的匹配中,选择器的优先级也很重要:
- ID选择器 > 类选择器 > 元素选择器
- 内联样式 > 内部样式 > 外部样式
- !important优先级最高,但是不建议频繁使用
在进行CSS样式的设计时,深入理解CSS层级的概念以及选择器的优先级,可以帮助大家更加精准地定位样式,并且避免样式冲突和失控的情况。