目錄

?編輯一、基本語法規(guī)范

二、CSS 選擇器

1、簡單選擇器?

（1）標簽選擇器

（2）類選擇器

（3）ID 選擇器

2、復合選擇器

（1）后代選擇器

（2）子選擇器

（3）并集選擇器

三、CSS常用屬性值

1、設置字體家族

2、設置字體大小

3、設置字體的粗細

4、文字傾斜設置

5、文字顏色

6、文本對齊

7、文本裝飾

8、文本縮進

9、行高

?10、背景顏色

11、背景圖片

四、圓角矩形

?五、元素的顯示模式

六、CSS 的盒子模型

邊框

內邊距

外邊距

七、彈性布局

一、基本語法規(guī)范

CSS 基本語法規(guī)則：選擇器 + 若干屬性聲明

選擇器：先選中一個元素，再針對元素進行操作

{ } 里面的 CSS 屬性，是可以寫一個或者多個的，每個屬性都是一個鍵值對，鍵和值之間使用 ： 分割，鍵值對之間使用 ； 分割，每個鍵值對可以獨占一行，也可以不獨占

實際上，有三種寫 CSS 的方式

1、內部樣式：使用 style 標簽，直接把 CSS 寫到 html 文件中

此時的 style 標簽可以放到任何位置，一般建議放到 head 標簽里面

2、內聯樣式：使用 style 屬性，針對指定的元素屬性設置樣式

此時不需要寫選擇器，直接寫屬性鍵值對，這個時候樣式只是針對當前元素生效

?3、外部樣式：把 CSS 代碼單獨作為一個? .css 文件，再通過 link 屬性，讓 html 引入該 CSS 文件

實際開發(fā)中，一般都是使用外部樣式來寫 CSS ，這樣就可以讓 html 和 CSS 分離開，相互不影響

二、CSS 選擇器

1、簡單選擇器?

（1）標簽選擇器

