/***************************************css注意事项*******************************************/
浏览器优先级：设计者设计样式>浏览器用户自定义样式>浏览器自设定样式
html代码中：行内样式>内部样式>外部引用样式
/************************************************************************************************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css练习</title>
???<!-- 直接link加enter则会少type属性 -->
???<link rel="stylesheet" type="text/css" href="css.css">
???<!-- 在css和mycss中，都是设置背景色，但是引用顺序不同，会导致显示的效果不同 -->
???<link rel="stylesheet" type="text/css" href="mycss.css">
???<!-- 虽然颜色显示mycss中的色彩，覆盖css的背景色，但是在css中，设置header的字体大小则会显示，这是css的样式层叠效果 -->
???<style type="text/css">
???????footer{
???????????background: rgb(30, 179, 179);
???????}
???</style>
</head>
<body>
???<!-- 内联样式优先级最高，虽然在mycss中设置header的背景色为 rgb(64, 157, 185); -->
???<header style="background:#c869d1">
???????头部样式背景
???</header>
???<!-- 正常显示mycss中的背景样式，但由于上面定义内部样式style，则显示style中的rgb(30, 179, 179); -->
???<!-- 若外部引用link中的css放在<style>内部样式的下面，则还是显示mycss中的背景色 -->
???<footer>
???????底部样式背景
???</footer>
???<!--****************************** 最后总结***************************** -->
???<!-- 1、不论显示那种样式，在样式显示中，主要是显示离内容最近的样式，一层层覆盖(就近原则) -->
???<!-- 2、！important优先级最高，设置在外部引用css样式中，还是内部style中，加上!important，优先级超过内联样式-->
???<!-- *************************************************************************** -->
</body>
</html>
/*******************************************新建文件css.css*******************************************************/
<--@charset "UTF-8";定义css的字符类型，若写则一定要在结尾处加上“；”否则会导致语法错误 ，也可不写，选择默认-->
@charset "UTF-8";
header{
background: red;
font-size: 30px;
}
footer{
background: blue;
}
/**********************************************************************************************************************/
/*********************************************新建文件mycss.css***************************************************/
@charset "UTF-8";
header{
background: rgb(64, 157, 185);
}
footer{
background: rgb(162, 162, 233);
}
/***********************************************************************************************************************/
css引用优先级
原文地址：https://www.cnblogs.com/lxli/p/8428093.html