ESTILOS CSS AVANZADOS
Aplicar estilos CSS
Hasta ahora, si has entrado un poco en el código de las páginas, habrás visto etiquetas que introducían estilos CSS en ellas.
Por defecto, cuando creamos una regla de estilo indicando <style> en la sección Fuentes del Diseñador de CSS, la regla se define únicamente para la página actual. Esto genera un código similar al siguiente en el <head> de la página (por supuesto, cambiando las propiedades según el caso).
<style type="text/css"> <!-- body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; background: url('imagenes/fondo.gif') repeat-x bottom; } //-> </style>
Este método se emplea para incrustar el código directamente en la página. Los estilos son declarados en la cabecera (
<head>...</head>), entre las etiquetas <style type="text/css"> y </style>.
La base del CSS es lograr un estilo homogéneo y fácil de modificar para todo nuestro sitio. Por lo tanto, no tiene sentido incrustar el mismo estilo en cada página. En nuestros sitios de ejemplo, hemos optado por exportar los estilo a una hojas de estilos (un archivo de extensión .css). Esta opción nos resultaba mucho mejor, ya que nos permite centralizar el estilo en un sólo archivo que aplicaremos a todas las páginas.
Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja directamente. En este caso deberemos crear un archivo CSS (Archivo → Nuevo y seleccionando CSS). En él escribiremos las reglas de estilo con la misma sintaxis que hemos visto más arriba pero eliminado el componente HTML. Este sería el contenido de nuestra hoja definiendo el mismo estilo que arriba:
@charset "iso-8859-1";
/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}
Las dos primeras líneas generadas por Dreamweaver no son imprescindibles.
Este código está guardado en un archivo con extensión .css (por ejemplo, miestilo.css). Luego deberíamos vincularlo en la página HTML utilizando la etiqueta
<link /> dentro del <head> de la página:<link href="ruta/miestilo.css" rel="stylesheet" type="text/css" />
Otra opción que nos permite el Inspector de propiedades CSS es crear un Estilo en línea. Este estilo sólo afecta al elemento en cuestión, ya que lo que realmente estamos haciendo es definir las propiedades CSS empleando el atributo
style del elemento:<p style="color: red; font-size: 30px;">Este texto está en rojo y con un tamaño de 30 píxeles</p>
El estilo en línea es el más desaconsejado porque es más difícil de modificar al tener que buscarlo por el texto y modificándolo uno a uno.
Una página puede contener todos estos tipos de estilos CSS, o incluso tener varias hojas de estilo asociadas. Entonces ¿cuándo empleamos cada uno?
- Emplearemos hojas de estilos para todos los estilos comunes a las páginas del sitio.
- Emplearemos estilos incrustados en la página para los estilos que se emplean en únicamente en esa página, y que ya no serían útiles si borrásemos la página. Por ejemplo, para definir el la apariencia de una tabla en concreto.
- Emplearemos estilos en línea cuando el estilo solo tenga sentido por estar en esa posición en concreto, y no se suela repetir en el sitio. Por ejemplo, si queremos dar más margen a un párrafo por tener una imagen en concreto, pero que no tendría sentido si cambiásemos la imagen.
La organización de los estilos debes decidirla tú. Pero recuerda que cuanto menos código repitas en tus páginas, más fácil será luego de modificar o exportar.
Para practicar realiza el ejercicio paso a paso Crear una hoja de estilo CSS.Sintaxis CSS
Un archivo CSS tiene una estructura muy bien definida, por lo que bastará con que nos aprendamos unas cuantas reglas para poder empezar a familiarizarnos con su creación.
Su estructura siempre es la siguiente:
El formato a seguir para definir una propiedad es:
selector { propiedad: valor;} o selector {propiedad: valor1 valor2 valor3;} si puede tener varios valores. Aunque como lo habitual es escribir varias propiedades para un selector, se suele emplear la sintaxis:selector { propiedad1: valor; propiedad2: valor1 valor2; propiedad3: valor; propiedad4: valor; }
Esto es lo que podríamos llamar una regla CSS. Podemos escribir tantas reglas CSS como queramos, siempre una después de otra.
Entre llaves se encierra la definición del estilo, que viene dada por una lista de propiedades y sus valores separados por puntos y comas.
Los selectores son aquellos sobre los que se aplica la definición del estilo CSS.
Recordarás que al crear una nueva regla, Dreamweaver nos permitía elegir entre cuatro tipos de selectores:
- Etiqueta HTML
- Clase
- Identidad
- Compuesto
Cualquier etiqueta HTML es un selector (eliminando los < y >). Por lo que cualquier elemento de una página puede ser modificado genéricamente para que tome un mismo aspecto, por ejemplo:
p {font: 13px bold Arial;}
Hace que todos los párrafos (la etiqueta p) tendrán la fuente de un tamaño de 13 píxeles, estará en negrita y será del tipo Arial.
Hay que tener en cuenta que las etiquetas tiene un estilo por defecto, dependiendo del navegador. Por eso vemos los párrafos con margen, los enlaces subrayados o los encabezados de mayor tamaño. Haciendo esto reescribimos las propiedades de esa etiqueta.
Una clase es un selector que afectará sólo a aquellas etiquetas que nosotros decidamos, por ejemplo:
.rojo {color: red;}
Hemos creado una clase, que hace que los elementos a los que se la asignemos muestren el texto de color rojo. Como puedes ver, la clase se define porque tiene un punto delante.
Ahora podríamos aplicar este estilo sobre cualquier etiqueta que queramos. No hay más que emplear el atributo class para indicar la clase asignada.
<p class="rojo">Éste es un texto en rojo.</p> <div class="rojo"> <p>Este texto también es rojo.</p> <p>Y también éste.</p> </div>
En este ejemplo estaríamos creando un párrafo y todo su texto sería rojo. En el caso del bloque (etiqueta div), todo el texto que contenga será rojo, a no ser que los párrafos tengan definido otro color en la hoja de estilo.
Los selectores de clase deben estar siempre escritos con caracteres alfanuméricos y sin utilizar espacios (utiliza el subrayado _ para separar palabras). Para evitar errores, recomendamos también escribirlos siempre en minúsculas.
También tenemos los selectores de identidad. Estos selectores identifican al elemento por su ID. Por lo tanto, sólo afectarán a un elemento en concreto de la página, por lo que son muy empleados para definir el estilo de las capas PA.
#contenedor {width: 600px;}
Observa que este tipo de selector va precedido por una almohadilla (#).
Más tarde en el código podremos encontrar:
<div id="contenedor">Este es un bloque que contiene texto</div>
En el código deberá establecerse la regla CSS asociándosela al atributo ID.
Este atributo (id) recoge el nombre del elemento que se ha creado con la etiqueta HTML.
A partir de ese momento se podría referenciar a ese cuadro de texto como contenedor utilizando JavaScript.
Los selectores compuestos los veremos en el siguiente punto.
Selectores compuestos
Aunque sólo hay tres tipos de selectores diferentes hay diversas formas de combinarlos para producir hojas de estilo más complejas. A esta combinación de selectores se les llama selectores compuestos.
Ahora veremos estos tipos de combinación:
Agrupación: Los selectores se pueden agrupar separados por comas para asignarles las mismas propiedades, por lo que:p { background-color: #003; } .resaltado { background-color: #003; } #cabecera { background-color: #003; }
Puede escribirse como:
p, .resaltado, #cabecera { background-color: #003; }
Descendencia: Podemos obligar que un estilo sólo se aplique sobre un elemento que esté dentro de otro. Por ejemplo:#contenido { color: #0000FF; background-color: #FFC; } .resaltado { background-color: #FFC; }
Esto hará que tanto el elemento #contenido como los elementos con la clase .resaltado tengan el mismo color de fondo. ¿Pero qué ocurre si queremos resaltar algo dentro de #contenido? Como no se verá ¿tenemos que crear otra clase? No es necesario, podemos indicar propiedades distintas que afecten a la clase .resaltado sólo cuando se encuentre dentro del elemento #contenido. Lo hacemos escribiendo lo selectores en orden jerárquico y separados por espacios:
#contenido .resaltado { background-color: #06F; }
Ahora los textos marcados con la clase .resaltado dentro de #contenido se verán con otro color de fondo.
Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro del anterior.
Puedes utilizar todas las anidaciones que quieras y mezclar los selectores, por ejemplo:
#contenedor p .derecha { float: right; }
En este caso todas las etiquetas con la clase derecha que se encuentren dentro de un párrafo dentro del elemento definido como contenedor flotarán a la derecha.
Selectores de atributo
Hasta ahora hemos visto que los selectores se pueden combinar de bastantes formas. Veamos que el poder de CSS no sólo se queda ahí si no que avanza un poco más para ayudarnos a establecer estilos según el tipo de atributos que tenga una etiqueta.
Un atributo es una parte de la descripción de un selector HTML. Por ejemplo, en:
<a href="http://www.aulaclic.es" target="_blank">Enlace</a>
a es el selector de la etiqueta, mientras que href y target son atributos.
CSS permite entrar en el contenido de las etiquetas para cambiar sus estilos. Veamos cómo hacerlo:
Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados atributos definidos, por ejemplo:a[href] { font-family: Arial, Helvetica; }
En esta línea estamos estableciendo que cualquier etiqueta a que tenga el atributo href cambie su tipo de letra a Arial o Helvética.
Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado valor en un atributo, por ejemplo:a[target="_blank"] { font-weight: bold; }
Esta línea hará que se convierta en negrita cualquier enlace que abra una nueva ventana al hacer clic, distinguiéndolos de los enlaces que navegan por el sitio.
Interesante, ¿verdad?
Pseudo-clases y Pseudo-elementos CSS
Por último, y para terminar con los selectores veremos las pseudo-clases, elementos que añadiremos a los selectores para evidenciar algún estado.
Y los pseudo-elementos, que aplicaremos sobre los selectores en dos casos muy sencillos.
Primero veremos 4 tipos diferentes de pseudo-clases, que habíamos ido comentando alguna vez. Son: :link, :visited, :hover y :active.
Incluyendo estas pseudo-clases en nuestros estilos CSS podremos modificar el modo en el que se visualizarán lo elementos, aunque son más usados en los enlaces.
Veamos el siguiente ejemplo:
a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: yellow; }
Esto hará que los enlaces se muestren de color rojo (red) en nuestra página. Es el estado link. Por lo tanto, esta propiedad sólo tiene sentido en enlaces.
Cuando ya hayan sido visitados por el usuario se quedarán de color azul (blue). Es el estado visited. Este estado se renovará dependiendo del navegador utilizado y se mostrará durante un tiempo determinado (una sesión, etc...). Esta propiedad sólo tiene sentido en enlaces.
En el momento en que coloques el ratón sobre él se mostrará de color verde (green). Es el estado hover. Podemos aplicarlo a la mayoría de elementos.
Y finalmente en el momento que se haga clic sobre él, y mientras tenga el foco se verá de color amarillo (yellow). Es el estado active. Puede resultarnos útiles en campos de formulario, para destacar el campo que se está editando.
Puedes aplicar estas pseudo-clases de cualquier forma de las anteriores.
#menu a:hover { text-decoration: none; } a.volver:hover { background-image: url(flecha_atras.png); } #menu:hover a { text-decoration: underline; }
La primera regla afectará a los enlaces que estén dentro del elemento #menu cuando tengan el cursor encima. La segunda regla, afectará a los enlaces con la clase volver cuando tengan el cursor encima. El orden es muy importante. En el tercer ejemplo, al cambiar el orden, la regla afecta a todos los enlaces a la vez cuando el elemento #menu tenga el cursor encima.
Luego tenemos dos pseudo-elementos que actuarán sobre el texto del documento, son: :first-letter y :first-line (primera letra y primera línea respectivamente).p:first-letter { font-size: 26px; } p:first-line { font-variant: small-caps; }
Puedes ver un ejemplo de cómo actuarían estos pseudo-elementos en la siguiente línea. Agranda y estrecha la ventana para ver qué ocurre:
Esto es una Prueba, la primera línea está en versales y la primera letra tiene un tamaño de 26px.
Para practicar los pseudo-elementos y clases realiza el ejercicio paso a pasoUtilizando pseudo-elementos y clases.Orden de aplicación de los estilos CSS
Entonces, si definimos en varios sitios el estilo para un elemento ¿cuál se aplica? Bueno, realmente los estilos se van sumando. Por lo que si no repetimos ninguna propiedad, el estilo final de un elemento será la suma de todos los estilos que afecten al elemento.
Pero ¿qué ocurre si repetimos una propiedad? Como norma general, prevalecerá el estilo más concreto sobre el más genérico. Por ejemplo, si en la hoja de estilo establecemos el texto de los párrafos en rojo, y en la cabecera de la página definimos el color de los párrafos en azul, prevalecerá éste último, ya que es más concreto, se refiere sólo a los párrafos de esa página. Y si en un párrafo de la página, en el atributo
style indicamos el color de texto verde, prevalecerá éste por ser el más concreto de todos.
Lo mismo ocurre con los selectores. Por ejemplo,
p.inicio es más concreto que p, ya que se refiere sólo a los párrafos con esa clase. Y p#titulo sería aún más concreto, ya que se refiere directamente a un determinado párrafo. Lo mismo ocurre al anidar los selectores, p.inicio span es más concreto que poner sólo span.
En caso de empate, por ejemplo si definimos varias veces la misma propiedad en una hoja de estilo, se tomará en cuenta la última, que machacará a las anteriores. Por ejemplo, poner
p {margin:20px; margin-bottom: 5px;} sería como poner p {margin: 20px 20px 5px;}.
En cualquier momento podemos saltarnos el orden de prioridad de los estilos, añadiendo
!important al final de una propiedad. Esto hace que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo:p { color: blue !important; color: red; }
El párrafo debería de ser de color rojo, porque el valor rojo "machaca" al azul. Sin embargo, al poner
!important, hace que el texto sea rojo.
Además, los elementos hijos heredan las propiedades. Así, si definimos el color rojo para el texto de una capa, todos los elementos de la capa mostrarán el texto en color rojo, a no ser que tengan otro estilo definido.
Por todo esto, a veces podemos no saber dónde hemos definido la propiedad que hace que un elemento se vea de tal o cual forma. En cualquier momento podemos ver qué propiedades afectan al estilo y dónde están definidas desde el panel Diseñador de CSS.
Comentarios
Publicar un comentario