Os presentamos una tabla con varias propiedades CSS y ejemplos comentando que significan:
| Propiedades individuales | ||
| Reglas del estilo | Comentarios | |
| p | {font-family:Helvetica, Geneva; | De este listado, la primera fuente se aplicará. |
| font-style:italic; | El texto se renderizará como cursiva. | |
| font-weight:bold; | El texto se renderizará como negrita. | |
| font-size:10pt; | El texto se renderizará con 10 pt. | |
| color:#00FFFF; | El texto se renderizará con el color hex #00FFFF. | |
| background-color:blue; | El color de fondo del elemento será azul. | |
| background-image:url(images/foo.gif)} | El elemento tendrá la imagen de fondo especificada. | |
|
|
||
| .foo | {text-decoration:underlined} | El texto con la clase “foo” será subrayado. |
| {text-transform:lowercase} | El texto con la clase “foo” tendrá solo letras minúsculas. | |
|
|
||
| #foo | {text-align:center} | El texto con la id “foo” tendrá alineamiento centrado. |
| {text-indent:1em} | El texto con la id “foo” tendrá tamaño de 1em. | |
|
|
||
| p | {margin-top:12px; | Los elementos del top tendrán un margen de 12 píxeles. |
| margin-bottom:18px; | Los elementos del bottom tendrán un margen de 18 píxeles. | |
| padding-right:8pt; | El padding izquierdo del elemento será de 8 puntos. | |
| padding-left:4pt} | El padding derecho del elemento será de 4 puntos. | |
|
|
||
| body | {border-color:red; | Los bordes serán rojos |
| border-style:solid} | Los bordes serán sólidos. | |
| Nivel del bloque y reemplazo de elementos | ||
| img | {width:20px; | La anchura del elemento será de 20 píxeles. |
| height:40px; | La altura del elemento será de 40 píxeles. | |
| float:left} | El texto flotará a la izquierda del elemento. | |
|
|
||
| p | {clear:left} | Mueve el elemento debajo de un elemento flotante colocado a la izquierda. |
| Propiedades conjuntas |
||
| Style rules | Comentarios | |
| p | {font:10pt bold non-serif} | El texto tendrá 10 puntos en negrita y no tipo serif. |
| {background:black} | El elemento del color de fondo será negro. | |
| {margin:25px} | Todo el margen del elemento será de 25 píxeles. | |
| {margin:20px 10px 20px 10px} | El margen del top y del bottom será de 20 píxeles, mientras que el margen izquierdo y derecho será de 10 píxeles. | |
|
|
||
| body | {padding:2px} | El elemento tendrá 2 píxeles de padding a cada lado. |
| {padding:8px 4px 8px 4px} | El padding del top y del bottom será de 8 píxeles, mientras que el padding izquierdo y derecho será de 4 píxeles. | |
| {border:2px solid red} | Habrá un borde rojo y sólido en todo el elemento. | |
| Posición (CSS – P) | ||
| Style rules | Comentarios | |
| #foo | {position:absolute; top:15pt; left:15pt} | La posición del elemento en absolute tendrá 15 puntos desde el top y 15 desde la izquierda. |
| {visibility:hidden} | El contenido del elemento se mostrará oculto. | |
|
|
||
| .foo | {z-index:2} | El z-index del elemento será de 2. |
|
|
||
| p | {overflow:visible} | El contenido del elemento será visible incluso si supera el ancho o alto máximo permitido. |
| {overflow:hidden} | El contenido del elemento será recortado a su altura y anchura y se deshabilitará el scroll de la página. | |
Vía | Web Monkey
