你應該知道的 Vanilla CSS 基礎知識

CSS 基礎知識（層疊樣式表）

在 CSS 中，我們取得一個目標並從網頁中選取我們想要處理的特定元素。

CSS 是如何運作的。

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

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

CSS 的三個層次；

內嵌 CSS

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

內部 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 檔案會連結到index.html 檔案。

• 在編譯 CSS 程式碼時，CSS 也是基於優先權的。在這種情況下，內聯 CSS 始終具有最高優先級，其次是內部 CSS，然後是外部 CSS。

CSS 選擇器

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

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

通用選擇器：使用此類選擇器時，html 檔案中的所有內容（所有 html 標籤）都會被定位或選擇。

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

個人選擇器

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

  相應地定位index.html 中的所有段落。

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

類別和 ID 選擇器

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

例如；
.警告{
對齊項目：居中；
}

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

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

子選擇器

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

我們還有其他選擇器

• 就像第 n 個子選擇器。

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

筆記：

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

• 這是因為，不同的瀏覽器以不同的方式查看顏色，但如果使用顏色代碼，這就像標準的整體顏色，即使在不同的瀏覽器中也會被視為相同的顏色。

邊距和填充。

• 邊距是距外部的空間量，內邊距是距文字內部的空間量。 *

注意：我們只將FOCUS應用於輸入標籤。

CSS 上的位置

絕對;

• 這根據父網頁給了目標的位置，即整個網頁的邊框。

親；

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

黏性；

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

已修復；

• 應用此後，目標將不會更改或修改。它將固定在這個位置，因為它已被分配。

彈性盒

當應用flex時，意味著目標元素只能放置在一個水平維度上。

• 因此，flex 是單向的。 使用 flex 時，我們會彎曲父級。基於父母，孩子就會表現出來。

如果我們想要動態顯示，這就是我們可以使用網格的地方。

• 因此網格是雙向的。

結論

我們使用 CSS 來修改我們的網頁，因為它可以幫助我們輕鬆設定文字樣式。

以上是你應該知道的 Vanilla CSS 基礎知識的詳細內容。更多資訊請關注PHP中文網其他相關文章！