當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS基础_Day03

發布時間：2025/3/21 CSS 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS基础_Day03 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS基礎

一、給 div 元素添加背景色

background-color 屬性可以設置元素的背景顏色。

.green-background {background-color: green; }

二、元素

1.設置元素的 id

除了 class 屬性，每一個 HTML 元素都有一個 id 屬性。
使用 id 有幾個好處：你可以通過 id 選擇器來改變單個元素的樣式。
根據規范，id 屬性應是唯一的。盡管瀏覽器并非必須執行這條規范，但這是廣泛認可的最佳實踐。因此，請不要給多個元素設置相同的 id。

2.使用 id 屬性來設定元素的樣式

通過 id 屬性，你可以做一些很酷的事情。就像 class 一樣，你可以使用 CSS 來設置他們的樣式。

不過，id 不可以重復，它只能作用于一個元素上。如果一個元素同時應用了 class 和 id，且兩者設置的樣式有沖突，會優先應用 id 中所設置的樣式。

選擇 id 為 cat-photo-element 的元素，并設置它的背景顏色為綠色。可以在 style 標簽里這樣寫：

#cat-photo-element {background-color: green; }

注意在 style 標簽里，聲明 class 的時候必須在名字前插入 . 符號。同樣，在聲明 id 的時候，也必須在名字前插入 # 符號。

3.元素邊框

1.調整元素的內邊距
每個 HTML 元素所占有的矩形空間由這三個重要的屬性來控制：內邊距 padding、外邊距 margin 、邊框 border。
padding 用來控制著元素內容與 border 之間的空隙大小。

.red-box {border:20px;}

2.調整元素的外邊距
外邊距 margin 用來控制元素的邊框與其他元素之間的 border 距離。

.blue-box {margin: 20px; }

3.給元素添加負外邊距
元素的 margin（外邊距）用來控制元素 border（邊框）與其周圍元素之間的距離大小。
如果你把元素的 margin 設置為負值，元素會變得占用更多空間。

.blue-box {margin: -15px;}

4.給元素的每一側添加不同的內邊距

CSS 允許你使用 padding-top、padding-right、padding-bottom、padding-left 屬性來設置四個不同方向的 padding 值。

.blue-box {padding-top:40px;padding-left:40px;padding-bottom:20px;padding-right:20px;}

5.給元素的每一側添加不同的外邊距

CSS 允許你使用 margin-top、margin-right、margin-bottom、margin-left 屬性來設置四個不同方向的 margin 值。

.blue-box {margin-top:40px;margin-left:40px;margin-bottom:20px;margin-right:20px;}

6.使用順時針標記指定元素的內邊距

如果不想每次都要分別聲明 padding-top、padding-right、padding-bottom、padding-left 屬性，可以把它們匯總在一行里面一并聲明，像是這樣：

padding: 10px 20px 10px 20px;

這四個值按順時針排序：上、右、下、左，并且設置的效果等同于分別聲明每一個方向的內邊距。

7.使用順時針標記指定元素的外邊距

同樣，每個方向的外邊距值可以在一行里面匯總聲明，而無需分別通過 margin-top、margin-right、margin-bottom、margin-left 分別聲明，比如：

margin: 10px 20px 10px 20px;

這四個值按順時針排序：上、右、下、左，并且設置的效果等同于分別聲明每一個方向的外邊距值。

三、使用屬性選擇器來設置元素的樣式

使用 [attr=value] 屬性選擇器來修改樣式.這個選擇器使用特定的屬性值來匹配和設置元素樣式。
下面的代碼會改變所有 type 為 radio 的元素的外邊距。

[type='radio'] {margin: 20px 0px 20px 0px; }

四、理解絕對單位與相對單位

單位長度的類型可以分成 2 種：相對和絕對。
絕對單位與長度的物理單位相關。例如，in 和 mm 分別代表著英寸和毫米。絕對長度單位會接近屏幕上的實際測量值，不過不同屏幕的分辨率會存在差異，這就可能會造成誤差。
相對單位長度，比如 em 和 rem，它們的實際值會依賴其他長度的值而決定。比如 em 的大小基于元素字體的字體大小。如果使用它來設置 font-size 值，它的值會跟隨父元素的 font-size 值來改變。
*Note：*有些單位長度選項是相對視窗大小來改變值的，這種設定符合響應式網頁設計的原則。

.red-box {padding:1.5em;//相對單位}

謝謝你的堅持閱讀ovo喲，讓我們一起加油吖

總結

以上是生活随笔為你收集整理的CSS基础_Day03的全部內容，希望文章能夠幫你解決所遇到的問題。

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

css
基础