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
Django Girls 2015 - CSS
Search
Randy Lien
May 30, 2015
Programming
1
110
Django Girls 2015 - CSS
Django Girls Taipei 2015 training material
Randy Lien
May 30, 2015
Tweet
Share
More Decks by Randy Lien
See All by Randy Lien
The ideas of Clojure - Things I learn from Clojure
randylien
0
180
Django Girls 2015 - HTML
randylien
1
170
React.JS Conf & f8
randylien
1
210
Immutable, Performance and Component Communication
randylien
0
100
Introduce Flux & React in KKBOX
randylien
6
430
What is the next step for a front end beginner
randylien
1
88
Understand front end developer
randylien
2
190
Introduce Flux & React in practice
randylien
8
450
UI Engineering Introduction
randylien
0
50
Other Decks in Programming
See All in Programming
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
150
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1.1k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
240
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
200
止められない医療アプリ、そっと Swift 6 へ
medley
1
130
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
640
私はどうやって技術力を上げたのか
yusukebe
43
18k
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
460
CSC509 Lecture 04
javiergs
PRO
0
300
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
610
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.4k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.1k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
It's Worth the Effort
3n
187
28k
BBQ
matthewcrist
89
9.8k
Unsuck your backbone
ammeep
671
58k
Rails Girls Zürich Keynote
gr2m
95
14k
4 Signs Your Business is Dying
shpigford
185
22k
Faster Mobile Websites
deanohume
310
31k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Fireside Chat
paigeccino
40
3.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Transcript
Django Girls 2015 CSS Randy Lien
Cascading Style Sheets
CSS 不知道中⽂文怎麼翻譯
CSS 視覺呈現
None
認識 CSS 原理 .header { font-size: 12px; } Selector Property
Value Declaration Rule
CSS 常⾒見的選擇器 • 標籤選擇器 (Tag name selector) • 類別名稱選擇器 (Class
name selector) <h1>網站名稱</h1> h1 { font-size: 36px; } <h2 class='article-title'>⽂文章標題</h2> .article-title { font-size: 16px; }
CSS 常⽤用的屬性 • color • background-color • background-image • border
• height, width
CSS 屬性 - color • 常⾒見使⽤用的數值類型 RGB(A) ⾊色碼,16 進位⾊色碼,顏⾊色名稱 color:
rgb(154, 205, 50); color: rgba(240, 255, 240, 0.75); color: #9acd32; color: yellowgreen;
CSS 屬性 - background-color • 常⾒見使⽤用的數值類型 RGB(A) ⾊色碼,16 進位⾊色碼,顏⾊色名稱, transparent
background-color: rgb(154, 205, 50); background-color: rgba(240, 255, 240, 0.75); background-color: #9acd32; background-color: yellowgreen;
CSS 屬性 - background-image • 會出現在 background-color 上⽅方 常⾒見使⽤用的數值類型為 URI
網址,none background-image: url(https:// djangogirls.s3.amazonaws.com/event/ backgrounds/IMG_4689.jpg); background-image: none;
CSS 屬性 - border-* p { border-width: 10px; border-style: solid;
//dotted, dashed, inset, outset border-color: white; background-color: rgb(16, 59, 120); border-radius: 30px; }
CSS 屬性 - height, width p { height: 290px; width:
505px; }
更多關於 CSS 的網站 • https://developer.mozilla.org/en-US/docs/Web/ Guide/CSS/Getting_started
fin