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
170
Django Girls 2015 - HTML
randylien
1
160
React.JS Conf & f8
randylien
1
200
Immutable, Performance and Component Communication
randylien
0
91
Introduce Flux & React in KKBOX
randylien
6
430
What is the next step for a front end beginner
randylien
1
84
Understand front end developer
randylien
2
170
Introduce Flux & React in practice
randylien
8
450
UI Engineering Introduction
randylien
0
42
Other Decks in Programming
See All in Programming
僕がつくった48個のWebサービス達
yusukebe
18
17k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
880
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
170
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.7k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.6k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
530
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
Featured
See All Featured
Facilitating Awesome Meetings
lara
49
6k
We Have a Design System, Now What?
morganepeng
50
7.2k
Scaling GitHub
holman
458
140k
The Language of Interfaces
destraynor
154
24k
The Invisible Side of Design
smashingmag
297
50k
Writing Fast Ruby
sferik
626
61k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
RailsConf 2023
tenderlove
29
880
YesSQL, Process and Tooling at Scale
rocio
167
14k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
How to Ace a Technical Interview
jacobian
275
23k
Rails Girls Zürich Keynote
gr2m
93
13k
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