css外觀樣式

前端網頁程式設計基礎班 DAY 2

講師：張凱迪（KD.Chang）

Outline

CSS簡介與基礎知識

色彩配置與文字

清單、表格與表單介面

Basic Box Model

定位與排版

關於CSS的好用工具

前情提要

內容架構 - HTML

外觀樣式 - CSS

行為互動 - JavaScript

CSS簡介與基礎知識

打開瀏覽器的dEV TOOLS

試看看，沒CSS差很多...

打開你的開發者工具試試

Firefox – Firebug

Chrome – 開發者工具

IE – 開發者工具(F12)

Safari – 開發者工具

Opera – Dragonfly

教學文件：Chrome開發者工具

關於css的一些小事

層疊樣式表（原文：Cascading Style Sheets，簡寫CSS）

CSS 規格標準由W3C 所制定，CSS 1.0 於 1996年推出

歷經CSS 1 、CSS2、CSS2.1，目前朝CSS3發展中

CSS3 新增許多功能，但不同瀏覽器支援不一（需加前綴）

用文字編輯器即可編輯，存.css檔

CSS3 主要新玩意兒

圓⾓

方盒陰影 / 文字陰影

漸層

外部字體

2D / 3D 漸變 / 動畫

Media Queries

CSS 問題多在跨平台支援度

http://laughingthroughthepain.files.wordpress.com/

各瀏覽器使用不同樣板引擎

排版引擎Wiki

http://pashutaphotography.blogspot.tw/

css屬性分為兩大類

外觀

主要負責控制如：文字顏色、大小、背影顏色等外觀

版面

負責如何將元素放置在螢幕中適切的位置

主要css使用方式

1. 行內樣式 (Inline Styles)

直接在HTML元素中加入style屬性，將樣式套用到該元素。缺點是樣式無法重複利用，且閱讀、維護不便

2. 內嵌樣式 (Embeded Styles)

將樣式寫在<head></head>的<style></style>中，缺點是無法重複利用

3. 外部樣式表 (External Stylesheets)

最適合使用的CSS使用方式，將樣式從內容結構抽離出來，成獨立的CSS檔案，易於維護和重複使用

主要CSS使用方式

1. 行內樣式 (Inline Styles)

 <img style="width:150px; height:auto;" src="img/js-logo.png" alt="">

2. 內嵌樣式 (Embeded Styles)

        <style>
            body {
                background: red;
            }
        </style> // 請放置於<head></head>之間

3. 外部樣式表 (External Stylesheets)

 <link rel="stylesheet" href="css/main.css">     //請放置於<head></head>之間

為何要使用獨立樣式表？

可以重複使用原始碼

易於閱讀、維護和修改

將結構和樣式分離清楚，有利於團隊合作

串起HTML和css

CSS的運作方式是將規則和HTML的元素連結起來。這些規則定義了特定元素內容所呈現的外觀樣式

CSS 規則包含了兩部分：1. 選擇器、2. 宣告

p //選擇器，指出所選的元素 {color: red;} //宣告樣式

按這看結果

CSS屬性影響元素外觀

CSS 宣告位在大括號中，每個宣告由兩部分所組成：

屬性與值，每個宣告裡可以有多個屬性，屬性間用分號區隔

p {
    color: red;
    font-family: Arial;  //屬性(元素的面向)：值(想用在該元素上的設定值) }

第一個css檔案

//HTML<h1>Hello HTML5</h1> 
//CSS寫在<head><style></style></head>中 h1 {
  color: blue;
  font-family: Arial;
}

練習一

運用之前的HTML，運用行內、內嵌、引入方式，將其套上CSS顏色 (Live Coding)

CSS Reset 與 Normalize

重新定義各元素樣式的樣式表，希望能解決跨瀏覽器問題

目前最有名的CSS Reset為Eric A. Meyer 的 CSS Reset 版本

CSS Reset 基本上把所有標籤的預設樣式都歸 0

CSS Normalize 則針對不同瀏覽器不相容的標籤進行微調

網站建置不是件簡單的事 @ 跨瀏覽器網頁設計密技 (1)

CSS RESET 與 NORMALIZE 用法

按這看結果

按這看結果

選擇器

選擇器是讓你可以選取到你想要套用樣式的元素

CSS選擇器有大小寫之分，選取名稱必須相同

常用選擇器種類

Universal selector（通用選擇器）

使用 * 選取所有元素

Type selectors（型態選擇器）

Ex. h1、p ，選取該元素

Class selectors（Class選擇器）

使用 . class名稱，選取該class元素

ID selectors（ID選擇器）

使用#ID名稱，選取該ID元素

按這看結果

常用選擇器種類

Attribute selectors（屬性選擇器）

選取具有所指定屬性的元素

selector[att]

selector[att=val]

selector[att^=val]

selector[att$=val]

selector[att*=val]

selector[att|=val]

selector[att~=val]

參考文件：CSS attribute selectors (CSS 屬性指標)

常用選擇器種類

Child combinator（子選擇器）

E > F，找出一元素之直系子元素(兒子必緊鄰父親)

Descendant selectors (後代選擇器)

E F，找出一指定元素之所有後代元素

按這看結果

常用選擇器種類

Adjacent sibling combinator（同層相鄰選擇器）

E + F，利用 + 區隔兩個元素，表示在與 E 同一層關係的相鄰 F 元素才會套用(只能在 E 之後)

General sibling combinator（同層全體選擇器）

E ~ F，利用 ~ 區隔兩個元素，表示在與 E 同一層關係的 F 元素全部都會套用(只能在 E 之後)

Groups of selectors（群組選擇器)

同時選取多個元素

按這看結果

常用選擇器種類

Pseudo-classes（偽類選擇器）

:link (超連結平常的樣式)

:visited (超連結點閱後的樣式)

:hover (滑鼠滑入的樣式)

:active (滑鼠按下的樣式)

:focus (目標為焦點的樣式)

:lang(A) (當語言為A的樣式)

:first-child (第一個元素的樣式)

常用選擇器種類

Pseudo-elements（偽元素選擇器）

:first-line (元素的第一行會套用)

:first-letter (元素的第一個字母會套用)

:after (在元素後加上內容（一般會配 content 屬性）)

:before (在元素前加上內容（一般會配 content 屬性）)

按這看結果

常用選擇器種類

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */ //請注意順序，因為CSS後來優先，權重相同者會被覆蓋，記憶方式 LOVE HATE

按這看結果

參考文件：LoVe HAte

練習二

運用Pseudo-classes（偽類選擇器）製作一顏色互動的超連結

css階層

CSS 是階層樣式表 (cascading style sheet) ，在定義外觀樣式時難免會有不同的樣式去定義到同一個元素的情況，所謂的階層 (cascading) 係指樣式 (style) 規則 (rule) 的優先權有不同的層次，包括來源(origin)、重要性 (importance) 、順序 (order) 、明確性 (specificity) 等，並結合繼承 (inheritance) 決定最終 HTML 元素的樣式

參考資料： CSS inheritance 屬性繼承

參考資料：Style Sheets Guide

CSS階層順序

1. 尋找樣式規則，並判斷選取項是否符合 HTML文件中可用的名稱，例如元素名稱、 class 或 id 屬性名稱

2. 依來源(origin)排序(依以下順序排列優先性)

(1)瀏覽器使用者(user) !important 宣告

(2)網頁設計者(author) !important 宣告

(3)網頁設計者(author)所指定的樣式(行內>內嵌>外部)

(4)瀏覽器使用者(user)定義樣式

(5)瀏覽器(user agent)預設樣式

* !important指非常重要，權重最高

CSS階層順序

3. 計算各自的明確性( specificity) 排列優先性

4. 若以上皆無法排出，依出現順序(order)排列，晚出現優先

＊若未設定樣式，某些屬性(如 color)預設會繼承自父元素

參考資料： W3C Cascading, and Inheritance

css Specificity

若specificity明確度相同以後來優先

1,0,0,0 可看為 "1000"，但不是10進位

CSS SPECIFICITY 範例

參考文件：Specifics on CSS Specificity

CSS 屬性衝突

有些時候在定義CSS時，會發現明明已經改過過CSS設定值，但是就是無法變更外觀樣式，這時就有可能是因為有其他更高明確度的設定值覆蓋造成

此時可以嘗試打開瀏覽器的開發工具，觀察CSS被覆蓋的情形

參考文件：CSS Specificity

註解

 // 這是單行註解 
 /* 這是多行註解，使用 /* 開頭，用 */ 當結尾。 */

色彩配置與文字

了解色彩

在螢幕上所顯示的顏色都是混合了光的三原色紅、綠、藍所組成的，螢幕上是由像素小方框所組成，每個方框都混合了紅、綠、藍三種顏色。可以用顏色檢查器取得欲使用的顏色

好用工具：Colorzilla

色彩三要素

色相(Hue)

亦即一般我們稱的顏色，依不同波長色彩呈現的相貌所稱呼的「名字」

彩度(Chroma)

彩度是指色彩的純粹度或鮮豔度，亦可說是區分色彩鮮濁的程度指色彩的純度或，任何顏色的純色因不含雜色，飽和度及純粹度最高

明度(Value)

係指顏色中的黑色量。明度越低黑色量越多，色彩的明度與光線的反射率有關

前景色

color屬性讓我們可以指定元素的顏色，一般可用以下三種方式指定顏色：

RGB值：透過紅、綠、藍組成來表現色彩，使用0-255數值來定義。如：rgb(0, 0, 0)

HEX值：六位數代表一色彩中的紅、綠、藍比例，使用十六進位定義並以#開頭。如：#696969(紅色105用十六進位表69)

顏色名：瀏覽器可以認得約147個顏色名字，如：red

* CSS3增HSLA屬性(色相[0-360], 彩度[%], 明度[%], 不透明度)

背景色

CSS將每個HTML元素視為獨立方框， background-color屬性擇設定該方框的背景顏色，顏色定義方式如同前景色

按這看結果

CSS3 : 新增不透明度

CSS3新增了透明度屬性 : opacity，可以讓你直接指定元素和子元素的不透明度，讓設計網頁更加靈活(其值為0.0到1.0，0.6為60%不透明度)

CSS3亦提供了RGBA的顏色設定，其中A為不透明度，其值如opacity屬性，但子元素不會繼承

小技巧：先用RGB指定一顏色，再用RGBA，若遇瀏覽器不支援，元素仍可以使用傳統的顏色指定方式

按這看結果

文字

文字的格式和頁面易讀性有關，所以使用屬性上需特別注意

一般而言控制文字的外觀可以分為兩類：

直接影響字體和其整體外觀的屬性 (EX：字體、文字大小)

不管使用何種字體的效果皆為相同 (EX：顏色、文字間距)

關於字體...

襯線(Serif)

襯線字型在字母的主要筆劃末端都有額外的細節，這些細節稱為襯線，傳統印刷上長用於較長的內容，易讀性較高

無襯線(Sans Serif)

Sans在法文為『無』的意思，其文字末端為直的，無過多細節，看起來較簡潔，文字較小時較清晰易讀

等寬(monospace)

每個字母有相同的寬度，常用於原始碼中，因為較易對齊

關於字體...

http://files.dotblogs.com.tw/larrynung/

通用字體(Generic Font Family)

serif 襯線字 generic-family: serif

sans-serif 無襯線字 generic-family: sans-serif

cursive 捲曲字體 generic-family: cursive

fantasy 花俏字體 generic-family: fantasy

monospace 等寬字體 generic-family: monospace

＊瀏覽器對各種 Generic font family 有預設字體

按這看結果

關於字體的那些小事

若字體在使用者電腦裡沒有會自動使用下一個(字型堆疊)

最後一個盡量使用瀏覽器預設的 Generic font family

 font-family: '微軟正黑體', 'Times', sans-serif;

繁體中文字型若可以也盡量用英文名稱表示：

微軟正黑體 : Microsoft JhengHei

新細明體 : PMingLiU

細明體 : MingLiU

標楷體 : DFKai-sb

參考資料：關於 CSS 設定 font-family 研究

指定字體

使用font-family屬性決定字體，但必須是使用者電腦中有安裝你指定的字體，不然無法顯示，若需使用多個字體，請用逗號分隔，同頁面不建議使用超過三種以上的字體

若有字體名稱超過一個字，需要放於雙引號中

字體大小

font-size 屬性可以指定字體大小，字體大小單位一般有三種，一般瀏覽器預設 16px = 1em = 100.0% = 12pt

像素

是常見的大小單位，因為使用上較為方便，但缺點舊瀏覽器時，使用者是無法自行調整文字大小(不能縮放)

百分比

瀏覽器預設文字大小多為16px，故50 % = 8 px

W3C 規定的文字單位，因為其符合無障礙規定，可以讓使用者伸縮大小，一個em等於M字母寬度，會繼承父元素

參考文件：CSS文字大小单位PX、EM、PT

粗體、斜體、大小寫

font-weight 屬性可以製作粗體字，有normal(正常)和blod(粗體)兩種值可以選擇

font-style 屬性可以製作斜體字，有normal、italic(斜體)、oblique(傾斜體)三種屬性值可以選擇

text-transform屬性可以改變文字大小寫，屬性值為uppercase(轉大寫)、lowercase(轉小寫)、capitalize(第一個字母大寫)

按這看結果

底線和刪節線

text-decoration 屬性有以下屬性值：

1. none(移除所有裝飾)

2. underline(文字加上底線)

3. overline(文字上方加上一條線)

4. line-through(從文字中間加入刪節線)

按這看結果

行高

line-height行高指的是此行文字的上一行文字下緣線到此行下緣線的距離，在CSS中line-height屬性設定了整行文字的高度，font-size和line-height的差距為行距(leading)

http://blog.justfont.com/

行高

行高屬性值主要有

1. 預設值(normal)

元素設定的font-size文字大小 x 1 . 2(一般瀏覽器為1 .0 - 1 .2)

2. 純數字倍數

該元素設定的font-size文字大小 x 所設定值

3. 單位的值

直接設定單位值，多半使用em作為單位，因可以相對調整

4. 百分比

依據父元素 x 所設定百分比決定值

5. 繼承( inherit )

繼承父元素的值 x font-size

按這看結果

字母、單字間距

letter-spacing 屬性值可以決定字母間的間距，若字母為大寫增加字母間距多半可以增加文字的易讀性

word-spacing 屬性值則決定單字間的距離，通常不用特別更動，預設間距是由字體決定，只有當粗體等情況加大單字間距可以增加可閱讀性

按這看結果

文字水平對齊

水平對齊

一般文字由左向右書寫是相對合適，而 text-align 屬性值可以控制文字的對齊方向，一般有left(向左對齊)、right(向右對齊)、center(置中)、justify(此屬性值表除了最後一行外，每一行都應該佔據容器框的整個寬度)

按這看結果

垂直對齊

此處 vertical-align 屬性值指的垂直對齊並非指的是<p>、<div>等block level元素當中的文字垂直對齊，但若用於<table>的<td>、<th>會產生效果。正確用法應使用於<em>、<strong>、<img>等行內元素(inline level) ，屬性值有：baseline、sub、super、top、text-top、middle、bottom、text-bottom

按這看結果

參考資料：W3CSchool

參考資料： CSS Vertical Align(用純CSS解決div垂直置中)

文字縮排

text-indent 屬性值可以讓元素的第一行文字進行縮排，通常用em為單位，可以接受負值，亦即將文字縮至瀏覽器之外，給搜尋引擎或看不見圖片者看，此為過去常見使用負值縮排的技巧(效能問題，現在不建議使用)

按這看結果

CSS3 : 文字陰影

文字陰影為CSS3新增之屬性，可以更輕易製作出文字陰影的效果，text-shadow有四個屬性值，第一個為陰影左右位置，第二個值為陰影上下位置，第三個值為陰影模糊量(選擇性)，最後值為陰影顏色，目前最新瀏覽器均支援text-shadow屬性

   text-shadow: 2px 2px 2px black;

按這看結果

清單、表格與表單介面

項目符號樣式、位置

list-style-type屬性可以更改項目符號，list-style-position可以更改符號位置

游標符號

cursor屬性可以更改游標符號，常用值：pointer、move

按這看結果

Basic Box Model

了解CSS運作方式的關鍵：

想像每個HTML元素周圍都有看不見的方框(Box)

回想之前談到的<div>(block)和<span>(inline)

按這看結果

BOXMODEL

BOXMODEL

按這看結果

內容

content ，元素放置內容處，如果是 block level 或 inline-block 則使用 width 和 height 設置內容寬高，若為 inline 則使用 line-height。通常值的單位為px，不過也會使用em或%

內距(留白)

padding可以讓你決定元素內容和邊框間需要保持多少空間，通常值的單位為px，不過也會使用em或%， top、right、bottom、left可以決定各方位屬性值，記一下：上右下左！

邊框

border ，元素的邊框，可以設定邊框顏色、邊框類型和粗細，通常值的單位為px，不過也會使用em或%

邊界

margin屬性控制了box和box間的空隙，通常值的單位為px，不過也會使用em或%，top、right、bottom、left可以決定各方位屬性值

常用DISPLAY

display:block - 元素會以區塊方式呈現，除非設定 position 或 float，預設為block的元素：<div> 、 <p> 、 <h1~6> ，水平置中方法是在元素加上 margin : 0 auto ， 0 可為任意值

display:inline - 所有文字或圖片均不換行。預設為inline的元素：<a> 、 <span> 、 <em> 、 <strong> 、 <img> 、 <iframe>，可以有 margin-left 、 margin-right 、 padding-left 、 padding-right ，但不能有 margin-top 、 margin-bottom 、 padding-top 、 padding-bottom 、 width 、 height 、 background-image，元素水平置中的方式是在此元素的父元素加上 text-align : center

常用DISPLAY

display : inline-block - 外面是 inline，裡面是 block 。所以inline-block 元素不會換行，但是又可以設定 padding-top 、 padding-bottom 、 width 、 height 、background-image等屬性

display : none

display : none 和另一屬性 visibility : hidden 的最大差別是 display : none 並不會在瀏覽器佔空間，但在檢視原始碼仍可見，而 visibility : hidden 是隱形看不見，還是有佔空間

按這看結果

DISPLAY比較

參考資料： CSS 屬性 display 的值

參考資料： Mr.Orz網頁班講義

關於boxmodel的那些小事

背景顏色寬(高)度 = 內容寬(高) + padding 寬(高)

block 元素的 margin-top和margin-bottom (上邊界、下邊界) 密接時，只會顯示較大的那一個（Collapsing margin）

margin-top 有可能會超出父元素

按這看結果

利用 Border-box 為網路元素設定正確的長度與寬度

box寬高

width、height可以決定block level元素的寬高，可以使用px、%、em為單位，若需針對不同device做相對變化都會考慮使用em，inline level則是由line-height決定高

按這看結果

最大、最小寬高

針對不同大小的螢幕你可以設置最大最小寬 (max/min-width) 、高 (max/min-height) 來讓使用者在不同螢幕上都可以有良好的使用體驗，設置最小值後，真正的值不能比最小值低，反之，設置最大值後，真正的值不能比最大值高

按這看結果

overflow

overflow 屬性值會告訴瀏覽器若內容比box寬高還大時該如何處理，主要有兩種處理方式：hidden(隱藏多餘內容)、scroll(出現捲軸)

按這看結果

邊框寬度、樣式、顏色

border-width 可以決定邊框寬度， border-style 可以決定邊框樣式(dotted,、dashed、double、 groove,、ridge、 inset、outset、hidden、none)， border-color 可以決定邊框顏色，設定方式如文字顏色。top、right、bottom、left可以決定各方位屬性值

按這看結果

css 屬性縮寫

屬性縮寫 (shorthands) 可以讓屬性值可以寫於同一屬性，但需注意順序，以下兩者為等價關係

 div {   background-color:red;   background-image:none;   background-repeat:repeat;   background-repeat:0% 0%;   background-attachment:scroll; }

 div { background:red; }

參考資料：CSS shorthand property 屬性縮寫

CSS3 : BOX-SIZING

CSS3 : BOX-SIZING

content-box：box的寬與高只包括內容，不含內緣（padding），邊線（border），外緣（margin）。此為預設值

border-box：box的寬與高包括內容加上內緣與邊線

width(寬度) = border + padding + content

 box-sizing: content-box;  box-sizing: border-box;

練習三

了解 block level 和 inline level 的差異，並使用 div 標籤製作一個寬度 300px、高度 200px (padding : 50px) 背景色為黃色，並含 2px 黑色邊框的方框，位置定位水平置中

按這看結果

定位與排版

排版基礎觀念

由上而下、由左而右 → Normal Flow

display: block 之元素垂直排列

display: inline / inline-block 之元素水平排列

按這看結果

常見三種定位方式

1. Normal Flow position： static | relative; float: none;

2. Floats float： left | right

3. Absolute Positioning position： absolute | fixed

參考資料：CSS除錯

參考資料：[新手前端]float與clearfix

參考資料： 10步掌握CSS定位

按這看結果

如何定位兩欄式版面

1. 父元素當作基準設置 position : relative，子元素以 position: absolute 配合 top, bottom, left, right 屬性作定位

2. 使用 float : left or right 定位，記得使用 clear 屬性清除 float

按這看結果

由上而下,由左而右 Normal Flow

http://selfecy.com/css-troubleshooting-slide/#/7/4

Float文繞圖

http://selfecy.com/css-troubleshooting-slide/#/7/5

position : relative

http://selfecy.com/css-troubleshooting-slide/#/7/9

position : absolute

http://selfecy.com/css-troubleshooting-slide/#/7/9

boxmodel

