前言
最近幾天學(xué)習(xí)了前端的基礎(chǔ)知識，并在講師和小組成員的幫助下做了一個小網(wǎng)頁档址。在這里想以一個初學(xué)者的角度記錄一下我的理解以及思考盹兢。
Html基本結(jié)構(gòu)
首先要說明的是，這篇文章主要講的是CSS層疊樣式表(Cascading Style Sheets)守伸，它是一種Html元素的屬性绎秒。
所以先講一下Html的基本結(jié)構(gòu)，以及它和CSS的關(guān)系尼摹。
<!DOCTYPE html> html版本標識符
<html>
<head>
<metadata elements>
</head>
<body>
<div>
contents
</div>
</body>
</html>
上面表示了html的基本組成模塊见芹，html里面包括head和body兩個子元素。
head里面放的是對網(wǎng)頁的描述蠢涝，實際不顯示玄呛。比如link、meta和二、title和style都應(yīng)該放入head標簽徘铝。body里面放的是網(wǎng)頁實際的內(nèi)容，比如h1標題惯吕，p段落等等惕它。
可以把網(wǎng)頁設(shè)計想象成一個電子黑板報，我們在向里面添加內(nèi)容的時候需要設(shè)定內(nèi)容的格式废登，比如段落需要設(shè)置段落的位置淹魄，字體種類，字體大小钳宪，字體顏色等等揭北。這個格式的限定方法就是接下來要講的CSS層疊樣式表扳炬。
CSS層疊樣式表
1.設(shè)置方法
CSS的設(shè)置方法有四種，按優(yōu)先級的排列依次為 important>內(nèi)聯(lián)>id>class搔体。下面以給h2（二級標題）的顏色設(shè)置粉色為例來解釋一下各種設(shè)置方法恨樟。
- important：在屬性后面加important，設(shè)置強屬性疚俱。
pink-text {
color: pink !important;
}
- 內(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>
class類可以重疊使用绳泉，也就是說一個<div>塊里面可以設(shè)置多個class類，語句為 class="class1 class2 ..."姆泻，當(dāng)多個類出現(xiàn)沖突的時候零酪，以<style>里面最后一個為基準，而不是以class="class1 class2"的順序為基準拇勃。
舉個例子四苇，如下圖所示，在style里面pink排在black屬性的后面方咆，所以文字最后顯示的是pink月腋。你可以把它想象成一個后面把前面覆蓋的過程。
那如果在不改變style順序的情況下瓣赂，我要把字體的顏色改成black怎么辦榆骚。這個時候important就派上用場了，你可以在black的顏色屬性后面加一個钩述！important就可以了寨躁，有興趣的可以自己試一試~很有意思。
tips：還有一個沖突的情況：類選擇器和元素選擇器沖突牙勘，類選擇器優(yōu)先职恳。
<head>
<style>
.special {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p class="special">What color am I?</p>
</body>
這個時候字體就會是紅色的。如果要變成藍色的方面，加一個!important就好啦放钦。
2.具體樣式
- 更改字體的顏色：<h2 style="color: red;">
- 更改元素的字體大小： h1{font-size:30px}
- 設(shè)置字體樣式：h2{font-family:sans-serif}
-
引入谷歌字體：
網(wǎng)絡(luò)上有各種各樣的字體，以Google字體庫為例
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> -
字體如何優(yōu)雅降級： 當(dāng)使用外部字體的時候恭金，為了避免有時候加載失敗的情況操禀，我們最好設(shè)置一個備用默認字體。所有瀏覽器都有幾種默認字體横腿。這些通用字體包括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; 實線
border-radius: 10%; 設(shè)置圓角邊框
} -
調(diào)整元素的內(nèi)邊距：每個 HTML 元素周圍的矩形空間由三個重要的屬性來控制：
padding（內(nèi)邊距）遍搞，margin（外邊距）和border（邊框）。具體位置如下圖所示器腋，是標準的盒子模型溪猿。
.thick-green-border{
padding: 10px;
border: 10%;
margin-top: -10px;
}
可以設(shè)置成固定像素格式，也可以設(shè)置成百分比模式纫塌，大小隨父元素的變化而變化诊县。注意，margin可以設(shè)置成負值措左，margin-top設(shè)置為負值代表向上移動依痊。
-
自定義CSS變量
.penguin {
--penguin-skin: gray;
｝
.penguin-top {
background: var(--penguin-skin);
