一、感性體驗CSS
什么是CSS呢？你可能急迫的想知道答案。但是空泛的文字描述意義不大，讓我們先來一點感性體驗吧。看看這個沒有添加CSS的HTML文件：http://www.csszengarden.com/zengarden-sample.html
是一個普普通通的網頁。然而通過給這個文件添加的CSS規則，我們可以得到十分美觀的網頁：http://www.csszengarden.com/
這還不是全部，不改動HTML，只是通過添加不同的CSS規則，我們就可以得到各種不同樣式的網頁：
http://www.csszengarden.com/?cssfile=/208/208.css&page=0
好了，下面我們再來回答什么是CSS這個問題。
什么是Cascading Style Sheets（層疊樣式表）
* CSS是Cascading Style Sheets(層疊樣式表)的簡稱.
* CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執行(屬于瀏覽器解釋型語言).
* 在標準網頁設計中CSS負責網頁內容(XHTML)的表現.
* CSS文件也可以說是一個文本文件,它包含了一些CSS標記,CSS文件必須使用css為文件名后綴.
* 可以通過簡單的更改CSS文件,改變網頁的整體表現形式,可以減少我們的工作量,所以她是每一個網頁設計人員的必修課.
* CSS是由W3C的CSS工作組產生和維護的.
二、如何將樣式表加入到網頁
可以用以下三種方式將樣式表加入您的網頁。而最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。例外請參閱 !important 聲明。
鏈入外部樣式表文件 (Linking to a Style Sheet)
你可以先建立外部樣式表文件（.css），然后使用HTML的link對象。示例如下：
<head>
<title>文檔標題</title>
<link rel=stylesheet type="text/css">
</head>
而在XML中，你應該如下例所示在聲明區中加入：
<? xml-stylesheet type="text/css" ?>
定義內部樣式塊對象 (Embedding a Style Block)
你可以在你的HTML文檔的<HTML>和<BODY>標記之間插入一個<STYLE>...</STYLE>塊對象。 定義方式請參閱樣式表語法。示例如下：
<html>
<head>
<title>文檔標題</title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
請注意，這里將style對象的type屬性設置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。
內聯定義 (Inline Styles)
內聯定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。示例如下：
這一行被增加了左右的外補丁
三、網頁設計中常用的CSS屬性
文字或元素的顏色 color
背景顏色 background-color
背景圖像 background-image
字體 font-family
文字大小 font-size
列表樣式 list
鼠標樣式 cursor
邊框樣式 border
內補白 padding
外邊距 margin
等...
posted on 2008-07-28 15:57
胖胖泡泡 閱讀(137)
評論(0) 編輯 收藏