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