Está usted en Indice > Maletin > Artículos > Guia CSS
Construcción
Maletín
Utilidades
Cursos
Promoción
Rentabilidad
Zona Novatos
Foros
Acceso a tu cuenta

Guia CSS

Guia CSS

«« Las propiedades CSS más utiles con ejemplos »»

 

Conceptos básicos

Agrupación

La Agrupacion permite al autor asignar una declaracion a múltiples elementos (selectores).

H1, H2, H3, H5 {color: purple;}
Clases
(atributo de etiqueta)

Los selectores de clases pueden ser usados como un atributo de una etiqueta. Un selector de clase es una cadena de caracteres precedida de un punto. No use el punto cuando se esta referenciando a la clase. No comience el nombre de la clase con un número, aunque IE4/5 se lo permita.

.example {color: red;}

<P class="example"> Esto es un ejemplo en rojo. </P>

ID
(atributo de etiqueta)

Los selectores de ID pueden ser usados como un atributo de una etiqueta. Un selector ID es una cadena de caracteres precedida de un marcador hash (#), y es llamado con el atributo ID=. El marcador hash no aparece en el valor de la ID. Funciona como el selector de clase excepto que el ID solo puede ser usado una vez en el documento.

#i5 {color: red;} <P ID="i5"> Esto es un texto con una ID de 'i5'. </P>
Selectores contextuales

Hechos de uno o mas selectores delimitados por espacios. El ejemplo indica que la negrita sera roja solo cuando se encuente en etiquetas H1.

H1 B {color: red;}

<H1>Esto es <B> rojo</B>.</H1> <P>Esto <B>no</B>.</P>

Comentarios

Es buena idea dejar comentarios. Afecta a lo que hay dentro, incluso entre lineas.

/* Esto es un comentario. */
Etiquetas DIV y SPAN

Estas dos etiquetas HTML fueron introducidas para soportar CSS. Piense en ellas como etiquetas vacias, las cuales puede rellenar con estilos.

DIV se usa para estrucura de formato, bloques de texto.

<DIV align="center"><H1>Este encabezado</H1></DIV>

SPAN es usado para formateado en linea.

<SPAN class="example"> texto rojo en el parrafo</SPAN>

Unidades

Unidades de longitud

Las unidades de medida toman abreviaciones de dos letras, sin espacio entre el numero y la unidad.

Las unidades tienen tres categorias:

  • Absolutas: mm, cm, in, pt (tamaño de punto), pc (pica)
  • Relativas: em (definiendo el tamaño de punto de la fuente), ex (x altura de la fuente)
  • Dependiente del dispositivo: px (pixel)
width: 50px; margin-left: 2em;
Unidades de porcentaje

Usadas por varias propiedades para definir el tamaño en terminos relativos. Los valores son calculados atendiendo a su contexto, en el ejemplo, el elemento H2 sera el 75% de su tamaño por defecto.

H2 {font-size: 75% }
Palabras clave

CSS usa palabras claves como valores para muchas propiedades.
Ejemplos pueden ser bolder, lighter, larger, x-large, xx-large, x-small.

Unidades de color

Por numero; por porcentaje; por nombre.

color: #FF00FF; /* esto tambien puede ser expresado como #F0F */

color: rgb(100%,0%,100%);

color: chocolate

URLs

Usadas por varias propiedades para definir la ubicación de las imágenes. Importante: las URLs parciales son relativas a CSS, ¡no al documento HTML!

url(dibujo.gif)

url(http://www.pix.org/lib1/pic278.gif)

list-style-image: url(bullet3.gif)


La cascada

! important

La declaracion de estilos es declarada importante. Las declaraciones importantes sobreescriben a todas las demás, independientemente del origen o especificación. En CSS2, el usuario tendrá preferencia sobre el autor.

H1 {color: maroon ! important;}
Herencia

Las propiedades de formato de algún elemento son heredadas del elemento en el cual esta contenido. Las propiedades CSS siempre tienen algún valor, aunque no haya sido especificado por el autor. Esto puede ser usado para minimizar, pero puede ser fuente de desagradables sorpresas.

CSS de links externos

Esto permite el contro de muchas páginas a la vez. Use la etiqueta LINK en el HEAD de su página.

Ejemplo: <LINK REL="STYLESHEET" TYPE="text/css" HREF="demo.css">
Orden de cascada y estilo de sintaxis

La precedencia va de lo más especifico a lo más general. Lo más cerca que esta un estilo al elemento al cual se le esta aplicando el estilo, mayor es la prioridad. El orden de mayor a menor:

  1. STYLE="bla bla" atributo en lina a una etiqueta Ejemplo: <P STYLE="color: rojo; font: 14pt 'Times New Roman', serif">inline</P>
    Nótese que las comillas simples en la fuente se usan para evitar conflictos con las comillas dobles.
  2. <STYLE> etiqueta en HEAD del documento
    Example:
    <STYLE>
    .title { font-family: 'Snap ITC', cursive;
    font-size: 60pt;}
    </STYLE>
  3. <LINK> a una CSS externa en el HEAD del documento
    Ejemplo: <LINK REL="stylesheet" TYPE="text/css" HREF="demo.css">
  4. Estilos por defecto del explorador
Media

Puede especificar diferentes estilos para la visualización online y para la la impresion. Esto funciona en IE4/5 y Opera 3.5.

<STYLE media="print"> /* version para impresion */ .noprint {display: none;} /* los items hechos con esta clase no seran impresos */ </STYLE> <STYLE media="screen"> /* version de pantalla */ .noshow {display:none;} /* los items en esta clase no se veran */ </STYLE>

Propiedades de fuente

font-family

Usada para declarar una fuente especifica a usar, o una fuente genérica de una familia en orden de preferencia.
Las familias de fuentes genéricas son: serif, sans-serif, monospace, cursive y fantasy. No deben tener comillas. Varias palabras como fuente de nombre si deben llevar comillas.

P {font-family: "Times New Roman", serif;}
font-style

Selecciona entre cursiva, oblicua y normal.

EM {font-style: italic;}
font-variant

Dos posibles valores: small-caps and normal. Es probable que aparezcan mas valores en el futuro.

H3 {font-variant: small-caps;}
font-weight

Los valores son: bold, normal, lighter, bolder y valores numéricos entre 100-900.

B {font-weight: 700;}
font-size

Aplica el tamaño absoluto (pt, in, cm, px), tamaño relativo (em, ex), o un porcentaje del tamaño normal.
Palabras clave: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller

H2 {font-size: 200%;} H3 {font-size: 36pt;}
font

Abreviatura de las demas propiedades de fuente. El orden de los valores es importante:
font {font-style font-variant font-weight font-size/line-height font-family;}. Cualquiera de estos valores puede ser omitido, pero el orden es importante.

P {font: bold 12pt/14pt Helvetica,sans-serif;}

Color y propiedades del fondo

color

Aplica el color de un elemento dado. Para el texto, esto establece el color del texto; para otros elemento, como HR, establece el color del primer plano.

H6 {color: teal;}
background-color

Establece el color de fondo de un elemento. El fondo se extiende al borde del elemento. Valor inicial: transparente.

{ background-color: #CCCC00 }
background-image

Define una imagen como patrón de fondo. En conjuncion con las otras propiedades de fondo, puede usarse como mosaico o repetirse en una direccción solamente. De uso recomendado con background-color, para las personas que deshabilitan la carga de imagenes.

BODY {background-image: url(bg41.gif);}
background-repeat

Establede el estilo de repeticion para una imagen de fondo. Los valores son: repeat (mosaico), no-repeat, repeat-x (horizontal), repeat-y (vertical). Por defecto: repeat.

BODY { background-repeat: repeat-y }
background-attachment

Define si la imagen de fondo sigue el movimiento de desplazamiento de la barra de scroll o si no. Los valores posibles son: scroll y fixed.

BODY {background-attachment: fixed;}
background-position

Establece el punto de comienzo de un fondo, ya sea imagen o color. Si es un color, el relleno del color continua desde tal posición. Si es una imagen, la primera imagen es ubicada en esa posición. Valores: Position (x y) o (x% y%); top, center, bottom, left, right.

BODY {background-position: top center;}
background

Abreviatura para las demas propiedades. Los valores pueden ser escritos en cualquier orden.

BODY {background: white url(bg41.gif) fixed center;}

Propiedades del texto

word-spacing

Establece la cantidad de espacios en blanco entre palabras, las cuales son definidas como cadenas de caracteres rodeados de espacio en blanco.

P {word-spacing: 0.5em;}
letter-spacing

Define la cantidad de espacio en blanco entre letras, las cuales son definidas como cualquier carácter mostrado.

P {letter-spacing: 0.5em;}
text-decoration

Los valores son: none, underline, overline, line-through, blink. Se pueden reealizar combinaciones de ellas.

U {text-decoration: underline;} .old {text-decoration: line-through;}
vertical-align

Establece el alineamiento vertical de un elemento con respecto a su elemento padre. Quiza solo se puede aplicar a elementos en linea; los valores negativos son permitidos. Palabras clave: baseline; middle; sub; super; text-top; text-bottom.

.super {vertical-align: super;}
text-transform

Cambia las mayúsculas en las letras del elemento, sin importar el texto original. Los valores posibles son: capitalize (la primera letra de cada palabra se transforma en mayuscula), uppercase, lowercase.

H1 {text-transform: uppercase;}
text-align

Establece el alineamiento horizontal del texto en un elemento. Solo puede ser aplicado a elementos a nivel de bloque.

P {text-align: justify;} H4 {text-align: center;}
text-indent

Define la indentacion de la primera linea en un elemento. Usado comúnmente para crear el efecto de tabulación en los párrafos. Solo se aplica a elementos a nivel de bloque; son permitidos valores negativos.

P {text-indent: 5em;} H2 {text-indent: -25px;}
line-height

Establece la distancia vertical entre lineas bases en un elemento. No es posible usar valores negativos.

P {line-height: 18pt;} H2 {line-height: 200%;}

  CSS lo controla todo mediante una caja

The Box Model

La manera de pensar más potente sobre los estilos es considerar cada elemento (<P>, <H1>,etc.) como una caja. Las dimensiones de la caja pueden ser controladas para producir una gran variedad de efectos.

Si usted ve una página como una caja de cajas, este modelo forma la base de posicionamiento de elementos incluso a nivel de pixel.

Nota: IE6.0 no sigue la definicion de anchira de W3C, no debe incluir bordes ni valores de separación.



CSS Box Model





Propiedades de las cajas

margin-top

Establece el tamaño del margen superior de un elemento. Los valores negativos estan permitidos, pero no aconsejados. No son bien recibidos por Netscape 4.

UL {margin-top: 0.5in;}
margin-right

Fija el tamaño del margen derecho de un elemento. Los valores negativos se permiten, pero de nuevo, cuidado.

IMG {margin-right: 30px;}
margin-bottom

Fija el tamaño del margen inferior de un elemento. Los valores negativos se permiten, pero de nuevo, cuidado.

UL {margin-bottom: 0.5in;}
margin-left

Fija el tamaño del margen izquierdo de un elemento. Los valores negativos se permiten, pero de nuevo, cuidado.

P {margin-left: 3em;}
margin

Establece el tamaño del total del margen de un elemento. Los valores negativos estan permitidos, aunque desaconsejados. Los valores empiezan por arriba y van en dirección horaria.

H1 {margin: 2em;} P {0% 5% 0% 5%;}

padding-top

Define el tamaño de la separación de arriba de un elemento, lo cual heredará el elemento del fondo. Los valores negativos no estan permitidos.

UL {padding-top: 0.5in;}
padding-right

Define el tamaño de la separación de la derecha de un elemento, lo cual heredará el elemento del fondo. Los valores negativos no estan permitidos.

IMG {padding-right: 30px;}
padding-bottom

Define el tamaño de la separación de abajo de un elemento, lo cual heredará el elemento del fondo. Los valores negativos no estan permitidos.

UL {padding-bottom: 0.5in;}
padding-left

Define el tamaño de la separación de la izquierda de un elemento, lo cual heredará el elemento del fondo. Los valores negativos no estan permitidos.

P {padding-left: 3em;}

Propiedades de las cajas (continuación)

padding

Establece el tamaño de la totalidad de separación de un elemento, lo cual heredará el elemento del fondo. Los valores negativos no estan permitidos.

H1 {padding: 2ex;}
border-top-width

Fija la anchura del borde superior de un elemento, el cual heredará el elemento del fondo, y puede tener otro delante de él (mirar border-style). Los valores negativos no son permitidos.

UL {border-top-width: 0.5in;}
border-right-width

Fija la anchura del borde derecho de un elemento, el cual heredará el elemento del fondo, y puede tener otro delante de él (mirar border-style). Los valores negativos no son permitidos.

IMG {border-right-width: 30px;}
border-bottom-width

Fija la anchura del borde inferior de un elemento, el cual heredará el elemento del fondo, y puede tener otro delante de él (mirar border-style). Los valores negativos no son permitidos.

UL {border-bottom-width: 0.5in;}
border-left-width

Fija la anchura del borde izquierdo de un elemento, el cual heredará el elemento del fondo, y puede tener otro delante de él (mirar border-style). Los valores negativos no son permitidos.

P {border-left-width: 3em;}
border-width

Establece la anchura de la totalidad del borde de un elemento, el cual heredará el elemento del fondo, y puede tener otro delante de él (mirar border-style). Los valores negativos no son permitidos.

H1 {border-width: 2ex;}
border-color

Define el color del borde de un elemento. En el ejemplo, los bordes superior e inferior son grises, los derecho e izquierdo son negros. Los 4 bordes pueden ser definidos independientemente.

H1 {border-color: silver black;}
border-style

Establece el estilo de la totalidad de el borde de un elemento. Los posibles valores son: dashed; dotted; double; groove; inset; outset; ridge; solid; none. Por defecto: none (no se ve borde alguno).

H1 {border-style: solid; border-color: purple;}

Propiedades de las cajas (continuación)

border-top

Abreviación de las propiedades que definen la anchura, color y estilo del borde superior de un elemento.

UL {border-top: 0.5in solid black;}
border-right

Abreviación de las propiedades que definen la anchura, color y estilo del borde derecho de un elemento.

IMG {border-right: 30px dotted blue;}
border-bottom

Abreviación de las propiedades que definen la anchura, color y estilo del borde inferior de un elemento.

UL {border-bottom: 0.5in grooved green;}
border-left

Abreviación de las propiedades que definen la anchura, color y estilo del borde izquierdo de un elemento.

P {border-left: 3em solid gray;}
border

Abreviación de las propiedades que definen la anchura, color y estilo del conjunto de bordes de un elemento.

H1 {border: 2px dashed tan;}
width

Usado para establecer la anchura de un elemento. Puede ser usado en cualquier nivel de bloque o con un objeto reemplazado. Los valores negativos no son posibles.

TABLE {width: 80%;}
height

Usado para establecer la altura de un elemento. Puede ser usado en cualquier nivel de bloque o con un objeto reemplazado, entre sus límites. Los valores negativos no son posibles.

IMG.icon {height: 50px;}
float

Causa que elemento sea flotante a un lado, y al otro el texto le rodee. Uselo para elementos de bloque no posicionados. Valores posibles: left; right; none.

IMG {float: left;}
clear

Especifica si el elemento puede tener elementos flotantes alrededor. Causa que el elemento sea situacion abajo si hay elementos flotantes en el lugar especificado. Valores posibles: both; left; right; none. El valor por defecto es none.

H1 {clear: both;}

Clasificación de las propiedades

display

Usado para sobreescribir el formato por defecto de los elementos HTML. Los valore posibles son: block; inline; list-item; none. El valor por defecto es block. Hágase notar que el espacio no esta reservado por el elemento cuando display = none. (ver propiedad de posicionamiento: visibility.)

.hide {display: none;}
white-space

Define como son tratados los espacios en blanco dentro de el elemento.Los valores son: normal, pre, nowrap.

TD {white-space: nowrap;} TT {white-space: pre;}
list-style-type

Se usa para declarar el tipo de punto o numeración a usar en una lista ordenada o no. Los valores son: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none.

UL {list-style-type: square;} OL {list-style-type: lower-roman;}
list-style-image

Usado para declarar una imagen a ser usada como punto en una lista ordenada o no. Se aplica a los elementos con un valor de vista en una lista de items.

UL {list-style-image: url(bullet3.gif);}
list-style-position

Se usa para declarar la posición del punto o número en una lista con respecto al contenido del elemento de la lista. Los valores posibles son: inside; outside. Default: outside.

LI {list-style-position: inside;}
list-style

Abreviación de propiedades que engloba el resto de propiedades. Se aplica a todos los elementos con un valor de vista en una lista de items.

UL {list-style: square url(bullet3.gif) outer;}

Propiedades de posicionamiento

clip

Especifica el area de un elemento para ser dibujada como transparente. Los valore posibles son: rect (arriba derecha izquierda abajo) donde estos valores son auto o valores de longitud (pt, in, cm, px)

{ clip: rect (5pt auto auto auto) }
height

Especifica la altura de un elemento; el coeficiente de aspecto sera mantenido si la auchura es espeficicada como auto. Los valores posibles son: auto o valores de longitud (pt, in, cm, px) o porcentaje.

{ height: 50px }
width

Especifica la anchura de un elemento; el coeficiente de aspecto sera mantenido si la auchura es espeficicada como auto. Los valores posibles son: auto o valores de longitud (pt, in, cm, px) o porcentaje.

{ width: 50% }
left

Especifica la posicion izquierda de un elemento posicionado relativamente o absolutamente. Los valores posibles son: auto o valores de longitud (pt, in, cm, px) o porcentaje.

{ left: 2pt }
top

Especifica la posicion superior de un elemento posicionado relativamente o absolutamente. Los valores posibles son: auto o valores de longitud (pt, in, cm, px) o porcentaje.

{ top: -2pt }
overflow

Especifica como el contenido que desborda de la caja debe ser manejado. Valores: visible (ver contenido); hidden (ocultar contenido desbordado); scroll (proveer mecanismo de desplazamiento); auto (que el explorador haga lo que crea conveniente)

{ overflow: auto }
position

Especifica si el elemento puede ser posicionado. Valores: static (por defecto--sin posicionar); relative (en relacion a donde el elemento deberia estar normalmente); absolute (en relacion a la esquina izquierda superior del elemento padre).

{ position: relative }

Clasificación de las propiedades (continuación)

visibility

Especifica si el elemento es visible. Nótese que el espacio del elemento es reservado en cualquier caso. (ver clasificacion de propiedades: display). Valores posibles: visible; hidden.

{ visibility: hidden }
z-index

Especifica si el elemento es visto por encima de elementos en capas superiores. Valores: auto (se aplian en el orden en que aparecen en el código); o un entero. Los elementos con mayor número ocultan a los de más bajo.

{ z-index: 2 }

Pseudo-clases y pseudo-elementos

anchor

Las pseudo-clases pueden ser usadas en selectores contextuales y pueden ser combinadas con clases normales.

A:link {color: #900} A:link IMG { border: solid blue } A:hover{ background:#ffff00; } /* cuando el raton esta sobre el link (solo IE4)*/

Abajo se puede ver una variación donde se quiere que el lector sepa que el link es externo. Define una clase "external" para hacer la naturaleza del link obvia. Las clases normales predecen a las pseudo-clases en el selector.

A.external:link { color: magenta }
<A CLASS="external" HREF="http://out.side/">external link</A>
first-line

Aplicado a la primera linea de un texto en un elemento dado. Persistete aunque el texto haya sido reformateado. Aplicado a elementos a nivel de bloque solamente. Soportado por IE5.5 y Opera 3.6.

P:first-line {color: red;} <P> The first line of this paragraph is
red. More blah blah blah...</P>
first-letter

Aplicado a la primera letra de un elemento dado. Puede ser usado para generar efectos de tipo drop-cap, entre otros. Debería ser aplicado a elementos de nivel de bloque solamente. Soportado por IE5.5 y Opera 3.6.

P:first-letter {color: red;} <P> T he capital 'T' at the beginning of this paragraph is red.</P>

Propiedades de impresión

page-break-after

Las propiedades de impresión solo funcionan parcialmente con IE4, mejor con IE5 y Opera 3.5. CSS2 aumentará este tipo de estrategia.
Valores:
auto hace un salto de página después del elemento si no hay espacio en la página actual.
always siempre hace un salto de página.
left hace uno o dos saltos de página después del elemento hasta que una pagina en blanco es encontrada.
right hace uno o dos saltos de página después del elemento hasta que una pagina en blanco a la derecha es encontrada.

Example:
<STYLE> .page {page-break-after: always} </STYLE> ... <P CLASS="page"> ...
page-break-before

Valores: los mismos que arriba. Nótese que ninguna de estas propiedades funcionan con tablas. También produce bugs con la etiqueta <br>. Funciona mejor con etiquetas estructurales(H1, P, etc.).

Si hubiese conflictos entre propiedades de dos saltos de pagina, el valor resultante es el mayor número de saltos de pagina a usar.


Varios

cursor  

Especifica la apariencia del curso cuando se situa en un elemento.

Valores: auto (el explorador lo determina basándose en el contexto); crosshair; default (normalmente una flecha - determinado por el sistema operativo); help; move; pointer; text; wait; e-resize; ne-resize; nw-resize; n-resize; se-resize; sw-resize; s-resize; w-resize.
Use 'hand' para forzar el cursor en forma de mano, lo cual funciona con IE4, IE5 y Opera aunque no es parte de las especificaciones de W3C.

{ cursor: help }

 

Artículo original de: Brett Merkey - Traducido por Manuel Jiménez para WebTaller.com

http://home.tampabay.rr.com/bmerkey/cheatsheet.htm



Usuarios que han visto este tema también han visto...

- Qué es en realidad el buen diseño web
- Ventajas de usar METAS
- Unos pierden, pero muchos ganan con los P2P
- Proteger carpetas de Apache
- ¿Widgets, gadgets, artilugios…? ¿Son realmente útiles?


Versión imprimible - Versión imprimible de este documento
Enviar e-mail - Enviar por e-mail este documento
Publicidad






Publicidad








Información legal | Política de Privacidad | Contacte con nosotros

Otro proyecto de Factoría de Internet. Copyright© 2003-2011 Factoría de Internet S.L.. Todos los derechos reservados.


Página generada el 20-01-2017 a las 04:42:55