el tutorial de Dreamweaver

el tutorial de Dreamweaver el tutorial de Dreamweaver

ieslaasuncion.org
from ieslaasuncion.org More from this publisher
11.07.2015 Views

Unidad 17. Estilos CSS Avanzado (III)17.3Selectores CSSAunque sólo hay tres tipos de selectores diferentes hay diversas formas de combinarlos paraproducir hojas de estilo más complejas.Ahora veremos estos tipos de combinación:Agrupación: Los selectores se pueden agrupar separados por comas, por lo que:p { background-color: #000033; }.azul_oscuro { background-color : #000033; }#cabecera { background-color: #000033; }Puede escribirse como:p, .azul_oscuro, #cabecera { background-color: #000033; }Descendencia: Podemos obligar que un estilo sólo se aplique sobre un elemento que estédentro de otro. Por ejemplo:h1 {color: #0000FF;font-weight: bold;}b { color: #0000FF; }Esto hará que todos los encabezados H1 de la página sean de color azul y en negrita, y que lostextos en negrita se muestren azules.Pero, ¿qué pasa si queremos resaltar texto en los encabezados, no podremos utilizar la negrita?Título: El uso de la NegritaEn este caso deberemos hacer uso de la descendencia:h1 b { color: red; }Ahora los textos marcados con la etiqueta B en los encabezados H1 serán de color rojo.Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro delanterior.

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 delelemento definido como contenedor flotarán a la derecha.Selectores de AtributoHasta ahora hemos visto que los selectores se pueden combinar de bastantes formas. Veamosque el poder de CSS no sólo se queda ahí sino que avanza un poco más para ayudarnos aestablecer 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:EnlaceA 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ómohacerlo:Nombre de Atributo: Podemos establecer estilos para etiquetas con determinados atributosdefinidos, por ejemplo:a[href] { font-family: Arial, Helvetica; }En esta línea estamos estableciendo que cualquier etiqueta a que tenga el atributo href cambie sutipo de letra a Arial o Helvética.Valor de Atributo: Podemos aplicar estilos a etiquetas que tengan determinado valor en unatributo, por ejemplo:a[target="_blank"] { font-weight: bold; }Esta línea hará que se convierta en negrita cualquier enlace que abra una nueva ventana alhacer clic.Interesante, ¿verdad?.

Unidad 17. Estilos CSS Avanzado (III)17.3S<strong>el</strong>ectores CSSAunque sólo hay tres tipos <strong>de</strong> s<strong>el</strong>ectores diferentes hay diversas formas <strong>de</strong> combinarlos paraproducir hojas <strong>de</strong> estilo más complejas.Ahora veremos estos tipos <strong>de</strong> combinación:Agrupación: Los s<strong>el</strong>ectores se pue<strong>de</strong>n agrupar separados por comas, por lo que:p { background-color: #000033; }.azul_oscuro { background-color : #000033; }#cabecera { background-color: #000033; }Pue<strong>de</strong> escribirse como:p, .azul_oscuro, #cabecera { background-color: #000033; }Descen<strong>de</strong>ncia: Po<strong>de</strong>mos obligar que un estilo sólo se aplique sobre un <strong>el</strong>emento que esté<strong>de</strong>ntro <strong>de</strong> otro. Por ejemplo:h1 {color: #0000FF;font-weight: bold;}b { color: #0000FF; }Esto hará que todos los encabezados H1 <strong>de</strong> la página sean <strong>de</strong> color azul y en negrita, y que lostextos en negrita se muestren azules.Pero, ¿qué pasa si queremos resaltar texto en los encabezados, no podremos utilizar la negrita?Título: El uso <strong>de</strong> la NegritaEn este caso <strong>de</strong>beremos hacer uso <strong>de</strong> la <strong>de</strong>scen<strong>de</strong>ncia:h1 b { color: red; }Ahora los textos marcados con la etiqueta B en los encabezados H1 serán <strong>de</strong> color rojo.Al escribir dos s<strong>el</strong>ectores seguidos obligamos a que <strong>el</strong> segundo tenga que estar <strong>de</strong>ntro d<strong>el</strong>anterior.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!