- Soporte de CSS en los navegadores
El trabajo del diseñador web siempre está limitado por las posibilidades de los navegadores que utilizan los usuarios para acceder a sus páginas. Por este motivo es imprescindible conocer el soporte de CSS en cada uno de los navegadores más utilizados del mercado.
La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores más utilizados por los usuarios:
- Funcionamiento básico de CSS
Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML especiales para modificar el aspecto de los elementos de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS
- Cómo incluir CSS en un documento XHTML
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta
<style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).
- Selectores Básicos
Selector universal
Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):
El selector universal se indica mediante un asterisco (
*).
Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres
< y >) correspondiente a los elementos que se quieren seleccionar.
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>:Selector de clase
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (
*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último, el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.
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 aplicarSelectores 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.
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:Combinación de selectores básicos
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS.
- Selectores Avanzados
Selector de hijos
Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (
>):Selector adyacente
El selector adyacente se emplea para seleccionar elementos que en el código HTML de la página se encuentran justo a continuación de otros elementos. Su sintaxis emplea el signo
+ para separar los dos elementos:Selector de atributos
El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamadonombre_atributo, independientemente de su valor.[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributocon un valor igual avalor.[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributoy al menos uno de los valores del atributo esvalor.[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributoy cuyo valor es una serie de palabras separadas con guiones, pero que comienza convalor. Este tipo de selector sólo es útil para los atributos de tipolangque indican el idioma del contenido del elemento.- ejemplo
file:///C:/Users/Administrador/Videos/Untitled-1.html
