css四種引用方式：
1. 寫在對(duì)應(yīng)標(biāo)簽內(nèi)：
<body style="background-color: grey;">
<h1 style="text-align:center; color:red;"></h1>
</body>
2. 寫在style標(biāo)簽內(nèi)：
<style>
body{
background-color : grey;
}
h1{
text-align : center;
color : red;
}
</style>
3.link標(biāo)簽引入外部css
<link rel="stylesheet"; href="./a.css">
4.使用@import引入外部css(用于引入多個(gè)css,例html-->a-->b)
@import url(./b.css);
-
清除浮動(dòng)
在子元素中添加浮動(dòng)，父元素中添加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{ > 代表只有當(dāng)后續(xù)元素為前元素子元素時(shí)才生效 list-style:none; 消除列表小圓點(diǎn) text-decoration:none; 取消下劃線 font-weight:bold; 加粗 margin-left：17px； 外邊距 padding-top: 5px; 內(nèi)邊距 color:inherit; 繼承父標(biāo)簽顏色 color可以繼承 font-family:'Arial Black' 字體 font-size: 24px; 字體大小 ｝ .topNavBar > nav > ul > li > a{ border-bottom : 3px solid transparent; 透明 display:block; (當(dāng)li未能包裹a時(shí)，例<li> 24,22 <a>24,30 使用block可解決) } .topNavBar > nav > ul > li > a:hower{ hover代表鼠標(biāo)懸停 （即當(dāng)鼠標(biāo)懸停在a標(biāo)簽時(shí)） border-bottom : 3px solid #e06567; （懸停前后均設(shè)置相同邊框大小，可解決出現(xiàn)邊框后，左側(cè)文字浮動(dòng)問題動(dòng)） }
補(bǔ)充：
-
瀏覽器強(qiáng)制觸發(fā)元素懸浮狀態(tài)：
打開控制臺(tái)，找到對(duì)應(yīng)html代碼，styles-->：hov-->：hover
-
.topNavBar .logo .card 與 .card 區(qū)別
加上范圍，避免重名影響后續(xù)標(biāo)簽.topNavBar .logo .card{ color: #9A9DA2; } .card{ color: #9A9DA2; } -
span標(biāo)簽
<span>標(biāo)簽相連，內(nèi)容無間距；若有回車，會(huì)有間距<span class='rs'>RS</span><span class='card'>card</span>
.topNavBar .logo .rs { 可通過margin屬性調(diào)整間距
margin-right: 4px;
color: #e6686a;
}
<span class='rs'>RS</span>
<span class='card'>card</span>
