Go to Previous Section:
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 。
練習: 新增一份文件
- 請先在你的電腦中新增一個目錄,用來儲存接下來的練習。
- 打開你的文字編輯器並新增一個text file。接下來的幾個練習都會放在這個txt檔中。
- 複製貼上以下這段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>
- 在你目前的瀏覽器開啟新分頁或新視窗,並叫出剛剛你所存的檔案。
你應該會看到字首為粗體的以下文字:
Cascading Style Sheets 你從瀏覽器所看到的文字或許與範例不盡相同,原因可能出在瀏覽器的設定。在我們的練習中,一些些字型、行距、顏色...的差異是沒關係的!
接下來呢?
Go to Next Section:
為什麼要用CSS?你的文件目前還沒用到 CSS。在下個章節你會用 CSS 裝飾你的文件。