Introducción al desarrollo web:
HTML y CSS
Parte II
CSS: selectores básicos ( parte 1 )
CSS es un lenguaje muy sencillo que se compone de reglas.
Cada regla está formada por uno o más selectores y una declaración formada por un bloque de estilos que define los estilos a aplicar para los elementos del documento que cumplan con el selector. En este ejemplo, el selector es el elemento de HTML <h1>, por lo que esta regla se aplicará a todos los encabezados de nivel 1 de la página web.
Cada declaración de estilos se define entre llaves, y está formada por parejas propiedad valor. En este ejemplo, a los elementos de tipo <h1> se le aplican dos propiedades: en la primera propiedad se indica que el color del texto debe ser rojo; en la segunda propiedad se indica que el color de fondo debe ser verde.
¿Qué tipos de selectores existen en CSS?
Los selectores de CSS3 están definidos en el documento “Selectors Level 3”, una recomendación del W3C de septiembre de 2011.
La lista de selectores definidos en CSS3 es enorme.
Como podemos ver, CSS3 incluye los selectores definidos en CSS1 y CSS2.
En este vídeo vamos a ver los selectores básicos definidos en CSS1 y CSS2. En los siguientes vídeos veremos los selectores avanzados y las novedades que incorpora CSS3.
En este vídeo voy a utilizar el siguiente fragmento de código HTML para explicarte el uso de los selectores de CSS.
A la derecha del código HTML te mostraré el código CSS y el resultado final, la visualización del código HTML y del código CSS en un navegador web.
Existen tres selectores básicos fundamentales: De tipo. De clase. Y de identificador.
Veamos el primer selector, el selector de tipo.
El selector de tipo también es conocido como selector de elemento o selector de etiqueta.
Este selector hace referencia a todos los elementos o etiquetas de un mismo tipo.
Para seleccionar una etiqueta, hacemos referencia a esa etiqueta en nuestro código CSS.
En este ejemplo, se han definido dos reglas de CSS.
En la primera el selector es h1 y se aplica al único encabezado de nivel 1 que hay en el código HTML.
En la segunda regla el selector es span y se aplica a todos los <span> que hay en el código HTML.
Como puedes observar, es un selector poco específico y se aplicará a todas las etiquetas de ese tipo en el documento en el que se incluya este código CSS.
El segundo es el selector de clase.
El atributo “class” es un atributo global, común a todas las etiquetas HTML, permite especificar las clases que se aplicarán a un determinado elemento.
En CSS, los nombres de las clases vienen precedidos por el carácter “.”; es imprescindible que recuerdes incluir este carácter en CSS y no lo incluyas en el atributo “class” de las etiquetas en HTML, un error muy común en los primeros desarrollos de cualquier persona.
En el ejemplo puedes ver cómo se aplica la clase .box a la etiqueta <div>.
Este tipo de selector se aplicará a todas las etiquetas cuyo atributo “class” lo incluya, esto se ilustra en el ejemplo mediante la clase .bold, aplicada a varios elementos distintos (dos etiquetas <span> y un enlace).
Como puede que ya sepas, el atributo “class” permite múltiples valores separados por espacio, de forma que podemos aplicar multitud de clases a una misma etiqueta. Esto favorece la reutilización de reglas, en lugar de tener repetir ciertas reglas una y otra vez.
Por ejemplo, puedes ver cómo la última etiqueta <span> aplica dos clases, una para el estilo de fuente y otro para el color.
Los selectores se pueden combinar entre sí. Veamos un ejemplo sencillo.
En este ejemplo, la regla CSS combina “span”, un selector de tipo, con “.bold”, un selector de clase. Esta combinación se aplica solo a las etiquetas <span> que tengan la clase .bold.
El tercer selector, más específico, y no por ello menos importante, es el selector de identificador.
Se diferencia del selector de clase en dos aspectos fundamentales:
Primero, el carácter inicial en el código CSS es “#”, en lugar del “.”.
Segundo, se aplica a aquellas etiquetas cuyo atributo “id” coincida con el texto tras la “#”.
Recuerda que el atributo “id” se supone único en el documento HTML, por tanto, una regla de identificador sólo se aplicaría una vez en toda una página web. Sin embargo, el valor de un “id” se puede repetir entre diferentes páginas web.
Es posible utilizar la combinación de selectores para seleccionar etiquetas anidadas.
Para aplicarles una regla exclusivamente a las etiquetas <span> anidadas a la etiqueta <div> del ejemplo, con todo lo aprendido hasta ahora, no nos quedaría más remedio que modificar el código HTML.
Sin embargo, si utilizamos combinaciones de selectores, podemos aplicar la regla solo a las etiquetas <span> que estén anidadas en etiquetas <div> mediante la regla “div espacio en blanco span”, o a todos los hipervínculos que estén en el interior de una etiqueta <span> mediante “span espacio en blanco a”.
Como ves, para anidar selectores, se especifican uno tras otro separados por espacios en blanco, siempre empezando por el elemento con menor nivel de anidamiento en el documento HTML.
En este otro ejemplo, te muestro cómo aplicar estilos a todas las etiquetas <span> que estén anidadas en etiquetas con la clase .box.
Del mismo modo que en el ejemplo anterior, especificamos en primera instancia el selector de clase .box y después, separado por espacio en blanco, el selector de etiquetas span.
El resultado final del ejemplo anterior también se puede lograr si se usa el selector de identificador “myDiv” en vez de la clase “.box”.
Y ahora al ejemplo anterior le añado otra regla de CSS.
El ejemplo muestra cómo aplicar un estilo a las etiquetas <span> dentro de una etiqueta identificada como “myDiv” y aplicar una regla a todos los enlaces que estén anidados en una etiqueta con el identificador “mySpan”.
Fácil, ¿no?
Como ya sabes, la reutilización y la reducción de código son primordiales para asegurar un fácil mantenimiento del código.
Para aplicar el mismo estilo a diferentes reglas no es necesario repetir código, puedes separar las reglas por comas y especificar el estilo una sola vez.
En este ejemplo, se indica que los elementos con el identificador “myDiv” y “mySpan” se deben presentar con el color verde. Estas dos reglas se pueden agrupar en una sola.
Los dos selectores se separan con una coma.
Por supuesto, puedes agrupar reglas de cualquier tipo de selector.
Ahora te invito a que veas la segunda parte de este vídeo.
Este vídeo está basado en los vídeos “CSS: selectores” y “CSS: selectores avanzados” de Guzmán Fernández que puedes encontrar en estas direcciones de YouTube.
www.google.es/activate
Cómo indicar el juego de caracteres en una hoja de estilo
Objetivos:
Si una hoja de estilo en cascada (CSS) contiene caracteres que no pertenecen al juego de caracteres ASCII, como por ejemplo las vocales acentuadas (áéíóú) o caracteres especiales como el símbolo de copyright © o las flechas izquierda y derecha (← →), se pueden producir problemas con su uso si no se utiliza el juego de caracteres apropiado.
En Declaring character encodings in CSS del W3C se indica que siempre se debe emplear UTF-8 como juego de caracteres para las páginas web HTML y para las hojas de estilo CSS. Si en el página web se indica el juego de caracteres, entonces no es necesario volver a indicarlo en la hoja de estilo. Sin embargo, se pueden dar situaciones en las que se combinen páginas web y hojas de estilo con distintos juegos de caracteres. En estos casos se debe indicar la codificación empleada en la hoja de estilo.
En la especificación CSS3 Syntax se indican los métodos que se pueden emplear para definir la codificación de una hoja de estilo, de mayor a menor importancia:
El valor Byte Order Mark (BOM) de Unicode situado al principio del fichero.
El valor indicado por la cabecera HTTP Content-Type o por un protocolo similar cuando se transmite el fichero.
El valor indicado por la regla @charset en el propio fichero.
El juego de caracteres empleado en el documento que enlaza el documento.
Si no se indica nada, se asume que es UTF-8.
Sin embargo, no todos los navegadores web cumplen estas reglas correctamente. Además, una hoja de estilo se puede utilizar en local, por lo que no existirá una cabecera HTTP que indique el juego de caracteres. O también se puede mover a otro servidor web que no haga uso de la cabecera HTTP para indicar el juego de caracteres. Por tanto, lo mejor es indicar siempre el juego de caracteres con la regla @charset.
La regla @charset
El uso de la regla @charset debe cumplir lo siguiente:
La regla @charset debe ser lo primero que se indique en una hoja de estilo, no puede existir ningún carácter previo, ni siquiera comentarios.
Si se definen varias reglas @charset, sólo la primera será utilizada.
No se debe emplear cuando la hoja de estilo esté integrada (embebida) en la propia página web con la etiqueta <style>. Sólo se debe emplear cuando la hoja de estilo está vinculada de forma externa.
Por ejemplo, al principio de una hoja de estilo en cascada se puede escribir:
@charset "UTF-8";
O también:
@charset "iso-8859-15";
En el ejemplo anterior se indica el juego de caracteres ISO-8859-15 (Latin-9), que es similar a ISO-8859-1 pero con la diferencia importante de que incluye el símbolo del euro (€).
Los siguientes dos ejemplos no son correctos:
/* Hay un espacio en blanco antes de la regla @charset */
@charset "UTF-8";
/* El valor del juego de caracteres se debe indicar entrecomillado */
@charset UTF-8;
El atributo charset en el elemento link
En las versiones anteriores de HTML se indicaba que se podía utilizar el atríbuto charset en la etiqueta <link> para indicar el juego de caracteres de la hoja de estilo enlazada. Sin embargo, el uso de este atributo en <link> está declarado como obsoleto en HTML5 y por tanto no se debe utilizar.
No hay comentarios:
Publicar un comentario