蒐集各種自由工作難題的系統思考思維模型,經驗萃取成即戰力的企劃、具體錦囊與實用攻略
探索 CSS:你的第一步走向網頁前端工程師
探索 CSS:你的第一步走向網頁前端工程師

探索 CSS:你的第一步走向網頁前端工程師

CSS(Cascading Style Sheets)是一種樣式表語言,用於描述 HTML 或 XML(包括如 SVG、XHTML 等語言)文件的呈現方式。CSS 是 Web 標準的一部分,由 W3C(World Wide Web Consortium)來維護。

以下是幾種常見的 CSS 規則格式:

  1. 選擇器和宣告塊 CSS 的基本構成部分包括選擇器(Selector)和宣告塊(Declaration Block)。選擇器用於選擇你想要樣式化的 HTML 元素,宣告塊包含一或多個宣告,每個宣告包含一個 CSS 屬性名和一個值,由冒號分隔,每個宣告以分號結尾。
   h1 { color: red; font-size: 20px; }
  1. 類選擇器和ID選擇器 類選擇器(.className)用於選擇具有特定類別屬性的元素,ID選擇器(#idName)用於選擇具有特定 ID 屬性的元素。
   .myClass { color: blue; }
   #myID { color: green; }
  1. 群組選擇器 當你想為多個選擇器設定相同的樣式時,可以使用群組選擇器,選擇器之間用逗號分隔。
   h1, h2, h3 { color: purple; }
  1. 組合選擇器 當你想選擇特定的 HTML 元素或特定情況下的元素,可以使用組合選擇器,例如子元素選擇器(child selector)、後代選擇器(descendant selector)、鄰接兄弟選擇器(adjacent sibling selector)和一般兄弟選擇器(general sibling selector)。
   /* 子元素選擇器 */
   div > p { color: orange; }

   /* 後代選擇器 */
   div p { color: orange; }

   /* 鄰接兄弟選擇器 */
   h1 + p { color: yellow; }

   /* 一般兄弟選擇器 */
   h1 ~ p { color: yellow; }
  1. 偽類和偽元素 偽類(Pseudo-classes)和偽元素(Pseudo-elements)用於選擇HTML元素的特定狀態或部分。
   /* 偽類 */
   a:hover { color: pink; }

   /* 偽元素 */
   p::first-line { color: brown; }
  1. 屬性選擇器 屬性選擇器用於選擇具有特定屬性或屬性值的元素。
   input[type="text"] { color: grey; }
  1. @規則 有些 CSS 規則是以 @ 開頭的,例如 @media、@import、@keyframes、@font-face 等。
   @media (max-width: 600px) {
     body { font-size: 18px; }
   }

以上是 CSS 的一些基本格式,但實際上 CSS 的內容和特性更加豐富,包括變數、計算功能、過渡、變形、動畫、排版、彈性盒子(Flexbox)、網格佈局(Grid)等等,都是 CSS 的重要部分。