A63396Practica 7 - DPW 2013

GUIA PRÁCTICA Nº 7
MODULO: DESARROLLO DE PAGINAS WEB (DPW)

INTRODUCCION A HOJAS DE ESTILO (CSS)
Resultados de Aprendizaje:
 Insertar reglas CSS en las páginas Web.

 Crear archivos de hojas de estilo (.css)
 Utilizar archivos CSS para integrarlos en páginas web.
Una hoja de estilo es un conjunto de especificaciones que declara cómo deben mostrarse los
componentes de una página web, es decir, cómo debe interpretar el navegador, a efectos de
presentación visual, los distintos elementos presentes en una página web. El formato de cada
elemento de una página web se especifica mediante declaraciones de estilo denominadas reglas.
Una regla CSS se compone de tres partes:

1. Selector
2. Propiedad
3. Valor
Una regla simple organiza los tres Una regla puede contener más de una
componentes anteriores de acuerdo a la propiedad con sus respectivos valores,
siguiente estructura: separadas entre ellas por punto y coma.
Selector {propiedad: valor;} Ejemplo:
h1 { font-weight: normal; color: red;}
Por ejemplo, la regla siguiente evita que un
elemento marcado con h1 aparezca en Una regla puede dar formato a más de un
negrita: elemento a la vez, separando estos mediante
h1 { font-weight: normal; } comas.
Ejemplo:
h1, h2, h3 { font-weight: normal; color: red; }
Las reglas de las hojas de estilo se pueden declarar en tres sitios distintos:
1. En un elemento
2. En la página web
3. En un archivo externo
1- Reglas CSS declaradas en un elemento.
Los estilos se pueden aplicar a nivel de un elemento individual. En el siguiente ejemplo, se aplica
un estilo específico a un elemento acronym. En condiciones normales, un texto marcado con
acronym aparecería en letra normal (redonda). En el siguiente ejemplo, se ha definido un estilo a
nivel de una ocurrencia este elemento para que la palabra marcada con acronym en este caso
aparezca en cursiva. Ejemplo:
<p><acronym style="font-style: italic">W3C</acronym> son las siglas del World
Wide Web Consortium</p>
Como se puede ver hay un cambio significativo en la sintaxis.

2- Reglas CSS declaradas en la página web.
Se declara en la sección head, dentro del elemento style.

