Las hojas de estilo en cascada , denominadas CSS , son un lenguaje de hojas de estilo utilizado para diseñar y describir la presentación de la página web para que sea atractiva. El uso principal de CSS es simplificar el proceso de hacer que las páginas web estén presentables.
La forma en que los elementos deben mostrarse en la pantalla se describe en CSS. CSS aplica estilo a las páginas web. Más importante aún, CSS permite este estilo independientemente del HTML.
CSSse clasifica en términos generales en 3 tipos:
- CSS interno
- CSS en línea
- CSS externo
¿Por qué usar CSS?
- Desarrollo web: la habilidad básica que todo desarrollador web debe saber es HTML y CSS .
- Reutilización del código: los archivos CSS se pueden reutilizar en varias páginas HTML en las que queremos aplicar algún estilo.
- Sitio web atractivo: agregar estilos a nuestro sitio web seguramente lo hace más presentable para los usuarios.
- Fácil mantenimiento: los cambios en el código deben realizarse en un solo archivo.
- Mejore la experiencia del usuario: una interfaz de usuario simple pero hermosa ayuda a los usuarios a navegar por el sitio web fácilmente.
Sintaxis: un CSS comprende conjuntos de reglas de estilo que forman parte de un selector seguido de un bloque de declaración. Estas reglas de estilo son interpretadas por el navegador.
p {
background-color: aliceblue;
font-size: 18px;
}
- Selector: el selector informa sobre el elemento HTML que se va a diseñar. En este caso, el selector es el elemento “p ”.
- Declaración: cada declaración incluye un nombre y valor de propiedad CSS, separados por un punto y coma. En este caso, su “ color de fondo ” y “ tamaño de fuente” .
Ejemplo: En este ejemplo, todos los elementos «h1» estarán alineados al centro, tendrán un color verde y tendrán un tamaño de fuente de 30 px.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>
Welcome to GeeksforGeeks
</h1>
</body>
</html>
Producción:
¿Cómo funciona CSS bajo el capó?
¿Está confundido si el HTML se interpretará antes o después de la interpretación de CSS? O se aplicará tan pronto como el navegador construya el DOM . Analicemos cómo funciona realmente. Mientras muestra un documento, el navegador debe combinar el contenido del documento con la información de estilo. El documento se procesa en varias etapas.
Laboral:
- El navegador carga el HTML y se convierte en DOM (Document Object Model).
- Luego, se obtienen la mayoría de los recursos que están vinculados al documento HTML, como videos incrustados, imágenes y CSS vinculado.
- Luego, el navegador analiza el CSS obtenido. Según el tipo de selector utilizado, determina qué estilo se aplicará en qué Nodes del DOM y les adjunta estilos. Estos se llaman árboles de renderizado.
- Después de aplicar las reglas al árbol de representación, debería aparecer su estructura de diseño.
- En la etapa de pintura, se muestra una visualización de la página en la pantalla.
Ahora, si el CSS ya está analizado, los elementos en el CSS analizado se estilizan inmediatamente tan pronto como se colocan en la página. (Preferido cargar en <head>) Por otro lado, si el CSS se carga tarde, los elementos se muestran en su «forma sin estilo» hasta que sus estilos correspondientes se analizan, lo que se conoce como «Flash Of Unstyled Content».
El siguiente diagrama explica el funcionamiento de CSS de una manera más simplificada.
Limitaciones de CSS:
- Confusión entre navegadores web debido a diferentes niveles como CSS, CSS 1 hasta CSS3.
- Escasa existencia de seguridad por su sistema abierto basado en texto.
- Problemas entre navegadores, funcionan de manera diferente en diferentes navegadores.
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA