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
99
Introduce Flux & React in KKBOX
randylien
6
430
What is the next step for a front end beginner
randylien
1
87
Understand front end developer
randylien
2
180
Introduce Flux & React in practice
randylien
8
450
UI Engineering Introduction
randylien
0
49
Other Decks in Programming
See All in Programming
ワープロって実は計算機で
pepepper
2
1.2k
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
230
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.7k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
180
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
290
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
950
実践 Dev Containers × Claude Code
touyu
1
160
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
240
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
12
2.9k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
340
Comparing decimals in Swift Testing
417_72ki
0
160
Vibe coding コードレビュー
kinopeee
0
420
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Building an army of robots
kneath
306
45k
Documentation Writing (for coders)
carmenintech
73
5k
GitHub's CSS Performance
jonrohan
1031
460k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Site-Speed That Sticks
csswizardry
10
760
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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