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{ > 代表只有當后續(xù)元素為前元素子元素時才生效 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; （懸停前后均設置相同邊框大小，可解決出現邊框后，左側文字浮動問題動） }
補充：
-
瀏覽器強制觸發(fā)元素懸浮狀態(tài)：
打開控制臺，找到對應html代碼，styles-->：hov-->：hover
-
.topNavBar .logo .card 與 .card 區(qū)別
加上范圍，避免重名影響后續(xù)標簽.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>
