Elementos Semánticos en HTML
CSS Externo
El CSS Externo se refiere a una hoja de estilo que se almacena en un archivo separado con extensión .css. Este archivo se enlaza al documento HTML mediante una referencia en el <head> de la página. Usar un archivo CSS externo permite centralizar y reutilizar el código de estilos en múltiples páginas, facilitando la consistencia y el mantenimiento del diseño en un sitio web.
Ejemplos Visuales
Para enlazar una hoja de estilo externa, agrega el siguiente código en el <head> del HTML:
<link rel="stylesheet" href="styles.css">
...
CSS Interno
El CSS Interno se utiliza para definir estilos directamente dentro de un documento HTML. Se coloca dentro de una etiqueta <style> en la sección <head> de la página. Este método es útil cuando se quiere aplicar estilos específicos a un solo documento sin afectar a otros.
Ejemplos Visuales
Para agregar CSS Interno, utiliza el siguiente código en el <head> del HTML:
<head>
<style>
body {
background-color: #f0f0f0;
color: #333;
}
h1 {
font-size: 2rem;
}
</style>
</head>
CSS en Línea
El CSS en Línea se aplica directamente a un elemento HTML mediante el atributo style. Este método permite definir estilos específicos para un único elemento sin necesidad de una hoja de estilo o una sección de estilos en el encabezado. Sin embargo, su uso excesivo puede dificultar el mantenimiento del código.
Ejemplos Visuales
Para aplicar CSS en Línea, utiliza el siguiente código en un elemento HTML:
<p style="color: red; font-size: 20px;">Este texto es rojo y de 20px de tamaño.</p>
Hojas de Estilo Múltiples
Las Hojas de Estilo Múltiples permiten utilizar más de una hoja de estilo en un mismo documento HTML. Esto es útil cuando se desea aplicar diferentes estilos para distintas secciones o temas dentro de un sitio web. Al enlazar varias hojas de estilo, el orden en que se incluyen determina qué estilos se aplican, dado que los estilos posteriores pueden sobrescribir los anteriores.
Ejemplos Visuales
Para usar Hojas de Estilo Múltiples, puedes agregar el siguiente código en el <head> del HTML:
<link rel="stylesheet" href="estilo1.css">
<link rel="stylesheet" href="estilo2.css">
Orden de Cascading
El Orden de Cascading se refiere a cómo los navegadores determinan qué estilos aplicar a un elemento HTML cuando hay múltiples reglas CSS. Los estilos se aplican según un sistema de prioridades que sigue este orden:
- Estilo en línea: Estilos definidos directamente en el elemento HTML (por ejemplo, en el atributo style).
- Hojas de estilo internas y externas: Estilos definidos en la sección
<head>de un documento o en archivos CSS vinculados. - Navegador por defecto: Estilos que el navegador aplica automáticamente si no hay otras reglas especificadas.
Esto significa que un estilo en línea tiene la máxima prioridad y anulará cualquier estilo de las hojas de estilo internas, externas o del navegador por defecto.
Ejemplos Visuales
Un ejemplo de cómo funciona el Orden de Cascading es el siguiente:
<style>
p {
color: blue; /* Regla 1 */
}
.highlight {
color: red; /* Regla 2 */
}
#unique {
color: green !important; /* Regla 3 - más específica */
}
</style>
<p class="highlight" id="unique">Este texto será verde por el !important.</p>
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias