CSS ETIQUETAS

Prévia do material em texto

Columnas
columnDwidth0y[size];
columnDcount0k[number];
columns0k width count
auto
Posicionamiento
absoluteposition0k
top.right.bottom.left0k[size]y
clipDpath0kurl6shape0svg9y
overflow0k
auto
auto
fixedrelativestatic
visible hidden scroll auto
Tablas
borderDcollapse0
borderDspacing0ky[size];
captionDside0k
emptyDcells0
tableDlayout0k
separate collapse
top bottom
show hide
auto fixed
1mm1in 1cm 1pc 1pt
25.4mm 10mm 4.23mm 0.35mm
Márgeneskykespaciados
margin.padding0k
margin.padding0k
margin.padding0k
margin.padding0k
top right bottom left
top rightyleft bottom
topybottom leftyright
topyrightybottomyleft
Listas
listDstyleDimage0kurl6image0png9;y
listDstyleDposition0
listDstyleDtype0kdisc circle
none
inside outside
square none
decimal decimal,leading,zero
lower,alpha upper,alpha
lower,roman upper,roman
listDstyle0k type position image
backgroundDcolor0y[color];
backgroundDimage0kurl6image0jpg9;
backgroundDrepeat0k
backgroundDattachment0k
backgroundDposition0k[pos,x]y[pos,y];
background0k
repeat
none
repeat,x repeat,y no,repeat
scroll fixed
color image repeat attachment position
color0y[color];
Coloreskykfondos
Bordes
borderDcolor0y[color];
borderDwidth0k[size];
borderDstyle0k[style];y
thin medium thick
border0k width style color
Colores
Keywords0yRoyalBlue;
Hexadecimal0yR%SC/ES;yyyyyR%CE;
RGBkmodel0yRGB6C85SH85LL89;
HSLkmodel0kHSL6LL85AS#533#9;
currentColortransparent
withkalphakchannel
RGBA6C85SH85LL85yH089;
HSLA6LL85AS#533#5yH089;
solid
dotted
dashed
double
groove
ridge
inset
outset
Estilos
FuenteskEvariacionesF
fontDvariant0k
textDdecoration0
textDtransform0k
normal
none
none
small,caps
underline overline
line,through
capitalize
uppercaselowercase
Fuentes
fontDfamily0y[fontS]5y[fontL]5y[font7]5y000y;
fontDsize0k[size]yyyyyyyyyyyyyyyyyyy
fontDstyle0k
fontDweight0k[SHH,/HH]y
serif sans,serif cursive fantasy monospace
xx,small x,small small medium
large x,large xx,large smaller larger
normal italic oblique
normal bold lighter bolder
font0k style variant weight size2height family
Perfiles
outlineDcolor0y[color];
outlineDstyle0k[style];
outlineDwidth0k[size];
outline0
thin medium thick
widthstylecolor
invert
Tiposkdekelementos
display0k list,item
table table,cell table,row
inline block inline,block none
visibility0kvisible hidden collapse
FuentekEalineacioneskykespaciadoF
Desplazamiento
float0k
clear0
leftnone right
leftnone right both 15 5 -5
zDindex0
SintaxiskCSS
selectorkkHidkk#classkk0pseudoclasskk00pseudoelementkk[attr]kk
letterDspacing0y[size];
lineDheight0k[size];yyyyyyyyyyyyyyyyyy
textDindent0k[size];
wordDspacing0k[size];
whiteDspace0k
tabDsize0y[size];
textDalign0
verticalDalign0k[size]
normal
normal
normal
normal no,wrap pre
pre,line pre,wrap
left center right justify
baseline
sub super top middle bottom
text,top text,bottom
borderDtopD(
borderDrightD(
borderDbottomD(
borderDleftD(
Separadorkdekcolumnas
columnDruleDwidth0k[size];
columnDruleDstyle0k[style];
columnDruleDcolor0k[color];y
columnDrule0kwidth style color
columnDgap0y[size];
columnDspan0k[number];
columnDfill0kbalance auto
normal
all
http://www.emezeta.com/Creadospors@Manzs(shttp://twitter.com/Manzs)s
DISEÑO WEB CSS3
CHEAT SHEET
propertykk0kkvaluekkA
}
{
(Dtop
(Dleft
(Dright
(Dbottom
AA A
2em
normal
1em 0.5em
1ex2ex
4ex
Cursoreskdelkratón
none
cursor0yurl6image0png9
default crosshair help move
pointer progress text wait
context,menu cell
vertical,text alias copy
no,drop not,allowed all,scroll
col,resize
row,resize ,resize
s
sesw
n
w e
nenw
border
padding
margin
top-left top-right
bottom-rightbottom-left
top
bottom
left right
Ubicaciones
Dimensiones
maxDwidth0y[size];
minDwidth0k[size];
width0k[size] auto
none
none
(Dheight
]#k*#kk[]#k[*#
a#kb#kkkkkA#kB#
i#kii#kkkkkkkkI#kII#
shape
Fotogramas
EkeyframesGnameanimationG{
GGGG6pG{Gpropiedad:OvalorO}G
GGGG222
GGGG566pG{Gpropiedad:OvalorO}
} 6pGAGfrom566pGAGto
http://www.emezeta.com/Creado por @Manz ( http://twitter.com/Manz ) 
DISEÑO WEB CSS3
CHEAT SHEET
8webkit8
8moz8
8ms8
8o8
background8imageMG
OOOOOOlinear8gradientk[dir]4O[col1]4O[col2]XXXx;
OOOOOOradial8gradientk[shape]O[size]OatO[pos]4O[col1]4O[col2]4OXXXx;O
OOOOOOrepeating8linear8gradientkXXXx;
OOOOOOrepeating8radial8gradientkXXXx;
Gradientes DirecciónGenGgradienteGlineal
line8through
OpcionesGdelGgradienteGradial
TipografíasGCSSú
Efont8faceG{
GGGfont8familyMGbOpenOSansb;
GGGfont8weightMO3__;O
GGGsrcMOlocalkbOpenOSansbx4
GGGurlkfileXttfxOformatkbtruetypebx4
GGGurlkfileXwoffxOformatkbwoffbx;O}
j6deg
5v6deg
4á6deg
úB6deg
ú*deg
5x*deg45*deg
ú4*deg
toGtop
toGtopGright
toGright
toGbottomGright
toGbottom
toGtopGleft
toGleft
toGbottomGleft
ellipse circleshapeMG
sizeMG[size]
O
posM
farthest8corner closest8corner
farthest8side closest8side
center top left right bottom
topOleft topOright bottomOleft bottomOright
FondosGoGsombrasGmúltiples
background8imageMOurlkback1Xpngx4Ourlkback2Xpngx4OXXX;
background8repeatMGno8repeat4Orepeat8x4OXXX;
Sombras
text8shadowMG[pos8x]O[pos8y]O[blur]O[color];
box8shadowMO[pos8x]O[pos8y]O[blur]O[size]O[color];O
none
none inset
Fondos
backgroundMGcolor position size
background8clipMG
background8originMG
background8sizeMG[size8w]O[size8h];
border8box padding8box content8box
padding8box content8boxborder8box
cover contain auto
repeat origin clip att img
border8top8left83
border8top8right83
border8bottom8left83
border8bottom8right83
border8radiusMG
border8radiusMG
border8radiusMGG
top right bottom left
topObottom leftOright
topOrightObottomOleft
BordesGredondeados
border8image8outsetMG[size]O
border8image8repeatMG
border8image8sliceMG
border8image8sourceMGurlkimageXpngx
border8image8widthMG[size]
BordesGconGimágenes
border8imageMG source slice width outset repeat
stretch repeat round space
top right bottom left
http://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400
FuentesGCSSú
font8stretchMG
G
text8overflowMG[text];
text8justifyMG
font8size8adjustMG[number]
ultra8condensed
clip ellipsis
normal
extra8condensed condensed semi8condensed
semi8expanded expanded
extra8expanded ultra8expanded
auto inter8word distribute none
none
Medios
EmediaGprintG{
OOOOpropiedadO:Ovalor;
}
EmediaGscreenG{
OOOOpropiedadO:Ovalor;
}
EmediaGscreenGand
Cmax8widthMGBx6pxS
{
OOOOpropiedadO:Ovalor;
}
Z
X
Y
TransformacionesGúD
transformMGtranslate3dkx4Oy4Ozx;
transformMGtranslateZkzx;
transformMGscale3dkx4Oy4Ozx;
transformMGscaleZkzx;
transformMGrotate3dkx4y4z4degx;
transformMGrotateZkdegx;
transformMGperspectiveknx;
transformMGmatrix3dkn4n4n4XXXxtransform8originMG[pos8x]O[pos8y]O[pos8z];
transform8styleMG
Transformaciones
flat preserve83d
Animaciones
animationMG name duration timing8func
animation8nameMG[name];
animation8durationMG[time];O
animation8timing8functionM
animation8delayMG[time];
animation8iteration8countMG[number];
animation8directionMG
animation8fill8modeMG
animation8play8stateMG
none
infinite
normal reverse alternate alternate8reverse
none forwards backwards both
running paused
delay i8c dir f8m p8s
FiltrosGCSS
filterMG[filter]knx
Transiciones
transitionMG property duration
transition8propertyMG[css8property];
transition8durationMG[time];
transition8timing8functionMG[timing8function]
transition8delayMG[time];
none all
t8function delay
ease
linear
ease8in
ease8out
ease8in8out
cubic8bezierkx
k_X254O_X14O_X254O1x
k_X__4O_X_4O1X__4O1x
k_X424O_X_4O1X__4O1x
k_X__4O_X_4O_X584O1x
k_X424O_X_4O_X584O1x
timing8function
EpageG{
OOOOsize:O[width]O[height];
OOOOmargin:O[XXX]
OOOOorphans:O[number];
OOOOwidows:O[number];O}
autolandscape portrait
Paginación
transformMGscalekx4Oyx;
transformMGskewkdeg4Odegx;
transformMGrotatekdegx;
transformMGtranslateXkxx;
transformMGtranslateYkyx;
TranslaciónG4D
transformMGrotateXkdeg_xx;
transformMGrotateYkdeg_yx;
RotaciónG4D
transformMGscaleXkxx;
transformMGscaleYkyx;
EscaladoG4D
transformMGskewXkdeg_xx;
transformMGskewYkdeg_yx;DeformaciónG4D
transformMGtranslatekx4Oyx;
E8vendor8keyframes
6
5v6
j64á6 deg
grayscaleMG[_XXX1]
blurMG[size]O
sepiaMG[_XXX1]
saturateMG[_XXX1]
opacityMG[_XXX1]
brightnessMG[_XXX1]O
contrastMG[_XXX1]
hue8rotateMG[deg]
invertMG[_XXX1]
knxfilter8func
filterMGf5CnSGf4CnSG222