CURSO DE CSS, PARTE 7
Esta es la nota número 7 de este curso, puedes leer las 6 anteriores en los vínculos siguientes:
Curso de css, parte 6
Curso de CSS, parte 5
Ahora continuaremos hablando de las hojas de estilo internas.
Los ejemplos anteriores de este tutorial hacen uso de hojas de estilo internas. Una hoja de estilo interna es un bloque de CSS añadido a un elemento de cabeza de un documento HTML. El elemento de estilo se utiliza entre la apertura y cierre de etiquetas de la cabeza, y se añaden todas las declaraciones CSS entre las etiquetas de estilo.
Podemos duplicar los estilos en línea del código anterior en una hoja de estilo interna, con esta sintaxis.
<Head>
<Style>
h1 {
color rojo;
padding: 10px;
text-decoration: underline;
}
</ Style>
</ Head>
<Body>
<H1> Ejemplo título </ h1>
</ Body>
Ese código produciría los mismos resultados que los estilos en línea. Sin embargo, el beneficio para el uso de hojas de estilo internas en lugar de los estilos en línea es que todos los elementos h1 de la página se verán afectados por los estilos.
Las hojas de estilo externas
Los estilo externas son documentos que contienen las declaraciones de CSS. Las reglas definidas en el documento están vinculados a uno o más documentos HTML utilizando la etiqueta de enlace dentro del elemento head del documento HTML.
Para utilizar una hoja de estilo externa, crea primero el documento CSS.
/ *************************************************
Guardar con un nombre que termina en Css como styles.css
************************************************* /
h1 {
color rojo;
padding: 10px;
text-decoration: underline;
}
Ahora que tenemos una hoja de estilo externa con algunos estilos, podemos vincularlo a un documento HTML usando el elemento de enlace.
<Head>
<Link rel = "stylesheet" type = "text / css" href = "styles.css">
</ Head>
<Body>
<H1> Ejemplo título </ h1>
</ Body>
Cuando se carga este documento HTML la etiqueta de enlace hará que los estilos en el archivo styles.css cargarlo en la página web. Como resultado, todos los elementos de encabezado de nivel 1 aparecerá con el texto rojo, subrayados, y con 10 píxeles de desplazamiento aplicados a cada lado.
Estos son algunos métodos de añadir diseño web a nuestras páginas web. Seguiremos en posteriores notas mostrandote el uso de esta plataforma web. También te invitamos a que visites el Curso de Excel que hemos hecho. Puedes visitarlos en el siguiente enlace.
Curso Excel
|
