HTML 4.01 快速導覽 - <style> 樣式表標籤

<style> 標籤 (tag) ，主要用途為在網頁中直接寫樣式表 (style sheet) 。



起始標籤結束標籤
需要需要


<style> 有幾個屬性
屬性值Deprecated or Obsolete
typetext/css
media媒體種類
scoped指定作用範疇


例如
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 樣式表的寫法很簡單
6
7
8
9
10
11
<style>
p {
    background-color: black;
    color: white;
}
</style>


先是元素名稱，然後用一對大括弧，大括弧圍起來的範圍就是屬於元素的樣式表，此例中， background-color 為背景顏色，這裡設定成 black ，也就是黑色， color 為文字顏色， white 就是白色。


下例中利用樣式表將 <img /> 元素置中對齊
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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 ，大括弧裡頭是區塊、對齊的樣式定義
5
6
7
8
9
10
11
12
<style>
img.center {
  display: block;
  margin: 0px auto 10px;
  cursor: pointer;
  text-align: center;
}
</style>


因為用了類別名稱，所以 <img /> 的地方
19
<img class="center" src="example.jpg" />


這裡要用 class 屬性指定類別名稱。


中英文術語對照
標籤tag
樣式表style sheet
瀏覽器broswer


您可以繼續參考



相關目錄
HTML 4.01 快速導覽 - 目錄
HTML, CSS 教材
首頁


參考資料

標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)