Introducción a CSS

CSS representa hojas de estilo en cascada (Cascading Style Sheets). CSS es un lenguaje de hoja de estilo estándar utilizado para describir la presentación del documento web (es decir, el diseño y el formato).

Antes de CSS, casi todas las propiedades de presentación del documento HTML se incluían en las etiquetas HTML (especialmente dentro de las etiquetas HTML). Todos los colores de fuente, estilos de fondo, alineación de elementos, bordes y tamaños deben describirse claramente en HTML.

La consecuencia de esto es que, debido a que la información de estilo se agrega repetidamente a cada página del sitio web, el desarrollo de grandes sitios web se convierte en un proceso largo y costoso, y también aumenta el costo de mantenimiento.

Para resolver este problema, la World Wide Web Consortium (W3Año1996Año se introdujo CSS, esta alianza también mantuvo su estándar. CSS tiene como objetivo separar la representación y el contenido. Ahora, los diseñadores web pueden mover la información de formato de la página web a hojas de estilo separadas, lo que simplifica enormemente las etiquetas HTML y mejora la mantenibilidad.

CSS3Es la versión más reciente de la norma CSS. CSS3Se han agregado nuevas funciones de estilo y mejoras para mejorar las funciones de presentación web.

Qué puede hacer CSS

CSS también puede hacer más cosas.

• Puede aplicar reglas de estilo iguales a múltiples elementos de manera sencilla.

• Puede usar una hoja de estilo para controlar la visualización de múltiples páginas del sitio web.

• Puede mostrar la misma página de manera diferente en diferentes dispositivos.

• Puede establecer el estilo del estado dinámico de los elementos (como el estado de suspendido, el estado de enfoque, etc.) que de otro modo no se podría lograr.

• Puede cambiar la posición de los elementos en la página web sin cambiar las etiquetas.

• Puede cambiar la visualización de los elementos HTML existentes.

• Puede usar2O3Transformaciones de escalado, rotación, inclinación y otros elementos en el espacio D.

• Puede crear efectos de animación y transición sin usar ningún JavaScript.

• Puede crear una versión de impresión amigable de la página web.

Hay muchos beneficios de los puntos fuertes de CSS, puede usar CSS para realizar muchas otras operaciones interesantes. En los siguientes capítulos, aprenderá en detalle todos estos aspectos.

Ventajas de usar CSS

La mayor ventaja de CSS es que puede separar el estilo y el diseño del contenido del documento. Aquí hay más ventajas, ¿por qué elegir usar CSS?

• CSS ahorra mucho tiempo -CSS ofrece muchas flexibilidades para establecer las propiedades de estilo de los elementos. Puede escribir CSS una vez. Luego, el mismo código se puede aplicar a varios grupos de elementos HTML, y también se puede repetir en varias páginas HTML.

• Fácil de mantener — CSS proporciona un método simple para actualizar el formato del documento y mantener la consistencia entre varios documentos. Porque se puede controlar todo el contenido del sitio web con una o más hojas de estilo.

• Carga de página más rápida -CSS permite que múltiples páginas compartan información de formato, reduciendo la complejidad y repetición del contenido estructural del documento. Esto reduce significativamente el tamaño de la transferencia de archivos, acelerando la carga de la página.

• Estilos avanzados de HTML -CSS tiene una funcionalidad de representación más amplia que HTML y puede controlar mejor el diseño de la página web. Por lo tanto, en comparación con los elementos y atributos de representación HTML, puede hacer que la página web se vea mejor.

• Compatibilidad con múltiples dispositivos -CSS también permite optimizar las páginas web para varios tipos de dispositivos o medios. Con CSS, se puede presentar el mismo documento HTML en diferentes estilos de visualización para diferentes dispositivos de presentación (por ejemplo, computadoras de escritorio, teléfonos, etc.).

Contenido cubierto por este tutorial

Este serie de tutoriales de CSS cubre todos los fundamentos de CSS, incluyendo el concepto de selectores, métodos para establecer colores y fondos, formas de establecer el formato de fuentes y texto, estilos de UI elementos como enlaces, listas, tablas, etc., y el modelo de cuadro de CSS, etc.

Después de familiarizarse con los fundamentos, pasará al siguiente nivel, que introduce cómo establecer el tamaño y alineación de los elementos, métodos para放置 elementos en la página web utilizando sprites de imágenes, y conceptos de relativo y asociativo. Unidades absolutas, modelo de formato visual, visibilidad y ocultación, capas, pseudoclases y elementos, estilos relacionados con los medios, etc.

Finalmente, explorará CSS3funciones avanzadas introducidas, como gradientes de color, efectos de sombra,2D y3Transformaciones D, alpha de transparencia, métodos para crear transiciones y efectos de animación, diseño de bloques, efectos de filtro, consultas de conceptos de medios, etc.