2. Introducción a las Hojas de estilo (CSS)
0 recomendaciones914 vistas
El documento describe la sintaxis básica de CSS, que incluye reglas compuestas por selectores y declaraciones que definen los estilos de los elementos HTML. Se presentan diferentes tipos de selectores, como selectores universales, por tipo, descendentes, de clase e id, cada uno con ejemplos que ilustran su uso adecuado y aplicación. Además, se enfatiza la diferencia entre selectores de clase y de id, resaltando su funcionalidad y ámbito de aplicación en la creación de estilos para elementos en una página web.
2. Introducción a las Hojas de estilo (CSS)
- 1. 3. CSS: Sintaxis básica CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico: _Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y por último, un símbolo de "llave de cierre” (}).
- 2. 3. CSS: Sintaxis básica _Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. _Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS. La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo".
- 3. 3. CSS: Sintaxis básica _Declaración: •Propiedad: permite modificar el aspecto de una característica del elemento. •Valor: indica el nuevo valor de la característica modificada en el elemento.
- 4. 4. CSS: Selectores básicos A un mismo elemento HTML se le pueden asignar infinitas reglas CSS y cada regla CSS puede aplicarse a un número infinito de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas. El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página Web. No obstante, la mayoría de páginas de los sitios web se pueden diseñar utilizando solamente los cinco selectores básicos.
- 5. 4. CSS: Selectores básicos 4.1. Selector universal Se utiliza para seleccionar todos los elementos de la página. * {…} El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página. No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados. En el siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML. *{ margin: 0; padding: 0; }
- 6. 4. CSS: Selectores básicos 4.2. Selector de tipo o etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. p {…} h1 {…} h2 {…} … Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML correspondiente a los elementos que se quieren seleccionar. El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML: h1 {color: red;} h2 {color: blue;} p {color: black;}
- 7. 4. CSS: Selectores básicos 4.2. Selector de tipo o etiqueta Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos: h1 {color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h2 {color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h3 {color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores: h1, h2, h3 {color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
- 8. 4. CSS: Selectores básicos 4.2. Selector de tipo o etiqueta En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos: h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }
- 9. 4. CSS: Selectores básicos 4.3. Selector descendente Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>: p span { color: red; } Si el código HTML de la página es el siguiente: <p> ... <span>texto1</span> ... <a href="">...<span>texto2</span></a> ... </p> El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector descendiente, un elemento no tiene que ser "hijo directo" de otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre. Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les aplica la regla CSS anterior.
- 10. 4. CSS: Selectores básicos 4.3. Selector descendente Los selectores descendentes permiten aumentar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los <span> contenidos dentro de un <h1>: p span { color: red; } h1 span { color: blue; } Con las reglas CSS anteriores: •Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo. •Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul. •El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.
- 11. 4. CSS: Selectores básicos 4.3. Selector descendente Los selectores descendientes siempre están formados por dos o más selectores separados entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento. En el siguiente ejemplo, el selector descendente se compone de cuatro selectores: p a span em { text-decoration: underline; } Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.
- 12. 4. CSS: Selectores básicos 4.4. Selector de clase Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar: HTML <body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body> A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo: .destacado { color: red; } El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición. Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class.
- 13. 4. CSS: Selectores básicos No debe confundirse el selector de clase con los selectores anteriores: /* Todos los elementos de tipo "p" con atributo class="aviso" */ p.aviso { ... } /* Todos los elementos con atributo class="aviso" que estén dentro de cualquier elemento de tipo "p" */ p .aviso { ... } /* Todos los elementos "p" de la página y todos los elementos con atributo class="aviso" de la página */ p, .aviso { ... }
- 14. 4. CSS: Selectores básicos 4.5. Selectores de ID En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector más eficiente en este caso. El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.
- 15. 4. CSS: Selectores básicos 4.5. Selectores de ID La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS: #destacado { color: red; } <p>Primer párrafo</p> <p id="destacado">Segundo párrafo</p> <p>Tercer párrafo</p> En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a destacado).
- 16. 4. CSS: Selectores básicos 4.5. Selectores de ID La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class. De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.