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
330
04 - CSS - OpenWebSchool
openwebschool
August 14, 2012
Tweet
Share
More Decks by openwebschool
See All by openwebschool
11 - CodeIgniter - OpenWebSchool
openwebschool
1
320
09 - Node.JS - OpenWebSchool
openwebschool
1
370
07 - Javascript - OpenWebSchool
openwebschool
3
330
08 - js frontend & jQuery - OpenWebSchool
openwebschool
3
280
05 - MySQL - OpenWebSchool
openwebschool
1
240
06 - PHP & MySQL - OpenWebSchool
openwebschool
1
270
03 - PHP II - OpenWebSchool
openwebschool
2
380
01 - W3 intro - OpenWebSchool
openwebschool
3
230
02 - PHP I - OpenWebSchool
openwebschool
3
260
Other Decks in Programming
See All in Programming
Hi, have you met Kotlin Multiplatform? | Kotlin User Group Berlin
prof18
0
100
Runtime Objects in Rust
mitsuhiko
0
220
Kubernetes Code Contribution入門
bells17
2
160
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
1
220
地方こそサーバーレス、その意義に迫るサーバーレスPHP / Serverless PHP: The Rural Areas, and Why Serverless PHP Matters
seike460
PRO
2
110
TypeScriptから始める VR生活
tamagokakeg
2
150
TypeScriptのパフォーマンス改善
yajihum
14
5.4k
Slackワークフローで感謝を伝える機能/WiFi 自動接続/Figma to React Component/障害レポート君 Team3@NOT A HOTEL
nakaohiroshi
0
340
株式会社ゼネテック
genetec
0
130
勉強会4_アップデートされたAssistantsAPIを試す
milky04
0
1.5k
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
5
340
2024 コーディング研修
ckazu
2
700
Featured
See All Featured
Building Adaptive Systems
keathley
32
1.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.4k
Visualization
eitanlees
137
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Scaling GitHub
holman
457
140k
The Invisible Side of Design
smashingmag
294
49k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
How to name files
jennybc
65
94k
What the flash - Photography Introduction
edds
64
11k
GitHub's CSS Performance
jonrohan
1025
450k
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· $$! " #$$% #$(%#