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
160
React.JS Conf & f8
randylien
1
210
Immutable, Performance and Component Communication
randylien
0
96
Introduce Flux & React in KKBOX
randylien
6
430
What is the next step for a front end beginner
randylien
1
86
Understand front end developer
randylien
2
180
Introduce Flux & React in practice
randylien
8
450
UI Engineering Introduction
randylien
0
46
Other Decks in Programming
See All in Programming
ReactFlow への移行で実現するユーザー体験と開発体験の向上
j9141997
0
150
フロントエンドテストの育て方
quramy
11
2.8k
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.6k
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
200
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
8
7.1k
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
180
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.2k
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
140
Agentic Applications with Symfony
el_stoffel
1
190
gen_statem - OTP's Unsung Hero
whatyouhide
1
190
PHPUnit 高速化テクニック / PHPUnit Speedup Techniques
pinkumohikan
1
1.3k
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
370
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Navigating Team Friction
lara
184
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
720
Measuring & Analyzing Core Web Vitals
bluesmoon
6
370
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
The Pragmatic Product Professional
lauravandoore
33
6.5k
GraphQLとの向き合い方2022年版
quramy
45
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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