8.4. Introducción a CSS: Selectores, propiedades y valores: combinación de selectores CSS
Las hojas de estilo en cascada (CSS) son un lenguaje de estilo que se utiliza para describir la apariencia de un documento escrito en HTML. Se utilizan para controlar el diseño de varias páginas web a la vez. En esta sección, analizaremos selectores, propiedades y valores en CSS y cómo combinarlos para crear estilos efectivos y atractivos para sus páginas web.
Selectores CSS
Los selectores CSS son el medio por el cual los diseñadores identifican qué elementos de la página HTML deben recibir estilos CSS. Se pueden dividir en cinco categorías: simple, combinador, pseudoclase, pseudoelemento y atributo.
Los selectores simples incluyen el selector de tipo (por ejemplo, h1, p), el selector de clase (por ejemplo, .intro, .footer) y el selector de ID (por ejemplo, #navbar, #logo). Seleccionan elementos según el nombre del elemento, la clase del elemento o el ID del elemento, respectivamente.
Los selectores de combinador incluyen el combinador descendiente (por ejemplo, div p), el combinador secundario (por ejemplo, ul > li) y el combinador adyacente (por ejemplo, h1 + p). Seleccionan elementos en función de sus relaciones específicas con otros elementos.
Los selectores de pseudoclase incluyen :hover, :focus, :active, :visited y :link. Seleccionan elementos según su estado específico.
Los selectores de pseudoelementos incluyen ::before, ::after, ::first-letter y ::first-line. Seleccionan una parte específica de un elemento.
Los selectores de atributos incluyen [attr], [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value] y [attr* =value ]. Seleccionan elementos basándose en un atributo o valor de atributo específico.
Propiedades y valores CSS
Las propiedades CSS son los aspectos de los elementos HTML a los que desea aplicar estilo. Por ejemplo, es posible que desee cambiar el color del texto, el tipo de fuente, el tamaño de fuente, el interlineado, el margen, el relleno, el borde, el fondo, etc.
Los valores CSS son los estilos específicos que aplica a las propiedades. Por ejemplo, es posible que desee que el texto sea rojo, la fuente Arial, el tamaño de fuente de 14 px, el interlineado de 1,5, el margen de 10 px, el relleno de 5 px y el borde sólido de 1 px. negro, el fondo plano es azul, etc.
Combinación de selectores CSS
Combinar selectores CSS es una forma poderosa de aplicar estilos a elementos específicos de su página web. Por ejemplo, es posible que desees aplicar un estilo a todos los párrafos dentro de un div específico. Para hacer esto, puede combinar el selector de tipo div con el selector de tipo p usando el combinador descendiente. El selector combinado sería div p.
Otro ejemplo sería aplicar un estilo a todos los elementos de la lista que son hijos directos de una lista desordenada específica. Para hacer esto, puede combinar el selector de tipo ul con el selector de tipo li usando el combinador secundario. El selector combinado sería ul > li.
Además, es posible que desees aplicar un estilo a un elemento específico cuando se encuentra en un estado específico. Por ejemplo, es posible que desees cambiar el color del texto de un enlace cuando pasas el mouse sobre él. Para hacer esto, puede combinar el selector de tipo a con el selector de pseudoclase :hover. El selector combinado sería:hover.
En conclusión, combinar selectores CSS le permite aplicar estilos a elementos específicos de su página web de forma precisa y eficiente. Si dominas esta habilidad, podrás crear páginas web visualmente atractivas y de alta calidad.
