Introducción a CSS

Conocimientos básicos necesarios

Antes de continuar, necesitas tener una comprensión básica de los siguientes conocimientos:

  • HTML
  • XHTML

Si deseas aprender estos proyectos primero, por favor Página principal Accede a los tutoriales relacionados.

Resumen de CSS

  • CSS es la abreviatura de hojas de estilo en capas (Cascading Style Sheets)
  • Definiciones de estiloCómo mostrar Elementos HTML
  • Los estilos se almacenan generalmente enLas hojas de estiloEn
  • Añadir estilos a HTML 4.0 fue paraResolver el problema de la separación de contenido y presentación
  • Hoja de estilo externaPueden aumentar enormemente la eficiencia
  • Las hojas de estilo externas se almacenan generalmente en Archivos CSSEn
  • Definiciones de estilo múltiples puedenCapasPara un

Los estilos resuelven un problema común.

Las etiquetas HTML se diseñaron originalmente para definir el contenido del documento. Al usar etiquetas como <h1>, <p>, <table>, la intención de HTML era expresar información como “este es un título”, “este es un párrafo”, “esta es una tabla”. Al mismo tiempo, la disposición del documento se realizaba por el navegador, sin usar etiquetas de formato.

Dado que los dos principales navegadores (Netscape y Internet Explorer) continuamente agregan nuevas etiquetas HTML y propiedades (como etiquetas de fuente y propiedades de color) a la especificación HTML, se volvió cada vez más difícil crear sitios web en los que el contenido del documento se mantuviera claramente independiente de su capa de presentación.

Para resolver este problema, la World Wide Web Consortium (W3C), esta asociación de estándares sin fines de lucro, asumió la misión de estandarizar HTML y creó estilos (Style) además de HTML 4.0.

Todos los navegadores principales admiten las hojas de estilo en capas.

Las hojas de estilo aumentan enormemente la eficiencia del trabajo.

Las hojas de estilo definen cómo se deben mostrar los elementos HTML, de la misma manera que las etiquetas de fuente y las propiedades de color en HTML 3.2. Los estilos se almacenan generalmente en archivos .css externos. Al editar solo un simple documento CSS, las hojas de estilo externas te permiten cambiar al mismo tiempo la disposición y apariencia de todos los sitios.

Debido a que permite controlar al mismo tiempo el estilo y la disposición de múltiples páginas, CSS puede considerarse un hito en el campo del diseño web. Como desarrollador de sitios web, puedes definir estilos para cada elemento HTML y aplicarlo a cualquier cantidad de páginas que desees. Si necesitas realizar actualizaciones globales, simplemente cambia el estilo y todos los elementos del sitio se actualizarán automáticamente.

Los estilos múltiples se superponen a uno

Las hojas de estilo permiten definir información de estilo de varias maneras. Los estilos pueden definirse en un solo elemento HTML, en el elemento de encabezado de una página HTML o en un archivo CSS externo. Incluso se pueden referenciar múltiples hojas de estilo externas dentro del mismo documento HTML.

Orden de superposición

¿Qué estilo se utilizará cuando el mismo elemento HTML esté definido por más de un estilo?

En general, todos los estilos se superponen en una nueva tabla de estilos virtual según las siguientes reglas, donde el número 4 tiene la prioridad más alta.

  1. Configuración predeterminada del navegador
  2. Hoja de estilo externa
  3. Hoja de estilo interna (ubicada dentro de la etiqueta <head>)
  4. Estilo en línea (dentro del elemento HTML)

Por lo tanto, los estilos en línea (dentro del elemento HTML) tienen la prioridad más alta, lo que significa que tienen prioridad sobre las declaraciones de estilo siguientes: las declaraciones de estilo en la etiqueta <head>, las hojas de estilo externas o las declaraciones de estilo en el navegador (valor predeterminado).