看這篇之前，你應該具備一點點html的知識了。也可移步《html常用標籤學習》鏈接: https://blog.csdn.net/qq_37617413/article/details/106459876.
一、什麼是css？
1. 釋義
CSS 指層疊樣式表 (Cascading Style Sheets)，定義如何顯示 HTML 元素樣式，樣式通常存儲在樣式表中。
2. 作用
要使用CSS對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。例如，修改字體、大小、顏色、間距等
3. 語法格式
每個css屬性是由一個個鍵值對構成的，比如修改字體顏色color: red;，背景顏色：background-color:pink;
二、3種樣式表導入方式
1. 行內樣式，使用style方式導入
<h1 style="color:red;">style屬性的應用</h1>
<p style="font-size:14px;color:green;">直接在HTML標籤中設置的樣式</p>
2. 內部樣式表，在style標籤中書寫CSS代碼。style標籤寫在head標籤中。
<head>
<style type="text/css">
h1 {border:blue solid 1px;background-color: brown}
p {border:blue solid 1px;background-color: brown}
</style>
</head>
3. 外部樣式表,CSS代碼保存在擴展名爲.css的樣式表中 HTML文件引用擴展名爲.css的樣式表。相對於內部樣式表，易於維護
// html文件
<link type="text/css" rel="styleSheet" href="CSS文件路徑" />
// 樣式表文件，寫法跟內部樣式表一致
h1 {border:blue solid 1px;background-color: brown}
p {border:blue solid 1px;background-color: brown}
小結：在這三種方式裏，直接在style寫的樣式的優先級是最高的，比如同樣是設置寬度，style裏的寬度是優先應用的。
優先級：行內樣式>內部樣式表>外部樣式表
三、選擇器的使用
1. 內聯/內嵌，元素style屬性裏面直接寫樣式即可
<div style="color: #fff000;">
我是div標籤，我的樣式是通過行內方式給我的呀
</div>
運行結果如圖：
2. 元素選擇器，直接寫標籤名即可，這裏給p標籤的樣式，字體28px，顏色#333
<head>
<style>
p {
font-size: 28px;
color: #333333;
}
</style>
</head>
<p>
我是p標籤，我的樣式是通過標籤給我的呀
</p>
運行結果如圖：
3. class 常用，以“.”開頭：樣式字體加粗，字號24px
<style>
.text-styles {
font-weight: bolder;
font-size: 24px;
}
</style>
<span class="text-styles">
我是span標籤，我的樣式是class給我的呀
</span>
運行結果如圖：
4. id，以“#”開頭
<style>
p {
font-size: 28px;
color: #333333;
border: 1px solid #ddd;
padding: 8px;
}
#link-styles {
color: #2C68FF;
cursor: pointer;
}
</style>
<p>
<a id="link-styles" href="https://blog.csdn.net/qq_37617413/article/details/106459876">我是a標籤，是個鏈接，點擊我可以去學習基礎標籤</a>
</p>
運行結果:
到這兒你已經基本瞭解HTML+CSS是如何配合組合成頁面的了，通過這些基本知識，下一篇我們可以來實現一個微信公衆號網頁。