|
|
Apuntes CSS, hojas de estilo |
Introducción
Componentes del léxicoDeclaracionesPropiedades
Niveles de definición
Comentarios
Herencia
ValoresPropiedades de fuentesSeudo clases/elementos
Propiedades color y background
Propiedades de texto
Propiedades de cuadros
Propiedades de clasificación
Propiedades de interfaz de usuarioSeudo-clase anclaCapas
Seudo-elemento primera línea
Seudo-elemento Primera letraPropiedades para capasOrden de Cascada! important
Origen de las reglas
Regla especificidad
Orden de especificación
CSS son las siglas de Cascade Style Sheet, que significa hojas de estilo en cascada.
Es una especificación por medio de la cual se intenta separar la lógica (el contenido) de un documento HTML (de la que se encarga el lenguaje HTML), de su presentación o apariencia (el formato).
CSS nos permite aplicar formato de modo mucho más exacto, con más posibilidades de presentación, y más unidades de medida.
CSS facilita la lectura del código para la búsqueda de errores, al poder separar el contenido con las instrucciones necesarias para darle estilo.
CSS es soportado a partir de la versión 4 de Netscape y la 3 de Microsoft, aunque no todo y no siempre de igual forma, por lo que debemos utilizar esta tecnología con cuidado.
La sintaxis utilizada en la definición de estilos es prácticamente HTML. Recordar que los nombres siempre empiezan por letra, y que los de elementos (etiquetas) y atributos no distinguen entre mayúsculas y minúsculas, pero los de entidades si.
Un selector es el elemento que está conectado a un estilo particular.
Cualquier elemento, o nombre de etiqueta, HTML es un posible selector CSS. Esta conexión se realiza mediante una declaración que asigna propiedades a un conector (o a varios que estén separados por comas) y a éstas un determinado valor.
selector { propiedad1:valor; ...;prop-n:valor" }
selector, ... selector-n { propiedad1:valor; ...;prop-n:valor" }
Un selector puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos
selector4.clase1 { propiedad1:valor; ...;prop-n:valor" }
selector4.clase2 { propiedad1:valor; ...;prop-n:valor" }
Las clases también pueden ser declaradas sin elementos asociados:
.clase1 { propiedad1:valor; ...;prop-n:valor" }
Los selectores de contexto son dos o mas selectores separados por espacios, en que solo se aplica el estilo al segundo cuanto esté dentro del primero.
Selector5 Selector6 { propiedad1:valor; ...;prop-n:valor" }
También es posible identificar un estilo por nombre, declarando un nombre único:
#nombre1 { propiedad1:valor; ...;prop-n:valor" }
Tenemos varias posibilidades para definir un estilo: especificarlo directamente en la etiqueta en la que queremos usarlo, definirlo aparte y aplicarlo en las etiquetas que queramos, o definir estilos globales para las etiquetas (que podrán ser cambiados en las que no se desee aplicarlos).
Para aplicar un estilo a una etiqueta concreta, usaremos el parámetro STYLE de la etiqueta:
<etiqueta STYLE="propiedad1:valor;...;prop-n:valor"> ... </etiqueta>
o el parámetro CLASS si hemos hecho declaración de clase:
<etiquetaCLASS=clase1> ... </etiqueta>
o el parámetroID si hemos hecho declaración de nombre:
<etiqueta ID=nombre1> ... </etiqueta>
Para que se aplique un mismo estilo a todas las etiquetas del documento, definiremos estilos globales por medio de la etiqueta <STYLE> y </STYLE>, dentro de la cabecera del documento (entre <HEAD> ... </HEAD>) como sigue:
<STYLE TYPE="text/css">
<!—
Selector1 {propiedad1:valor;...;propiedadn:valor }
Selector2, Selector3 {propiedad1:valor;...;propiedadn:valor}
Selector4.clase {propiedad1:valor;...;propiedadn:valor}
selector4.clase2 { propiedad1:valor; ...;propiedadn:valor}
.Clase1 {propiedad1:valor;...;propiedadn:valor}
Selector5 Selector6 {propiedad1:valor;...;propiedadn:valor}
#nombre1 { propiedad1:valor; ...;propiedadn:valor}
//-->
</STYLE>
Para secciones reducidas de una página, por ejemplo unas pocas palabras dentro de un párrafo, se utiliza la instrucción <SPAN> … </SPAN> con el parámetro style:
<p>texto <SPAN style="propiedad1:valor">texto con propiedad1</SPAN>as texto.</p>
Para definir divisiones o bloques de la página que incluyan una o mas instrucciones se utiliza la instrucción <DIV> … </DIV>. La sintaxis es similar a las anteriores.
<DIV>
<etiqueta …
<etiqueta …
...
</DIV>
Podemos incluso definir los estilos en un fichero aparte, distinto al documento HTML, y después referenciarlo desde varios documentos HTML. Esto lo haremos con la etiqueta <LINK>, dentro de la cabecera del documento (entre <HEAD> ... </HEAD>):
<LINK REL="stylesheet" TYPE="text/css" HREF="URL_Hoja.css">
Otra manera de importar una declaración externa de estilos CSS en por medio de import, que se utiliza para importar unas declaraciones de estilos guardadas en la ruta que se indica entre paréntesis debiéndose escribir en la primera línea de la declaración de estilos:
<style type="text/css">
@import url ("archivo_a_importar.css");
...
</style>
Los comentarios se indican dentro de hojas de estilo con las mismas convenciones usadas en la programación C.
/* LOS COMENTARIOS NO PUEDEN ANIDARSE */
//Comentario de una sola línea.
La notación
//-->
dentro de un bloque STYLE se utiliza para indicar a
HTML establece una jerarquía de instrucciones de tal modo que unas contienen a otras, y nos dan una relación de herencia. La instrucción BODY, que hace referencia a todo el cuerpo del documento, podemos considerarla como la instrucción "padre", y dentro de ella todas las demás. Algunas de ellas a la vez, por ejemplo el párrafo es contenedora de otras instrucciones , como la negrita estableciéndose así una nueva relación "padre-hijo".
Atendiendo a esa relación, nos ahorramos establecer algunos parámetros en las instrucciones "hijas" dado que la mayoría de ellos se heredan. Sin embargo, si queremos, siempre podemos definir unos parámetros distintos para una instrucción "hija", de modo que en realidad solo se heredaran de la instrucción "padre" aquellos que no definamos en la instrucción "hija".
Atendiendo a los diferentes niveles de definición resulta que más de una declaración de estilos puede afectar a la misma instrucción. Para despejar las dudas que esto puede generar, siempre se tiene en cuenta la declaración de estilos más particular, siguiendo ese mismo orden de jerarquía de niveles de definición de estilos que hemos establecido en el apartado anterior.
Cualquier nombre que contenga un espacio en blanco deberá ser entrecomillado, con comillas simples o dobles.
Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que indica la unidad. Una longitud de 0 no necesita las dos letras para identificar la unidad. No hay espacios en un valor de longitud.
Las unidades relativas dan una longitud relativa a otra propiedad longitud, y se prefieren ya que se ajustarán mejor a medios diferentes. Las siguientes unidades relativas están disponibles:
Las unidades de longitud absolutas son muy dependientes del medio de salida, y son por lo tanto menos útiles que las unidades relativas. Las siguientes unidades absolutas están disponibles:
Un valor de porcentaje se forma por un signo + o - opcional, seguido de un número y de %. No hay espacios en un valor de porcentaje.
Un valor de color es una palabra clave o una especificación numérica RGB.
Las 16 palabras clave se toman de la paleta Windows VGA
Black #000000 Negro Green #008000 Verde Silver #C0C0C0 Plateado Lime #00FF00 Verde lima Gray #808080 Gris Olive #808000 Verde oliva White #FFFFFF Blanco Yellow # FFFF00 Amarillo Maroon #800000 Marrón Navy #000080 Azul marino Red #FF0000 Rojo Blue #0000FF Azul Purple #800080 Púrpura Teal #008080 Azul verdoso Fuchsia #FF00FF Fucsia Aqua #00FFFF Celeste
Las especificaciones numéricas RGB se dan en una de cuatro maneras:
Un valor URL es dado por url(foo), donde foo es la URL. La URL puede ser opcionalmente entrecomillada con comillas simples (') o dobles (") y puede contener espacios en blanco.
selector { propiedad: url("ruta-nombre archivo.ext") }
El valor expresado como inherit significa que el elemento toma el mismo valor computado que la propiedad del padre del elemento. De este modo, se refuerza explícitamente el valor heredado. Pero, además, este valor se aplica aún a propiedades que de otro modo no serían heredadas.
| Propiedad | Valores (en negrita valor inicial) | Obs |
| font-family | nombre de familia | nombre de familia genérica | Pueden ponerse varios nombres separados por comas. |
| font-style | normal | italic | oblique | Estilo fuente |
| font-variant | normal | small-caps | Variante mayúsculas |
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | Grosor de la fuente. Los valores bolder y lighter son relativos al peso de la fuente heredada. |
| font-size | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | Longitud | Porcentaje | Tamaño. Porcentaje, larger y smaller son relativos al elemento padre. |
| font | Valores de style, variant, weight, size, height, line-height y family | Forma rápida para varias propiedades de las fuentes. |
| Propiedad | Valores (en negrita valor inicial) | Obs |
| color | Color | Color del primer plano |
| background-color | Color | transparent | Color de fondo |
| background-image | URL | none | Imagen de fondo |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat | El valor repeat-x repetirá la imagen horizontalmente, repeat-y verticalmente. |
| background-attachment | scroll | fixed | Desplazamiento imagen |
| background-position | Porcentaje | Longitud | n,n | top | center | bottom | left | center | right | Posición del fondo. Se aplica a elementos de nivel bloque y elementos reemplazados |
| background | Valores de background-color, background-image, background-repeat, background-attachment y background-position | Forma rápida para varias propiedades del fondo |
| Propiedad | Valores (en negrita valor inicial) | Obs |
| word-spacing | normal | Longitud | Espacio entre palabras. |
| letter-spacing | normal | Longitud | Espacio entre letras. |
| text-decoration | none | underline | overline | line-through | blink | Decoración del texto. |
| vertical-align | baseline | sub | super | top | text-top | middle | bottom | text-bottom | Porcentaje | Alineación vertical. Se aplica a elementos en línea. |
| text-transform | none | capitalize | uppercase | lowercase | Transformación del texto |
| text-align | left | right | center | justify | Alineación |
| text-indent | Longitud | Porcentaje | Sangría |
| line-height | normal | n | Longitud | Porcentaje | Altura de interlineado |
Al definir una porción o bloque en las hojas de estilo se considera rodeado por una caja o cuadro, con propiedades de alineación, ancho, margen, borde, padding y fondo.
| Propiedad | Valores (en negrita valor inicial) | Obs |
| margin-top | Longitud | Porcentaje | auto | Margen superior |
| margin-right | Longitud | Porcentaje | auto | Margen derecho |
| margin-bottom | Longitud | Porcentaje | auto | Margen inferior |
| margin-left | Longitud | Porcentaje | auto | Margen izquierdo |
| margin | Longitud | Porcentaje | auto | Establece márgenes especificando entre uno y cuatro valores |
| padding-top | Longitud | Porcentaje | Relleno superior |
| padding-right | Longitud | Porcentaje | Relleno derecho |
| padding-bottom | Longitud | Porcentaje | Relleno inferior |
| padding-left | Longitud | Porcentaje | Relleno izquierdo |
| padding | Longitud | Porcentaje | Establece relleno especificando entre uno y cuatro valores |
| border-top-width | thin | medium | thick | Longitud | Ancho borde superior |
| border-right-width | thin | medium | thick | Longitud | Ancho borde derecho |
| border-bottom-width | thin | medium | thick | Longitud | Ancho borde inferior |
| border-left-width | thin | medium | thick | Longitud | Ancho borde izquierdo |
| border-width | thin | medium | thick | Longitud | Establece el ancho del borde especificando entre uno y cuatro valores |
| border-color | Color | Color del borde. Se puede especificar entre uno y cuatro valores |
| border-style | none | dotted | dashed | solid | double | groove | ridge | inset | outset | Estilo del borde. Se puede especificar entre uno y cuatro valores |
| border-top | Valores de border-width, border-style y border-color | Borde superior. Ancho, estilo y color |
| border-right | Valores de border-width, border-style y border-color | Borde derecho. Ancho, estilo y color |
| border-bottom | Valores de border-width, border-style y border-color | Borde inferior. Ancho, estilo y color |
| border-left | Valores de border-width, border-style y border-color | Borde izquierdo. Ancho, estilo y color |
| border | Valores de border-width, border-style y border-color | Ancho, estilo y color del borde. |
| width | Longitud | Porcenaje | auto | Ancho. Se aplica a elementos de nivel bloque y elementos reemplazados. |
| height | Longitud | auto | Altura. Se aplica a elementos de nivel bloque y elementos reemplazados. |
| float | left | right | none | Flotar. Permite ajustar texto alrededor de un elemento. |
| clear | none | left | right | both | Despejar. Permitir elementos flotantes a los lados. |
| Propiedad | Valores (en negrita valor inicial) | Obs |
| display | block | inline | list-item | none | Visualización |
| white-space | normal | pre | nowrap | Espacio en blanco |
| list-style-type | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | Tipo de viñeta |
| list-style-image | URL | none | Imagen para la viñeta |
| list-style-position | inside | outside | Posición de las líneas sucesivas de listas. |
| list-style | Valores de propiedades list-style-type, list-style-position y list-style-image | Forma rápida para varias propiedades de estilo de lista. |
| Propiedad | Valores (en negrita valor inicial) | Obs |
| cursor | auto | crosshair | default | hand | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | URL | inherit | Forma del cursor. Las letras de resize indican los puntos cardinales. |
| outline-color | Color | invert | inherit | Color del contorno |
| outline-style | none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit | Estilo del contorno |
| outline-width | thin | medium | thick | Longitud | inherit | Ancho del contorno |
| outline | Valores de outline-color, outline-style, outline-width | inherit | Forma rápida para varias propiedades de contorno. |
La seudo-clase distingue los diferentes tipos de un mismo elemento y el seudo-elemento se refiere a una parte de un elemento. Ambas son componentes especiales reconocidos automáticamente por los navegadores que soportan CSS.
La variación del estilo de los enlaces es de lo mas utilizado.
A:link { propiedad1:valor; ... propiedadn:valor }
Podemos dar estilo de forma independiente o en conjunto, separando las seudo-clases con comas.
Un seudo-elemento first-line puede usarse en cualquier elemento de nivel de bloque (como P, H1, etc.). Un ejemplo de un seudo-elemento first-line sería:
P:first-line { font-variant:small-caps; font-weight:bold }
El seudo-elemento first-letter se emplea para crear letras capitales y otros efectos.
La primera letra de texto dentro del selector asignado se representará de acuerdo al valor asignado. Un seudo-elemento first-letter puede usarse en cualquier elemento de nivel de bloque. Por ejemplo:
P:first-letter { font-size:300%; float:left }
crearía una letra capital tres veces mayor que el tamaño normal de fuente.
Una capa es una división, una parte de la página, que tiene un comportamiento muy independiente dentro de la ventana del navegador.
Las etiquetas LAYER e ILAYER tienen como objetivo construir capas, pero estas no son compatibles más que con Netscape, por lo que es recomendable utilizar la etiqueta DIV, con el parámetro ID para su identificación.
En el uso de capas se basan muchos de los efectos más comunes del HTML dinámico.
Una capa puede tener cualquiera de los estilos vistos pero existen una serie de propiedades específicas que sirven para posicionar la división en la página como una capa.
| Propiedad | Valores (en negrita valor inicial) | Obs |
| position | relative | absolute | Posición relativa al lugar donde se estaba escribiendo en la página en el momento de escribir la capa con su etiqueta, o absoluta desde el punto superior izquierdo de la página. |
| top | longitud, porcentaje | Distancia desde el borde superior |
| left | longitud, porcentaje | Distancia desde el borde izquierdo |
| height | longitud | Tamaño de la capa (altura) |
| width | longitud | Anchura de la capa |
| visibility | visible | hidden | nherit | Visibilidad de la capa |
| z-index | número | Nivel de profundidad de la capa |
| clip | rect(top, right, bottom, left) | Determinar áreas de recorte |
Un estilo designado como ! important prevalecerá sobre estilos contradictorios de similar nivel.
La especificación se hace como si fuese un atributo, p.e.
BODY { background: url(bar.gif) white; background-repeat:repeat-x ! important }
Tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo. Cuando hay un conflicto entre reglas, las reglas del autor prevalecerán sobre las reglas del lector de similar peso.
Tanto las hojas de estilo del autor como las del lector primarán sobre las hojas de estilo incorporadas del navegador.
Cualquier regla ! important prevalecerá sobre las reglas normales, por lo que se aconseja a los autores usar reglas normales casi exclusivamente, para asegurar que los usuarios con necesidades especiales de estilos puedan leer la página.
Un estilo más específico siempre prevalecerá sobre uno menos específico.
Es más específico un estilo dependiendo del número de
Para hacerlo sencillo, cuando dos reglas tienen el mismo peso, prima la última regla especificada.