css四种引用方式：
1. 写在对应标签内：
<body style="background-color: grey;">
<h1 style="text-align:center; color:red;"></h1>
</body>
2. 写在style标签内：
<style>
body{
background-color : grey;
}
h1{
text-align : center;
color : red;
}
</style>
3.link标签引入外部css
<link rel="stylesheet"; href="./a.css">
4.使用@import引入外部css(用于引入多个css,例html-->a-->b)
@import url(./b.css);
-
清除浮动
在子元素中添加浮动，父元素中添加clearfix类
例如：.clearfix::after{ content:''; display:block; clear:both; }<div class="bg-info clearfix"> <button type="button" class="btn btn-secondary float-left">Example Button floated left</button> <button type="button" class="btn btn-secondary float-right">Example Button floated right</button> </div> -
常见用法解析
.topNavBar > nav > ul > li > a{ > 代表只有当后续元素为前元素子元素时才生效 list-style:none; 消除列表小圆点 text-decoration:none; 取消下划线 font-weight:bold; 加粗 margin-left：17px； 外边距 padding-top: 5px; 内边距 color:inherit; 继承父标签颜色 color可以继承 font-family:'Arial Black' 字体 font-size: 24px; 字体大小 ｝ .topNavBar > nav > ul > li > a{ border-bottom : 3px solid transparent; 透明 display:block; (当li未能包裹a时，例<li> 24,22 <a>24,30 使用block可解决) } .topNavBar > nav > ul > li > a:hower{ hover代表鼠标悬停 （即当鼠标悬停在a标签时） border-bottom : 3px solid #e06567; （悬停前后均设置相同边框大小，可解决出现边框后，左侧文字浮动问题动） }
补充：
-
浏览器强制触发元素悬浮状态：
打开控制台，找到对应html代码，styles-->：hov-->：hover
-
.topNavBar .logo .card 与 .card 区别
加上范围，避免重名影响后续标签.topNavBar .logo .card{ color: #9A9DA2; } .card{ color: #9A9DA2; } -
span标签
<span>标签相连，内容无间距；若有回车，会有间距<span class='rs'>RS</span><span class='card'>card</span>
.topNavBar .logo .rs { 可通过margin属性调整间距
margin-right: 4px;
color: #e6686a;
}
<span class='rs'>RS</span>
<span class='card'>card</span>
