样式的优先级：
（内联样式表[嵌入式样式]）>（内部样式表）>（外部样式表）
经过测试动手测试发现有个（唯一的）例外 情况：当引用外部样式在内部样式表（非嵌入式样式）的后面时，外部样式会覆盖内部样式 。
测试1（插入顺序：内部样式；外部样式）
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>case</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 500px; height: 500px; background-color: black;/*黑色*/ } </style> <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 --></head><body> <div id="container"></div><!-- 结果：蓝色，覆盖--></body></html>
测试2（插入顺序：嵌入样式；外部样式）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>case</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 500px; height: 500px; } </style> </head><body> <div id="container" style="background-color: red"</div><!-- 结果：红色，没有覆盖--></body><link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 --></html>
测试3（外部样式；外部样式）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>test</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 50px; height: 50px; } </style> <link rel="stylesheet" type="text/css" href="CaseTest.css"><!-- background-color: red;--> <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- background-color: blue; --></head><body> <div id="container"></div><!-- 结果：blue--></body></html>
测试4（外部样式；嵌入样式）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>（内联样式表[嵌入式样式]）>（外部样式表）</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #container{ width: 500px; height: 500px; } </style> <link rel="stylesheet" type="text/css" href="CaseTest1.css"><!-- 蓝色 --></head><body> <div id="container" style="background-color: red"></div><!-- 结果：红色--></body></html>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
793
收藏
