今天來說明 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(段落) 的顏色及宽度，則以下圖表示
p 是選擇器，此例表示我在這裡定p 的樣式
我宣告 p 的屬性 color (顏色)為藍色， p的屬性 width(寛度)為50寛，宣告後，網頁程式就會以你宣告的方式顯示
執行後，就會以下表示。
網頁就依你設定的方式表示！
當然，這個只是基本設定方式來設定，對於設計漂亮網頁的目標，還有很長一段路！
沒有留言:
張貼留言