Publicado el 3 de Enero del 2021
520 visualizaciones desde el 3 de Enero del 2021
311,2 KB
14 paginas
Creado hace 18a (07/10/2005)
MINISTERIO
DE EDUCACIÓN
Y CIENCIA
SECRETARÍA GENERAL
DE EDUCACIÓN
Y FORMACIÓN PROFESIONAL
DIRECCIÓN GENERAL
DE EDUCACIÓN,
FORMACIÓN PROFESIONAL
E INNOVACIÓN EDUCATIVA
CENTRO NACIONAL
DE INFORMACIÓN Y
COMUNICACIÓN EDUCATIVA
Edición HTML
Estilos CSS
Aplicar estilos
C/ TORRELAGUNA, 58
28027 - MADRID
Índice de contenido
¿Cómo aplicar una hoja de estilos? .................................................................................... 3
Hoja de estilo interna....................................................................................................... 3
Hoja de estilo externa...................................................................................................... 5
Combinar hojas de estilo externas en una nueva............................................................ 7
Estilos en línea o incrustados .......................................................................................... 8
¿Pueden enlazarse varias hojas de estilos con la misma página?................................ 10
Aplicar estilos a elementos o secciones de un documento............................................ 11
Diferentes medios... diferentes estilos........................................................................... 12
Estilos CSS – Diseño visual
2 de 14
¿CÓMO APLICAR UNA HOJA DE ESTILOS?
¿CÓMO APLICAR UNA HOJA DE ESTILOS?
Ya conocemos la sintaxis básica para construir reglas de estilo. Ahora vamos a ver las tres
formas en las que podemos situar estas reglas de estilo para que el navegador lea su
contenido y utilice sus especificaciones para darle forma al documento.
HOJA DE ESTILO INTERNA
HOJA DE ESTILO INTERNA
Cuando un estilo es propio de un único documento podría utilizarse una hoja de estilos interna,
mediante la creación de una sección <style> dentro de la cabecera del documento. Este es el
método que se ha utilizado para mostrar los ejemplos particularizados que puedes consultar en
las ventanas emergentes. Ten en cuenta que con este tipo de inclusión perdemos de vista una
de las finalidades prioritarias de las hojas de estilo, ya que se mezcla en el mismo documento
html las especificaciones referidas al formato con las marcas que sirven para estructurar el
contenido. Sin embargo puede ser un primer paso para que compruebes la potencia de las
hojas de estilo.
Nota: Normalmente los navegadores ignoran las etiquetas que desconocen, por lo que un
navegador antiguo que no soporte estilos ignorará el contenido de <style>, pero mostrará es
probable que muestre en pantalla el contenido de la sección. Para evitarlo podemos utilzar las
etiquetas de comentario de HTML tal como se muestra en el siguiente fragmento de código.
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
A continuación tienes un ejemplo de código para la inclusión de un estilo global en una página.
Puedes ver el resultado en la ilustración que se muestra después del código. (Ten en cuenta
que se podían haber utilizado otras etiquetas y otras propiedades de las mismas)
<html>
<head>
<title> Título de la página </title>
<style type="text/css">
<!--
body {background: black; font-size: 12px; font-family: Arial,Helvetica,sans-
serif; color: yellow; text-align:justify; margin-left: 0.5in; margin-right:
0.5in}
H1 {background: aqua; font-size: 16px; font-weight: bold; color: orange}
H2 {font-size: 14px; font-weight: bold; color: white}
-->
</style>
</head>
<body>
Contenido y etiquetas del cuerpo de la página
</body>
</html>
Como has visto en el ejemplo, la sintaxis se ha modificado al incluir el estilo en la cabecera:
Estilos CSS – Diseño visual
3 de 14
• Las características van encerradas entre las etiquetas <style type="text/css"> y
</style>
• Aunque no es obligatorio conviene iniciar la definición con una etiqueta de comentario:
<!-- y, antes de cerrar el estilo, poner la de cierre de comentario --> para evitar que
los navegadores antiguos puedan presentar la definición del estilo como si fuera un
texto normal.
• Las propiedades atribuidas a cada elemento van encerradas entre { } y se escriben
según el esquema propiedad, dos puntos, valor y punto y coma para separar de la
siguiente propiedad.
La inclusión del estilo se hará después de la etiqueta de cierre del título </title>
Crea una página con varios párrafos de texto. Puedes utilizar el mismo texto que
usamos en la actividad 48
• Edita el código de la página para que los párrafos que corresponden a los títulos de
cada apartado se identifiquen como títulos de nivel 2 (h2)
• Utiliza el editor CSS de N|VU para crear unas reglas de estilo básicas en las que
especifiques la fuente y el color del texto para todo el documento, el color de fondo
de la página y el color que se aplicará a los títulos de tipo h2. Tienes disponible un
vídeo explicativo del proceso.
• Guárdalo como actividad82.html y comprueba la apariencia en el navegador.
• Utiliza la pestaña de código fuente o la opción de menú INSERTAR
englobar un par de párrafos dentro de una etiqueta div
HTML para
• Crea con el editor CSS una clase que se en la que el color del texto sea azul.
• Aplica la clase tal como vimos en la sección primeros pasos al elemento div que
• Modifica el estilo del elemento <body> para que todo el texto de la página se
has creado
presente de color verde (green).
• Guarda y comprueba el resultado.
El editor de CSS de N|VU puede tener en ocasiones algún comportamiento
imprevisible y no guardar las reglas que hayamos ido creando. Se recomienda como
método de trabajo que, antes de empezar a crear estilos, guardemos el documento html.
Además es preferible que, si hemos hecho alguna modificación en el documento, lo
guardemos antes de empezar a trabajar con el editor CSS y que volvamos a guardarlo
tras cerrarlo.
Estilos CSS – Diseño visual
4 de 14
HOJA DE ESTILO EXTERNA
HOJA DE ESTILO EXTERNA
Aunque iniciamos la exposición de posibilidades con las hojas de estilo internas realmente lo
correcto habría sido iniciarla con las hojas de estilo externas, ya que ésta es la forma ideal de
aplicar un estilo a varias páginas de forma simultánea. De hecho debería ser la forma
prioritaria puesto que permite separar claramente el contenido y la estructura, que van el el
cuerpo del documento html, del formato que se aplicará desde un archivo externo de hoja de
estilos.
Para hacerlo habrá que utilizar en cada documento la etiqueta <link> situada en la cabecera
del documento, después de la etiqueta <title>
<head>
<title>página para mostrar la situación de los estilos<title>
<link
</head>
href="miestilo.css">
rel="stylesheet"
type="text/css"
Gracias a este enlace el navegador leerá las especificaciones de la hoja de estilos y dará
formato al contenido de acuerdo a ellas.
Así pues hay que seguir dos pasos:
1. Crear un archivo que recoja las reglas de estilo
2. Enlazar cada página a la que queramos aplicarle el estilo con el archivo creado para que
extraiga de él las características.
Para realizar esta tarea podemos aprovechar una función que nos brinda el editor de CSS
integrado en N|VU o bien construir directamente el archivo con un editor de texto plano.
Seguramente te habrás asustado un poco pensando en tener que escribir las reglas a mano, ya
que supone aprender los diferentes tipos de selectores y sus valores y un aumento en las
probabilidades de equivocarte. Tienes una parte de razón pero, en cuanto tengas una cierta
práctica verás como usar un editor externo te resulta muy útil: aunque inicies la creación con
el asistente gráfico y sea éste el que se encargue del trabajo más duro el repaso con el editor
externo te resultará muy cómodo.
1. Crear un archivo de texto con cualquier editor de texto plano, salvándola en formato
texto con la extensión que se desee, aunque habitualmente suele utilizarse la extensión
.css. En dicho archivo especificaremos el contenido de las diferentes normas de estilo
utilizando la sintaxis básica selector {propiedad:valor}
2. Enlazar cada página a la que queramos aplicarle el estilo con el archivo creado para que
extraiga de él las características.
Estilos CSS – Diseño visual
5 de 14
Para crear un archivo de definiciones que recogiera las características del ejemplo
anterior escribiríamos:
body
font-family:
black;
{background:
Arial,Helvetica,sans-serif; color: yellow; text-align:justify; margin-
left: 0.5in; margin-right: 0.5in}
h1 {background: aqua; font-size: 16px; font-weight: bold; color: orange}
h2 {font-size: 14px; font-weight: bold; color: white}
font-size:
12px;
Observa que el archivo no incluye ninguna etiqueta en el formato habitual. Se trata
simplemente de un archivo de texto con las propiedades atribuidas a cada
elemento.
Una vez definidas las propiedades guardaremos el archivo en formato texto con el
nombre que queramos y la extensión css. Por ejemplo, estilodeprueba.css
El paso 2 es incluir en la cabecera de la página, detrás de la etiqueta </title> la
etiqueta <link rel="stylesheet" href="estilodeprueba.css" type="text/css">
El siguiente ejemplo presenta la misma apariencia que vimos al aplicar el estilo en la
página, pero está creado utilizando este método.
• Abre el archivo actividad82.html y lanza el editor CSS.
• Selecciona la hoja de estilo interna que habías creado y pulsa el botón
parezca más adecuada (con extensión css)
guardándola con el nombre que te
•
Verás cambiar la indicación de la hoja de estilo
interna por una referencia a la hoja exportada, en la que el encabezamie
Crear cuenta
Comentarios de: Edición HTML - Estilos CSS - Aplicar estilos (0)
No hay comentarios