DRAPI - UAP

2005

Guia CSS
Las propiedades CSS ms utiles con ejemplos
Conceptos bsicos
Agrupacin
La Agrupacin permite al autor asignar una declaracin a mltiples
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 nmero, 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>
DRAPI - UAP
2005

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 (tamao de punto), pc (pica)
Relativas: em (definiendo el tamao 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 tamao en terminos relativos.
Los valores son calculados atendiendo a su contexto, en el ejemplo, el
elemento H2 sera el 75% de su tamao 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 ubicacin de las imgenes.
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)
DRAPI - UAP
2005


La cascada
! important
La declaracion de estilos es declarada importante. Las declaraciones
importantes sobreescriben a todas las dems, independientemente del
origen o especificacin. En CSS2, el usuario tendr preferencia sobre el
autor.
H1 {color: maroon ! important;}
Herencia
Las propiedades de formato de algn elemento son heredadas del
elemento en el cual esta contenido. Las propiedades CSS siempre tienen
algn 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 pginas a la vez. Use la etiqueta LINK
en el HEAD de su pgina.
Ejemplo: <LINK REL="STYLESHEET" TYPE="text/css"
HREF="demo.css">
Orden de
cascada y
estilo de
sintaxis
La precedencia va de lo ms especifico a lo ms general. Lo ms 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>
Ntese 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 visualizacin online y para la la
impresion. Esto funciona en IE4/5 y Opera 3.5.
<STYLE media="print"> /* version para impresion */ .noprint {display:
DRAPI - UAP
2005

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 genrica de una
familia en orden de preferencia.
Las familias de fuentes genricas 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 numricos entre 100-
900.
B {font-weight: 700;}
font-size
Aplica el tamao absoluto (pt, in, cm, px), tamao relativo (em, ex), o un
porcentaje del tamao 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
DRAPI - UAP
2005

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 patrn de fondo. En conjuncion con las otras
propiedades de fondo, puede usarse como mosaico o repetirse en una
direcccin 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 posicin. Si es una
imagen, la primera imagen es ubicada en esa posicin. 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;}
DRAPI - UAP
2005

letter-
spacing
Define la cantidad de espacio en blanco entre letras, las cuales son definidas
como cualquier carcter 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 maysculas 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 comnmente
para crear el efecto de tabulacin en los prrafos. 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 ms 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 pgina como una caja de cajas, este modelo forma la base de
DRAPI - UAP
2005

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 separacin.







Propiedades de las cajas
margin-top
Establece el tamao 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 tamao del margen derecho de un elemento. Los valores negativos se
permiten, pero de nuevo, cuidado.
IMG {margin-right: 30px;}
margin-
bottom
Fija el tamao del margen inferior de un elemento. Los valores negativos se
permiten, pero de nuevo, cuidado.
UL {margin-bottom: 0.5in;}
margin-left Fija el tamao del margen izquierdo de un elemento. Los valores negativos se
DRAPI - UAP
2005

permiten, pero de nuevo, cuidado.
P {margin-left: 3em;}
margin
Establece el tamao del total del margen de un elemento. Los valores
negativos estan permitidos, aunque desaconsejados. Los valores empiezan por
arriba y van en direccin horaria.
H1 {margin: 2em;} P {0% 5% 0% 5%;}
padding-
top
Define el tamao de la separacin 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 tamao de la separacin 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 tamao de la separacin 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 tamao de la separacin 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 (continuacin)
padding
Establece el tamao de la totalidad de separacin 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
DRAPI - UAP
2005

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 (continuacin)
border-
top
Abreviacin 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
Abreviacin de las propiedades que definen la anchura, color y estilo del borde
derecho de un elemento.
IMG {border-right: 30px dotted blue;}
DRAPI - UAP
2005

border-
bottom
Abreviacin 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
Abreviacin de las propiedades que definen la anchura, color y estilo del borde
izquierdo de un elemento.
P {border-left: 3em solid gray;}
border
Abreviacin 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 lmites. 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;}

Clasificacin 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.
Hgase notar que el espacio no esta reservado por el elemento cuando display
= none. (ver propiedad de posicionamiento: visibility.)
DRAPI - UAP
2005

.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 numeracin 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 posicin del punto o nmero 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
Abreviacin 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
DRAPI - UAP
2005

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 }

Clasificacin de las propiedades (continuacin)
visibility
Especifica si el elemento es visible. Ntese 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 cdigo); o un entero.
Los elementos con mayor nmero ocultan a los de ms bajo.
{ z-index: 2 }

DRAPI - UAP
2005

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 variacin 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. Debera 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 impresin
page-
break-
after
Las propiedades de impresin solo funcionan parcialmente con IE4, mejor con
IE5 y Opera 3.5. CSS2 aumentar este tipo de estrategia.
Valores:
auto hace un salto de pgina despus del elemento si no hay espacio en la
pgina actual.
always siempre hace un salto de pgina.
left hace uno o dos saltos de pgina despus del elemento hasta que una pagina
en blanco es encontrada.
right hace uno o dos saltos de pgina despus del elemento hasta que una
pagina en blanco a la derecha es encontrada.
Example:
<STYLE> .page {page-break-after: always} </STYLE> ... <P
CLASS="page"> ...
DRAPI - UAP
2005

page-
break-
before
Valores: los mismos que arriba. Ntese que ninguna de estas propiedades
funcionan con tablas. Tambin 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 nmero 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 basndose 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.


Fuente:
Ing. Edwin Gmez Almstar