首頁  >  文章  >  web前端  >  Odin 專案 - CSS 簡介

Odin 專案 - CSS 簡介

WBOY
WBOY原創
2024-09-08 13:00:371125瀏覽

The Odin Project -Intro to CSS

你好? ,

我是一名擁有 3 年經驗的前端開發人員。我一直想彌合我的知識差距並成為全端開發人員。我曾多次嘗試啟動奧丁項目,但未能始終如一地堅持到底。這一次,我決心堅持下去,提升自己的技術。

為了追蹤我的進度,我將發布一系列部落格文章,詳細介紹我從 Odin 計畫每個章節中學到的知識。將這些視為我的開發日記。

我會加入我學到的主題並分享我以前不知道的東西。

我從 CSS 作為 HTML 開始,以及我以前經歷過或至少我知道的所有介紹內容。

學習主題

  • 選擇器
  1. 通用選擇器
  2. 類型選擇器
  3. 類別選擇器
  4. ID 選擇器
  5. 分組選擇器
  6. 連結選擇器
  • 組合器 我確實知道如何使用組合器,但我不知道該特定術語。還有關於選擇器之間關係的定義,而不是將它們分組或連結。
  • 後代組合器

基本 CSS 屬性

  • 顏色,背景顏色
  • 排版
  1. 字型系列與通用字型系列
  • 影像高度和寬度
    因此,我在這裡學到的另一件事是,建議始終在 HTML 中指定圖像的寬度和高度屬性。這可確保瀏覽器在頁面渲染期間為圖像保留適當的空間,從而防止圖像載入時內容佈局發生意外變化。若要保持影像的原始寬高比,您可以僅變更寬度屬性並將高度設為「自動」。這將根據影像的比例自動調整高度。

  • 外部 CSS

  • 內部與內聯 CSS

我記得我的技術主管將內嵌 CSS 加入 HTML 中的一個例子。我猶豫是否要質疑他的決定,因為他是一位經驗豐富的專業人士,而我對該領域還比較陌生。

但是,我現在明白,更有效的方法是建議我們盡量減少內聯 CSS 的使用。透過將內聯樣式限制為規則運行所絕對必需的樣式,我們可以避免過度應用特異性並維護更乾淨、更易於維護的程式碼庫。

我還計劃每週發布一個播客,回顧我學到的東西。

以上是Odin 專案 - CSS 簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn