CSS Basic

行動開發學院 http://MobileDev.TW
Cascading Style Sheet
Basic
Ryan@MobileDev.tw

大綱
1. 簡介
2. 位置
3. 語法
4. 背景
5. 文字
6. 字型
7. 箱子
8. Margin
9. Border
10. Padding
11. 清單
12. 表格
13. 元件
14. 應用

第1章：簡介
l  Cascading Style Sheets
l  Cascading：多個樣式定義可被重疊使用在一個網頁上
l  外部檔案
l  表頭
l  行內
l  Style：樣式
l  HTML：結構
l  CSS：樣式
l  Sheets：表
l  一堆相同格式的資料放在一起

第2章：位置
l  外部：獨立儲存為一個檔案(例如mystyle.css)
l  在你的網頁檔案的head.../head中加入
link rel=stylesheet type=text/css href=mystyle.css /
l  內部：整個樣式表放在網頁檔案的head.../head裡
l  在你的網頁檔案的head.../head中加入
style type=text/css........../style
l  行內：直接將樣式語法加入該標記中
l  在你需要使用樣式的元件之開始標籤中，如例所示
p style=color:sienna;margin-left:20pxThis is a paragraph./p
l  階層式關係，取最後一個
層層相疊覆元件、剝⾄至底層知分曉

第3章：語法
•  整體結構 selector {property:value}
•  selector選擇器
•  HTML標籤 p{color:red} 段落中的文字顏色為紅色
•  id
•  CSS語法：#para1{ text-align:center; color:red;}
•  HTML套用語法：
p id=para1This paragraph will take the para1 style/p
•  class
•  CSS語法：.right {text-align:right}
•  HTML套用語法：
p class=rightThis paragraph will be right-aligned./p
•  Attribute
•  CSS語法：input[type=text] {background-color:blue}
•  HTML影響：所有type為text的input元件，背景顏色為藍色

第3章：語法
•  property：屬性
•  指定該元件或標籤的某項特質(如顏色或字體)
•  多項屬性可用分號分開
{propertyA:valueA ; propertyB:valueB}
•  value：屬性值
•  決定屬性的值(如什麼顏色，什麼字體)
•  屬性值若為兩個字以上，加
•  p {font-family:sans serif}

第4章：背景
l  background-color 設定背景顏色
n  三種表達方式
è  名稱 yellow
è  Hex #00FF00
è  RGB rgb(255,0,255)
l  background-image 設定背景圖片
n  background-repeat：重複
è  repeat 垂直與水平重複(預設值)
è  repeat-x 水平重複
è  repeat-y 垂直重複
è  no-repeat 不重複
n  background-attachment：固定或捲動
è  fixed 固定
è  scroll 捲動
n  background-position：圖片位置

Chap4.Lab

Lab2.混用顏色與圖片

第5章：文字
l  color 設定文字顏色
l  名稱、RGB、Hex
l  text-align 對齊
l  left、center、right、justify
l  text-decoration 裝飾
l  overline 頂線、line-through 刪除線
l  underline 底線、blink 閃動
l  none (最常用，用來消除連結預設底線)
l  text-transform 大小寫
l  uppercase 都大寫
l  lowercase 都小寫
l  capitalize 首字大寫
l  text-indent 首行縮排、line-height 行距
l  letter-spacing 字元間距、word-spacing 字詞間距

第6章：字型
l  font-family 指定字型
l  指定字型一,指定字型二,指定字型三
l  font-style 指定樣式 (就只是斜體)
l  normal 標準
l  italic 斜體(使用字型本身的斜體)
l  oblique 斜體(使其傾斜)
l  font-size 指定大小
l  px、em(W3C建議)
l  font-weight 粗細 (就只是粗體)
l  normal(400)、bold(700)、100~900
l  bolder、 lighter
l  font-variant 變種(以大寫字來寫小寫字)
l  normal、small-caps

Lab.文章標示練習
•  找一段文字，進行文字與字型各種樣式測試

第7章：Box Model
l  Margin –邊界
l  Border – 邊框
l  Padding – 框距
l  Content - 內容、文字/影像

第8章：邊界 Margin
l  margin-xxxx 分開標示
l  margin-bottom
l  margin-left
l  margin-right
l  margin-top
l  margin 一次標示
l  10px
-  上：10px、右：10px、下：10px、左：10px
l  10px 5px
l  10px 5px 15px
l  10px 5px 15px 20px

第9章：邊框 Border 1/2
l  border-style 設定邊框樣式 (可每一邊不同)
l  樣式
-  none, dotted, dashed, solid, double, groove 溝槽
-  ridge 隆起, inset, outset, hidden
l  四邊分開設
-  border-top-style
-  border-right-style
-  border-bottom-style
-  border-left-style
l  一次一起設
-  border-style:dotted solid double dashed 上,右,下,左
-  border-style:dotted solid double 上,左右,下
-  border-style:dotted solid 上下,左右
-  border-style:dotted 四邊相同

第9章：邊框 Border 2/2
l  border-width 設定邊框寬度(框的粗細)
l  四邊分開設
-  border-top-width
-  border-right-width
-  border-bottom-width
-  border-left-width
l  一次一起設
-  border-width:10px 5px 15px 20px 上,右,下,左
-  border-width:10px 15px 5px 上,左右,下
-  border-width:10px 5px 上下,左右
-  border-width:10px 四邊相同
l  border-color 顏色
l  border 一次設定四邊的樣式、寬度與顏色
l  border:5px solid red

第10章：框距 Padding
l  設定內容與邊框的距離大小
l  各別設定
l  padding-bottom
l  padding-left
l  padding-right
l  padding-top
l  一次設定
l  padding

Lab：iOS7 Style Page

Lab.Box Model

第11章：清單 List 1/2
l  list-style-type 設定清單樣式
l  none
l  circle
l  disc
l  square
l  decimal 1,2,3,...
l  decimal-leading-zero 01,02,03,....
l  lower-latin a,b,c,...
l  upper-latin A,B,C,....
l  lower-roman i,ii,iii,.....
l  upper-roman I,II,III,.....

第11章：清單 List 2/2
l  list-style-image 使用圖片作為清單樣式
l  list-style-image:url('picture.jpg');
l  list-style-position 位置
l  inside
l  outside

第12章：表格 Table
l  border-collapse 決定表格邊框與儲存格邊框是否重疊
l  collapse
l  separate(預設值)
l  border-spacing 相鄰儲存格邊框之間的距離
l  10px 四邊
l  10px 5px 水平、垂直
l  caption-side 標題位置
l  top
l  bottom
l  left
l  right

Lab：Mobile Style Slide
•  可往左捲動一頁，背景不動
•  最下方有灰色半透明背景
•  圖示均有圓角邊框
•  圖示間距上下較窄、左右
較寬

第13章：元件 Element
l  控制元件大小
l  height
l  width
l  visibility 元件可視性
l  visible (預設值)
l  hidden
l  collapse

第14章：應用
•  圖文編排
•  區塊連結按鈕
•  全頁排版取代表格效果

Chap14.Lab Menu Bar

Chap14.Lab Float

Lab.對話泡泡

為什麼會有三角形？
每一邊先設定成不同的顏色

把div的大小縮成0px

其中一邊顏色保留，另外三邊設成透明色

CSS Basic

Recommandé

Recommandé

Contenu connexe

Similaire à CSS Basic

Similaire à CSS Basic (7)

Plus de Ryan Chung

Plus de Ryan Chung (20)

CSS Basic