---

一、CSS初認識

---

1、趣調查

---

2、“裝修小能手”

前面我們研究了HTML，回顧下它是做什么的？

當我們用HTML搭建好網頁的基本骨架，下面請出我們的“裝修小能手”--CSS。

3、如何學習CSS？

Python大星前去探探路...

4、學習必備

● 充分利用谷歌瀏覽器Chrome的審查元素功能

● CSS權威網站

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

---

二、CSS的基本使用

1、基本問題

● CSS代碼寫在什么地方？

● CSS的語法規則？

2、CSS代碼的書寫位置

● 內部樣式表

書寫在style元素中，一般放在中。

有人可能會問，能放到其他元素里嗎？

答案：可以。但如果你使用內部樣式表，建議放到head元素中，利于瀏覽器的加載渲染。

>> 舉個栗子：

---

● 內聯樣式表(元素樣式表)

直接書寫在元素的全局屬性style中

---

● 外部樣式表

將樣式書寫到獨立的css文件中。

【1】理由有三：

① 解決多頁面樣式重復的問題；

② 有利于瀏覽器緩存，提高頁面響應速度；

③ 有利于代碼分離，易閱讀和維護。

【2】如何使用外部樣式表：

---

3、CSS代碼的語法

CSS語法 = 選擇器 + 聲明塊

● 選擇器(Selector)

CSS 選擇器是CSS規則的一部分，使你能應用樣式到指定元素。

① 基礎選擇器

• 標簽選擇器 elementname

---

• 類選擇器 .classname

---

• ID 選擇器 #idname

---

• 屬性選擇器 [attr=value]

---

① 關系選擇器

• 鄰近兄弟元素選擇器 A + B

選擇緊跟A元素后的B元素，用+表示，選擇相鄰的第一個兄弟元素。

---

• 兄弟元素選擇器 A ~ B

選擇A元素之后的所有兄弟元素B，作用于多個元素，用~隔開

• 直接子元素選擇器 A > B

選擇所有作為A元素的直接子元素B，對更深一層的元素不起作用，用>表示

• 后代元素選擇器 A B

選擇所有被A元素包含的B元素，中間用空格隔開，在CSS使用頻率高

---

③ 偽類選擇器

選中某些元素的某種狀態

1)link: 超鏈接未訪問時的狀態2)visited: 超鏈接訪問過后的狀態3)hover: 鼠標懸停狀態4)active：激活狀態，鼠標按下狀態愛恨法則：love hate

---

● 聲明塊

出現在大括號{}中

聲明塊中包含很多聲明(屬性)，每一個聲明(屬性)表達了某一方面的樣式。

---

總結

以上是生活随笔為你收集整理的网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。