Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
04 - CSS - OpenWebSchool
Search
openwebschool
August 14, 2012
Programming
360
4
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
04 - CSS - OpenWebSchool
openwebschool
August 14, 2012
More Decks by openwebschool
See All by openwebschool
11 - CodeIgniter - OpenWebSchool
openwebschool
1
380
09 - Node.JS - OpenWebSchool
openwebschool
1
400
07 - Javascript - OpenWebSchool
openwebschool
3
350
08 - js frontend & jQuery - OpenWebSchool
openwebschool
3
290
05 - MySQL - OpenWebSchool
openwebschool
1
280
06 - PHP & MySQL - OpenWebSchool
openwebschool
1
300
03 - PHP II - OpenWebSchool
openwebschool
2
400
01 - W3 intro - OpenWebSchool
openwebschool
3
260
02 - PHP I - OpenWebSchool
openwebschool
3
280
Other Decks in Programming
See All in Programming
あなたの await、OS まで届いてる? strace で覗く JavaScript の非同期
hasutosasaki
1
1.8k
コーディング自動化の次へ。人の介入をゼロにするファクトリーとサポートAIによる実践
timakin
5
5k
baseline으로 마이그레이션, 리팩토링 안전하게 맡기기
fornewid
1
820
AI時代のシニアエンジニアとは
yosuke_furukawa
PRO
14
11k
Performance Optimization With LLMs
xleitix
0
230
複数ドメインを一つのアプリに統合するFlutterの設計と運用_FlutterKaigi2026登壇資料(須永高弘)
takahirosunaga
0
130
React Native에 현대적인 빌드 도구 더하기: Rollipop 구현기
leegeunhyeok
0
180
ChromeでローカルLLM
ryu1013
0
190
조합이폭발하는디자인시스템이걸눈으로도테스트하라고요
giljongyu
0
690
선언형 햅틱 라이브러리 진동을 소개합니다
l2hyunwoo
1
260
AIがコードを書いてくれる時代、我々は何を確かめるのか
yosuke_furukawa
PRO
13
5.5k
社内AIエージェント「Askワンバン」における コストチューニングの取り組み
t0yohei
0
120
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
240
BBQ
matthewcrist
90
10k
Build your cross-platform service in a week with App Engine
jlugia
234
19k
Bash Introduction
62gerente
615
220k
The untapped power of vector embeddings
frankvandijk
2
2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.9k
First, design no harm
axbom
PRO
2
1.4k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
1.1k
Collaborative Software Design: How to facilitate domain modelling decisions
baasie
1
360
[RailsConf 2023] Rails as a piece of cake
palkan
59
7.1k
Marketing to machines
jonoalderson
1
6k
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· $$! " #$$% #$(%#