Tutoriales básicos de CSS

Conocimientos básicos necesarios

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

  • HTML
  • XHTML

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

Resumen de CSS
  • CSS es la abreviatura de hojas de estilo en capas (CEn capas SEstilo SHojas)
  • Definición de estiloCómo mostrar Los elementos HTML
  • Los estilos generalmente se almacenan enLas hojas de estiloEn
  • Agregar estilos a HTML 4.0 fue paraResolver el problema de la separación de contenido y presentación
  • Estilos en hojas de estilo externasPueden aumentar enormemente la eficiencia
  • Los estilos de hoja de estilo externos generalmente se almacenan en Archivos CSSEn
  • Múltiples definiciones de estilo puedenCapasPor un

Los estilos resuelven un problema común.

Las etiquetas HTML originalmente se diseñaron para definir el contenido del documento. Al usar etiquetas como <h1>, <p>, <table>, HTML se esperaba que se usara para expresar información como “este es un título”, “este es un párrafo”, “esta es una tabla”. Y se esperaba que el diseño del documento fuera completado por el navegador, sin usar etiquetas de formato.

Dado que los dos navegadores principales (Netscape y Internet Explorer) continuamente agregan nuevas etiquetas y atributos HTML (como etiquetas de fuente y propiedades de color) a la norma HTML, se está volviendo cada vez más difícil crear sitios web en los que el contenido del documento esté claramente separado 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ó STYLES (estilos) fuera 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.

La hoja de estilo define cómo se muestra un elemento HTML, como las etiquetas de fuente y las propiedades de color en los estilos HTML 3.2, que generalmente se almacenan en archivos .css externos. Editando solo un simple documento CSS, las hojas de estilo externas le permiten cambiar al mismo tiempo el aspecto de la disposición de todas las páginas del sitio.

Debido a que permite controlar simultáneamente 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, puede definir estilos para cada elemento HTML y aplicarlo a cualquier número deseado de páginas. Para realizar cambios globales, simplemente cambie el estilo y todos los elementos del sitio se actualizarán automáticamente.

Los estilos múltiples se superponen a

Las hojas de estilo permiten definir la información de estilo de múltiples formas. 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 de un solo documento HTML.

Orden de superposición

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

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

  1. Configuración predeterminada del navegador
  2. Estilos en hojas de estilo externas
  3. Estilos en hojas de estilo internas (ubicadas dentro de la etiqueta <head>)
  4. Estilos en línea (dentro de los elementos HTML)

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