Por ejemplo: <html>
<head>
<title>CSS en la pagina</title>
<style type="text/css">
h1, h2, h3 { font-weight: normal; color: blue; }
</style>
</head>
<body>
<h1>Encabezado 1</h1>
</body>
</html>
3- Reglas CSS declaradas en un archivo externo.
Las declaraciones se escriben en un archivo de texto con extensión .css sin ningún tipo de
preámbulo.
En la sección head de la página se debe indicar el enlace con el archivo que contiene las
declaraciones de la hoja de estilo mediante el elemento link y los atributos rel, href y type:
<head>
<title>CSS en un archivo externo</title>
<link rel="stylesheet" href="estilo.css" type="text/css" />
</head>
Como se puede ver, el atributo rel (relation) advierte que se trata de una hoja de estilo, href
aporta el nombre (y la ruta si fuera necesario) del archivo y type indica que se trata de un archivo
de texto que contiene una hoja de estilo que sigue la norma CSS.
Ejemplo: Para la realización de este ejemplo deben crearse dos archivos (uno con extensión .css y
otro con extensión .html), de la siguiente manera:
Archivo CSS: estilo.css Archivo HTML: ejemplo3.html
<html>
/* Todos los elementos de la pagina, <head>
también conocido como selector
universal */
<title>CSS en un archivo externo</title>
* { font: 1em/1.3 Arial, Helvetica, <link rel="stylesheet" href="estilo.css" type="text/css" />
sans-serif; } </head>
<body>
/* Todos los párrafos de la pagina */ <p>TEXTO INFORMATIVO <a href="#">ENLACES DE LA
p { color: #555; } PAGINA</a>. En el lenguaje escrito, el texto
informativo es aquel en el cual el emisor
/* Todos los enlaces la pagina */ (escritor) da a conocer hechos o
a { color: #CC3300; } circunstancias reales al receptor (lector).
</p>
/* Elementos "span" de la pagina */ <p>TEXTO <span><a href="#"> TEXTO </a>,
span { font-weight: bold; } TEXTO,</span> TEXTO TEXTO <a href="#">MI
VINCULO</a>, MI PARRAFO.</p>
</body>
</html>
Existen dos grandes categorías de selectores:
 Elementos: son los nombres correspondientes a elementos del lenguaje HTML como body,
h1, p, table, etc. LOS TRES EJEMPLOS ANTERIORES DE ESTA GUIA PERTENECEN A ESTA
CATEGORIA.
 Nombres propios: son nombres que puede crear el autor de la hoja de estilo. De esta clase
de selectores, existen, a su vez dos tipo: de clase (class) y de identidad (id). Por tanto, en
realidad tenemos en total tres tipos.
Selectores de Clase.
Estos selectores se declaran mediante una palabra propia que asigna el autor de la hoja de estilo.
Esta palabra va precedida por un punto. Por ejemplo: supongamos que se necesita una clase de
selectores para formatear títulos de películas (pongamos que se trata de una web sobre cinema).
El autor de la hoja de estilo puede crear el selector con el nombre tituloFilm para formatear los
títulos de los films.
Se aplica mediante el atributo class seguido por el nombre del selector (sin el punto). Por ejemplo,
en el siguiente código fuente solo a uno de los dos elementos de párrafo (p) se le ha añadido esta
clase de selector.
La declaración solamente afectará a uno de ellos y el resultado es que el primer párrafo tendrá un
aspecto muy distinto de los demás.
Archivo HTML: ejemplo4.html

<html>
<head>
<title>Selector de Clase</title>
.tituloFilm { font-size: 1.5em; font-family: Times New Roman; color: blue; }
</style>
</head>
<body>
<p class=”tituloFilm”>2001: Una odisea del espacio</p>

<p>La obra de Kubrick marcó un punto de inflexión en el género de la ciencia-ficción</p>
</body>
</html>
Selectores de Identidad.
Estos se nombran mediante una palabra propia precedida por el símbolo # (almohadilla). Los
selectores de identidad solo se pueden aplicar a un elemento en cada página. Dicho al revés, en
cada página solamente puede haber un elemento #identidad (en cambio, podemos tener
múltiples elementos de clase en una misma página).
Por ejemplo, supongamos que queremos dar un estilo propio a la zona de navegación de cada
página. Deseamos destacar la barra de navegación mediante un fondo gris y queremos que la
fuente del texto en esa zona sea un poco más pequeña.
<html>
<head>
<title>Selector de Identidad</title>
#navegacion { background-color: LightGrey; font-size: 0.8em }
</style>
</head>
<body>
<div id="navegacion">
<ul>
<li><a href="item1.html">Item 1</a></li>
</ul>
</div>
</body>
</html>
Observa que en el ejemplo5 se utilizo el selector de identidad dentro de la etiqueta div, esto se
debe a que El lenguaje HTML dispone de dos elementos (los elementos div y span) con gran
potencialidad cuando se utilizan junto con las hojas de estilo, y cuya característica principal, a
diferencia de elementos como body, p, h1, etc., es que no poseen ningún significado intrínseco.
Tanto div como span pueden utilizarse para mejorar la apariencia de una página, pero además
contribuyen a añadir valor semántico a la misma. Estos serán utilizados en la siguiente guía
práctica.
Ahora veremos una forma especial de utilizar los selectores.
Selector descendente.
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es

descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro
elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se
encuentren dentro de un elemento <p>:
p span { color: red; }
Si el código HTML de la página es el siguiente:
<p>
<span>texto1</span>
<a href="#"><span>texto2</span></a>
</p>
El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector
descendente, un elemento no tiene que ser "hijo directo" de otro. La única condición es que un
elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre.
Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les
aplica la regla CSS anterior.
<html>
<head>
<title>Selector Descendente</title>
/* Todos los prrafos contenidos en #primero */
#primero p { color: #336699; }
/* Los elementos "em" contenidos en #primero */

#primero em { background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */

em.especial { background: #FFCC99; border: 1px solid #FF9900; padding:
.1em; }
/* Elementos "span" contenidos en .normal */

.normal span { font-weight: bold; }
</style>
</head>
<body>
<div id="primero">
<p>TEXTO INFORMATIVO <a href="#">ENLACES DE LA PAGINA</a>. En el lenguaje
escrito, el texto informativo es aquel en el cual el emisor (escritor)
da a conocer hechos o circunstancias reales al receptor (lector). Los
textos informativos son narraciones que informan acerca de hechos
actuales en forma objetiva. La diferencia con el texto expositivo es que
este muestra una apreciación sentimental respecto al tema que es
inexistente en el caso del texto informativo. <em>OTRO TEXTO<em>, MÁS
TEXTO.</p>
</div>
<div class="normal">
<p>TEXTO TEXTO <span><a href="#"> TEXTO TEXTO </a>, TEXTO TEXTO,</span>
TEXTO TEXTO TEXTO <a href="#">MI VINCULO</a>, MI PARRAFO.</p>
<p>EL LENGUAJE <em class="especial">INFORMATIVO</em> el texto informativo

es aquel en el cual el emisor (escritor) da a conocer hechos o
circunstancias reales al receptor (lector). Los textos informativos son
narraciones que informan acerca de hechos actuales en forma objetiva. La
diferencia con el texto expositivo es que este muestra una apreciación
sentimental.</p>
<p>HACER EL TEXTO MEJOR CON CSS, <em class="especial">CSS ES LO MEJOR EN

FORMATO</em>, MI CLASE CSS, <a href="#">TEXTO TEXTO TEXTO</a>. MIS
TEXTOS.</p>
</div>
</body>
</html>
EJERCICIOS PROPUESTOS:
1. Crear una página HTML y definir tres mensajes entre las marcas h1, h2 y h3. Definir el
mismo color para el texto de cada bloque y colores diferentes para el fondo de los
mismos.
2. Mostrar dos títulos con texto de color rojo sobre fondo amarillo.
3. Definir reglas para las marcas HTML: h1, h2, h3, h4, h5 y h6. Inicializar la propiedad
font-size con valores decrecientes para cada una de las marcas (40, 30, 25, 20, 15 y 10
píxeles). Inicializar la propiedad font-family para las tres primeras marcas con los valores:
Arial, Arial Black y Arial Narrow.
4. Definir la misma fuente, color y tamaño de fuente para las marcas p (párrafo) y h6 (tener
en cuenta que cuando vea la página el texto que se encuentra en la marca h6 difiere del
texto que se encuentra dentro del párrafo por la propiedad font-weight (ya que la marca
h6 es de tipo bold y la marca p tiene por defecto normal).
5. Definir para la marca <h6> el mismo tamaño de fuente (12px) que la marca <p> (párrafo)
pero color azul para el título y gris claro (color:#aaaaaa) para el párrafo. Agrupar las dos
marcas para la definición de la fuente y posteriormente agregar a cada marca el valor
respectivo para el color del texto.

A63396Practica 7 - DPW 2013

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

A63396Practica 7 - DPW 2013

Cargado por

Copyright:

Formatos disponibles

GUIA PRÁCTICA Nº 7

MODULO: DESARROLLO DE PAGINAS WEB (DPW)

 Insertar reglas CSS en las páginas Web.

Una regla CSS se compone de tres partes:

1- Reglas CSS declaradas en un elemento.

Como se puede ver hay un cambio significativo en la sintaxis.

Se declara en la sección head, dentro del elemento style.

3- Reglas CSS declaradas en un archivo externo.

Archivo HTML: ejemplo4.html

<p class=”tituloFilm”>2001: Una odisea del espacio</p>

Ahora veremos una forma especial de utilizar los selectores.

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es

/* Los elementos "em" contenidos en #primero */

/* Todos los elementos "em" de clase "especial" en toda la pagina */

/* Elementos "span" contenidos en .normal */

<p>EL LENGUAJE <em class="especial">INFORMATIVO</em> el texto informativo

<p>HACER EL TEXTO MEJOR CON CSS, <em class="especial">CSS ES LO MEJOR EN

También podría gustarte