Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
基礎切版技巧
Search
BoBoChen
March 16, 2015
Design
0
330
基礎切版技巧
針對CSS初學者的基礎功能概述課程
BoBoChen
March 16, 2015
Tweet
Share
Other Decks in Design
See All in Design
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
280
不可分の民藝から可分の工業産業へ
creatorqsf
1
350
root Design Partnership Policy
root_recruit
0
4k
Designship 2023|想いを可視化するデザインの力
weddingpark
0
240
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
2
170
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
ウェブディレクターを救うBacklog
wattlaa
0
280
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
620
Product-Writing
aguringo
6
2.8k
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
280
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2.1k
The Language of Interfaces
destraynor
151
23k
Making Projects Easy
brettharned
108
5.5k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Building Your Own Lightsaber
phodgson
98
5.7k
It's Worth the Effort
3n
180
27k
Unsuck your backbone
ammeep
663
57k
What the flash - Photography Introduction
edds
64
11k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
Transcript
主講 / BoBo
課程大綱 一、CSS 套用方式 二、CSS 區塊特性 三、CSS 的繼承&權重 四、常用的語法 五、最常發生的問題 六、基礎切版實作
一、CSS套用方式 1.行內套用 例: <p style="font-size:16;">This is font size 16.</p>
一、CSS套用方式 2.崁入套用 例: <style type="text/css"> div { background-color:#FF0000; } </style>
一、CSS套用方式 3.外部連結套用 例: <link rel=stylesheet type="text/css" href=“index.css">
一、CSS套用方式 4.匯入套用 例: <STYLE TYPE="text/css"> <!-- @import url(http://www.mysite.com/style.css); --> </STYLE>
二、CSS區塊特性 1.區塊級容器 例:div,p,ul,li,dl,dt,dd…..
二、CSS區塊特性 2.非區塊級容器 例:span,a,font……
二、CSS區塊特性 3. 區塊&非區塊的特性比較 非區塊容器 區塊容器 寬度 依內容變動 100% 高度 依內容變動
依內容變動 區塊自動換行 不換行 強制換行 邊距(margin) 只有左右正常 可正常使用 間距(padding) 當區塊直接最外層時, 上方留白會無法顯示 可正常使用
三、CSS的繼承&權重 1.繼承的特性 例: .txt_cor{ color:#000} <div class="txt_cor"> <span>黑色的字</span> 同樣是黑色的字 </div>
三、CSS的繼承&權重 2.權重的特性 例: .txt_cor{ color:#000} #name{color:#fff} <div id="name" class="txt_cor"> <span>白色的字</span>
同樣是白色的字 </div>
四、常用的語法 1. 改變容器區塊特性 Display 2. 連結相關指令 a 3. 邊距 margin
4. 間距 padding 5. 浮動 float 6. 文字 font text 7. 顏色 color background 8. 定位 position 9. 邊框 border
四、常用的語法 10.進階版CSS略述 a. CSS選擇器 b. 圖片置中 c. 文字裁減 d. CSS的Framework
e. CSS3的裝飾用語法(IE8不支援)
五、最常發生的問題 1. 背景圖消失 2. 浮動&清除 3. z-index 4. 簡易偵測跑版問題的方法
六、基礎切版實作 http://www.studio-yoggy.com/