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
98
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
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
160
NEWT Backend Evolution
xpromx
1
110
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
470
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
22
9k
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
370
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
500
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
560
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
CDK引数設計道場100本ノック
badmintoncryer
2
360
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Being A Developer After 40
akosma
90
590k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
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