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

在 CSS 中，我們獲得一個(gè)目標(biāo)并從網(wǎng)頁(yè)中選取我們想要處理的特定元素。

CSS 是如何工作的。

CSS主要有2個(gè)部分，也就是說(shuō)；

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

CSS 的三個(gè)級(jí)別；

內(nèi)聯(lián) 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

• 對(duì)于這種情況，CSS 文件鏈接到index.html 文件。

• 在編譯 CSS 代碼時(shí)，CSS 也是基于優(yōu)先級(jí)的。在這種情況下，內(nèi)聯(lián) CSS 始終具有最高優(yōu)先級(jí)，其次是內(nèi)部 CSS，然后是外部 CSS。

CSS 選擇器

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

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

通用選擇器：使用此類選擇器時(shí)，html 文件中的所有內(nèi)容（所有 html 標(biāo)簽）都會(huì)被定位或選擇。

例如：
*{
背景顏色：灰色
}
這意味著所有網(wǎng)頁(yè)的背景顏色將為灰色

個(gè)人選擇器

• 這針對(duì)單個(gè)元素，例如，

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

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

類和 ID 選擇器

• 對(duì)于類選擇器，我們?cè)趹?yīng)用時(shí)使用點(diǎn)。然后對(duì)于 id 選擇器，我們?cè)趹?yīng)用時(shí)使用井號(hào) (#)。

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

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

• 但是對(duì)于類名，您可以多次使用同一個(gè)名稱。

子選擇器

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

我們還有其他選擇器

• 就像第 n 個(gè)子選擇器。

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

筆記：

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

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

邊距和填充。

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

注意：我們僅將FOCUS應(yīng)用于輸入標(biāo)簽。

CSS 上的位置

絕對(duì)；

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

親戚；

• 這根據(jù)當(dāng)前目標(biāo)所在的主體或框來(lái)確定目標(biāo)元素的位置，即取決于目標(biāo)的原始位置。

粘性；

• 這為目標(biāo)提供了位置，在此之后，它不會(huì)移動(dòng)到另一個(gè)位置。

已修復(fù)；

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

彈性盒

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

• 因此，flex 是單向的。 使用 flex 時(shí)，我們會(huì)彎曲父級(jí)。基于父母，孩子就會(huì)表現(xiàn)出來(lái)。

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

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

結(jié)論

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

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