CSS Tutorial

CSS 教程

Table of content

CSS 是一種用於設計網頁或指定用標記語言（如 HTML）編寫的文件顯示方式的語言。CSS 幫助 Web 開發人員控制網頁的佈局和其他視覺方面。

什麼是 CSS？

CSS 代表**層疊樣式表 (Cascading Style Sheets)**，它是一種簡單的設計語言，旨在簡化使用 CSS 屬性使網頁更美觀的流程。CSS 指定 HTML 元素應如何在網頁上顯示。如果你將人體視為網頁，那麼 CSS 就是身體的樣式部分，例如眼睛的顏色、鼻子的尺寸、膚色等等。

誰應該學習 CSS？

本 CSS 教程專為有抱負的 Web 設計師和開發人員而設計，涵蓋從基礎到高階的內容。任何想成為 Web 開發人員的人都必須掌握 CSS 知識，有很多 CSS 框架，例如 Bootstrap、Tailwind CSS 等。但作為 Web 開發人員，必須掌握 CSS 知識。

CSS 的型別

CSS 沒有型別，它實際上指的是“我們可以用多少種方法使用 CSS？”因此，在 HTML 文件中使用 CSS 有三種方法。

  • **內聯 CSS：**內聯 CSS 直接應用於 HTML 元素，它是這三種 CSS 中優先順序最高的。這將覆蓋任何外部或內部 CSS。
  • **內部 CSS：**內部 CSS 在 HTML 的 head 部分的 **<style>** 標籤內定義，以便讓瀏覽器知道在哪裡查詢 CSS。
  • **外部 CSS：**外部 CSS 在單獨的檔案中定義，該檔案僅包含 CSS 屬性，這是在處理專案時推薦的使用 CSS 的方法。它易於維護，可以建立多個 CSS 檔案，並且可以透過在 HTML 文件中使用 HTML **<link>** 標籤匯入它們。

CSS 示例

在本例中，我們將向您展示上述在 HTML 文件中使用 CSS 的方法。

<!DOCTYPE html>
<html>

<head>
   <title>CSS Tutorial</title>
   <!-- Internal CSS -->
   <style>
       span{
           color: green;
       }
   </style>
   <!-- External CSS -->
   <link rel="stylesheet" href="/css/style.css">

</head>

<body>
   <h1><span>Tutorials</span>point</h1>
   
   <!-- Inline CSS -->
   <p style="font-weight: bold; 
             margin-top: -15px; 
             padding-left: 5px">
       Simple & Easy <span>Learning</span>
   </p>
</body>

</html>

**外部 CSS 檔案：**我們透過 **<link>** 標籤將此檔案匯入到上面的程式碼中。檔名是 **style.css**。上面的程式碼將遵循您必須在入口網站上本地建立檔案並在您的系統上試用的此檔案的樣式。

body {
     margin-left: 40%;
     margin-top: 40%;
}

使用 CSS 的理由

  • **響應式設計：**CSS 提供了媒體查詢等功能，使開發人員能夠建立響應式佈局，這些佈局可以適應不同的螢幕尺寸和裝置，從而確保一致的使用者體驗。
  • **靈活性和控制性：**CSS 提供對 HTML 元素顯示方式的精確控制，允許開發人員自定義佈局、排版、顏色和其他視覺屬性。
  • **一致性和可重用性：**開發人員可以透過在中央 CSS 檔案中定義樣式來確保整個網站的一致性。樣式可以在多個頁面中重用，從而減少冗餘並簡化更新。
  • **搜尋引擎最佳化 (SEO)：**CSS 可用於以提高搜尋引擎可見性的方式構建內容。
  • **易於維護：**集中的 CSS 檔案使維護和更新整個網站的樣式更加容易。更改可以全域性應用，確保一致性並降低不一致的風險。
  • **更快的頁面載入速度：**瀏覽器可以快取外部 CSS 檔案，從而加快後續訪問網站時的頁面載入速度。此快取機制減少了伺服器負載和頻寬消耗。

學習 CSS 的前提條件

在開始學習 CSS 之前，務必瞭解 HTML 或任何標記語言的基礎知識，並且熟悉計算機以及檔案的目錄基本操作。

如果您不熟悉 HTML 和 XHTML，那麼我們建議您首先學習我們的 **HTML** 或 **XHTML** 教程。

CSS 入門

以下列出的主題是學習從基礎到高階 CSS 中最重要的內容，完成這些主題後，您將能夠根據自己的意願設定 HTML 文件的樣式。我們強烈建議您透過修改本教程中提供的程式碼來練習 CSS。

CSS 基礎

學習任何新事物時，瞭解基礎知識非常重要。因此，在深入學習 CSS 之前，請了解 CSS 的基礎知識。

CSS 屬性

CSS 屬性和選擇器是 CSS 中的主要內容，如果沒有屬性，就無法定義任何 HTML 元素的樣式。因此，最好一次性瞭解最常用的屬性，這將幫助您使用 CSS。

您可以透過附件連結獲取完整的CSS 屬性 列表。

CSS 高階

完成以上兩部分後，您可以繼續學習本教程的高階部分，這些主題將幫助您製作實際的網站佈局。


 

關於 CSS 的常見問題

關於 CSS，有一些非常常見的疑問 (FAQ)，本節試圖簡要解答它們。

CSS 代表層疊樣式表 (Cascading Style Sheet)。

CSS 用於設定或裝飾網頁樣式，它將幫助您建立漂亮的網站。CSS 指定 HTML 元素如何在網頁上顯示。如果您將人體視為網頁，那麼 CSS 就是身體的樣式部分。

是的，有一些 CSS 框架可以用作 CSS 的替代方案。但是，在不瞭解基本 CSS 的情況下，您無法替換主要的 CSS。

CSS 的當前版本是 3.0，但 CSS 4.0 正在努力透過新的功能和增強功能來擴充套件 CSS3。

是的，CSS 無法提供最大的安全性，或者可以說其目的並非為您的網站提供那種安全性。許多瀏覽器需要針對相同功能使用不同的屬性（跨瀏覽器問題）。

列印頁面
上一頁
下一頁
廣告