1.内联(Inline)方式
内联(Inline)方式，又称为行内方式。往往用于单个元素。
<!DOCTYPE html>
<html lang="en">
<body>
<p style="color:red;">This is a paragraph</p>
</body>
</html>2.内部(Internal)方式
往往用于单个网页。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
color: orange;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>3.外部(External)方式
往往用于所有网页。
//目录结构
demo/
index.html
mystyle.css//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>//mystyle.css
p {
color: blue;
}4.优先级
当同时存在多种使用 CSS 的方式时，如果为相同的选择器(元素)定义了相同的 CSS 属性名，则优先级如下：
内联方式优先级最高。
其次，内部方式和外部方式的优先级取决于它们放置在 <head> 元素中的前后顺序，后面的永远覆盖前面的。情形如下：
- 后面的内部方式优先级 > 前面的内部方式。
- 后面的内部方式优先级 > 前面的外部方式。
- 后面的外部方式优先级 > 前面的外部方式。
- 后面的外部方式优先级 > 前面的内部方式。
最后，浏览器默认的优先级最低。
原创文章，作者：huoxiaoqiang，如若转载，请注明出处：https://www.huoxiaoqiang.com/experience/javascriptexp/31815.html
微信扫一扫 
支付宝扫一扫