CSS(Cascading Style Sheet) Note

本網頁以打造無障礙閱讀為目標，可以用任何瀏覽器來觀看本網頁

HTML發展的瓶頸

HTML的回歸本質

從Web標準計畫看CSS

Web標準計畫 (Web Standards Project,WaSP)肇始於1998年，目的在於說服Netscape與Microsoft等瀏覽器廠商，共同支援由W3C與其它標準化組織所共同制訂的標準，藉此降低網頁開發的成本與複雜度，並確保網頁的可讀性(Accessibility)，其計畫也擴及如Macromedia等開發工具廠商與網站開發人員。

結構語言(Structural Languages)

物件模型(Object Models)

腳本語言(Scripting Languages)

表現語言(Presentation Languages)

套用樣式（Types of Style Sheet）

套用樣式有下列三種方式

行內套用(Inline Style Sheets)

<h2 style=color:blue;font-family:"標楷體">......</h2>

整頁套用(Embedding Style Sheets)

在<head></head>之間宣告與套用
<style type="text/css">
<!--
h2 {color:blue}
-->
</style>

外部套用(External Style Sheets)

外部套用的宣告也是在head區段中, 有下列二種方法

連結(Linking Style Sheets)

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

外部匯入(Import Style Sheets)

<style>
@import url("../main.css");
</style>

CSS規則

樣式規則(rule)

樣式規則(rule) = 選擇子 {宣告}  =  Selector { property : value }

h1,p {
　　font-family:標楷體;
　　font-size:24px;
　　text-indent:1.5em;
}
selector(選取器,html標籤) h1,p
property(屬性)

font-family:
font-size:
text-indent:

value(設定值) 標楷體
24px
1.5em

CSS的顏色

可用的顏色名稱(color-name)：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

顏色值的設定(color-value)：紅綠藍( rgb)的16進位表示法： #336699, #369, rgb(51,102,153), rgb(30%,60%,100%)

CSS設定值的度量單位

CSS單位 代表英文 說明
px pixel 像素 (相對)
pt point dpi,像素,1/72英吋 (相對於螢幕解析度)
pc pica 點 (絕對)
em em 字型的主體大小 (相對)
ex x-height 小寫"x"字母的高度 (相對)
in inch 英吋 (絕對)
cm centimeter 公分 (絕對)
mm millimeter 公厘 (絕對)

CSS學習重點

元素(element)的盒子模型(box model)

CSS將所有的元素視為一個盒子(box)，由內容(content)、留白(padding)、外框(border)與邊界(margin)所組成，圖示說明如下：

邊界 (margin)
外框 (border)
留白 (padding)
內容 (content)

實際上我們來看一個段落元素(P)的 box model

內容 (content)：由width與high組成內容的長與寬

小細節

邊界 (margin)
與其它元素間的距離。
意義 範例 備註
簡潔表示
margin: 1em 2em;

其值可設定為負數(重要的定位技巧)，特別注意的是垂直邊界是取2元素中margin最大的那一個而非像水平邊界為margin的加總

簡潔表示法的順序為「上」、「右」、「下」、「左」

上方
margin-top: 1em;
右方
margin-right: 2em;
下方
margin-bottom: 1em;
左方
margin-left: 2em;
外框 (border)
元素以框線包起來 ，可指定的屬性類別有寬度、樣式、顏色、簡稱等四大類。
寬度(width)
意義 範例 備註
簡潔表示
border-width: thin thick;

其值不可為負數，除了使用數值定義寬度外可使用關鍵字「thin」、「medium」、「thick」

簡潔表示法的順序為「上」、「右」、「下」、「左」

上方
border-top-width: 2px;
右方
border-right-width: thick;
下方
border-bottom-width: 3px;
左方
border-left-width: medium;
顏色(color)
意義 範例 備註
簡潔表示
border-color: silver;

可用的顏色名稱(color-name)：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

顏色值的設定(color-value)：紅綠藍( rgb)的16進位表示法： #336699, #369, rgb(51,102,153), rgb(30%,60%,100%)

若沒有指定顏色，預設與元素的顏色(color)一樣

上方
border-top-color: #336699;
右方
border-right-color: rgb(51,102,153);
下方
border-bottom-color: #369;
左方
border-left-color: rgb(30%,60%,100%);
樣式(style)
意義 範例 備註
簡潔表示
border-style: solid dotted;

可用的樣式關鍵字有：none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

並不是所有的瀏覽器都支援指定的樣式效果

