3. CSS

Submitted by oscar on 一, 2008-07-21 18:25

1. CSS 簡介

層疊樣式表（Cascading Style Sheets，簡寫CSS），又稱串樣式列表，由W3C定義和維護的標準，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。目前最新版本是CSS2.1，為W3C的候選推薦標準。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發過程中。

CSS (Cascading Style Sheets)樣式表（或稱串接樣式表)。CSS 並不是一種程式設計語言，而是用於網頁排版的標記性語言。它是W3C定義和維護的標準，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的電腦語言

  • 語法簡潔，可以很容易的控制HTML標記，易於掌控網頁元素。(只要更改標籤就可以任意且快速的做更改)
  • 多種文字變化可以減少圖檔的使用，加快了網頁的傳輸速度。
  • 集中管理樣式，對於相同的設定，如背景、表格、超連結...等，只要寫一份共用的CSS，網頁一套用，整個網頁的設定就會變的一致，要做變動時也不需要一個網頁一個網頁做更改。

當然CSS也有其的缺點:

  • 瀏覽器所表現出來的樣式不同,這是因為某些瀏覽器無法完全支援全部的CSS導致格式變樣.

2. Inline Style

直接定義在原有的 HTML 標籤內

=>在html的元素(tag)裡加上css的語法

=>小程式適用,對於大程式有不易維護的缺點

ex：

<p style="font-size:20px ; font-weight:bold; ">文字</p>

註：

兩個以上的參數設定，使用" ; "將之分開。

3. Embedded Style Sheets(Internal style sheet)

在 <head> 與 </head> 之間宣告

=> 可清楚知道CSS的使用情況,要改變時也相當簡便

  • 定義已存在的HTML標籤

ex：

<html>

<head>
<style type="text/css">
font    { font-size:20px; font-weight:bold;}
</style>
</head>

<body>
<p>這是一段<font>測試</font>用的文字</p>
</body>

</html>

  • 自行定義style的名稱，再使用

ex：

<html>

<head>
<style type="text/css">
.thepoint   { color:#FF0000; font-weight:bold;}
</style>
</head>

<body>
<p>可以利用自己定義的thepoint class標示出<font class="thepoint">重點文字</font></p>
</body>

</html>

 

4. Conflicting Styles

Styles可以被"user(使用者)","author(作者)",和"user agent(如:瀏覽器)"定義,假若線再這三個人都設定了他們想要的Styles,那麼是必會造成衝突(Conflicting Styles).這時便有先後順序來採用他們所想要的樣式.

而這個順序便是  author > user > user agent

若Styles被parent elements定義以及他的children定義,則以children定義的優先.

 

5. Linking External Style Sheet

先將 CSS 設定寫好並存檔，副檔名為 .css(裡面的內容，是單純的 CSS 語法，不摻雜 HTML 語法)。使用時，在 <head></head> 之間加上一行 <link rel=stylesheet type="text/css" href="FileName.css">，相當於這些設定已經寫入網頁內。

好處是有好幾份網頁需要套用相同的設定時，只要寫一個 .css 檔案，就可以套用到全部的網頁。

 

6. Positioning Elements

靜態位置（position:static）
這是所有 HTML 元素預設的 position 屬性值（也就是沒有定位），它會配合版面配置規則（Layout Rule）決定其位置座標。 

 

相對位置（position:relative）
相對於原本的位置（靜態位置），將元素作對應的距離調整，而且其原本位置的區塊空間將會被保留，位移後也可能會覆蓋其它區塊。

 

絕對位置（position:absolute）
以父元素的邊界位置為基點，再作對應的距離調整。如果其上層的親代元素都不是以絕對位置或 相對位置定位時，那麼就會以 body 元素的邊界為基準。

 

固定位置（position:fixed）
基本上與絕對位置的定位方式相同，為一的差別在於其位置固定，且不會隨捲軸的移動而改變。 

 

7. Backgrounds

如果一個區塊想要有背景圖案或顏色
可以使用下面語法來控制
background:#色碼;
background:url(圖片網址);

還有一些指令可以做調整用：
no-repeat 不要重複、
repeat-x 水平重複、
repeat-y 垂直重複、
left 靠左、
right 靠右、
top 靠上.....等等
例如：
#test{background: url(圖片網址) #色碼 no-repeat top left;}

 

8. Element Dimensions

9. Box Model and Text Flow

CSS 將每個元素視為一個矩形區塊（Box）。每個區塊由內容（Content）、邊距（Padding）、邊框（Border）及邊界（Margin）等區域組合而成，這樣的概念被稱為區塊模型（Box Model）。width和height定義的是Content部分的寬度和高度，padding border margin的寬度依次加在外面。背景會填充padding和content部分。但是由於瀏覽器設計上的問題，不同瀏覽器顯示效果會有些不同。

 

 

 

 

 

CSS 運用區塊模型的概念，將樣式套用在元素上來決定其外觀及位置。

 

 

 

左右邊界加倍的問題:

 

 

當box為float時，IE6中box左右的邊界會加倍。

EX:

<style>
.outer {
width:500px;
height:200px;
background:#000;
}
.inner {
float:left;
width:200px;
height:100px;
margin:5px;
background:#fff;
}
</style>

inner明顯超過5px，定義inner的display屬性為inline

 

外層box自動計算高度的問題:

根據W3C定義，沒有float屬性的外層box不會自動計算高度，要計算高度，必須在內層最后一個box加入clear:both。
Opera、netscape、mozilla等不會計算外層box高度，但是IE6會自動計算外層高度。

居中問題

 需要定義元素的寬，並且定義橫向的邊界，假如你的布局包含在一個層(容器)中，可以這樣定義使它橫向居中。

EX:

#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
}

 

