起始標籤 | 結束標籤 |
---|---|
需要 | 需要 |
<style> 有幾個屬性
屬性 | 值 | Deprecated or Obsolete |
---|---|---|
type | text/css | |
media | 媒體種類 | |
scoped | 指定作用範疇 |
例如
<html> <head> <title>網頁標題</title> <style> p { background-color: black; color: white; } </style> </head> <body> <p>You ever have that feeling where you're not sure if you're awake or still dreaming?</p> <p>A prison for your mind.</p> <p>Free your mind.</p> <p>Believe the unbelievable.</p> <p>There is no spoon.</p> <p>I can only show you the door, you have to walk through it.</p> <p>Choice. The problem is choice.</p> <p>Then tomorrow we may all be dead, but how would that be different from any other day?</p> <p>I have dreamed a dream, but now that dream has gone from me.</p> <p>Choice is an illusion, created between those with power, and those without.</p> <p>Because I choose to.</p> <p>Everything that has a beginning has an end.</p> </body> </html> <!-- 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:example04.html 功能:示範 HTML 4.01 標記語言的使用 作者:張凱慶 時間:西元 2011 年 5 月 -->
網頁顯示結果如下
CSS 樣式表的寫法很簡單
<style> p { background-color: black; color: white; } </style>
先是元素名稱,然後用一對大括弧,大括弧圍起來的範圍就是屬於元素的樣式表,此例中, background-color 為背景顏色,這裡設定成 black ,也就是黑色, color 為文字顏色, white 就是白色。
下例中利用樣式表將 <img /> 元素置中對齊
<html> <head> <title>網頁標題</title> <style> img.center { display: block; margin: 0px auto 10px; cursor: pointer; text-align: center; } </style> </head> <body> 以下圖片置中對齊 <img class="center" src="example.jpg" /> </body> </html> <!-- 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:example11.html 功能:示範 HTML 4.01 標記語言的使用 作者:張凱慶 時間:西元 2011 年 5 月 -->
瀏覽器 (broswer) 開啟如下
這裡稍有些不同,元素名稱後接小數點,然後接另一類別名稱 center ,大括弧裡頭是區塊、對齊的樣式定義
<style> img.center { display: block; margin: 0px auto 10px; cursor: pointer; text-align: center; } </style>
因為用了類別名稱,所以 <img /> 的地方
<img class="center" src="example.jpg" />
這裡要用 class 屬性指定類別名稱。
中英文術語對照 | |
---|---|
標籤 | tag |
樣式表 | style sheet |
瀏覽器 | broswer |
您可以繼續參考
HTML 基本概念
- 元素與屬性
- 絕對路徑與相對路徑
- 度量與單位
- 網頁顏色
- 網頁字元索引
- 文件型態定義
- <html> - 文件標籤
- <head> - 文件標頭
- <title> - 標題
- <meta /> - 資訊
- <link /> - 外連樣式表
- <script> - 腳本程式
- <style> - 樣式
- <base> - 基本路徑
- <body> - 文件主體
- <address> - 作者資訊
相關目錄
HTML 4.01 快速導覽 - 目錄
HTML, CSS 教材
首頁
參考資料
沒有留言:
張貼留言