CSS
CSS (Del inglés Cascading Style Sheets) permite crear páginas web con un diseño agradable, pero ¿Cómo funciona por dentro? Este artículo explica lo que es CSS, cómo el navegador transforma HTML en un DOM, y cómo se aplica el CSS a las partes del DOM, algunos ejemplos muy básicos de sintaxis y el código necesario para incluir nuestro CSS en nuestra página web.
¿Qué es?
Como ya hemos mencionado, CSS es un lenguaje que se usa para diseñar la forma de presentar los documentos a los usuarios — su estilo, diseño, etc.
Un documento suele ser un archivo de texto estructurado usando un Lenguaje de marcado — HTML es el más común, pero hay otros como SVG o XML.
Presentar un documento a un usuario implica convertirlo en algo que este pueda utilizar. Navegadores (Browsers), como Firefox, Chrome o Internet Explorer, están diseñados para presentar documentos de forma visual, por ejemplo en una pantalla de ordenador, un proyector o una impresora.
¿Cómo afecta CSS a un HTML?
Los navegadores Web, al aplicar las reglas CSS a un documento, modifican la manera en que este es presentado. Una regla CSS se compone de:
Un conjunto de propiedades (properties), con valores establecidos para actualizar la presentación del contenido HTML, por ejemplo quiero que el ancho de un elemento sea el 50% de su elemento padre, y que su fondo sea rojo.
Un selector, que seleccionará los elementos afectados por el nuevo valor de la propiedad. Por ejemplo, quiero que mi regla CSS afecte a todos los párrafos (p) de mi documento HTML.
El conjunto de reglas CSS contenidas en el documento de estilos (stylesheet) afectará a la presentación de la página web. Profundizaremos en la sintaxis CSS en el siguiente artículo del módulo — Sintaxis CSS.
¿Cómo funciona CSS en realidad?
Cuando un navegador muestra un documento, debe combinar su contenido con su información de estilos. Procesa el documento en dos fases:
El navegador convierte HTML y CSS en un DOM (Objeto Documento Modelo). Este DOM representa el documento en la memoria del ordenador. Combinando el contenido del documento con su estilo.
El navegador muestra el contenido del DOM.
Cómo aplicar un CSS a nuestro HTML
Hay tres maneras distintas de aplicar CSS a un documento HTML, unas más prácticas que otras. Veamos cada una de ellas:Documento de estilos externo (CSS externo)
Ya hemos visto CSS externos en este artículo, pero no con este nombre. Un CSS externo es cuando el CSS se encuentra en un archivo separado con una extensión .css, y lo referenciamos desde HTML con un elemento <link>. El archivo HTML se parecerá a lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
Y el archivo CSS:h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
Este método es sin duda el mejor, pues podemos usar un único documento de estilos en multiples documentos y, si queremos cambiarlo, solo necesitaremos actualizar el CSS desde un sitio.
Documento de estilos interno (CSS interno)
En un CSS interno no tenemos un CSS externo, sino que lo ubicamos dentro de un elemento <style>, en el apartado HTML head.
Este método puede ser práctico en algunas ocasiones (puede que estemos trabajando con un gestor de contenido que no permite modificar el archivo CSS directamente), pero no es tan eficiente como el CSS externo — en una web, el CSS estará repetido en todas las páginas y si se necesita hacer cambios, estos deberán ser hechos en múltiples sitios diferentes.
Estilos en una línea
Los estilos en una línea son declaraciones CSS que afetan solo a un elemento que está contenido dentro de un atributo style
Por favor, no lo hagamos a menos que sea estrictamente necesario. Su mantenimiento es verdaderamente complicado (podríamos tener que actualizar la misma informaciónmuchas veces en cada documento), además de mezclar la información de estilo con la información estructural del HTML, haciendo el CSS difícil de leer y de entender. Manteniendo los distintos tipos de código separados y puros, facilitará la tarea a aquellos que vayan a trabajar posteriormente en el código.
Solamente está justificado el uso de estilos en la misma línea cuando los entornos de trabajo son muy restrictivos (el CMS solo permite editar el cuerpo del HTML).
BIBLIOGRAFIA:
https://developer.mozilla.org/es/docs/Learn/CSS/Introduction_to_CSS/Como_funciona_CSS
Comentarios
Publicar un comentario