pes of Style Sheet
CSS文章(整理自網路)
套用樣式有下列三種方式
行內套用(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 |
-
選擇子(Selector):通常為文件中的元素(element),如html中的body,
p, strong等標籤
,多個選擇子可以逗號隔開;空白表示使用該選擇子但不需要class呼叫。
-
屬性(property):CSS1
/ CSS2 / CSS3規定了許多的屬性,目的在控制選擇子的樣式。
-
值(value):指屬性接受的設定值,可由各種關鍵字(keyword)組成,多個關鍵字時大都以空格隔開。
-
要針對沒有標籤定義範圍進行樣式設定時,可利用
<div>
與
<span>
標籤
-
選擇子的種類
-
類別選擇子(class
selector):可多次套用
宣告 |
使用 |
說明 |
.blue {color:blue;} |
<span class=blue>.......</span> |
讓不同的標籤套用相同的樣式
|
h2.red {color:red;} |
<h2 class=red>.........<h2> |
只讓固定的標籤有此樣式
|
p.menu a {color:green;} |
<p class=”menu”><a href=”#”>連結</a></p> |
固定標籤內用特定選擇子<a> |
-
識別選擇子(ID
selector):每一個網頁只能有一個唯一的ID可以套用樣式,
多用於版面配置或搭配程式
宣告 |
使用 |
說明 |
#blue {color:blue;} |
<span id=blue>.......</span> |
讓指定的標籤套用一次宣告的樣式
|
#smduck1 {
position:absolute;
top:0px;
left:0px;
z-index:1;
} |
<div id="smduck1">.........<div> |
讓指定的標籤套用一次宣告的樣式
|
-
脈絡選擇子(contextual
selector)
:依指定的樹狀架構套用樣式
宣告 |
使用 |
說明 |
h2 em {color:blue} |
<h2>一般<em>
藍色
</em>文字</h2>
|
指定特定標籤內的標籤可套用樣式
|
-
利用CSS的position進行元素位置的定位,可將文書架構與編排配置定義分離(W3C強烈建議)
.box1{ |
|
|
font-family:
標楷體
; |
|
設定顯示的字型 |
font-size:
10px ;
|
|
設定顯示的字體大小
|
font-style:
italic ;
|
|
設定字型為斜體
|
font-weight:
bold ;
|
|
設定字體為粗體
|
font-variant:
small-caps
; |
|
將小寫換為大寫
small to big |
text-indent:
24pt
; |
|
段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排段落縮排
|
letter-spacing:
6pt
; |
|
字元間距
|
line-height:
16px
; |
|
設定行高
設定行高
|
text-decoration:
underline
; |
|
文字效果
沒有效果
underline 加底線
line-through 文字刪除
overline 加上標線
blink 閃爍
|
text-transform:
Capitalize
; |
|
大小寫轉換
none
沒有效果
capitalize
將第一個字母轉換為大寫
uppercase
全部字母轉換為大寫
LOWERCASE
全部字母轉換為小寫
|
text-align:
center
; |
|
文字水平方向對齊方式
center 置中
left 靠左
right 靠右
justify 分散對齊
|
vertical-align:
center
; |
|
元件垂直方向對齊方式
baseline 以元件的基線為準(預設值)
文字的
sub 下標
文字的
super 上標
top 垂直往上對齊
text-top 垂直往上對齊
middle 垂直置中對齊
bottom 垂直往下對齊
text-bottom 垂直往下對齊
|
position:
absolute
; |
|
設定邊框的位置
absolute
絕對位置,與視窗上方的距離
relative
相對位置,與上一個元素的距離
baseline
固定相對位置(視窗捲動時也在相同位置)
static
一般狀態(預設值)
|
z-index: 2
; |
|
元素重疊順序的指定
|
top:
20px ;
|
|
與上方的距離,也可設定參考bottom屬性
|
left:
20px ;
|
|
與左方的距離,也可設定參考right屬性
|
width:
200px ;
|
|
設定內側區域的寬度
|
height:
250px ;
|
|
設定內側區域的高度
|
color:
#000000 ;
|
|
設定視窗字體顏色
|
background-color:
#ffffff ;
|
|
設定視窗背景圖像
background
使用使用者的桌面色彩
green
綠色
|
background-image:
w2.gif ;
|
|
設定視窗背景顏色
|
background-repeat:
repeat ;
|
|
設定視窗背景佈滿的方式
|
background-attachment:
fixed
; |
|
設定視窗背景固定或隨捲軸捲動
fixed
固定
scroll
捲動
|
background-position:
(x% y%) ;
|
|
設定視窗背景的位置
|
padding:
10px ;
|
|
設定內容與邊框之間的距離
|
border-color:
#000099 ;
|
|
設定邊框的顏色
|
border-width:
4px ;
|
|
設定邊框的粗細
|
border-style:
dotted
; |
|
設定邊框的樣式
solid
直線
dotted
點線
dashed
虛線
double
雙線
groove
立體凹線
ridge
立體突線
inset
立體凹線方塊
outset
立體突出方塊
|
clip:reac(
20px 110px 80px 50px
); |
|
設定元素中看得到的範圍
|
overflow:
scroll
; |
|
設定內容放不下時的顯示方式
visible
超出的部分也會顯示(default)
hidden
超出的部分不顯示
scroll
以捲軸的方式顯示
auto
自動調整(default)
|
visibility:
visible
; |
|
設定box的顯示與否
visible
顯示(default)
hidden
不顯示,但保有面積
|
display:
block
; |
|
設定元素的顯示方式
block
顯示成block元素(default)
inline
顯示成inline元素
none
不顯示,且不佔面積
|
} |
|
|
input,textarea,select,option
|
button
|
input,textarea,select,option{
border-style:solid;
border-width:2px;
border-color:#cc0000;
background-color:#ffff99;
color:#cc0000;
fnt-size:10px;
|
.button1{
font-weight:bold;
border-width:2px;
padding:5px;
border-color:#ffffff;
background-color:#cc0000;
color:#ffffff;
|
-
與CSS有關的Jscript
-
將Jscript當作Linking
Style Sheet來使用
<script type="text/javascript"
src=" js/main.js
"></script>
-
判斷作業系統與瀏覽器的jscript
mac=(navigator.appVersion.indexof('Mac')!=-1)?true:false;
ie=(navigator.appName.charat(0)=="M") ?true:false;
document.write("<style type='text/css'><!-->");
if (mac) {
document.write(".t1{font-size:10px;line-height:14px}");
document.write(".t2{font-size:10px;line-height:14px}");
} else {
if
(ie) {
document.write(".t1{font-size:11px;line-height:15px}");
document.write(".t2{font-size:10px;line-height:17px}");
}
else {
document.write(".t1{font-size:11px;line-height:16px}");
document.write(".t2{font-size:12px;line-height:18px}");
}
}
document.write("--></style>"); |
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學習重點
-
充分瞭解CSS的box
model
-
充分瞭解CSS的float屬性
-
充分瞭解CSS的position屬性
-
裝飾用的圖片以背景圖片取代,主要圖片才使用img標籤
-
以CSS作版面配置取代使用table
版面配置
-
使用CSS的ID功能取代html的頁框功能
元素(element)的盒子模型(box
model)
CSS將所有的元素視為一個盒子(box),由內容(content)、留白(padding)、外框(border)與邊界(margin)所組成,圖示說明如下:
邊界
(margin)
外框
(border)
留白
(padding)
內容
(content)
實際上我們來看一個段落元素(P)的
box model
內容
(content):由width與high組成內容的長與寬
小細節
-
若外框沒有指定顏色,預設的顏色會與元素的顏色(color)一模一樣。
-
除了body標籤之外,元素的background屬性都不會作用在邊界margin上
。
邊界
(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)
-
浮動是設定元素的float屬性,其垂直位置不變,但水平位置會依照設定向左(left)或向右(right)浮動。
-
若元素的position為absolute時,float是沒有意義的。
-
有float屬性的元素視為區塊元素,可以設定width與height,如此「浮動」才有意義,因此若對行內(inline)元素設定float屬性,則它自動會變成區塊元素(block)。
-
有float屬性的元素若不設定長度(height),代表此區塊會依內容自動延伸長度。
-
有float屬性的元素其後若為inline元素,則會自動圍繞此float元素。
-
IE實作上在浮動向右(right)時會在此區塊的左邊多出margin右邊多出padding,浮動向左(left)時右邊多出padding,但mozilla並不會,在有浮動的宣告時加入margin與padding的設定。
-
有float屬性的元素若設定了長度(height),實作上IE還是會依內容自動延伸長度而忽略它,而mozilla會遵守,但在顯示時會有bug(超出指定長度的部分仍會顯示)。
-
理論上浮動可能有的狀況如下,好像可以不考慮浮動元素之前的元素狀況
-
inline + inline向左float
+ inline
-
inline + inline向右float
+ inline
-
inline + block向左float
+ inline
-
inline + block向右float
+ inline
-
block + inline向左float
+ block
-
block + inline向右float
+ block
-
block + block向左float
+ block
-
block + block向右float
+ block
-
但要特別注意浮動元素之前後為inline元素且浮動元素本身亦為inline浮動而成的情況,之後的inline元素會補齊原浮動元素所造成的空白。
CSS元素的定位
有幾種移動元素位置的方法呢
1.
利用box模型的負邊界移動元素位置。
2.
利用float屬性浮動元素位置。
3.
利用position移動元素位置。
利用position移動元素位置
static
·
元素的box模型其位置預設為靜態(static)即隱含宣告了position:static
·
此時若有宣告
top, right, bottom, left
等屬性視為無效,因static的意思就是固定了位置。
·
此元素位於其它元素之後或之前,端視原始文件中的元素出現先後順序,或說
此元素的位置位於正常的文件流程之中(normal
flow of the document)不因
top, right, bottom, left
等屬性而改變其位置,故稱之為static。
absolute
·
元素的box模型其位置若為絕對(absolute)即確實宣告了position:absolute
·
此時若有宣告
top, right, bottom, left
等偏移(offset)屬性則會以父元素的邊界位置為基點,再作對應的距離調整。
·
此時所說的父元素指的是前一個以absolute或relative宣告其位置的元素,若之前都沒有此定位的元素存在,則以元素所在的視窗最大可視範圍邊界為基點。
·
設定為absolute的元素會不存在於正常文件流程的位置,也可能會覆蓋其它元素。
·
若確實宣告了position:absolute
但沒有宣告
top, right, bottom, left
等屬性,則顯示會在原來文件流程中的位置,但因不存在於正常文件流程中,所以會覆蓋後一個元素的顯示。
relative
·
元素的box模型其位置若為相對(relative)即確實宣告了position:relative
·
此時若有宣告
top, right, bottom, left
等偏移(offset)屬性則會以元素本身在正常的文件流程之位置為基點,再作對應的距離調整。
·
設定為relative的元素在正常文件流程的位置會被「保留」『空』下來,但此元素會遵從top,
right, bottom, left
等屬性的指示偏移到指定的位置上,也可能會覆蓋其它元素。
·
若確實宣告了position:relative
但沒有宣告
top, right, bottom, left
等屬性,則顯示位置會停留在原先自身的保留位置上。
fixed
·
元素的box模型其位置若為固定(fixed)即確實宣告了position:fixed
·
此時若有宣告
top, right, bottom, left
等偏移(offset)屬性則會以元素所在的視窗最大可視範圍邊界為基點,再作對應的距離調整。
·
設定為fixed的元素會不存在於正常文件流程的位置,也可能會覆蓋其它元素。
·
若確實宣告了position:fixed
但沒有宣告
top, right, bottom, left
等屬性,則顯示會在原來文件流程中的位置,但因不存在於正常文件流程中,所以會覆蓋後一個元素的顯示。
瀏覽器的相容問題
-
各家新式的瀏覽器如何決定依照舊有網頁處理原則,還是遵循W3C規格解釋網頁呢?
-
正確使用DOCTYPE宣告能讓各家瀏覽器進入所謂
「標準模式」
,統一以W3C推薦書中闡述的方式處理網頁,而不需依靠瀏覽器偵測技術,判斷瀏覽器廠牌作不同的處理。
-
對於不宣告DOCTYPE的網頁,瀏覽器會進入所謂
「Quirks模式」
以與舊版回溯相容為目標,仿照過去瀏覽器的幾種行為來處理網頁,這可能會讓符合
W3C
推薦書的文件以不符規格的方式顯現。
-
IE 5 / 5.5
時對於CSS的Box
Model的解譯有錯誤。
-
IE
系列皆不支援
blink
閃爍功能
-
網頁儘量能以不同瀏覽器來檢視
經典
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> |
|
|
|