10 Media Type

不同的媒體類別(最常見的螢幕,印表機)可以用不同的 CSS 樣式表,通常若沒有特意設定,

都會是電腦的螢幕。

external:

<link rel="stylesheet" href="style.css" type="text/css" media="print">

=>說明此段css只有在列印時才會生效

internal:

<style type="text/css" media="media type">

media type=>指定的媒體類別

 

大致分為:

screen => 電腦螢幕

print => 列印機

all   =>   全部媒體類別

projection => 投射媒體

tv => 電視

handheld => 掌上型媒體

aural => 言語合成器

11. User Style Sheets

 

12. CSS 3

( 關於CSS 3的功能介紹 )

雖然在2005年已有CSS 3的足跡

功能上目前為止(2008年)正逐漸的完備

CSS 3本質上涵蓋了CSS 2里的所有東西

不過 也添增了Selector,精緻的 borders(邊框),精緻的 backgrounds(背景), 還有改良一些User-interface的部分 等等.

其實改良上不只如此 以下就特性而言簡單介紹:

Borders :

˙border-color

在程式碼裡面我們可以很清楚的看到有新的border-color 的option

˙border-image

這是CSS 3的一個新的特性

在程式碼裡面有很多種邊界元素可供選擇

如以下用法:

右邊下面的部分是眾多邊框元素

 

˙border-radius

這是CSS 3的一個新的特性

Firefox 以及 Safari 3瀏覽器已經實作了這個部分

如以下用法:

看到邊框腳腳部分了嗎?

Note: 如果只要給firefox看就使用 "-moz-border-radius"

如果是要給WebKit or GoogleChrome 顯示,那就使用 "-webkit-border-radius"

˙border-shadow

如以下用法:

Backgrounds :

˙background-origin and background-clip

他們都有提供"border""padding""content"三種不同的values

就background-orgin而言,假設值為border 則background-position會被相對到border的位置

padding則被相對到padding的位置

如果是background-clip,

則預設值(default)是border的位置 padding則繼承border的位置, 依此類推..

如下圖所示:

˙Multiple backgrounds

由字面上的意思就是多個背景 話句話說是可以讓多張圖片放在同一個背景之中

而且各個圖片可以作個別調整

雖然如此

目前(2008.9)支援與實作的只有Webkit, KHTML.

Color :

˙HSL Colors

HSL代表(Hue, Saturation, Lightness) (色彩 飽和度 光澤)

* Hue 的值 0(or 360) 是紅色

120 是綠色

240 是藍色

* Saturation 是一個百分比的值

* Lightness 也是一個百分比的值