上方
border-top-style: solid;
右方
border-right-style: dotted;
下方
border-bottom-style: double;
左方
border-left-style: outset;
簡稱(shorthand)
意義 範例 備註
簡潔表示
border: solid red;

因為框線有width, color, style三種因素，所以在此的簡潔表示法不像 margin與padding可以分別指定四個邊，只能統一設定四個邊

上方
border-top: solid red;
右方
border-right: solid red;
下方
border-bottom: solid red;
左方
border-left: solid red;
留白 (padding)
內容與框線之間的距離
意義 範例 備註
簡潔表示
padding: 2px 3px;

其值不可為負數

簡潔表示法的順序為「上」、「右」、「下」、「左」

上方
padding-top: 2px;
右方
padding-right: 3px;
下方
padding-bottom: 2px;
左方
padding-left: 3px;
內容 (content)
若為行內(inline)元素，就是資料本身，若為區塊(block)元素還可由width與height屬性組成內容的長與寬
意義 範例 備註
寬度
width: 760px;

其值不可為負數

IE 5.5的實作錯誤，其width與height皆包含了content, padding與border

長度
height: 1000px;

元素(element)的浮動(float)

CSS元素的定位

有幾種移動元素位置的方法呢

  1. 利用box模型的負邊界移動元素位置。
  2. 利用float屬性浮動元素位置。
  3. 利用position移動元素位置。

利用position移動元素位置

static
absolute
relative
fixed

瀏覽器的相容問題

經典 CSS 樣式

跳頁

以CSS設定client端列印出來的網頁在指定的元素之後跳頁

<style type=text/css>
<!--
.jump {
                page-break-after: always ;
}
-->
</style>

<div class="jump" >跳頁測試</div>

文字直排

這個直排是CSS3 中有的標準，在 CSS3 W3C Working Draft 17 May 2001 中明確定義，目前Microsoft IE 已經率先實作了，Mozilla目前還不支援。

writing-mode的tb-rl是表示topbottom-rightleft，也就是由上到下，由右到左。所以，如果要原本橫排的字，就可以用tb-lr。不過並不能讓字由下往上！

文字直排 範例
原始碼
畫面

<style type=text/css>
<!--
.vf {
　writing-mode:tb-rl ;
}
-->
</style>

<div class="vf" >顏淵、季路侍。<br />子曰：「盍各言爾志？」</div>

顏淵、季路侍。
子曰：「盍各言爾志？」

細線表格

單純的表格設定感覺沒什麼質感，細線表格可以讓整個表格的感覺很優喔，以下介紹2種製作細線表格的作法

細線表格 範例

方法一：利用CSS

這種方法製作的細線表格，必須有CSS 的 class="thin"、表格的邊寬border="1"和表格的邊寬顏色bordercolor="#8080ff" 等三個屬性，也可以不使用class的設定而改用 style="border-collapse: collapse" 以省略CSS的宣告

方法二：單純的html

這種方法製作的細線表格，主要利用了表格的cellspacing="1"的特性，搭配了表格的邊寬border="0"、表格的背景顏色bgcolor="#8080ff"與列(tr)的背景顏色bgcolor="white"等屬性，同時要注意 tr 的背景顏色要與整個 html 的背景顏色相同 ，且會遮蓋掉背景圖。

<style type=text/css> <!--
.thin {
　border-collapse: collapse;
}
--> </style>

<table class="thin" border="1" bordercolor="#8080ff">
<tr>
　<th>學號</th>
　<th>姓名</th>
　<th>性別</th>
</tr>
<tr>
　<td>9154610</td>
　<td>朱孝國</td>
　<td>男</td>
</tr>
</table>

<table border="0" cellspacing="1" bgcolor="#8080ff">
<tr bgcolor="white">
　<th>學號</th>
　<th>姓名</th>
　<th>性別</th>
</tr>
<tr bgcolor="white">
　<td>9154610</td>
　<td>朱孝國</td>
　<td>男</td>
</tr>
</table>


學號 姓名 性別
9154610 朱孝國 男


學號 姓名 性別
9154610 朱孝國 男

參考書目

常用連結

回首頁 Main Page

主 網 站：http://peterju.notlong.com (目前轉址至 http://irw.ncut.edu.tw/peterju/)

Bobby WorldWide Approved AAA| Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0 | [歡迎使用任何作業系統、瀏覽器觀看！]| [本網站符合 XHTML 1.0 標準！]| [本網站符合 CSS 1.0 標準！]| [Valid RSS]| [創意公眾許可証]
This work is licensed under a Creative Commons License