Las hojas de estilo en cascada (CSS) le permiten transformar el aspecto de sus páginas web. Desde fuentes y colores hasta espaciado y diseño general, todo tipo de herramientas de diseño están al alcance de su mano. Aunque CSS es un lenguaje complicado en su totalidad, solo hay dos conceptos básicos que debe comprender para comenzar.
Todo comienza con la identificación exacta de qué parte de una página desea diseñar.
CSS = Selectores + Declaraciones
Un archivo CSS contiene una serie de reglas que describen cómo se debe formatear un archivo HTML. Cada regla consta de dos partes: qué estilo y cómo diseñarlo. La primera parte se controla mediante una serie de términos conocidos como "selectores".
Los ejemplos de este artículo incluyen declaraciones de estilo, pero no son el foco: los selectores sí lo son.
Históricamente, había tres niveles (o versiones) de selector de CSS con diferentes grados de compatibilidad con el navegador. En 2020, según Can I Use , estos estarán disponibles para más del 99 por ciento de los usuarios de todo el mundo.
Selectores de nivel 1
El nivel 1 introdujo los cuatro tipos fundamentales de selectores que cubren una gran cantidad de casos, incluso hoy.
| Patrón | Partidos |
|---|---|
E | todos los elementos E |
.c | todos los elementos con class = "c" |
#myid | el elemento con id = "myid" |
EF | un elemento F dentro de un elemento E |
| Pseudoclases | |
E:link | un hipervínculo a una página que no ha sido visitada previamente |
E:visited | un hipervínculo a una página que ya ha sido visitada |
E:active | un hipervínculo que está seleccionado actualmente |
| Pseudo-elementos | |
E::first-line | la primera línea formateada de un elemento E |
E::first-letter | la primera letra formateada de un elemento E |
Selector de tipo
El selector más simple es el "selector de tipo". Se dirige a todas las instancias de un elemento, como un párrafo o texto en negrita:
p { margin-bottom: 0; }
b { font-family: sans-serif; }Selector de clases
El atributo de clase permite agregar más semántica a un elemento HTML, como un tipo específico de párrafo. Estos elementos se pueden seleccionar en CSS de la siguiente manera:
.intro { font-weight: bold; }Este selector coincidiría con:
<p class="intro">…</p>Pero tenga en cuenta que también coincidiría con:
<ul class="intro">…</ul>Si solo desea que se aplique a los párrafos de introducción, puede combinar el selector de tipo y el selector de clase:
p.intro { font-weight: bold; }Selector de ID
El atributo de ID de HTML debe ser único dentro de un documento, por ejemplo, si tiene:
<div id="contents">…</div>Ese debería ser el único elemento con una identificación de "contenido". Un selector de ID le permite apuntar a ese elemento específico en un documento:
#contents { color: #333; }Selector de descendientes
Estrictamente, un "combinador", porque este selector tiene que ver con el espacio entre otros dos. HTML es jerárquico, como se explica en nuestra descripción general del DOM . Un selector descendiente permite identificar un elemento por su contexto dentro de otro elemento:
table b { font-weight: normal; }Pseudo clases y elementos
Los pseudo selectores apuntan a clases o elementos que no existen explícitamente pero que están disponibles de todos modos. Piense en ellos como bonificaciones de contenido especial:
p::first-line { text-transform: uppercase; }Listas de selección
Use una coma para combinar selectores en una lista si desea aplicar el mismo conjunto de reglas a cada uno. En lugar de:
th { padding: 1em; }
td { padding: 1em; }Puedes escribir:
th, td { padding: 1em; }Especificidad
Una hoja de estilo es una serie de reglas que usan un selector para hacer coincidir un elemento, pero ¿qué sucede cuando más de una regla coincide con un elemento dado? El comportamiento resultante se rige por la "especificidad" que define qué regla se utiliza en un caso como:
p.intro { color: black; }
p { color: gray; }En tales casos, la regla que tiene prioridad se define por su especificidad, de la siguiente manera:
- Los selectores de ID ("# contenido") son los más específicos.
- Los selectores de clases (`.author`) son menos específicos.
- Los selectores de tipo (`p`) son los menos específicos.
Al calcular la especificidad, cada nivel solo se considera si dos selectores tienen la misma puntuación en el nivel superior, por lo que "#contents" es más específico que "article.news p.author.special" porque el primero "gana" en los selectores de ID.
Selectores de nivel 2
La siguiente revisión de los selectores CSS introdujo selectores de atributos, amplió las pseudoclases y pseudoelementos, y agregó dos nuevos combinadores.
| Patrón | Partidos |
|---|---|
* | cualquier elemento |
E > F | un elemento F hijo de un elemento E |
E + F | un elemento F inmediatamente precedido por un elemento E |
| Selectores de atributos | |
E[foo] | un elemento E con un atributo "foo" |
E[foo="bar"] | un elemento E cuyo atributo "foo" es exactamente "bar" |
E[foo~="bar"] | un elemento E cuyo atributo "foo" es una lista de valores separados por espacios en blanco, uno de los cuales es "bar" |
E[foo|="en"] | un elemento E cuyo atributo "foo" tiene una lista de valores separados por guiones que comienzan con "en" |
| Pseudoclases | |
E:first-child | un elemento E, primer hijo de su padre |
E:lang(fr) | un elemento de tipo E en el lenguaje "fr" |
| Pseudo-elementos | |
E::before | contenido generado antes que el contenido de un elemento E |
E::after | contenido generado después del contenido de un elemento E |
Selector universal
El "*" coincide con cualquier elemento. No suele ser tan útil, pero si desea restablecer los márgenes predeterminados, por ejemplo, puede hacerlo:
* { margin: 0; }Selectores de atributos
Los selectores de atributos permiten que los estilos se orienten de manera muy específica, filtrados por el atributo de un elemento:
a[title] { text-decoration: underline dotted; }Child Combinator: un elemento inmediatamente dentro de otro
Similar al combinador de descendientes, pero este solo coincide con los hijos inmediatos, no con los descendientes más abajo del árbol. Por ejemplo, "ul> li" coincidirá solo con el texto de la "Sección 1" aquí, y no con la "Sección 1.1":
<ul>
<li>
Section 1
<ul>
<li>Section 1.1</li>
<li>Section 1.2</li>
</ul>
<li>
</ul>
Combinador de hermanos adyacentes: el próximo hermano
h1 + p { font-weight: bold; }A menudo útil para controlar márgenes, o un párrafo introductorio sin una clase específica, este selector coincide con un elemento solo si sigue inmediatamente a otro. En el ejemplo, solo se hará coincidir el primer párrafo aquí, no el segundo:
<h1>Contents</h1>
some extra text
<p>Introductory paragraph</p>
<p>Following paragraph</p>
Tenga en cuenta que este selector solo considera elementos, no texto, al decidir cuál es el próximo hermano.
Herencia
Algunas propiedades de CSS heredan su valor de un elemento ancestro. En la práctica, esto significa, por ejemplo, que establecer el tipo de letra del elemento "cuerpo" significa que cada párrafo, tabla, etc. también utiliza el mismo tipo de letra.
Por supuesto, esto es exactamente lo que esperaría, pero considere una propiedad que no hereda: "margen", por ejemplo. No querrá que cada párrafo individual o fragmento de texto en negrita tenga el mismo margen que todo el documento.
Una buena regla general es apuntar a elementos de la forma más generalizada que tenga sentido; no apunte a cada elemento individual cuando un simple selector de "cuerpo" es suficiente.
Selectores de nivel 3
Se agregaron muchas más pseudoclases en este nivel, junto con algunos selectores de atributos y un nuevo combinador.
| Patrón | Partidos |
|---|---|
E ~ F | un elemento F precedido por un elemento E |
| Selectores de atributos | |
E[foo^="bar"] | un elemento E cuyo atributo "foo" comienza con la cadena "bar" |
E[foo$="bar"] | un elemento E cuyo atributo "foo" termina con la cadena "bar" |
E[foo*="bar"] | un elemento E cuyo atributo "foo" contiene la subcadena "bar" |
| Pseudoclases | |
E:root | un elemento E, raíz del documento |
E:nth-child(n) | un elemento E, el n-ésimo hijo de su padre |
E:nth-last-child(n) | un elemento E, el n-ésimo hijo de su padre, contando desde el último |
E:nth-of-type(n) | un elemento E, el n-ésimo hermano de su tipo |
E:nth-last-of-type(n) | un elemento E, el n-ésimo hermano de su tipo, contando desde el último |
E:last-child | un elemento E, último hijo de su padre |
E:first-of-type | un elemento E, primer hermano de su tipo |
E:last-of-type | un elemento E, último hermano de su tipo |
E:only-child | un elemento E, hijo único de su padre |
E:only-of-type | un elemento E, único hermano de su tipo |
E:empty | un elemento E que no tiene hijos (incluidos los nodos de texto) |
E:target | un elemento E es el destino del URI de referencia |
E:enabled | un elemento de interfaz de usuario E que está habilitado |
E:disabled | un elemento de interfaz de usuario E que está deshabilitado |
E:checked | un elemento de interfaz de usuario E que está marcado |
E:not(s) | un elemento E que no coincide con el selector simple s |
Selectores de atributos
Puede seleccionar elementos con un atributo que comience con un valor dado: a[href^="https:"] , termine con un valor dado: img[src$=".gif"] , o contenga un valor: a[*="value"] .
Pseudo clases
Las pseudoclases adicionales incluyen ": último hijo", ": vacío" (para que coincida con un elemento sin contenido) y ": comprobado" que coincide con un elemento como una entrada de casilla de verificación, pero solo cuando está marcado.
Combinador general de hermanos: un hermano siguiente
Similar al Combinador de hermanos adyacentes del Nivel 2, esto coincide con cualquier hermano que venga después de otro, no solo con el siguiente:
h1 ~ p { font-size: 110%; }Selectores CSS y cómo usarlos
Ahora ya sabe todo lo que hay que saber sobre cómo seleccionar parte de una página web usando CSS. Ahora está listo para diseñar sus páginas con la gran variedad de propiedades CSS que cubren todo, desde colores hasta diseño.
Crédito de la imagen: Pankaj Patel / Unsplash
