¡Tengo excelentes noticias para ti! CSS está muy estructurado, y aunque puede parecer abrumador al principio, solo hay unos pocos (tres) conceptos principales para entender y comenzar su camino hacia el dominio:
- Selectores
- Propiedades
- Especificidad (“La cascada”)
Una regla CSS típica consta de dos partes: un selector y un conjunto de propiedades que se aplican a los elementos HTML a los que se aplica el selector. Aquí hay un ejemplo simple:
pags {
color rojo;
}
Esta regla convertirá el texto dentro de todas las etiquetas p (párrafo) en su proyecto rojo. Dejará solo todo lo que no esté en una etiqueta de párrafo.
Propiedades de elementos seleccionados de estilo
En la regla de ejemplo anterior, la propiedad es color, y el valor es un nombre de color predefinido (“rojo”), pero también podría ser un código de color hexadesimal, un valor RGB o RGBA o un valor HSL o HSLA. Los valores hexadecimales son los más comunes, pero los otros también son útiles. Eso es practicamente todo. Esas son las posibles variaciones para la propiedad de color.
Piense en las propiedades como pares de índice / valor. Siempre hay un valor predeterminado para cada propiedad, y puede cambiar la apariencia de las cosas anulando el valor predeterminado.
Hay un número finito (y bastante pequeño) de propiedades, y se agrupan de manera lógica: hay un conjunto de propiedades universales que se pueden aplicar a casi cualquier cosa, y un conjunto de propiedades se aplica solo al texto, otro se aplica a imágenes, etc.
No tiene que memorizar todas las propiedades, y algunas de ellas nunca las usará. Pero tiene sentido conocer las propiedades más comunes y cómo se agrupan. Aquí hay una lista de propiedades por grupo: sé que W3schools recibe muchas críticas de los profesionales, pero esta es una referencia muy útil: Referencia CSS
Tómese unos minutos para leer esto y haga clic en algunas de las propiedades que le resultan familiares; No será una pérdida de tiempo. Simplemente desarrolle cierta familiaridad e intente comprender cómo se agrupa y estructura esto. No los necesitará todos por un buen tiempo, pero es bueno saber que existen.
Los selectores designan el objetivo de la Regla
Un selector puede ser:
- una o más etiquetas (como p, h1, ul, etc.)
- clases o identificadores (como “.content” o “#description)
- psevdo-classes (como: hover) y atributos (bastante avanzado)
Eso es todo en el nivel básico. Puede combinar esto para hacer selectores más específicos como, por ejemplo:
# perfil a // todos los enlaces () dentro del elemento con id “perfil”
#profile a: hover // Igual que el anterior, pero solo cuando se coloca un enlace
: hover es una “clase psevdo”, lo que significa que el elemento recibe la clase cuando se cumplen ciertos criterios, como un “mouseover” en este caso. También hay otras clases de psevdo, como primer hijo, enésimo hijo, etc. Guardar estos para más tarde. Ah, y también hay selectores de atributos, son geniales, pero guárdelos para más adelante.
Al igual que con las propiedades, hay una lista finita de selectores, pero se pueden combinar de maneras ingeniosas. Por ejemplo, puede usar comas como reemplazo del operador “o” (||):
#profile, li, .about, blockquote {…} // Aplicado a cualquier elemento que tenga el id “perfil” OR es un elemento de elemento de lista OR tiene la clase “about” OR es un elemento blockquote
Mientras que solo un espacio es más como un AND:
#profile li about blockquote {…} // aplicado SOLO a elementos Blockquote que son elementos INSIDE (hijos de) con la clase “about” que está DENTRO de un elemento de elemento de lista que es un elemento secundario de un elemento con el id “profile”
Entonces, el último ejemplo es increíblemente específico (y no es un buen selector en absoluto). Hay algunos “operadores” como este que utiliza para hacer exactamente los selectores que desea. Aquí están:
<+, ~
Y por supuesto [espacio], que mencioné antes. Averígualos y practica usarlos, ¡solo hay cinco!
Además, obtenga una descripción general de las pseudo-clases (también llamadas “pseudo-selectores”) como “: hover”, “: marcado”, “: primer hijo”, “: target”, etc. de ellos, pero tienen nombres descriptivos que tienen sentido, y no tiene que dominarlos todos, solo sepa que existen y que pueden ser útiles en casos específicos).
Eche un vistazo a esta referencia de w3schools: Referencia de selectores de CSS y también esta referencia / tutorial más adulto en MDN: Selectores
Piense en los selectores como condicionales (si las declaraciones): el navegador verificará todos y cada uno de los elementos de su página web con todas las Reglas que ha creado, y si el selector es “verdadero”, la regla se aplicará a ese elemento. CSS es rápido, por lo que todos los elementos se verifican continuamente.
Ahora, los selectores se pueden combinar y encadenar para hacer declaraciones increíblemente complejas y específicas. Puede escribir un selector muy específico y combinarlo con una declaración: not () y combinarlo con un: after y así sucesivamente a su cabeza le da vueltas. El truco es: no hacer esto. Mantenlo simple.
Como puede ver, los selectores pueden ser realmente complicados; el truco es comenzar a escribir selectores simples y generales, y luego anular esas reglas con selectores más específicos cuando sea necesario. Esto nos lleva al tercer concepto principal en CSS: especificidad
La especificidad es el arte de romper las reglas con gracia
CSS es la abreviatura de Cascading Style Sheets, y ese es el último de los conceptos realmente básicos y realmente importantes para entender.
La regla más específica se aplicará a cualquier elemento . Siempre. Si hay dos reglas de igual especificidad, se aplicarán las propiedades de la regla que se declaró por última vez; el primero será sobrescrito por el segundo.
Además: tenga en cuenta que las propiedades se sobrescriben individualmente. Por ejemplo:
.perfil {color: rojo; tamaño de fuente: 1.4rem; }
.profile a {font-size: 1.8rem;}
En este ejemplo, el dentro de .profile será más grande (tamaño de fuente 1.8rem) que el resto del texto dentro de los elementos con la clase .profile. Sin embargo, la última regla solo sobrescribe el color de la fuente, por lo que el color seguirá siendo rojo, aunque no se proporcione ninguna propiedad para el color en la última línea.
Concordando especificidad y orden de declaración, en este caso el orden de las reglas no importa, ya que .profile a es más específico que simplemente .profile . Esto puede parecer bastante simple, pero la especificidad es realmente bastante complicada, al menos en mi opinión, es mucho más exigente que obtener una visión general de los diversos selectores y propiedades.
El camino hacia el dominio radica en escribir reglas que sean exactamente tan específicas como deben ser, y sobreescribirlas con gracia y elegancia. Desea que sus hojas de estilo sean pequeñas y flexibles: no solo para que los tiempos de carga sean cortos, sino para que las reglas sean manejables de modo que pueda sobrescribir las reglas cuando lo necesite. Los estilos demasiado específicos conducen a una CSS demasiado complicada y no mantenible, por lo que debe simplificar las cosas .
Sin embargo, eso se dice fácilmente: nada más difícil que mantener las cosas simples. Solo obtienes esto de la práctica, así que obtén codin ‘.
Sin embargo, algunas palabras de despedida:
No todos los navegadores son iguales . Preste atención al soporte del navegador de los selectores y propiedades que usa: la mayoría de ellos son seguros, pero muchos no, algunos se deprecian y otros son cosas experimentales que todavía están cambiando o nunca serán aceptados en el estándar. Así que manténgase seguro y simple hasta que realmente sepa lo que está haciendo y cuando sea lo suficientemente bueno como para establecer reglas de respaldo para cosas de vanguardia que solo funcionan en ciertos navegadores. Aprende a “degradarte con gracia”.
¡ Primero sensible ! No seas el tipo que hace una página elegante que solo funciona en pantallas de retina de 28 pulgadas. La mitad del tráfico en la mayoría de los sitios está en dispositivos móviles (¡y el recurso compartido móvil está creciendo!), Así que aprenda a priorizar a sus usuarios móviles; siempre deben ser tu primera prioridad. Aprenda a utilizar las consultas de medios para crear reglas específicas para pantallas grandes y pequeñas, pero no exagere: intente hacer diseños que funcionen para pantallas pequeñas y grandes, y rompa sus propias reglas cuando sea necesario.
Google es tu amigo y RTFM . Aprende a leer manuales y resolver cosas. Stack Overflow es genial, pero no hagas preguntas, lee las respuestas a preguntas similares, no aprendes mucho de copiar y pegar (pero aprendes un poco, te lo concederé), intenta reescribir las respuestas a otras preguntas. que hacer preguntas innecesariamente específicas si puedes evitarlo. Existen muchas fuentes excelentes, en particular CSS-Tricks es increíble. Pero tal vez comience aquí, con el tutorial de CSS de Mozilla: Comenzando con CSS : complete eso y estará listo.
