Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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
Clases con un número, aunque IE4/5 se lo permita.
(atributo de
etiqueta) .example {color: red;}
#i5 {color: red;} <P ID="i5"> Esto es un texto con una ID de 'i5'. </P>
Hechos de uno o mas selectores delimitados por espacios. El ejemplo indica que la
negrita sera roja solo cuando se encuente en etiquetas H1.
Selectores
H1 B {color: red;}
contextuales
<H1>Esto es <B> rojo</B>.</H1> <P>Esto <B>no</B>.</P>
Es buena idea dejar comentarios. Afecta a lo que hay dentro, incluso entre lineas.
Comentarios
/* Esto es un comentario. */
Estas dos etiquetas HTML fueron introducidas para soportar CSS. Piense en ellas
como etiquetas vacias, las cuales puede rellenar con estilos.
Las unidades de medida toman abreviaciones de dos letras, sin espacio entre el
numero y la unidad.
Unidades de
• Absolutas: mm, cm, in, pt (tamaño de punto), pc (pica)
longitud
• Relativas: em (definiendo el tamaño de punto de la fuente), ex (x altura de la
fuente)
• Dependiente del dispositivo: px (pixel)
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
Unidades de
el 75% de su tamaño por defecto.
porcentaje
H2 {font-size: 75% }
color: chocolate
url(dibujo.gif)
URLs
url(http://www.pix.org/lib1/pic278.gif)
list-style-image: url(bullet3.gif)
La cascada
Propiedades de fuente
Usada para declarar una fuente especifica a usar, o una fuente genérica de una familia en
orden de preferencia.
font- Las familias de fuentes genéricas son: serif, sans-serif, monospace, cursive y fantasy. No
family deben tener comillas. Varias palabras como fuente de nombre si deben llevar comillas.
Dos posibles valores: small-caps and normal. Es probable que aparezcan mas valores en
font- el futuro.
variant
H3 {font-variant: small-caps;}
Los valores son: bold, normal, lighter, bolder y valores numéricos entre 100-900.
font-
weight
B {font-weight: 700;}
Aplica el tamaño absoluto (pt, in, cm, px), tamaño relativo (em, ex), o un porcentaje del
tamaño normal.
font-size Palabras clave: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller
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.
color
H6 {color: teal;}
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
background- uso recomendado con background-color, para las personas que deshabilitan la carga
image de imagenes.
Establede el estilo de repeticion para una imagen de fondo. Los valores son: repeat
background- (mosaico), no-repeat, repeat-x (horizontal), repeat-y (vertical). Por defecto: repeat.
repeat
BODY { background-repeat: repeat-y }
Abreviatura para las demas propiedades. Los valores pueden ser escritos en
cualquier orden.
background
BODY {background: white url(bg41.gif) fixed center;}
Propiedades del texto
Establece la cantidad de espacios en blanco entre palabras, las cuales son definidas
word- como cadenas de caracteres rodeados de espacio en blanco.
spacing
P {word-spacing: 0.5em;}
Define la cantidad de espacio en blanco entre letras, las cuales son definidas como
letter- cualquier carácter mostrado.
spacing
P {letter-spacing: 0.5em;}
Los valores son: none, underline, overline, line-through, blink. Se pueden reealizar
text- combinaciones de ellas.
decoration
U {text-decoration: underline;} .old {text-decoration: line-through;}
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
text-
mayuscula), uppercase, lowercase.
transform
H1 {text-transform: uppercase;}
Establece el alineamiento horizontal del texto en un elemento. Solo puede ser aplicado
a elementos a nivel de bloque.
text-align
P {text-align: justify;} H4 {text-align: center;}
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.
The Box
Model
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.
margin-top
UL {margin-top: 0.5in;}
Fija el tamaño del margen derecho de un elemento. Los valores negativos se permiten,
pero de nuevo, cuidado.
margin-right
IMG {margin-right: 30px;}
Fija el tamaño del margen inferior de un elemento. Los valores negativos se permiten,
margin- pero de nuevo, cuidado.
bottom
UL {margin-bottom: 0.5in;}
Fija el tamaño del margen izquierdo de un elemento. Los valores negativos se permiten,
pero de nuevo, cuidado.
margin-left
P {margin-left: 3em;}
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.
margin
H1 {margin: 2em;} P {0% 5% 0% 5%;}
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
border-top-
son permitidos.
width
UL {border-top-width: 0.5in;}
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
border-right-
son permitidos.
width
IMG {border-right-width: 30px;}
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
border-
son permitidos.
bottom-width
UL {border-bottom-width: 0.5in;}
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
border-left-
son permitidos.
width
P {border-left-width: 3em;}
H1 {border-width: 2ex;}
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
border-color independientemente.
Abreviación de las propiedades que definen la anchura, color y estilo del borde superior
border- de un elemento.
top
UL {border-top: 0.5in solid black;}
Abreviación de las propiedades que definen la anchura, color y estilo del borde derecho de
border- un elemento.
right
IMG {border-right: 30px dotted blue;}
Abreviación de las propiedades que definen la anchura, color y estilo del borde inferior de
border- un elemento.
bottom
UL {border-bottom: 0.5in grooved green;}
Abreviación de las propiedades que definen la anchura, color y estilo del borde izquierdo
de un elemento.
border-left
P {border-left: 3em solid gray;}
Abreviación de las propiedades que definen la anchura, color y estilo del conjunto de
bordes de un elemento.
border
H1 {border: 2px dashed tan;}
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.
width
TABLE {width: 80%;}
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
height posibles.
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.
float
IMG {float: left;}
H1 {clear: both;}
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
display
de posicionamiento: visibility.)
Define como son tratados los espacios en blanco dentro de el elemento.Los valores son:
white- normal, pre, nowrap.
space
TD {white-space: nowrap;} TT {white-space: pre;}
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;
list-style-
upper-alpha; none.
type
UL {list-style-type: square;} OL {list-style-type: lower-roman;}
Usado para declarar una imagen a ser usada como punto en una lista ordenada o no. Se
list-style- aplica a los elementos con un valor de vista en una lista de items.
image
UL {list-style-image: url(bullet3.gif);}
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:
list-style-
outside.
position
LI {list-style-position: inside;}
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
clip longitud (pt, in, cm, px)
{ height: 50px }
{ width: 50% }
Especifica como el contenido que desborda de la caja debe ser manejado. Valores: visible
(ver contenido); hidden (ocultar contenido desbordado); scroll (proveer mecanismo de
overflow desplazamiento); auto (que el explorador haga lo que crea conveniente)
{ overflow: auto }
{ position: relative }
{ z-index: 2 }
Pseudo-clases y pseudo-elementos
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)*/
anchor
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.
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.
first- Soportado por IE5.5 y Opera 3.6.
letter
P:first-letter {color: red;} <P> T he capital 'T' at the beginning of this paragraph is
red.</P>
Propiedades de impresión
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.
page-
left hace uno o dos saltos de página después del elemento hasta que una pagina en
break-after
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"> ...
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
page- estructurales(H1, P, etc.).
break-
before 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: help }