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
97
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
160
Django Girls 2015 - HTML
randylien
1
160
React.JS Conf & f8
randylien
1
200
Immutable, Performance and Component Communication
randylien
0
87
Introduce Flux & React in KKBOX
randylien
6
420
What is the next step for a front end beginner
randylien
1
82
Understand front end developer
randylien
2
140
Introduce Flux & React in practice
randylien
8
440
UI Engineering Introduction
randylien
0
37
Other Decks in Programming
See All in Programming
"config" ってなんだ? / What is "config"?
okashoi
0
240
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Netty Chicago Java User Group 2024-04-17
sullis
0
180
新宿ダンジョンを可視化してみた
satoshi7190
2
260
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
Ruby Function Composition
bkuhlmann
1
330
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Scaling GitHub
holman
457
140k
GraphQLとの向き合い方2022年版
quramy
32
12k
We Have a Design System, Now What?
morganepeng
43
6.8k
Docker and Python
trallard
34
2.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