内部样式是指在 HTML 页面中使用<style>
标签嵌入的样式。当 HTML 页面被加载时,这些内部样式会按照一定的顺序被加载。
具体来说,内部样式的加载顺序并不是按照它们在 HTML 页面中出现的顺序进行的。而是按照以下的原则进行的:
1. 通用样式 (如 body、p、h1 等) 优先于类样式、id 样式和属性样式。 2. 类样式优先于 id 样式。 3. 后加载的样式表优先于先加载的样式表。
可以用下面的 HTML 代码来示范这种加载顺序:
<!DOCTYPE html> <html> <head> <style> p { color: red; } #intro { color: blue; } .highlight { color: green; } body { background-color: black; } </style> <link rel="stylesheet" type="text/css" href="my-style.css"> </head> <body> <p class="highlight" id="intro">Hello world!</p> </body> </html>
根据上述的原则,<p>
标签将按照以下规则应用样式:
1. 样式表从上到下加载,因此代码块中的样式首先被加载。 2. 所有通用样式,如 body、p 和 h1 标签中定义的样式现在可以应用于页面上的所有元素。 3. 接下来,样式表中定义的类和 id 样式被加载和应用。 4. 最后,外部样式表中定义的样式被加载和应用。这意味着 my-style.css 中定义的任何样式将被应用于页面上的元素。
总结而言,对于内部样式加载顺序,需要遵循通用样式、类样式、id 样式和属性样式的先后顺序。只有理解了这些,大家才能更好地设计大家网站的样式。