Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

什麼是CSS?

這是 CSS 入門 的第一個章節,將會簡單的介紹 CSS。本文將提到一些練習,建議大家可以先建立一個文件,搭配使用。

什麼是CSS?

層疊樣式表(Cascading Style Sheets, CSS) 會描述文件裡的元素如何呈現在使用者眼前。而這些文件是由 HTML或其他標記語言所寫的。

把文件呈現給使用者,意即要將它轉換為閱覽者可用的形式。Firefox、Chrome、IE等瀏覽器就是會將文件視像化的呈現,像是如何呈現在螢幕、投影機或影印機。

舉例

  • 你現在所看到的網頁就是文件。
    網頁中的資訊通常是由標記語言(如HTML)所組織建構而成的。
  • 應用程式中的對話視窗 (modal windows)也是一種文件。
    這類文件可能由 XUL (XML User Interface Language)這種標記語言所架構而成,你可以在一些Mozilla的應用程式中看到這種例子。

在這篇入門文章中,你會看到上方寫著「 更多資訊」這樣的方格(如下) 格子的內容,是針對文中提及的東西提供更多的資訊與連結,你可以接著閱讀、點選連結,或是先跳過這些格子,之後再回頭查閱。

更多資訊

一份文件不一定一個檔案,但是你可以把一份文件存成一個檔案。

你現在所看到的文件就不只是一個檔案。當瀏覽器要呈現一個網頁時,它可能是一份含有數份檔案的文件。

文件中所包含的檔案類型有很多種,例如:

HTML 用以描述網頁內容
XML 用以儲存、傳遞及溝通訊息,定義資料架構的規則
SVG 用以描述圖片格式
XUL 用以開發Mozilla應用程式

在這份教學的Part II,你會看到更多這些標記語言的範例。

更多資訊

在正式的CSS用語中,呈現給使用者一份文件的程式稱為使用者代理(User Agent,UA)。瀏覽器就是一種。 CSS其實不只可以提供給瀏覽器或其他視覺呈現,但在這份教學的Part I ,我們只會接觸運作在瀏覽器中的CSS 。

更多關於CSS的正式用語,請見出自全球資訊網協會(World Wide Web Consortium ,W3C)的 Definitions

練習: 新增一份文件

  1. 請先在你的電腦中新增一個目錄,用來儲存接下來的練習。
  2. 打開你的文字編輯器並新增一個text file。接下來的幾個練習都會放在這個txt檔中。
  3. 複製貼上以下這段HTML 內容。把檔名命名為 doc1.html
    <!DOCTYPE html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      </head>
    
      <body>
        <p>
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>

    View above Demo

  4. 在你目前的瀏覽器開啟新分頁或新視窗,並叫出剛剛你所存的檔案。

    你應該會看到字首為粗體的以下文字:

    Cascading Style Sheets

    你從瀏覽器所看到的文字或許與範例不盡相同,原因可能出在瀏覽器的設定。在我們的練習中,一些些字型、行距、顏色...的差異是沒關係的!

接下來呢?

你的文件目前還沒用到 CSS。在下個章節你會用 CSS 裝飾你的文件。

文件標籤與貢獻者

標籤: 
 此頁面的貢獻者: iigmir, weichi
 最近更新: iigmir,