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 朱孝國

參考書目

常用連結

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

Level Triple-A conformance icon | [歡迎使用任何作業系統、瀏覽器觀看!] | Valid XHTML 1.0 Transitional | Valid CSS! | [Valid RSS] | [創意公眾許可証]
This work is licensed under a Creative Commons License