¿Cuál es la diferencia entre una propiedad y un selector? ¿En qué se diferencia una declaración de un bloque de declaración y qué es una regla de CSS? ¿Cómo puedo saber la diferencia entre una pseudo clase y un pseudo elemento?
Esta serie servirá como una introducción básica a algunos términos que todo nuevo diseñador web debe asegurarse de agregar a su vocabulario. No será una lista de vocabulario exhaustiva, sino más bien una introducción a unos pocos términos que me resultaron difíciles de entender cuando era un principiante. Comenzamos con HTML a principios de esta semana y hoy pasaremos a algunos componentes estructurales de CSS.
CSS
Las hojas de estilo en cascada (CSS) proporcionan estilo y formato al contenido generalmente sin procesar que se entrega a través de HTML. Al igual que hicimos con HTML en nuestro artículo anterior, podemos dividir esta terminología para obtener algún significado.
Empecemos por el final. CSS es un lenguaje de hojas de estilo a diferencia de un lenguaje de marcado como HTML o un Lenguaje de escritura como JavaScript. Como mencionamos anteriormente, los lenguajes de hojas de estilo se usan principalmente para formatear documentos. CSS es la guinda del pastel HTML, lo que significa que la sustancia está realmente en el HTML, pero se vería terriblemente simple sin la ayuda de CSS.
La pieza más complicada de esta definición es la "cascada". parte. La forma en que funcionan las hojas de estilo es que un conjunto de reglas determinado en una ubicación puede en realidad "en cascada". hacia abajo y afecta a otras partes de un documento, ya sea que lo intentes o no.
La cascada en realidad tiene un conjunto completo de reglas que cumple para determinar cómo se aplican los estilos en todo el documento. Para leer más sobre esto, echa un vistazo al artículo reciente de Nicolas Gallagher, CSS: la cascada, la especificidad y la herencia. Esta es una discusión breve pero bien explicada sobre cómo la cascada se diferencia de otros conceptos como la especificidad y la herencia.
CSS3
CSS3 es la tercera iteración principal de CSS. En CSS2, había una especificación grande, pero con CSS3 todo se ha dividido en partes llamadas módulos. Algunos módulos de ejemplo incluyen los siguientes: Color de CSS, Consultas de medios, Animaciones de CSS, Diseño de caja flexible, etc. Consulte aquí para obtener una lista completa.
Cada módulo se trabaja como una unidad y tiene un estado que es en gran parte independiente de los otros módulos. Por ejemplo, el módulo de nivel de selectores 3 ha alcanzado? Recomendación? estado, lo que significa que está listo para implementarse, mientras que CSS Flexible Box Layout sigue siendo un "borrador de trabajo" Eso está siendo revisado.
Lo interesante de esta modularidad es que los desarrolladores simplemente no pueden esperar para jugar con todas estas cosas. Entonces, aunque un módulo dado puede tener muy poco soporte de navegador y es un borrador altamente experimental, es probable que aún se use en sitios activos en toda la web. Siempre tenga cuidado al usar cualquier característica nueva de CSS3 y asegúrese de verificar la compatibilidad del navegador.
La anatomía de CSS
Uno de los conceptos básicos que deberá comprender al trabajar con CSS es cómo se hace referencia a las partes individuales. Tomarse el tiempo para dominar este idioma le ayudará dramáticamente a comprender los tutoriales, libros y otras fuentes de las que está aprendiendo CSS. Entonces cuando lees o escuchas la palabra? Propiedad? Inmediatamente sabes lo que se está discutiendo.
Para empezar, aquí hay un gráfico básico de una línea de CSS. Como puede ver, hay tres piezas individuales aquí: un selector, una propiedad y un valor.
Selector
La primera pieza del rompecabezas de arriba se conoce como un selector. Esto es casi exactamente lo que suena: una forma de seleccionar o objetivo algo para el estilo. CSS utiliza patrones simples que se refieren a partes del DOM (que aprendimos en la primera parte) y luego aplica estilos a esa selección específica. El código anterior, por ejemplo, se dirige a todos los elementos de párrafo y establece su valor de color en negro.
Algunos selectores, como el de arriba, son increíblemente simples, mientras que otros son muy complejos. Más adelante analizaremos algunos de los términos más complicados que rodean a los selectores.
Propiedad
La propiedad es el aspecto de lo que está orientado que desea cambiar. Cada elemento HTML es un objeto complicado que puede asociarse con una serie de propiedades. Por ejemplo, el ejemplo anterior se dirige a cualquier elemento de párrafo, que contenga configuraciones predeterminadas para el tamaño de fuente, familia de fuente, color, altura de línea y mucho más, cada uno de los cuales puede ser anulado a través de CSS.
Algunas propiedades se relacionan con elecciones estéticas menores, pero otras pueden tener un efecto drástico en el diseño de su documento. Para complicar aún más las cosas, los distintos navegadores a menudo asignan diferentes valores predeterminados a varias propiedades. Los proyectos como Normalize.css le ahorran un montón de trabajo al tratar de explicar y eliminar estas diferencias.
Valor
Después de orientar algo para cambiarlo y elegir la parte del objeto que se va a cambiar, ¡es hora de cambiar algo realmente! La parte del valor le permite establecer la propiedad a algo nuevo. Por ejemplo, es posible que el valor predeterminado del navegador ya establezca sus párrafos en negro, pero cree que un gris oscuro es mejor, por lo que el valor que establezca para el color podría ser # 4b4b4b.
El término? Valor? es un poco confuso porque probablemente lo asocies inmediatamente con algo numérico. De hecho, muchos valores de CSS son de naturaleza numérica. Los valores se pueden expresar en píxeles (tamaño de fuente: 10 px), porcentajes (ancho: 33.33%), ems (altura de línea: 1em), etc., pero también se pueden expresar de otras maneras. Considere los siguientes ejemplos:
Como puede ver, esta es una gran parte de CSS con muchos valores, ¡pero no hay un solo número a la vista! Solo ten en cuenta que el término? Valor? Es bastante genérico aquí y puede referirse a una serie de diferentes tipos de entrada.
Declaración vs. Bloque de Declaración vs. Regla
Estos son términos que me hacen tropezar constantemente y, para ser sincero, no lo había explorado mucho hasta que escribí este artículo. Las declaraciones, los bloques de declaración y las reglas son tan similares que es fácil mezclar las etiquetas y usar la terminología incorrecta.
En última instancia, no es lo peor del mundo si lo dice mal, pero una vez más, si está leyendo o viendo un tutorial, es útil saber específicamente lo que el maestro está discutiendo. Aquí hay un gráfico rápido que, con suerte, aclara a qué se refiere cada término:
Como puede ver, tenemos un caso claro de jerarquía aquí. Empecemos pequeños y trabajemos hacia arriba. UNA declaración se compone de una propiedad y un valor (color: rojo). UNA bloque de declaración es una o más declaraciones contenidas entre corchetes y separadas por punto y coma: {color: rojo; ancho: 20px;}. Finalmente, tira un selector en esta mezcla y tendrás una regla.
Tipos de selectores
Ahora debería tener una buena idea de qué son los selectores, pero ¿sabía que hay muchos tipos diferentes de selectores? Aquí hay algunos que debes conocer.
Selectores de tipo
Estos son los tipos más básicos de selector. De acuerdo con el módulo de selectores nivel 3, un selector de tipo representa una instancia del tipo de elemento en el árbol de documentos. Los ejemplos de selectores de tipo incluyen aquellos que simplemente apuntan a un tipo específico de elemento HTML:
Selectores de clase vs. selectores de ID
Aparte de los selectores de tipo, dos de los tipos más comunes de selectores que verá en CSS son los selectores de clase y los selectores de ID. Como aprendimos la última vez, la principal diferencia entre las clases y las ID es el hecho de que las clases son reutilizables y las ID son únicas.
Puede orientar una clase dada desde su HTML con un selector de clase, que siempre está precedido por un punto. Del mismo modo, puede apuntar cualquier ID de su HTML con un selector de ID, que siempre está precedido por un símbolo de hash.
Selectores de atributos
Las clases y las ID son en realidad atributos HTML que son lo suficientemente comunes como para merecer selectores especiales, pero también hay muchos otros atributos. Por ejemplo, considere el siguiente fragmento de código:
Aquí tenemos un par de elementos de anclaje que contienen atributos href. Probablemente sepa que puede usar CSS para apuntar a todas las etiquetas de anclaje a la vez, pero ¿sabía que podría apuntar específicamente a un valor href específico?
Aquí usamos un selector de atributos para apuntar solo a href con el valor de 'https://designshack.net/' y cambiar su color a blanco. Esto ignora completamente el otro ancla en nuestro ejemplo. Los selectores de atributos dan lugar a algunos de los selectores de CSS más complicados que jamás verás.
Afortunadamente, tenemos un gran artículo que te enseña todo sobre los selectores de atributos y cómo interpretar selectores locos como el de arriba.
Descendientes, niños y selectores de hermanos
Hay algunos selectores que comienzan a sonar como si fueran de un árbol genealógico (que se relaciona con nuestra discusión DOM de la última vez). Por ejemplo, aquí está el combinador descendiente:
Esto apuntará a cualquier párrafo que sea descendiente de elementos de encabezado. Tenga en cuenta que los descendientes no son lo mismo que los niños. Al igual que con su familia, todos los hijos de un objeto son descendientes, pero no todos sus descendientes son sus hijos. El selector por encima de los objetivos. todos de los párrafos aquí:
Digamos que queríamos apuntar solo a los elementos secundarios del elemento de encabezado. Para hacer esto, usaríamos el combinador de niños. Esto solo apuntará a los dos primeros párrafos en el HTML anterior.
También hay combinadores de hermanos (generales y adyacentes). Encontrará estos y más en nuestro artículo, Selectores de CSS: Sólo los bits difíciles. Esto es lo que parecen:
El primer selector se dirige a cualquier párrafo que esté precedido inmediatamente por un elemento h1 (hermano adyacente), mientras que el segundo selector se dirige a cualquier párrafo que está precedido por un h1, independientemente de si fue el elemento anterior (hermano general).
Pseudo clases vs pseudo elementos
Otra área especial de los selectores es el tema de las pseudo clases y los pseudo elementos. Para aclarar esta discusión, aquí hay un gráfico que creé para The Lowdown: Antes y: Después en CSS.
Aquí podemos ver algunas pseudo clases que son familiares como flotar junto con algunos que un poco más raros, tales como primer hijo. Pero, ¿cómo son estos diferentes que los pseudo elementos tales como :antes de y :primera linea?
La respuesta es bastante simple. Solo recuerda que las pseudo clases apuntan Elementos completos o estados de elementos. mientras que los pseudo elementos apuntan sub partes de un elemento. Por ejemplo, el flotar la pseudo clase puede aplicarse a un anclaje completo, párrafo, div, etc. Por el contrario, :primera linea no se dirige a un párrafo completo, sino a una parte de él.
¿Con qué términos de CSS luchas?
Tenía la intención de que este artículo fuera un poco más completo, pero estaba tan envuelto en la estructura básica de CSS que tuve que detenerme allí. Probablemente seguiré adelante y escribiré una tercera parte de esta serie que cubre otra jerga CSS común que no se trató aquí.
Para ayudar a alimentar el próximo artículo, deje un comentario a continuación y díganos con qué conceptos y términos de CSS está luchando. ¿Qué frases escuchas que se usan indistintamente aunque no necesariamente signifiquen lo mismo?