Ejercicios MF0950_2: Construccin de pginas

web
UF1303: Elaboracin de hojas de estilo-

Prctica 1: Descubriendo CSS

Qu es css?
CSS es un lenguaje de hojas de estilos creado para
controlar el aspecto o presentacin de los documentos
electrnicos definidos con HTML y XHTML. CSS es la mejor
forma de separar los contenidos y su presentacin y es
imprescindible para crear pginas web complejas.

Formas de aplicar CSS

En lnea
<a href="#" style = "color: green; text-
decoration: none;">Inicio</a>

Interno
<style type="text/css">
elementoAfectadoPorElEstilo {
propiedad:valor;

}
</style>

Externo.
Por medio de un archivo externo con extensin CSS.

1.-Pensando como una caja css

El modelo de caja en CSS describe las cajas que se generan a partir de los elementos
HTML. El modelo de caja tambin contiene opciones detalladas en lo referente al
ajuste de mrgenes, bordes, relleno (padding) y contenido de cada elemento.

1.-Escribe el siguiente cdigo en un archivo HTML

El modelo de cajas
El modelo de cajas en CSS describe las cajas que se generan a partir de los elementos
HTML. El modelo de caja tambin contiene opciones detalladas en lo referente al ajuste de
mrgenes, bordes, relleno (padding) y contenido de cada elemento.

Puedes consultar el modelo en cientos de tutoriales web como este aunque nosotros lo
veremos ms adelante.

El modelo de cajas de CSS es un tema que, sin lugar a dudas, tenemos que dominar
perfectamente para poder disear nuestros sitios de la mejor manera. Si bien al principio
puede parecer complicado, con la prctica iremos acostumbrndonos y no nos
representar dificultad alguna.
 Cursiva
H1

Enlace

2.- Aplica el siguiente estilo

Al cuerpo (Dale el color a la fuente que consideres en format hexadecimal)

font-family: Helvetica, Arial, sans-serif;
padding: 22px;

A las etiquetas de encabezado y prrafos:

padding: 12px;
line-height: 2em;

A la fuente en cursiva, enlaces y enlaces con pesudoselector :hover y :visited el color

que consideres.

3.-Observa el posible resultado

2.- Soy una caja y me muestro como tal.

CSS permite modificar el aspecto de cada uno de los cuatro bordes de la caja de un
elemento. Para cada borde se puede establecer su anchura o grosor, su color y su
estilo. CSS define 20 propiedades relacionadas con los bordes.
Amplia los estilos:

Al cuerpo (Dale el color a la fuente que consideres en format hexadecimal)

border: 2px solid #e7642c;
padding: 20px;
A las etiquetas de encabezado y prrafos:
border: 2px solid #e7642c;
padding: 10px;
line-height: 2em;
A la fuente en cursiva, enlaces y enlaces con pesudoselector :hover y :visited el color
que consideres.
color: #665544;
border: 2px solid #7fcbae;
padding: 5px;

Observa el resultado:

3.- De acuerdo, pero qu es una hoja de estilo.

Una hoja de estilo es un archivo de extensin *.CSS (CSS, Cascading Style Sheets =
Hojas de estilo) donde definimos el formato (tipo de fuente, tamao, color de la
fuente, color de fondo, prrafos, etc.) de las distintas etiquetas que forman una
pgina.
Su principal ventaja es definir un mismo aspecto para todas las pginas de un sitio
web. Si creas una hoja de estilo y se vinculan todas las pginas del sitio web a este
archivo., cuando realices cualquier cambio en la hoja de estilo afectar al formato de
todas las pginas vinculadas al mismo.

En una nuevo html y css, crea el siguiente contenido

Encabezado h1
Prrafo.

Encabezado h2
Prrafo.

Ejecuta y comprueba que no tiene ningn formato aplicado.

Agrgale la hoja de estilos externa:

body {
font-family: Arial, Verdana, sans-serif;}
h1, h2 {
color: #ee3e80;}
p{
color: #665544;}
No olvides enlazar la hoja con tu archivo html:

<link href="estilo.css" type="text/css" rel="stylesheet" />

Observa el resultado, pero asegrate que comprendes todo el cdigo de la hoja de
estilos.

4.- Estilos internos, Cundo los utilizo?

Recuerda que puedes utilizarlos con fines didcticos y por facilidad, pero trabajar
con hojas de estilos (CSS) independientes tiene otras ventajas: las modificaciones en
los estilos e incluso el diseo de la pgina se pueden hacer modificando un nico
archivo, en lugar de recorrer todas las pginas de tu proyecto. Evita siempre los
estilos en lnea.

<!DOCTYPE html>
<html>
<head>
<title>Estilos internos CSS</title>
<style type="text/css">
body {
font-family: arial;
background-color: rgb(185,179,175);}
h1 {
color: rgb(255,255,255);}
</style>
</head>
<body>
<h1>Patatas</h1>
<p>La patata o papa es una especie de planta herbcea perteneciente al gnero Solanum
de la familia de las solanceas originaria de Sudamrica y cultivada por todo el mundo por
sus tubrculos comestibles. </p>
</body>
</html>

5.- Sabes lo que son selectores en cascada?

Cuando creamos una hoja de estilo, las especificaciones que se realicen para un
determinado elemento sern aplicables a todos aquellos elementos que se
encuentren "por debajo" de l atendiendo a un criterio de herencia. Por ejemplo, si
especificamos un tipo de letra para el elemento <body> todos aquellos elementos
que puedan heredar las caractersticas se presentarn con el mismo tipo de fuente.
As por ejemplo, un el elemento <p> heredar el tipo de letra salvo que
especifiquemos lo contrario.

Cuando diversos estilos se aplican a un mismo elemento y entran en

conflicto, CSS establece una serie de reglas para establecer cul prevalece, segn
tres factores: importancia, especificidad y orden.

Escribe el siguiente cdigo y observa cual se ejecuta. Salvo excepcin, debera

ejecutarse aquel que es ms especfico.

<!DOCTYPE html>
<html>
<head>
<title>CSS en cascada</title>
<style type="text/css">
*{
font-family: Arial, Verdana, sans-serif;}
h1 {
font-family: "Courier New", Courier, monospace;}
i{
color: green;}
i{
color: red;}
b{
color: pink;}
pb{
color: blue !important;}
pb{
color: violet;}
p#intro {
font-size: 100%;}
p{
font-size: 75%;}
</style>
</head>
<body>
<h1>Patatas</h1>
<p id="intro">La <i>patata o papa</i> es una especie de <b>planta
herbcea</b> perteneciente al gnero Solanum de la familia de las solanceas originaria
de Sudamrica y cultivada por todo el mundo por sus tubrculos comestibles.</p>
<p>Las patatas son muy apreciadas en gastronoma</p>

</body>
</html>
Cmo compruebo la herencia de estilos?
La herencia CSS permite evitar la repeticin de cdigo en todas las subclases que
derivan a partir de una clase superior. La herencia se aplica tanto a estilos de
etiquetas HTML (por ejemplo todas las etiquetas son subetiquetas de la etiqueta
padre body, de modo que un estilo aplicado a body ser heredable por el resto de
etiquetas HTML) como a selectores id o class.

Escribe el siguiente cdigo y observa que el texto hereda el color de body

<!DOCTYPE html>
<html>
<head>
<title>Inheritance</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
color: #665544;
padding: 10px;}
.page {
border: 1px solid #665544;
background-color: #efefef;
padding: inherit;}
</style>
</head>
<body>
<div class="page">
<h1>Patatas</h1>
<p>Hay diferentes tipos de patatas.</p>
<p>Las patatas son usadas en gastronoma.</p>
</div>
</body>
</html>