Hoja de estilo Css
¿Cómo funciona realmente CSS? Cuando un navegador muestra un documento, debe combinar el contenido del documento con su información de estilo. Para ello, procesa el documento en una serie de etapas, que enumeramos a continuación. Ten en cuenta que esta es una versión muy simplificada de lo que ocurre cuando un navegador carga una página web, y que diferentes navegadores manejarán el proceso de diferentes maneras. Pero esto es más o menos lo que sucede.
Sobre el DOMA El DOM tiene una estructura de árbol. Cada elemento, atributo y trozo de texto del lenguaje de marcado se convierte en un nodo del DOM en la estructura de árbol. Los nodos se definen por su relación con otros nodos del DOM. Algunos elementos son padres de nodos hijos, y los nodos hijos tienen hermanos.
Entender el DOM te ayuda a diseñar, depurar y mantener tu CSS porque el DOM es donde tu CSS y el contenido del documento se encuentran. Cuando empieces a trabajar con el navegador DevTools, navegarás por el DOM mientras seleccionas elementos para ver qué reglas se aplican.Una representación real del DOMEn lugar de una explicación larga y aburrida, veamos un ejemplo para ver cómo un fragmento real de HTML se convierte en un DOM.
Css in html einbinden
</html>Explicación de la salidaLa siguiente imagen muestra la estructura en forma de árbol del código HTML anterior. La etiqueta <html> es el elemento raíz y luego tenemos dos elementos hijos <head> y <body>. Dentro de la etiqueta <head> tenemos una etiqueta <title> y dentro de la etiqueta <body> tenemos sus 4 elementos hijos como se muestra en la imagen. Estructura de árbol HTMLCaracterísticas de HTML¿Qué es CSS? Es un lenguaje de hoja de estilo utilizado para dar estilo al lenguaje de marcado como HTML. Si consideramos el HTML como la estructura del esqueleto del cuerpo, entonces el CSS es la piel/el aspecto general que lo cubre. CSS permite manejar varias páginas web con un solo archivo CSS. CSS le facilita la modificación de varias propiedades de los elementos HTML, como puede modificar el color/imagen de fondo, la alineación de las etiquetas utilizando las propiedades de margen y posición, puede proporcionar diferentes propiedades de la fuente (familia de la fuente, tamaño de la fuente, color, etc.), o también puede eliminar las propiedades existentes de las etiquetas HTML (como puede convertir los elementos de bloque en línea). CSS también facilita la función de animación, que permite que los elementos HTML cambien gradualmente de un estilo a otro. Veamos un ejemplo básico de CSS. Style.css* {
Tutorial de Css
CSS está diseñado para permitir la separación de la presentación y el contenido, incluyendo el diseño, los colores y las fuentes[3]. Esta separación puede mejorar la accesibilidad del contenido; proporcionar más flexibilidad y control en la especificación de las características de la presentación; permitir que varias páginas web compartan el formato especificando el CSS relevante en un archivo .css separado, lo que reduce la complejidad y la repetición en el contenido estructural; y permitir que el archivo .css se almacene en caché para mejorar la velocidad de carga de la página entre las páginas que comparten el archivo y su formato.
La separación del formato y el contenido también hace posible presentar la misma página de marcado en diferentes estilos para diferentes métodos de representación, como en pantalla, en impresión, por voz (a través de un navegador basado en el habla o un lector de pantalla) y en dispositivos táctiles basados en Braille. CSS también tiene reglas para alternar el formato si se accede al contenido en un dispositivo móvil[4].
Las especificaciones CSS son mantenidas por el Consorcio de la World Wide Web (W3C). El tipo de medio de Internet (tipo MIME) text/css está registrado para su uso con CSS mediante el RFC 2318 (marzo de 1998). El W3C dispone de un servicio gratuito de validación de documentos CSS[5].
W3schools css
Nota: Los estilos incrustados tienen la mayor prioridad, y las hojas de estilo externas la menor. Esto significa que si se especifican estilos para un elemento tanto en hojas de estilo incrustadas como externas, las reglas de estilo en conflicto en la hoja de estilo incrustada prevalecerán sobre la hoja de estilo externa.
El atributo style incluye una serie de pares de propiedades y valores CSS. Cada par «propiedad: valor» está separado por un punto y coma (;), tal y como se escribiría en una hoja de estilo incrustada o externa. Pero tiene que estar todo en una línea, es decir, sin salto de línea después del punto y coma, como se muestra aquí:
El uso de los estilos en línea se considera generalmente como una mala práctica. Como las reglas de estilo se incrustan directamente dentro de la etiqueta HTML, hace que la presentación se mezcle con el contenido del documento; lo que hace que el código sea difícil de mantener y anula el propósito de usar CSS.
Nota: Es imposible aplicar estilos a los pseudo-elementos y a las pseudo-clases con estilos en línea. Por lo tanto, debes evitar el uso de atributos de estilo en tu código. El uso de hojas de estilo externas es la forma preferida de añadir estilos a los documentos HTML.