前端 HTML5 and CSS 入門(三)

2021-09-01 04:40:44 字數 3032 閱讀 6064

div元素,也被稱作division(層)元素,是乙個盛裝其他元素的通用容器。

所以可以利用css的繼承關係把div上的css傳遞給它所有子元素。

你可以用來標記乙個div元素的開始,然後用

來標記乙個div元素的結束。

你可以用 background-color 屬性來設定乙個元素的背景顏色。

例如,如果你想把乙個元素的背景顏色設定為green,你應該把這些加到你的 style 元素中:

.green-background
除了 class屬性之外,每乙個 html 元素還可以使用 id 屬性。

使用 id 屬性有若干好處,一旦當你開始使用 jquery 的時候你會有更深的體會。

id 屬性應該是唯一的,雖然瀏覽器並不強制唯一,但基於最佳實踐,這一點是被廣泛認可的,所以請不要給乙個以上的元素設定相同的 id 屬性。

和類選擇器一樣,你也可以使用id選擇器來宣告樣式。

宣告乙個叫cat-photo-element的id選擇器 ,並設定背景色為綠色。:

#cat-photo-element
注意:在你的 style 元素內部,定義類選擇器必須新增 . 為字首,定義id選擇器必須新增 # 為字首。

你可能早已經注意到了這點,所有的 html 元素本質上是小的矩形塊,代表著某一小塊區域。

有三個影響html元素布局的重要屬性:padding(內邊距)、margin(外邊距)、border(邊框)。

元素的 padding 控制元素內容 content和元素邊框 border 之間的距離。

在這兒,我們可以看到綠方塊和紅方塊都位於黃方塊之中,但是紅方塊比綠方塊具有更大的 padding。

當你加大綠方塊的 padding, 它將擴大元素內容和元素邊框的距離。

元素的外邊距 margin 控制元素邊框 border 和元素實際所佔空間的距離。

在這兒,我們可以看到綠方塊和紅方塊都位於黃方塊之中,注意紅方塊比綠方塊具有更大的外邊距 margin,使得它看起來更小。

當你增大綠方塊的 margin 時,將會增加元素邊框和元素實際所佔空間之間的距離

元素的 margin 控制元素的 border 和元素實際所佔空間的距離。

如果你將乙個元素的 margin 設定為負值,元素將會變大。

具體可以看看紅方塊的 margin 值。

有時你想要自定義元素,使它的每乙個邊具有不同的 padding。

css 允許你使用 padding-top、padding-right、padding-bottom 和 padding-left來控制元素上右下左四個方向的 padding。

有時你想要自定義元素,使它的每乙個邊具有不同的 margin。

css 允許你使用 margin-top、margin-right、margin-bottom 和 margin-left 來控制元素上右下左四個方向的 margin。

除了分別指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 屬性外,你還可以集中起來指定它們,舉例如下:

padding: 10px 20px 10px 20px;

這四個值以順時針方式排列:頂部、右側、底部、左側,簡稱:上右下左。

讓我們再試一次,但這次是用於 margin。

除了分別指定元素的 margin-top、margin-right、margin-bottom 和 margin-left 屬性外,你還可以集中起來指定它們,舉例如下:

margin: 10px 20px 10px 20px;

這四個值以順時針方式排列:頂部、右側、底部、左側,簡稱:上右下左。

現在讓我們來乙個全新的開始,講一講 css 繼承。

每乙個 html 頁面都有乙個 body 元素。

通過將其 background-color 設定為黑色,我們可以證明 body 元素的存在。

我們可以通過將下面的**新增到我們的 style 元素來做到這一點:

body
現在我們證明了每乙個 html 頁面都有乙個 body 元素,並且其 body 元素同樣能夠應用樣式。

記住,你可以像對其他 html 元素一樣對你的 body 元素應用樣式,並且所有其他元素將繼承你的 body 元素的樣式。

有時你的 html 元素會得到相互衝突的多個樣式。

我們的 「pink-text」 class 覆蓋了 body 元素的 css 宣告!

我們剛剛證明了我們的 class 會覆蓋 body 元素的 css,那麼下乙個合乎情理的問題就是,我們怎樣才能覆蓋我們的 pink-text class 呢?

再建立乙個把元素設定為藍色的名為 blue-text 的 css class,確保它在你的 pink-text class 宣告的下面。

除了 pink-text class 之外,再把 blue-text class 應用到你的 h1 元素,讓我們來看看誰會贏。

如下例,通過用空格分隔多個 class 屬性,可對 html 元素應用多個 class 屬性:

class=「class1 class2」

注意:在 html 中這些 class 如何排序是無所謂的。

前端入門 HTML5(一)

是用來描述網頁的一種語言,是指超文字標記語言,不是程式語言是一種標記語言。head body 主體部分 h1 h6等標籤進行定義標題,分別對應字型的從大到小 p標籤定義乙個段落的文字,不在標籤內的文字要重啟一行 br 換行 class 規定元素的類名 id 規定元素唯一的id style 規定元素的...

HTML5前端開發入門之video audio標籤

1.什麼是video標籤?格式1 video 標籤的屬性 srcautoplay controls 用於告訴video標籤是否需要控制條 poster loop preload muted 靜音 width 寬度 height 高度 格式2 這個時候w3c未了解決這個問題,所以推出了第二個video...

web前端之HTML5 入門(8) 顏色

顏色由紅色 綠色 藍色混合而成。由乙個紅色 綠色和藍色 rgb 各佔兩位的十六進製制符號來定義。即紅綠藍中每種顏色的最小值是0 十六進製制 00 最大值是255 十六進製制 ff 比如顏色值 三種顏色 紅,綠,藍的組合從0到255,一共有1600萬種不同顏色 256 x 256 x 256 1600...