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
360
04 - CSS - OpenWebSchool
openwebschool
August 14, 2012
Tweet
Share
More Decks by openwebschool
See All by openwebschool
11 - CodeIgniter - OpenWebSchool
openwebschool
1
340
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
250
02 - PHP I - OpenWebSchool
openwebschool
3
270
Other Decks in Programming
See All in Programming
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
190
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
PicoRuby on Rails
makicamel
2
110
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
950
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
C++20 射影変換
faithandbrave
0
540
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
580
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
Benchmark
sysong
0
270
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Why Our Code Smells
bkeepers
PRO
337
57k
Embracing the Ebb and Flow
colly
86
4.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Adopting Sorbet at Scale
ufuk
77
9.4k
Code Review Best Practice
trishagee
68
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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· $$! " #$$% #$(%#