http://selfecy.com/css-troubleshooting-slide/#/7/9

float / clear

clear (清除) 屬性是用來抵銷 float 屬性的作用，記得使用完 float 屬性接下來要消除，不然效果會延續下去

1. left：消除左邊的浮動

2. right：消除右邊的浮動

3. both：消除左邊及右邊的浮動

4. none：不消除任何一邊的浮動。

z-index

瀏覽器除了 x、y 軸方向的定位外，z-index 可以用來設置元素的Z 方向位置，z-index 數字越大的在越上面，反之則在越下面

記住：z-index 只對具有非 static position value 的 element 有效！

整數：元素矩格在重疊堆（stack）中的層次，可用負值。展現時數字大的在上，會蓋住數字小的。元素內的子元素不論是否設定 z-index，與父元素放在同一層，不須與外界的元素相比。同層的元素依先後次序堆疊，後來的蓋過先來的

z-index

auto：等同於 0 層，元素矩格的層次與父元素相同。元素內的子元素其 z-index 設為整數時，會與父元素及外界的元素相比。此為預設值

inherit：繼承父元素的值。要將多個元素重疊，要用到 position 特徵的 relative, absolute, fixed，及 top, right, bottom, left 四個特徵

z-index 必須配合 position 設為 relative, absolute, fixed 使用；其它情形 z-index 沒有效果，一律等同於 0 層

z-index

疊放群組 (stacking contexts) 指的是一組具有相同父元素的 elements 具有相同的疊放順序 (stacking order)

以下三種情況會產生新的疊放群組 (stacking contexts)：

1. html文件的根節點 <html>

2. position : 非使用 static，且 z-index != auto
3. opacity < 1

*當你對一個元素設定了1000的 z-index 但它的順序還是不受任何影響的話，看看它的子節點或是父節點看看是不是其中一個構成了新的疊放群組 (Stacking Context)

參考資料：The stacking context

參考資料：你從未瞭解過的 z-index

完整 z-index 規則

1. the background and borders of the element forming the stacking context

2. the child stacking contexts with negative stack levels (most negative first)

3. the in-flow, non-inline-level, non-positioned descendants

4. the non-positioned floats

5.the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks

6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0

7.the child stacking contexts with positive stack levels (least positive first)

練習四

運用boxmodel、偽類選擇器a:hover、ul元素製作一畫廊

參考：小鴨畫廊

練習五

應用所學的 CSS 排版技巧(使用 relative、absolute 以及 float 方法)製作一兩欄式網頁

關於CSS的好用工具

CSS3 Generator

進階班 : less/scss/sass

http://sonspring.com/sites/

css外觀樣式

Outline

前情提要

CSS簡介與基礎知識

打開瀏覽器的dEV TOOLS

試看看，沒CSS差很多...

打開你的開發者工具試試

關於css的一些小事

CSS3 主要新玩意兒

CSS 問題多在跨平台支援度

各瀏覽器使用不同樣板引擎

css屬性分為兩大類

主要css使用方式

主要CSS使用方式

為何要使用獨立樣式表？

串起HTML和css

CSS屬性影響元素外觀

第一個css檔案

練習一

CSS Reset 與 Normalize

CSS RESET 與 NORMALIZE 用法

選擇器

常用選擇器種類

常用選擇器種類

常用選擇器種類

常用 選擇器種類

常用選擇器種類

常用 選擇器種類

常用選擇器種類

更多的選擇器

練習二

css階層

CSS階層順序

CSS階層順序

css Specificity

CSS SPECIFICITY 範例

CSS 屬性 衝突

註解

色彩配置與文字

了解色彩

色彩三要素

前景色

背景色

CSS3 : 新增不透明度

文字

關於字體...

關於字體...

通用字體(Generic Font Family)

關於字體的那些小事

更多字體...

更多字體...

指定字體

字體大小

粗體、斜體 、大小寫

底線和刪節線

行高

行高

字母、單字間距

文字水平對齊

垂直對齊

文字縮排

CSS3 : 文字陰影

清單、表格與表單介面

項目符號樣式、位置

游標符號

Basic Box Model

BOXMODEL

BOXMODEL

內容

內距(留白)

邊框

邊界

常用DISPLAY

常用DISPLAY

DISPLAY比較

關於boxmodel的那些小事

box寬高

最大、最小寬高

overflow

邊框寬度、樣式、顏色

常用選擇器種類

常用選擇器種類

CSS 屬性衝突

粗體、斜體、大小寫