前言
最近幾天學(xué)習(xí)了前端的基礎(chǔ)知識(shí)，并在講師和小組成員的幫助下做了一個(gè)小網(wǎng)頁(yè)。在這里想以一個(gè)初學(xué)者的角度記錄一下我的理解以及思考。
Html基本結(jié)構(gòu)
首先要說(shuō)明的是，這篇文章主要講的是CSS層疊樣式表(Cascading Style Sheets)，它是一種Html元素的屬性。
所以先講一下Html的基本結(jié)構(gòu)，以及它和CSS的關(guān)系。
<!DOCTYPE html> html版本標(biāo)識(shí)符
<html>
<head>
<metadata elements>
</head>
<body>
<div>
contents
</div>
</body>
</html>
上面表示了html的基本組成模塊，html里面包括head和body兩個(gè)子元素。
head里面放的是對(duì)網(wǎng)頁(yè)的描述，實(shí)際不顯示。比如link、meta、title和style都應(yīng)該放入head標(biāo)簽。body里面放的是網(wǎng)頁(yè)實(shí)際的內(nèi)容，比如h1標(biāo)題，p段落等等。
可以把網(wǎng)頁(yè)設(shè)計(jì)想象成一個(gè)電子黑板報(bào)，我們?cè)谙蚶锩嫣砑觾?nèi)容的時(shí)候需要設(shè)定內(nèi)容的格式，比如段落需要設(shè)置段落的位置，字體種類，字體大小，字體顏色等等。這個(gè)格式的限定方法就是接下來(lái)要講的CSS層疊樣式表。
CSS層疊樣式表
1.設(shè)置方法
CSS的設(shè)置方法有四種，按優(yōu)先級(jí)的排列依次為 important>內(nèi)聯(lián)>id>class。下面以給h2（二級(jí)標(biāo)題）的顏色設(shè)置粉色為例來(lái)解釋一下各種設(shè)置方法。
- important：在屬性后面加important，設(shè)置強(qiáng)屬性。
pink-text {
color: pink !important;
}
- 內(nèi)聯(lián)樣式：直接在內(nèi)容后面添加需要的屬性（為方便以后的調(diào)試和代碼的簡(jiǎn)潔性，最好不要采用這種方式）
<h2 style="color: pink;"></h2>
- id編號(hào)屬性：id具有唯一性，一個(gè)界面最好把特殊且唯一的部分設(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>
class類可以重疊使用，也就是說(shuō)一個(gè)<div>塊里面可以設(shè)置多個(gè)class類，語(yǔ)句為 class="class1 class2 ..."，當(dāng)多個(gè)類出現(xiàn)沖突的時(shí)候，以<style>里面最后一個(gè)為基準(zhǔn)，而不是以class="class1 class2"的順序?yàn)榛鶞?zhǔn)。
舉個(gè)例子，如下圖所示，在style里面pink排在black屬性的后面，所以文字最后顯示的是pink。你可以把它想象成一個(gè)后面把前面覆蓋的過(guò)程。
那如果在不改變style順序的情況下，我要把字體的顏色改成black怎么辦。這個(gè)時(shí)候important就派上用場(chǎng)了，你可以在black的顏色屬性后面加一個(gè)！important就可以了，有興趣的可以自己試一試~很有意思。
tips：還有一個(gè)沖突的情況：類選擇器和元素選擇器沖突，類選擇器優(yōu)先。
<head>
<style>
.special {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p class="special">What color am I?</p>
</body>
這個(gè)時(shí)候字體就會(huì)是紅色的。如果要變成藍(lán)色的，加一個(gè)!important就好啦。
2.具體樣式
- 更改字體的顏色：<h2 style="color: red;">
- 更改元素的字體大小： h1{font-size:30px}
- 設(shè)置字體樣式：h2{font-family:sans-serif}
-
引入谷歌字體：
網(wǎng)絡(luò)上有各種各樣的字體，以Google字體庫(kù)為例
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> -
字體如何優(yōu)雅降級(jí)： 當(dāng)使用外部字體的時(shí)候，為了避免有時(shí)候加載失敗的情況，我們最好設(shè)置一個(gè)備用默認(rèn)字體。所有瀏覽器都有幾種默認(rèn)字體。這些通用字體包括monospace，serif和sans-serif。
h2 {font-family: Lobster,monospace;} -
在元素周圍添加邊框： CSS 邊框具
style，color和width屬性。
.thick-green-border{
border-color:green;
border-width:10px;
border-style:solid; 實(shí)線
border-radius: 10%; 設(shè)置圓角邊框
} -
調(diào)整元素的內(nèi)邊距：每個(gè) HTML 元素周圍的矩形空間由三個(gè)重要的屬性來(lái)控制：
padding（內(nèi)邊距），margin（外邊距）和border（邊框）。具體位置如下圖所示，是標(biāo)準(zhǔn)的盒子模型。
.thick-green-border{
padding: 10px;
border: 10%;
margin-top: -10px;
}
可以設(shè)置成固定像素格式，也可以設(shè)置成百分比模式，大小隨父元素的變化而變化。注意，margin可以設(shè)置成負(fù)值，margin-top設(shè)置為負(fù)值代表向上移動(dòng)。
-
自定義CSS變量
.penguin {
--penguin-skin: gray;
｝
.penguin-top {
background: var(--penguin-skin);
更多CSS樣式請(qǐng)參考https://www.w3school.com.cn/css/index.asp
