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
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
660
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.2k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
430
AkarengaLT vol.38
hashimoto_kei
1
120
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
810
AI Agent 時代的開發者生存指南
eddie
4
2.1k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
480
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Featured
See All Featured
Making Projects Easy
brettharned
120
6.4k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
620
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How to Ace a Technical Interview
jacobian
280
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
A designer walks into a library…
pauljervisheath
209
24k
The Cult of Friendly URLs
andyhume
79
6.6k
Done Done
chrislema
185
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Code Reviewing Like a Champion
maltzj
526
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
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