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
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
460
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
130
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
楽して成果を出すためのセルフリソース管理
clipnote
0
180
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
330
私の後悔をAWS DMSで解決した話
hiramax
4
210
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.9k
速いWebフレームワークを作る
yusukebe
5
1.7k
1から理解するWeb Push
dora1998
7
1.9k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Designing for Performance
lara
610
69k
GitHub's CSS Performance
jonrohan
1032
460k
Unsuck your backbone
ammeep
671
58k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Done Done
chrislema
185
16k
Embracing the Ebb and Flow
colly
87
4.8k
Git: the NoSQL Database
bkeepers
PRO
431
66k
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