0% 代表暗(black), 100% 代表亮(white).

請看以下範例 :

˙RGBA HSLA Colors -- As RGBA colors is to RGB ; HSLA colors is to HSL colors

RGBA尾巴的 "A"代表的是 alpha 值,也就是透明度

請看範例 :

 

User-interface :

˙Box-sizing

以往固定的box model 最外面的是border

border裡面是padding

padding裡面是content

不過自從CSS 3就完全改觀了!

CSS 3提供了box-sizing的性質

順序不再受到限制 變得很客製化

譬如說 padding 裡面可以放border 或者content裡面放的是border..etc.

這麼一來就可以強制瀏覽器顯示並估算您想要顯示的結果

如下圖所示 :

 

˙resize

這個功能提供開發者非常方便的一個工具

有了這個功能 在網頁排版上有很大的便利性

有時,那些文字沒有被限制在一個規定範圍之內

隨便瀏覽器一換 或者瀏覽器解析不同 會影響到排版 甚至是整個美觀

當然有優點也會有缺點

我想resize文字的結果 在使用者立場來說 閱讀會些許的不方便

有些文字中間會跳行險示 被切成一塊一塊的

如下圖所示 :

 

 

Selectors :

˙Attribute selectors

規則如下表 :

咱們來實作看看以上規則 :

 

CODE :

(1)

p[title ^= "hello"]{

color:red

}

End of CSS============================================

<p title="helloworld">
Say helloworld!
</p>

<p title="hohoBob">
Say helloworld Mr.Bob!
</p>

<p title="helloWeco">
helloworld!
</p>

End of HTML============================================

Result:

Say helloworld!helloworld!

 

End of (1)=============================================

 

(2)

p[title *= "heo"]{

color:red

}

End of CSS============================================

<p title="helloworld">
Say helloworld!
</p>

<p title="heroBob">
Say helloworld Mr.Bob!
</p>

<p title="hahaWayne">
helloworld!
</p>

End of HTML============================================

Result:

Say helloworld!Say helloworld Mr.Bob!

End of (2)=============================================

 

drafted by optimization

 

圓角功能

border-radius and -moz-border-radius

 

14. 連結方面

簡單來說就是普通連結時的點下去有底線或變色那種效果 

CSS :hover
:hover 偽類鼠標移到元素上時向此元素添加特殊的樣式。
這個偽類應用處於「懸停狀態」的元素。懸停定義為用戶指示了一個元素但沒有將其激活。對此最常見的例子是將鼠標指針移到 HTML 文檔中一個超鏈接的邊界範圍內。理論上，其他元素也可以處於懸停狀態，不過 CSS 沒有定義究竟是哪些元素。

CSS :visited
:visited 偽類向已訪問的鏈接添加特殊的樣式。

CSS :active
:active 偽類向激活（在鼠標點擊與釋放之間發生的事件）的元素添加特殊的樣式。
這個偽類應用於處於激活狀態的元素。最常見的例子就是在 HTML 文檔中點擊一個超鏈接：在鼠標按鈕按下期間，這個鏈接是激活的。還有其他一些方式來激活元素，另外從理論上講其他元素也可以被激活，不過 CSS 對此沒有定義。

CSS :link
:link 偽類向未訪問的鏈接添加特殊的樣式。

這個偽類應用於尚未訪問過的鏈接；也就是說，鏈接所指的 URI 尚未出現在用戶代理的歷史中。這種狀態與 :visited 狀態是互斥的。

註釋：為了產生預期的效果，在 CSS 定義中，a:hover 必須位於 a:link 和 a:visited 之後！！

註釋：為了產生預期的效果，在 CSS 定義中，a:active 必須位於 a:hover 之後！！

註釋：Pseudo-class（偽類）的名稱對大小寫不敏感。

 

 

