2º Parte Hojas de estilo
Las hojas de estilo o CSS nos van a permitir generar un estilo propio a todas nuestra web con los beneficios que vamos a ir viendo
En una web sencilla se suele tener la estructura
- Logotipo al inicio
- Barra de navegación ( lateral o superior )
- Bloque que contiene el resto de bloques
- Diversos bloques de contenido
EL CONTENEDOR DIV
Con la etiqueta <div> conseguimos esto de la forma
<div><div> logo del título </div><div>barra de navegacion</div><div> texto, imagenes, etc</div><div> otros contenidos de texto, imagenes, etc</div></div>
div representa un contenedor y por tanto vamos a poder crear ciertos estilos que se van a aplicar SOLO a determinados div ( contenedores )
Para diferenciar un bloque de otro se emplean los selectores que pueden ser de clase (class ) o un identificador (id).
La diferencia entre uno y otro es las veces que se pueden emplear. El Id es mas apropiado cuando solo es necesario aplicar un estilo una sola vez. El class se usa cuando el estilo se apluica varias veces en el div. Por tanto tenemos que los div se van a transformar en <div class =”titulo”> o bien <div id =”titulo”>
Hemos empleado el estilo titulo porque solo aparece una vez en la página y por tanto puede emplearse en cualquiera de los dos casos
En cada div solo puede emplearse una class o un id, esto es no es posible coass como :
<div> class=”tipo1″ class=”tipo2″ </div>
Otro aspecto importante es que los div se deben cerrar en el orden que se hann abierto
Hagamos una pequeña práctica.
Abrir el editor de texto y copiar este codigo
<div id="democratas"> <ul> <li>John F. Kennedy</li> <li>Bill Clinton</li> </ul> </div> <div id="republicanos"> <ul> <li>Dwight D. Eisenhower</li> <li>Ronald Reagan</li> <li>George W. Bush</li> </ul> </div>
En nuestra hoja de estilo vamos a poner unos identificadores para ambos casos#democratas {background:blue;} #republicanos { background:red; } Barra de navegación
Toda página debe contener un menú de navegación, como tienen los libros de texto ( ïndice )
Crearemos un id propio de ello en nuestra hora de estilo. Dentro del archivo html, el codigo es algo parecido a esto
<div id="nav"> <a href ="index.html"> Home </a> <a href ="fotos.html"> Imágenes </a> <a href ="mamiferos.html"> Mamíferos </a> <a href ="insectos.html"> Insectos </a> </div>En la hoja de estilo tenemos#nav{font-size : 12pt;
font-family : verdana,arial;
text-align : left;
background-color : #666666;border-style:solid;border-with:1px }
En este caso decimos que la fuente sea de 12, el tipo verdana y despues arial, la alineacción a la izquierda y el fondo de color con codigo 666666. Los border van a ser de tipo solido y con anchura de 1 px.
Realizar este apartado en vuestro trabajo a ver como nos queda.
Un poco mas…
Ahora avmos a añadir algunos atributos a nuestra barra de navegación.
#nav a {padding: 0.2em;color:red;font-weight:bolder;text-decoration:none;}
¿ Porque ponemos #nav a y no solo a ?. La razón es que al poner lo primero vamos a crear estilo propio a la barra de navegación references a los enlaces y solo se reprercuten sobre los mismos.
text-decoration puede ser
( si estilo )
( una linea inferior )
(una linea superior )
( una linea en el medio )
( parpadea )
padding queda libre un área alrededor del contenido y puede ser top, right, bottom, and left.
Vinculos visitados y activos ( al pasar el cursor )
Completamos nuestro id con
#nav a hover{color:#CCCCCC;}#nav a:visited {color:#000000;}
En este caso no es necesario especificar otros atributos como text-decoration puesto que al ser a:hover una clase dentro de a: se hereda automáticamente los valores de a
Por último si queremos que al pasar el raton por un enlace, éste cambie de color de fondo, hay que añadir background-color:#FF2233; dentro de a:hover.
Cuerpo Principal
Vamos al cuerpo de la web, o sea el primer nivel de estilo y de este parten el resto.
#todo {font-size : 12pt;
font-family : verdana,arial;
text-decoration : none;
text-align : left;padding: 1em
background-color : #003366; }
El texto que se encuentre en este div va a tomar los atributos generales, a no ser que anidemos otro div dentro de éste con otros atributos, en cuyo caso, tomará los del 2º.
Podemos ajustar el ancho del bloque a un determinado %. Prueba a añadir width: 70 % dentro de #todo
Y ahora vamos a centrar el bloque dentro de la pagina. Lo podemos hacer de varias formas. La que vamos a utilizar es usando el atributo position de la forma
#todo {position:relative;left: 15 %top:7 em;……}
Co ello conseguimos que la posicion de nuestro bloque sea relative ( relativa ) a los datos que aparecen en ala parte inferior que son left 15 %, el margen del bloque a la izquierda es 15 % del total del body, y que la distancia al estremo superior ( top ) sea de 7 em.
Con ello centramos el bloque a la pantalla, ya que 15 % mas 70 % mas 15 % = 100 %
Si utilizamos position:absolute en vez de realizarse respecto del elemento padre, en este caso, body, lo hace directamente con el extremo de la pantalla ( extremo superior izquierdo ).
Título
Para destacar el título del resto de la página, aparte de usar fuentes diversas, podemos aplicarle un fondo concreto. Crearemos el id siguiente
#titulo {
background-image : url ( “images/imagen_fondo.jpg”);
}
Para que aparezca la imagen de fondo tenemos que ponerla en la carpeta images de nuestro proyecto
Completamos con otros valores como
text-align: center; – > Para centrar el texto en el centro
line-height: 4em; -> Para dar altura al renglón de la línea
background-color: #CC4488 -> Color que aparece en el fondo en caso de que no carge la imagen
POR ÚLTIMO VAMOS AL CONTENIDO
Para el div del contenido vamos a plaicar lo siguiente
a) Modificar la sangria de cada párrafo
b) Justificar el texto
c ) reducir el interlineado
Por tanto tenemos
#contenido {text-indent: 1.5em;text-align:justify;line-height:12m;}
Para terminar esta primera parte, vamos a colocar los bloques uno junto al otro.
El problema los vamos a tener con los navegadores que pueden que no lo interpreten de la misma manera
Veremos un ejemplo que no suele dar problemas
1º Creamos un div #izquierda con 200 pixel de ancho para el menu de navegación y un #derecha con 500.
2º El 2º div va a tener un espaciado suficiente para que “entre” el 1º div de la forma margin-left:230px;
Los div quedan de la forma
#izquierda { background-color: # FF8844;margin-left: 1em;border: solid 1px #FFFFCCpadding : 0.5em;width:200px;}#derecha { background-color: # 992244;margin-left: 1em;border: solid 1px #FFFFCCpadding : 1.5em;width:500px;margin-left:230px; }
LISTA DE ESTILOS
Si creamos un estilo que incorpore atributos sobre lista, podemos añadir una línea de la forma
.animal {
list-style-image: url(images/huella.jpg);
}
list-style-image: url(images/huella.jpg);
}
En este caso, al tener en el archivo html el código
<ul>
<li class=”animal”> esta es mi primera mascota.</li>
<li class=”animal”> Y esta la 2º</li>
</ul>
<li class=”animal”> esta es mi primera mascota.</li>
<li class=”animal”> Y esta la 2º</li>
</ul>
Va a mostrar en cada lista, una pequeña imagen ( huella ) que se encuentra en la carpeta imagen
ESTILOS PARA IMAGENES
Es posible aplicar un estilo propio a nuestras imágenes de forma que muestre un pequeño marco, tenga otras propiedades en los enlaces , etc
Veremos un ejemplo sencillo realizado con el Kompozer
El estilo es
border: 0.8ex ridge #33ccff;
background-color: #ff9966;
margin-top: auto;
margin-right: auto;
padding-top: 0%;
position: relative;
float: left;
Probar este estilo en vuestra hoja de estilo y aplicarlo a alguna de las imagesnes. es conveniente tener dos o tres estilos de imagenes.
span
Con esta etiqueta conseguimos dar un estilo propio a una parte concreta de la web y ed forma muy localizada. Por ejemplo , si estamos en un estilo concreto y queremos que ciertas palabras estén en itálica , sin afectar a toda la lista, tenemos que incluir <i> …<span class =”italica”> texto en italica </span> y dentro de estilo debemos tener
.italica {font-style:italic; }
Capitular
Muchas veces nos encontramos en los libros comienzo del tipo
En un lugar de la mancha. Podemos conseguirlo con la etiqueta no_ident con los atributos que deseaemos.
la forma general sería
En el archivo html
<p clas = “no_ident”> <span class = “versal”> E </span>n un lugar
El estilo versal sería
.versal { font-size:2.4 em;
font-family: Georgia
font-weight: bold;
….. }
