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
04 - CSS - OpenWebSchool
Search
openwebschool
August 14, 2012
Programming
4
350
04 - CSS - OpenWebSchool
openwebschool
August 14, 2012
Tweet
Share
More Decks by openwebschool
See All by openwebschool
11 - CodeIgniter - OpenWebSchool
openwebschool
1
330
09 - Node.JS - OpenWebSchool
openwebschool
1
390
07 - Javascript - OpenWebSchool
openwebschool
3
340
08 - js frontend & jQuery - OpenWebSchool
openwebschool
3
280
05 - MySQL - OpenWebSchool
openwebschool
1
250
06 - PHP & MySQL - OpenWebSchool
openwebschool
1
270
03 - PHP II - OpenWebSchool
openwebschool
2
390
01 - W3 intro - OpenWebSchool
openwebschool
3
240
02 - PHP I - OpenWebSchool
openwebschool
3
260
Other Decks in Programming
See All in Programming
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
280
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
480
Realtime API 入門
riofujimon
0
150
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
260
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.3k
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
4
1k
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
1k
Quine, Polyglot, 良いコード
qnighy
4
650
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
32
1.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
380
Rails Girls Zürich Keynote
gr2m
94
13k
Code Review Best Practice
trishagee
64
17k
The Pragmatic Product Professional
lauravandoore
31
6.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Typedesign – Prime Four
hannesfritz
40
2.4k
A designer walks into a library…
pauljervisheath
204
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Facilitating Awesome Meetings
lara
50
6.1k
Transcript
Cascading Style Sheets «ÂIe
ÛY »Ð C
ºìéaNa TiàÂ= åâ0_
Æéaª^ Î?í½Þ Üê¡s
Õ
äãá I{@bA® Æ;Xéaª^
ð{ Ib¤¾ Æ;Xéaª^
Ú g¬w Æ;Xéaª^
Æ { ;Xéa: ª¿ } äãá ð{ Ú
n { 4H¼M: ; r: s/ }
Æ { ;Xéa: ª¿; ¸: ¦6 ; }
p { color: red; font-size: 200%; }
pL<
b9 ªGWy®Ã <p style=”color: red”></p>
9 1ªG #$( <style> p { color: red }
</style>
H²Éú 1ªGSv <link href=”style.css” rel=”stylesheet”> #$(## p { color: red
} '$
éa
SX black white red yellow green blue cyan
rgb(0, 255, 120)
rgba(0, 255, 120, 0.5)
#345 #0F12AB
hsl(120, 50%, 20%)
hsla(0, 50%, 20%, 0.1)
µd
%, ¹
"" " # %( % ¶
" , XØ" X¡,
äãá
8äãá p { ... }
!''äãá .banana
äãá #hahaha
ÄLäãá *
©Á p.banana img#hahaha *.banana
55äãá p img
5äãá p > img
Bgxwäãá p ~ img
F[eUËâ Bgxwäãá p + img
©Á p .banana #hahaha > p
#8 p:first-of-type p:nth-of-type (3n+1) p:nth-of-type (even) p:last-of-type
#58 p:first-child p:nth-child (3n+1) p:nth-child (even) p:nth-last-child (2n)
9 p::first-letter p::first-line p::selection
²» a:link a:active a:visited
nP p:hover
nP input:focus input:checked input:enabled input:disabled
;X
éa $!$& <¼M>
Xó46 $#('. <fl> <6Y> medium small x-small xx-large smaller
Xó®¯ $#(+( normal bold light 100 900
X $#("!- <Hk>
¢ëçÙ $#( 10px red bold Helvetica
XóÇÌ (,($&($# none underline line-through overline
Ï× (,(!# center left right justify
b¾ (,(!# <fl> <6Y>
X¾ +$&'%# !((&'%# <fl>
¸
¸éa &$)#$!$& <¼M>
¸ÎÍ &$)#" url(“pony.png”)
¸ß &$)#&%( repeat repeat-x repeat-y no-repeat
b9Ô£À8
8D@:b9ԣb98 E4H+Â d0N
£À8 =:µ ´yau
b9U£ÀÈ zi-
òO<Y '%!- none inline block inline-block
«5
£À8[$,"$!
9 <" ½² "" 3!
89 £¨^_ObF5
Ø +( <fl> <6Y> ¢o100%
¡ ( <fl> h?2}l[\ Til0~@<6Y>eB
9 <" ½² "" 3! +( (
íÞ ½² K©lK¼MKV³
íÞØ $&&+( <fl>
íÞéa $&&$!$& <¼M>
íÞÛY $&&'(-! solid dotted dashed double
çÙ $&& 2px black solid
æQ[21IEGíÞ |@3D:f[GÒÛY
$&&($%+( $&&&(+( $&&$(($"+( $&&&(+( <fl>
<RçÙ DK;¤ -,=:+Lª -, =: - =: , - :
, =
9 <" ½² "" 3! $&&+(
9¾ 2}3|Z½² r+c]Q½²
9¾Ø %# <fl>
9 <" ½² "" 3! %#
H¾ 2}¦2}b»
H¾Ø "&# <fl>
2}3½² 2}¿° 2}3½² 2}¿° < < <
2}3½² 2}¿° 2}3½² 2}¿° < -,<t <
Ѭ
K£À8F21¤ñ
Ѭô£À8 IEm¤ñ
Ѭ !$( none left right
¨¥l>tA 8R`7IE¤ñ
¨ !& none left right both
yd
8dÅKM z]¤ñîjy
ydJ±oî §h8}UydÅ
yd %$'($# static relative absolute fixed
Ïyd %$'($#&!(* 8z>Po
¼Ïyd %$'($#'$!)( 8´y¥vo
vyyd %$'($#, 8o 0¸¥v
æQ[GÒyd<R /\´VFÖLusÒ
2 ($% <fl> ¦-ub½b»
1 $(($" <fl> ¦,ub½b»
I !( <fl> ¦=½b½b»
E &( <fl> ¦:½b½b»
ÓÊ2ÉÃ
" '9xb $$!# & !" ) " #
®9x\b U.Xq¡jj
tAÛYÕk
èH·q°VW~c §`¶*Ĭ*#$%#' ³ÝïZ rL
%(J¯4CmÁ $$! ###
R±À E-p| m7 $$! #### "
(-!)' ¹0· $$! " #$$% #$(%#