1.CSS 的引入方式有哪些？
CSS 的引入方式有以下三種：
- 行內(nèi)樣式使用style屬性引入CSS樣式。
<h1 style="color:red;">行內(nèi)樣式引用</h1>
- 內(nèi)部樣式表在style標簽中書寫CSS代碼。style標簽寫在head標簽中。
<head>
<style>
.h1 {
color:red;
}
</style>
</head>
- 外部樣式表CSS代碼保存在擴展名為.css的樣式表中，HTML文件引用擴展名為.css的樣式表。
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />
2.簡述CSS選擇器的權(quán)重計算。
CSS的選擇器有三種，按權(quán)重大小來講，依次為 內(nèi)聯(lián)>id>class。
下面以給h2（二級標題）的顏色設(shè)置粉色為例來解釋一下各種設(shè)置方法。
- 內(nèi)聯(lián)樣式：直接在內(nèi)容后面添加需要的屬性（為方便以后的調(diào)試和代碼的簡潔性，最好不要采用這種方式）
<h2 style="color: pink;"></h2>
- id編號屬性：id具有唯一性，一個界面最好把特殊且唯一的部分設(shè)置成id模式，比如form表單的內(nèi)容。
#pink-text {
color: pink
}
<div id="pink-text">
<h2></h2>
</div>
- class類屬性：比較廣泛的屬性方式，描述了不同元素的相同屬性。
.pink-text {
color: pink
}
<div class="pink-text">
<h2></h2>
</div>
可以看出內(nèi)聯(lián)style的優(yōu)先級是最高的，字體最后顯示出來是style樣式。
如果此時在不改變基礎(chǔ)代碼的情況下讓字體變成紅色，怎么辦？
這個時候可以使用important樣式，設(shè)置強屬性。它的用法和使用效果如下。
#red-text {
color: red !important;
}
這個時候段落的字體就改成紅色這個強屬性了。
TIPS:除了以上的情況以外，還有以下兩種沖突：
- 同類class沖突，后來居上
class類可以重疊使用，也就是說一個<div>塊里面可以設(shè)置多個class類，語句為 class="class1 class2 ..."，當多個類出現(xiàn)沖突的時候，以<style>里面最后一個為基準，而不是以class="class1 class2"的順序為基準。
舉個例子，如下圖所示，在style里面pink排在black屬性的后面，所以文字最后顯示的是pink。你可以把它想象成一個后面把前面覆蓋的過程。
那如果在不改變style順序的情況下，我要把字體的顏色改成black怎么辦。這個時候important就派上用場了，你可以在black的顏色屬性后面加一個！important就可以了，有興趣的可以自己試一試~很有意思。
- 類選擇器和元素選擇器沖突，類選擇器優(yōu)先。
<head>
<style>
.special {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p class="special">What color am I?</p>
</body>
這個時候字體就會是紅色的。如果要變成藍色的，加一個!important就好啦。
那么權(quán)重如何計算呢：
用權(quán)重記憶口訣。從0開始，一個行內(nèi)樣式+1000，一個id+100，一個屬性選擇器/class或者偽類+10，一個元素名，或者偽元素+1.
- 相同的權(quán)重：以后面出現(xiàn)的選擇器為最后規(guī)則：
- 不同的權(quán)重，權(quán)重值高則生效
3.給一個 p 元素的文字設(shè)置文字居右。
p {
text-align: right;
}
4.鏈接 a 元素的偽類有哪些，分別代表什么狀態(tài)？
a:link 鏈接未被點擊時的狀態(tài)
a:visited 鏈接點擊過后的狀態(tài)
a:hover 鼠標移動到鏈接上時的狀態(tài)
a:active 點擊鏈接時的狀態(tài)
5.初始化列表樣式怎么設(shè)置？
ol,ul,li {
list-style:none
}
6.假設(shè)有元素設(shè)置了如下樣式，怎么用 background 簡寫？
background: center center/80% auto no-repeat url(./static/images/banner_bg.png) red
7.怎么去掉 input 元素 focus 后的藍色模糊框？
可以給他設(shè)置CSS樣式，去除模糊框
.delete-border {
outline:none;
}
8.用 border 實現(xiàn) 如圖效果，顏色不限。
<style>
.left {
display: inline-block;
width: 0px;
height: 0px;
border: 50px solid #666 transparent;
border-left-color:skyblue;
}
.top {
display: inline-block;
width: 0px;
height: 0px;
border: 50px solid #666 transparent;
border-top-color:skyblue;
}
.right {
display: inline-block;
width: 0px;
height: 0px;
border: 50px solid #666 transparent;
border-right-color:skyblue;
}
</style>
最后實現(xiàn)的效果如下：
