el tutorial de Dreamweaver
el tutorial de Dreamweaver el tutorial de Dreamweaver
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?.
- Page 121 and 122: Unidad 12. HTML desde Dreamweaver (
- Page 123 and 124: Unidad 12. HTML desde Dreamweaver (
- Page 125 and 126: A continuación se abrirá el panel
- Page 127 and 128: ventana. Una de ellas es buscar uno
- Page 129 and 130: que sigan HTML.$ Utiliza este símb
- Page 131 and 132: carácter al cual precede. Por ejem
- Page 133 and 134: La siguiente búsqueda incluiría n
- Page 135 and 136: \W Al contrario que el anterior, es
- Page 137 and 138: Habremos conseguido cambiar las eti
- Page 139 and 140: Obviamente para realizar la segunda
- Page 141 and 142: Unidad 13. Otros elementos (I)13.1V
- Page 143 and 144: El elemento que suele utilizarse pa
- Page 145 and 146: Dicho código tiene que ir entre la
- Page 147 and 148: Cuando existen varias capas en un m
- Page 149 and 150: Unidad 15. Comportamientos (I)15.1E
- Page 151 and 152: Para eliminar un comportamiento, ha
- Page 153 and 154: mientras que el otro la ocultará p
- Page 155 and 156: Texto de la Barra deEstadoEl Texto
- Page 157 and 158: Unidad 16. Comportamientos Avanzado
- Page 159 and 160: Unidad 16. Comportamientos Avanzado
- Page 161 and 162: Unidad 16. Comportamientos Avanzado
- Page 163 and 164: Este comportamiento también deber
- Page 165 and 166: Luego puedes marcar la opción Sele
- Page 167 and 168: Rellenar este menú es igual de fá
- Page 169 and 170: También es posible importar archiv
- Page 171: Este es un bloque con el texto rojo
- Page 175 and 176: Puedes utilizarlas todas a la vez o
- Page 177 and 178: font-size: establece el tamaño de
- Page 179 and 180: Esta línea muestra el texto con un
- Page 181 and 182: El modo en el que se definiría el
- Page 183 and 184: Observa que hemos utilizado una URL
- Page 185 and 186: #menu {background-image: url(imagen
- Page 187 and 188: Unidad 17. Estilos CSS Avanzado (X)
- Page 189 and 190: .bloque_interior {margin-right: aut
- Page 191 and 192: Unidad 17. Estilos CSS Avanzado (XI
- Page 193 and 194: order-right-width: 10px;border-righ
- Page 195 and 196: Además le hemos dado un tamaño de
- Page 197 and 198: menumenucontenidocontenidocontenido
- Page 199 and 200: 7. A este bloque deberemos asignarl
- Page 201 and 202: 1 2 3 46 7 824 5 9 10 11231222 21 2
- Page 203 and 204: Así deberíamos declarar la posici
- Page 205 and 206: Unidad 17. Estilos CSS Avanzado (XI
- Page 207 and 208: autoEn este ejemplo hemos introduci
- Page 209 and 210: Aquí deberás rellenar los datos q
- Page 211 and 212: Unidad 18. Sitios Remotos (II)18.2E
- Page 213 and 214: Unidad 18. Sitios Remotos (III)18.3
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.