科技新知


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>

指定特定標籤內的標籤可套用樣式

    • 利用CSSposition進行元素位置的定位,可將文書架構與編排配置定義分離(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 不顯示,且不佔面積

}

 

 

  • 利用CSSform元素做修飾

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學習重點

  • 充分瞭解CSSbox model
  • 充分瞭解CSSfloat屬性
  • 充分瞭解CSSposition屬性
  • 裝飾用的圖片以背景圖片取代,主要圖片才使用img標籤
  • CSS作版面配置取代使用table 版面配置
  • 使用CSSID功能取代html的頁框功能

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

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


邊界 (margin)

外框 (border)

留白 (padding)

內容 (content)


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

內容 (content):由widthhigh組成內容的長與寬

小細節

  • 若外框沒有指定顏色,預設的顏色會與元素的顏色(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三種因素,所以在此的簡潔表示法不像 marginpadding可以分別指定四個邊,只能統一設定四個邊

上方

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)元素還可由widthheight屬性組成內容的長與寬

意義

範例

備註

寬度

width: 760px;

其值不可為負數

IE 5.5的實作錯誤,其widthheight皆包含了content, paddingborder

長度

height: 1000px;

元素(element)的浮動(float)

  • 浮動是設定元素的float屬性,其垂直位置不變,但水平位置會依照設定向左(left)或向右(right)浮動。
  • 若元素的positionabsolute時,float是沒有意義的。
  • float屬性的元素視為區塊元素,可以設定widthheight,如此「浮動」才有意義,因此若對行內(inline)元素設定float屬性,則它自動會變成區塊元素(block)
  • float屬性的元素若不設定長度(height),代表此區塊會依內容自動延伸長度。
  • float屬性的元素其後若為inline元素,則會自動圍繞此float元素。
  • IE實作上在浮動向右(right)時會在此區塊的左邊多出margin右邊多出padding,浮動向左(left)時右邊多出padding,但mozilla並不會,在有浮動的宣告時加入marginpadding的設定。
  • 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)屬性則會以父元素的邊界位置為基點,再作對應的距離調整。

·         此時所說的父元素指的是前一個以absoluterelative宣告其位置的元素,若之前都沒有此定位的元素存在,則以元素所在的視窗最大可視範圍邊界為基點。

·         設定為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 時對於CSSBox 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-modetb-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

朱孝國

 

 

 
 
  All right reserved 2006 by  
統編:70384768 連絡電話:、0921-846099 傳真: