CSS 基礎(chǔ)知識（層疊樣式表）

在 CSS 中，我們?nèi)〉靡粋€目標(biāo)並從網(wǎng)頁中選取我們想要處理的特定元素。

CSS 是如何運(yùn)作的。

CSS主要有2個部分，也就是說；

• 選擇器
• 聲明：這又分為：屬性，然後是值。

CSS 的三個層次；

內(nèi)嵌 CSS

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`

內(nèi)部 CSS

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.

外部 CSS

• 對於這種情況，CSS 檔案會連結(jié)到index.html 檔案。

• 在編譯 CSS 程式碼時，CSS 也是基於優(yōu)先權(quán)的。在這種情況下，內(nèi)聯(lián) CSS 始終具有最高優(yōu)先級，其次是內(nèi)部 CSS，然後是外部 CSS。

CSS 選擇器

• 這些選擇器使我們能夠知道如何從 html 檔案中選擇元素。對於CSS選擇器，我們只需要知道我們想要使用的選擇器的類型，以及它對目標(biāo)元素的作用。

以下是一些常用的 CSS 選擇器。

通用選擇器：使用此類選擇器時，html 檔案中的所有內(nèi)容（所有 html 標(biāo)籤）都會被定位或選擇。

例如：
*{
背景顏色：灰色
}
這表示所有網(wǎng)頁的背景顏色將為灰色

個人選擇器

• 這針對單一元素，例如，

  相應(yīng)地定位index.html 中的所有段落。

• 如果您希望每個段落都有自己的顏色或外觀，我們可以選擇 *Class 或 Id 選擇器。

類別和 ID 選擇器

• 對於類別選擇器，我們在應(yīng)用時使用點(diǎn)。然後對於 id 選擇器，我們在應(yīng)用時使用井號 (#)。

例如；
.警告{
對齊項(xiàng)目：居中；
}

• id 名稱不應(yīng)多次應(yīng)用或使用，儘管即使這樣做，在編譯過程中我們的文件中也不會拋出錯誤。 但這將是一種糟糕的編碼實(shí)踐。

• 但是對於類別名，您可以多次使用同一個名稱。

子選擇器

• 在此選擇器中，我們定位父元素的子元素。
• 例如：nav ul{ 顯示： 柔性 }
• 這表示我們的目標(biāo)是 ul 元素，它是父元素 nav 的子元素。

我們還有其他選擇器

• 就像第 n 個子選擇器。

最常用的選擇器是類別和 id 選擇器

筆記：

• 在 CSS 中使用顏色時，最好的做法是使用標(biāo)準(zhǔn)顏色代碼（如 #4d4d4d），這與紅色或綠色等文字顏色不同。

• 這是因?yàn)?，不同的瀏覽器以不同的方式查看顏色，但如果使用顏色代碼，這就像標(biāo)準(zhǔn)的整體顏色，即使在不同的瀏覽器中也會被視為相同的顏色。

邊距和填充。

• 邊距是距外部的空間量，內(nèi)邊距是距文字內(nèi)部的空間量。 *

注意：我們只將FOCUS應(yīng)用於輸入標(biāo)籤。

CSS 上的位置

絕對;

• 這根據(jù)父網(wǎng)頁給了目標(biāo)的位置，即整個網(wǎng)頁的邊框。

親；

• 這根據(jù)目前目標(biāo)所在的主體或框來決定目標(biāo)元素的位置，即取決於目標(biāo)的原始位置。

黏性；

• 這為目標(biāo)提供了位置，在此之後，它不會移動到另一個位置。

已修復(fù)；

• 應(yīng)用此後，目標(biāo)將不會更改或修改。它將固定在這個位置，因?yàn)樗驯环峙洹?

彈性盒

當(dāng)應(yīng)用flex時，意味著目標(biāo)元素只能放置在一個水平維度上。

• 因此，flex 是單向的。 使用 flex 時，我們會彎曲父級?；陡改?，孩子就會表現(xiàn)出來。

如果我們想要動態(tài)顯示，這就是我們可以使用網(wǎng)格的地方。

• 因此網(wǎng)格是雙向的。

結(jié)論

我們使用 CSS 來修改我們的網(wǎng)頁，因?yàn)樗梢詭椭覀冚p鬆設(shè)定文字樣式。

以上是你應(yīng)該知道的 Vanilla CSS 基礎(chǔ)知識的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！