直接在 { 前面寫標簽名字

意味著會選中當前頁面中的所有指定標簽

（2）類選擇器

相比標簽選擇器，是一個更好的選擇

可以創(chuàng)建 CSS 類，手動指定創(chuàng)建哪個元素

此處所說的類，和 Java 中面向對象的類無關

CSS 所謂的類，就是把一組 CSS 屬性起了個名字，方便別的地方引用

定義類，需要使用 . 開頭

引用這個類的時候，通過class 屬性 = “類名”? 即可，不需要帶 .

一個類，可以被一個元素引用，也可以被多個元素引用

一個元素，可以引用一個類，也可以引用多個類

理解 “層疊”：

CSS 中文名：層疊樣式表

一個元素，是可以被應用多組樣式的，這些樣式就好像一層一層的疊加上去的

（3）ID 選擇器

html 頁面中的每個元素，都是可以設置成唯一的一個 id ，作為元素的身份標識

給元素安排了 id 之后，就可以通過 id 來選中

類選擇器，是可以讓多個元素應用同一個類的

但是 id 選擇器，只能針對唯一的元素生效，因為一個頁面里面，只能有唯一的id?

2、復合選擇器

上述三個選擇器，都是簡單的額基礎選擇器，除此之外，CSS 還支持一些更復雜的 “復合選擇器”

（1）后代選擇器

把多個簡單的基礎選擇器組合一下（可以是 標簽，類，id 選擇器的任意組合）

含義就是：先找頁面中所有的 ul ，然后到這些 ul 里面找到所有的 li 選擇?

注意： li 只要是 ul 的后代即可，不一定非得是 子元素（孫子元素也能找到）

（2）子選擇器

也是把多個簡單的基礎選擇器組合（標簽，類，id 選擇器的任意組合）

只是找匹配的子元素，不找孫子元素之類的

（3）并集選擇器

?多組選擇器應用了同樣的樣式

（4）偽類選擇器（符合選擇器的特殊用法）

前面的選擇器是選中某個元素，偽類選擇器是選中某個元素的某個特定狀態(tài)

?: hover 鼠標懸停時候的狀態(tài)

：active 鼠標按下時候的狀態(tài)

三、CSS常用屬性值

1、設置字體家族

font -family 當前使用哪種字體來顯示

這個屬性指定的字體，必須要是系統(tǒng)已經安裝了的

如果你要指定一些特殊的字體，系統(tǒng)上沒有，則不能正確顯示

這種情況一般是需要通過瀏覽器，請求到對應的服務器，獲取到指定的字體文件，才能設置

2、設置字體大小

font-size，以 px 為單位調整字體的大小

瀏覽器的每個文件，可以視為一個方框

如果是英文阿拉伯數字，方框比較窄，如果是中文，一般就是一個正方形

如果我們用 qq 截圖，可能發(fā)現實際的尺寸，不一定是你設置的大小

如果不一樣，就要注意你瀏覽器的縮放設置和顯示器的縮放設置

3、設置字體的粗細

font - weight 設置字體的粗細

實際設置值的時候，有兩種典型的設置風格：

1、使用單詞進行設置

??2、使用數字進行設置

?此時，就可以把 div 設置成 h1 類似了，也可以把 h1 設置成和 div 類似

4、文字傾斜設置

italic ，使文字傾斜

5、文字顏色

color?

計算機時如何表示顏色的？

顏色就是不同波長（頻率）的光

日常看到的很多光，都是混合成的（紅綠藍三原色等比例混合）

計算機表示顏色，一種典型方式RGB 的表示方式

前端中，給 RGB 各分配一個字節(jié)，每個字節(jié)的范圍是 0 - 255/00-FF（計算機的典型表示）

通過這三個分量不同比例的搭配，就可以調和出不同的顏色

6、文本對齊

text - align 屬性來設置對齊

7、文本裝飾

?text - decoration?

8、文本縮進

每個段落，首行縮進，使用 text- indent

?px 相當于是一個絕對的單位

em 是一個相對的量，是以文字尺寸為基礎來設置的

假設文字的大小為 40px ，那么 2em = 80 px

文本縮進的值，可以是負數（往左縮進）

9、行高

行高 = 文字高度 + 行間距

?10、背景顏色

background - color

11、背景圖片

background -image:url(圖片路徑)

當我們引入背景圖片之后，默認情況下，是平鋪的

如果不想要平鋪，使用?background-repeat

?禁止平鋪之后，圖片出現在左上角，如果想要圖片居中，還需要另外一個屬性：

?還可以使用這個屬性來設置背景的大?。?img src="https://imgs.yssmx.com/Uploads/2023/08/672674-25.png" alt="CSS基礎知識點,前端,css,前端,css3,html5" referrerpolicy="no-referrer" />

在 background 系列屬性的加持下，div （任何一個元素）都可以用來顯示圖片，而且提供的功能比? img 標簽更加強大

四、圓角矩形

html 元素默認都是一個個的矩形，有的時候需要表示 “帶有圓角” 的矩形

?五、元素的顯示模式

display：block? 塊級元素、

display：inline? 行內元素

任何一個 html 標簽， 是塊級還是行內，都是可以設置的

關于塊級元素和行內元素的區(qū)別：

1、塊級元素會獨占一行，行內元素不獨占

2、塊級元素尺寸，高度，寬度，都是可以設置的；而行內元素 高度，寬度，行高無效，內邊距有效，外邊距有時候有效，有時候無效

3、塊級元素默認寬度是和父元素一樣寬，行內元素默認寬度是和里面的內容一樣寬

塊級元素比較正常，行內元素的幺蛾子比較多，一般如果需要的話，都是把行內元素轉換成塊級元素

六、CSS 的盒子模型

描述了 html 元素基本的布局規(guī)則

?任何一個 html 元素，都是一個矩形的盒子，盒子里面可以放內容（可以是文本，其它元素）

?content ：內容

padding ：內邊距

border ： 邊框

margin ：外邊距

邊框

邊框：使用 border 屬性進行設置，直接設置了四個方向

還可以使用 border - left 等分別設置四個方向

設置邊框，要設置三個方面：

1、邊框的粗細

2、邊框的顏色

3、邊框的風格（實線，虛線，其他的線....）

邊框默認情況下，會撐大盒子，width 和 height 表示的是內容部分的尺寸

很多時候，不希望撐大盒子，可能會影響其它元素的相對位置，還可以使用專門的屬性防止盒子被撐大

設置了該屬性，邊框就不再撐大盒子了

內邊距

?

外邊距

設置的是元素和元素之間的距離

margin 的寫法和 padding 差不多，也可以是分四個方向來設置

margin 的特殊用法：把 margin - left 和 margin - right 設置為? auto??（讓瀏覽器自動調節(jié)），此時 該元素就能夠在父元素內部居中放置

七、彈性布局

用來實現頁面布局的，控制某個元素放到指定位置上

行內元素雖然是在水平方向上排列的，但是不適合進行水平布局

因為尺寸和邊距都不太可控

使用彈性布局是更合適的

1、開啟彈性

給要水平排列的元素的父元素，設置 flex?

此時，彈性容器里面的元素，則不再是 “塊級” 行內元素，而是成為了“彈性元素”，是遵守彈性布局的，可以設置尺寸和邊距了

2、設置這些元素的水平方向的排列方式

3、設置元素垂直方向的排列方式

align - items?

文章來源地址http://www.zghlxwxcb.cn/news/detail-672674.html

到了這里，關于CSS基礎知識點的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！