a:link {color: #FF0000}     /* 未訪問的鏈接 */a:visited {color: #00FF00}  /* 已訪問的鏈接 */a:hover {color: #FF00FF}    /* 當有鼠標懸停在鏈接上 */a:active {color: #0000FF}   /* 被選擇的鏈接 */

 

---優點及特色---優點：可從外面控制頁面的外觀，將文件內容（程式碼）和呈現方式的
設定（美工）給分開來，使其更容易閱讀。

ＣＳＳ版本～

ＣＳＳ１　：　１９９６年底正式成為標準，包含最基本的屬性設定
ｅｘ－字型、顏色、邊界定義。

ＣＳＳ２　：　１９９８年成為正式標準，加入許多更進階的概念、
更進階的選擇器（selector）[子系、旁系、通用]
ｅｘ－文繞、圖定位。

ＣＳＳ２.１：　因ＣＳＳ２與ＣＳＳ３推出時間相隔太久，故於２００２
年釋出２.１版修改了一些錯誤以及讓ＣＳＳ瀏覽器在處
理照片時更加精準。

一般　＝　
p{color:black;}
.top{color:black;}

後續　＝　
li  a{color:red;}

虛擬類別（pseudo-class）＝　
a:link{background-color:blue;}
a:hover , a:active{color:green;}

萬用（Universal）＝　　
*{padding:0;
margin:0;
}                                 

//萬用選擇器較少用,例題是將留白及邊界全去掉進階（子系）＝　
#nav  >  li {font-weight:blod;}效果等於這兩行  　＝　　
#nav   li         {font-weight:bold;}
#nav   li 　*  {font-weight:normal;}

（旁系）＝　
h1+p{color:yellow;}

//進階選擇器只有比較新穎的瀏覽器才支援（firefox火狐），
像ＩＥ６就無法支援，故當瀏覽器無法辨識選擇器時，就
會當作沒看到這些設定，直接跳過。

CSS 的開端

網頁的管理組織， W3C，於1996 年 12 月批准 CSS 第一級規格時便推薦使用 CSS 。 CSS 第一級描述了用於 HTML 網頁中的屬性。這些屬性取代了傳統的字型標籤及其他「樣式」標記，例如顏色與邊界等。 1998 年 5 月， W3C 批准了 CSS 第二級，其又在第一級規格以外增加了更多功能，同時也出現了定位的屬性。這些屬性取代了在設計網頁元素的展示時被氾濫（及錯誤）使用的 table 標籤。目前最新修正的 CSS 規格為 CSS 2.1，它又做了一些屬性上的修訂，並消除了其他只會在現有瀏覽器上產生限制的屬性。

不幸的是，就跟大部分新科技所遇到的情況一樣， CSS 在獲得大眾採納的速度上是有點緩慢的。其中一個關鍵的原因出在瀏覽器及針對這些瀏覽器設計網站的網頁設計師身上。在 CSS 獲得批準時， Netscape Navigator  (NN) 仍是佔有主控地位的瀏覽器，而它對於 CSS 的支援基本上可以說是根本不存在。 Microsoft 在它的第三版瀏覽器中增加了非常有限的支援，但當時大多數的網頁設計師（包括筆者在內）仍在以 NN 為其參考平台的情況下撰寫網頁程式。

 

一個網頁的讀者和作者都可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結構（用HTML或其他相關的語言寫的）與文件的顯示（CSS）分隔開來。這個分隔有許多好處：

  1. 文件的可讀性被加強
  2. 文件的結構更加靈活
  3. 作者和讀者可以自己決定文件的顯示
  4. 文件的結構簡化了。

CSS還可以使用其他的顯示方式，比如聲音（假如瀏覽器有閱讀功能的話）或給視障者用的感受裝置。此外CSS還可以與XHTML、XML或其他結構文件一起使用，唯一條件是顯示這種文件的瀏覽器裝備了接受CSS的功能。

HTML文件中的每一個class或id都可以有自己的顯示特徵，而且每一個沒有id特性的HTML結構也可以有自己的顯示特徵。這些結構有的是HTML自己需要的，有的是專門為CSS設置的。

CSS信息可以來自：

  • 作者樣式
    • 作者可以在他的HTML文件中確定一個外來的、獨立的CSS文件
    • 作者可以將CSS信息包含在HTML文件內
    • 作者可以在一個HTML指令內結合CSS指令，這樣做一般是為了在一個特殊情況下將總體的CSS指令抵消掉
  • 讀者樣式
    • 讀者可以在他的瀏覽器內設立一個地區性的CSS文件。這個CSS文件可以用在所有的HTML文件上。假如作者的CSS文件與讀者的相衝突，那麼讀者可以確定他想使用哪個
  • 瀏覽器的樣式
    • 假如外部沒有特別指定一個樣式的話，一般瀏覽器自己有一個內在的樣式

使用CSS的優點有：

  • 一個整個網站或其中一部分網頁的顯示信息被集中在一個地方，要改變它們很方便
  • 不同的讀者可以有不同的樣式，比如有的讀者需要字體比較大
  • HTML文件本身的範圍變小了，它的結構簡單了，它不需要包含顯示的信息

 

 

---F20-Web基本原理與技術--

 編輯者 : 林采昕 408262143 / 張字青 408262349 / 陳嬿婷 408262416 / 許瀚丰 408262208/ 龔子昀 408261060

CSS (Cuscarding Style Sheets)

  • 由W3C定義和維護CSS3
  • 主要決定內容的顏色、背景、字型、位置等顯示特性
    目的將檔案內容與顯示分隔開
  • HTML主要是在做內容的結構
  • 好處
    1. 顯示資訊集中，改變方便
    2. 不同的讀者可以有不同的樣式

Casading 優先順序

  • 作者樣式(Author’s Style) -> 1.inline/2.internal/3.external

    • External Style(外部樣式表)
      HTML檔案指定一個外部的CSS檔案，優先最低

      <link rel = "stylesheet" type = "text/css "href = "styles.css" /> (link 為外部標籤)

    • Internal Style(內部樣式表)
      將CSS資訊包含在HTML檔案<Head> section 內 <style type = “text/css>”
      inline 在一個HTML元素內的style屬性優先最高

  • 自訂樣式(Reader’s style) : 在瀏覽器內的CSS檔案，可用在所有的HTML檔案上，使用者可以做選擇。
  • 瀏覽器樣式(Browser’s style): 沒有特別指定style，瀏覽器內有預設模式

CSS語法

H1{color:blue;}

  • selector(選擇器)多個選擇棄可以半形逗號分開
    • 類型選擇器(h1,p元素) H1
    • ID選擇器 #id
    • 屬性選擇器 [attribute]
    • 類別選擇器(class) .class
  • Property(屬性)控制選擇器的樣式
  • Value(值)屬性的設定值多個關鍵字時大都以空格隔開

CSS應用-響應式網頁RWD(Responsive Web Design)

  • 網站在不同解析度下有適合的呈現
  • 串流網格(Grid)要求頁面元素使用 " 相對單位 " (如百分比)而不是 " 絕對單位 " 如像素或點圖像也以相對單位調整(最大到100%)
  • RWD grid-view 通常將螢幕分為12直行(columns)100%，使用者調整瀏覽器大小時，可以自由伸縮
  • Media Queries 允許網頁根據裝置特點而使用不同的CSS規則最常用的是瀏覽器的寬度

網路軟體開發

  • socket ->傳輸層TCP/UDP
    送收兩端分別開啟Socket
    單向通道送出或接收(SEND/RECEIVE)
    平行程式困難

  • RPC(Rrmote Procedure Call)
    類似呼叫本機程式方式呼叫遠端程式
    利用編譯器(compiler)幫忙翻譯Socket運作

  • Web-based(HTTP Request-Response)

    • 應用層(Request-Response)
    • 簡單 非同步運作 AJAX, Promise
    • 前端瀏覽器 - 後端伺服器
    • 裝置/手機 - 快取邊緣閘道 - 伺服器
    • web service : 伺服器 - 伺服器

傳遞建議用POST，並且要加密

Psudo 元素選擇器

  • 選擇不在Document結構中的資訊
屬性 描述
:after或::after 元素之後
:befter或::befter 元素之前
:first-letter或::first-letter 文字第一個字母
:first-line或::first-line 文字首行
::selection 滑鼠以選擇(CSS3)

Psudo 類別選擇器

  • Psudo Class Selector
    虛擬類別選擇不同狀態、性質的元素
屬性 狀態
:link 超連結未被存取
:visited 超連結被存取過
:hover 滑鼠在元素上面
:active 滑鼠在元素上面按著