今天來說明 CSS 樣式表的說明！

樣式表就像是HTML的外套，可以設定在HTML 裡的各標籤的各式樣式，包括顏色、大小、位置 ...等等

一般而言，CSS可以寫在HTML 裡面，也可寫在外掛的檔裡面；

如果要寫在html裡面，就在<head> </head> 裡面加入 css樣式表，如以下表示

<style type="text/css">
p {
    color:blue;
    width:50px;
}
</style>

 如果要掛在外面，就在<head> </head>，加入以下表示

<link href="index.css" rel="stylesheet" type="text/css">

 href：後方是表示路徑及檔名。

 index.css：表示讀取的檔名，index是可以自訂命名。

 後方就照著上述編寫即可

 那我就寫一個簡單的html 程式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body>
 <p> 魚與橙結合</p>
</body>
</html>

 我比較喜歡外掛檔案的方式，雖然好像聽說內掛比較快，但是外掛可以在編寫程式的時候，可以讓html裡面比較乾淨。

 再來說明在裡面定義 標籤 p(段落) 的顏色及宽度，則以下圖表示

css表示圖   

p 是選擇器，此例表示我在這裡定p 的樣式

我宣告 p 的屬性 color (顏色)為藍色， p的屬性 width(寛度)為50寛，宣告後，網頁程式就會以你宣告的方式顯示

執行後，就會以下表示。

2012-07-02_153628  

 

網頁就依你設定的方式表示！ 

當然，這個只是基本設定方式來設定，對於設計漂亮網頁的目標，還有很長一段路！

arrow
arrow
    文章標籤
    網頁設計製作
    全站熱搜

    雲橙雨林 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