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
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
320
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
One Enishi After Another
snoozer05
PRO
0
130
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
6k
What's new in Spring Modulith?
olivergierke
1
160
XP, Testing and ninja testing ZOZ5
m_seki
3
740
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
Introduce Hono CLI
yusukebe
6
2.8k
AI Agent 時代的開發者生存指南
eddie
3
1.9k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
300
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Unsuck your backbone
ammeep
671
58k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Six Lessons from altMBA
skipperchong
29
4k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Why Our Code Smells
bkeepers
PRO
340
57k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Faster Mobile Websites
deanohume
310
31k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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