CURSO DE CSS, PARTE 10
Este es un curso de CSS diseñdo para los que empiezan a adentrase en el mundo del diseño web. Te dejo el link que te redireccionará a las otras 9 notas anteriores, para que las puedas leer. Te sugerimos que las leas antes de leer esta.
Dicho lo anterios, seguiremos con el curso de CSS. La segunda regla que determina qué reglas se aplican a cada elemento HTML es la regla de especificidad.
Las reglas CSS con selectores más específicos se impondrán a las reglas CSS con selectores menos específicos, independientemente de lo que ocurra primero. Como hemos comentado, los tres selectores más comunes son las etiquetas de los elementos, clases y las identificaciones.
El tipo específico de menos selector es el selector de nivel de elemento. Cuando una clase se utiliza como un selector que anulará reglas CSS escritas con el código de elemento como el selector. Cuando un ID se usa como un selector este invalidará las reglas CSS escritas con elemento o clase selectores.
Otro factor que influye en la especificidad es la ubicación en la que los estilos CSS se escriben. Estilos escritos en línea con el estilo tienden a invalidar a los estilos escritos en una hoja de estilo interna o externa.
Otra forma de aumentar la especificidad de un selector es utilizar una serie de elementos, clases e ID para identificar el elemento que se quiere abordar. Por ejemplo, si deseas identificar elementos de la lista sin ordenar en una lista con la clase "example-list" que figura con un div con el id "example-div" se podría utilizar el siguiente selector para crear un selector con un alto nivel de especificidad .
div # example- div> ul.example-list> li {estilos aquí}
Si bien esta es una manera de crear un selector muy específico, se recomienda limitar el uso de este tipo de selectores ya que toman más tiempo para procesar que los selectores simples. Una vez que entiendas cómo la herencia y la especificidad trabajan podrás ser capaz de identificar los elementos de una página web con un alto grado de precisión.
¿Qué puede hacer CSS?
Aunque sería muy interesante dedicarle mucho tiempo esta explicación, una mejor pregunta podría ser: "¿qué no puede hacer CSS?"
CSS se puede utilizar para convertir un documento HTML en un diseño profesional, pulido. Estas son algunas de las cosas que se pueden realizar en CSS:
Crear una cuadrícula flexible para el diseño de sitios web totalmente adaptables que se prestan muy bien en cualquier dispositivo.
Estilo de todo, desde la tipografía, de tablas, de formas, y mucho más.
Posicionar los elementos de una página web con relación a otra utilizando las propiedades tales como la flotación, la posición, el desbordamiento, flexión, y la caja de dimensionamiento.
Agregar imágenes de fondo a cualquier elemento.
Crear formas, interacciones y animaciones.
Estos conceptos y técnicas van más allá del alcance de este curso de css de introducción, pero los recursos que abordaremos en la siguiente nota te ayudarán a hacer frente a estos temas más avanzados.