CSS. Guía de referencia rápida

1 Posicionamientoleft, top, right, bottomauto | longitudclipshape | autooverflowvisible | hidden | scroll | autopositionstatic | relative | absolute | f ixedvertical-alignbaseline | sub | super | top | text-top | middle | bottom | text-bottom | longitudz-indexauto | n meroDimensionesheightauto | longitudline-height *norm al | num ber | longitudmax-heightnone | longitudmax-widthnone | longitudmin-heightlongitudmin-widthlongi tudwidthauto | longitudCajasborder (border-left, border-bottom, border-right, border-top)border-width | border-style | border-colorborder-width(border-left-wid th; border-top-width; border-right-width; border-bottom-width)thin | medium | thick | longitudborder-color (border-left-color; border-top-color; border-right-color; border-bottom-color)colorborder-style (border-left-style; border-top-style; border-right-style; border-bottom-style)none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetmargin (margin-top; margin-right; margin-bottom; margin-left)auto | longitudpadding (padding-top; padding-right; padding-bottom.)

2 Padding-left)longitudborderheightwidthma rginpaddingSelectores*Todos los elem entosdiv<div>div *Elem e nt o s de ntr o de <div>div span<span> dentro de <div>div, span<div> y <span>div > span<span> con <div> como padrediv + span<span> precedido de <div> </div>.fotoElem entos de la clase "f oto" <div> de la clase "f oto"#casaElementos con id "casa"div#itemid<div> con id "casa"a[class]<a> con el atributo classa[class='x']<a> cuando su clase es "x"a[class~='x']<a> cuando su clase es una lista de valores y uno de ellos es 'x'a[lang|='en']<a> cuando lang comienza por "en"Pseudo-clases y pseudoelementos:activeElemento seleccionado:focusElemento enfocado:hoverElemento con el cursor del rat n encima:linkV nculo no visitado:visitedV nculo visitado:first-childElemento que es el primer hijo de otro elemento:langLenguage utilizado en un elemento.

3 First-letterLa primera letra de un texto:first-lineLa primera l nea de un texto:beforeContenido antes de un elemento:afterContenido despu s de un elemento/* Comentario */selector {propiedad: valor;}CSS. Gu a de referencia r pidaPropiedad / ValorSintaxisp x | e m | e x | % | i n | cm | m m | p t | p c # f f 6633 | # f 63 | rgb( 0,255,0) | rgb( 0%,100%,50%)aqua | black | blue | f uchsia | gray | green | lime | maroon |navy | olive | purple | red | silver | teal white | yellowUnidades* Propiedades que se heredan. En rojo, propiedades de acceso r pido y, entre par ntesis, las propiedades a las que llaman.

4 En cursiva, valores que debenser incluidos por el *font-style | font-variant | font-weight | font-size/line-height | font-family caption | icon | menu | message-box | small-caption | status-barfont-family *family-name | generic-familyfont-size *xx-small | x-small | small | medium | large | x-large | xx-large | smallerlarger | longitudfont-size-adjust *none | n merofont-stretch *normal | wider | narrower | ultra-condensed | extra-condensed | conden-sed | sem i-condensed | sem i-expanded | expanded | extra-expandedultra-exp andedfont-style *norm al | italic | obliquefont-variant *norm al | sm al l -cap sfont-weight *normal |

5 Bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700800 | 900Te x t ocolor *colordirection *ltr | rtlletter-spacing *norm al | longitudtext-align *left | right | center | justif ytext-decorationnone | underline | overline | line-through | blinktext-indent *longitudtext-shadownone | color| longitudtext-transform *none | capitalize | uppercase | lowercaseunicode-bidinorm al | e m b e d | b i di -ove r r idewhite-space *norm al | p r e | nowr apword-spacing *norm al | longitudMiscel nea Iclearl e f t | r igh t | b o t h | no necursor *url| auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | helpcontent string| url| counter(name) | counter(name, list-style-type)counters(name, string) | counters(name, string, list-style-type) | attr(X)

6 Op e n-quote | cl ose -quote | no-op e n-quote | no-cl ose -quotecounter-increment none | n mero identificativocounter-reset none | n mero identificativoMiscel nea IIdisplaynone | inline | block | list-item | run-in | compact | marker | tableinline-table | table-row-group | table-header-group | table-footer-grouptable-row | table-column-group | table-column | table-cell | table-captionfloatl e f t | r igh t | no nemarker-offsetauto | longitudpositionstatic | relative | absolute | f ixedquotes *none | string stringvisibilityvisible | hidden | collapseListaslist-style *list-style-type | list-style-position | list-style-imagelist-style-image *none | urllist-style-position *i nsi de | outsi delist-style-type * none | disc | circle | square | decimal | decimal-leading-zero | lower-roman upper-roman | lower-alpha | upper-alpha | lower-greeklower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic| hiragana | katakana | hiragana-iroha | katakana-iroha Fondobackgroundbackground-color| background-image| background-repeat| background-attachment| background-positionbackground-attachment scroll | f ixedbackground-colorColor| transparentbackground-imageurl| nonebackground-positiontop left | top center | top

7 Right | center left | center center | center right| bottom left | bottom center | bottom right | x-% y-% | x-pos y-posbackground-repeatrepeat | repeat-x | repeat-y | no-repeatContornooutline outline-color | outline-style | outline-widthoutline-color color| invertoutline-style none | dotted | dashed | solid | double | groove | ridge | inset | outsetoutline-width thin | medium | thick | longitudTablasborder-collapse *collapse | separateborder-spacing *longitud longitudcaption-side *top | bottom | left | rightempty-cells *show | hi detable-layout auto | f ix