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 navegación</div>

<div> texto, imágenes, etc</div>

<div> otros contenidos de texto, imágenes, 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 aplica 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 han 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 código 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 después arial, la alineación a la izquierda y el fondo de color con código 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 vamos 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 referentes a los enlaces y solo se repercuten sobre los mismos.

text-decoration  puede ser

Vínculos 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 ratón 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;

……}

Con ello conseguimos que la posición 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 extremo 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 cargue la imagen

Por último vamos al  Contenido

Para el div del contenido vamos a aplicar 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 menú 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 #FFFFCC

padding : 0.5em;

width:200px;

}

#derecha { background-color: # 992244;

margin-left: 1em;

border: solid 1px #FFFFCC

padding : 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);
}

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>

Va a mostrar en cada lista, una pequeña imagen ( huella ) que se encuentra en la carpeta imagen

Estilos para IMÁGENES

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 imágenes. Es conveniente tener dos o tres estilos de imágenes.

 

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 deseamos.

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;

….. }

Vemos que al tomar las fuentes para mostrar en el navegador, algunas son mas vistosas que otras. Sin embargo, existe muchas, algunas de ellas muy atractivas. Google , en su sección de google font   tiene alguna de ellas muy interesantes

Como actividad vamos a poner una de ellas para el título. Para ello procedemos de la siguiente manera

1.  Ir a la página de Google font
2. Ver todas las fuentes y elegir una de ellas
3. Pinchar en Quick-use
4. Copiar el Código en la cabecera de la página, ejemplo de este  para la fuente Quintessential sería:
   <link href=’http://fonts.googleapis.com/css?family=Quintessential’ rel=’stylesheet’ type=’text/css’>
5. En la hoja de estilo, añade el tipo h1 que se usa para los títulos. Quedaría como h1 { font-family: ‘Quintessential’, Arial, serif; font-weight: 400; }
6. Visualizarlo con un navegador

Hojas de estilos para móviles

El uso de dispositivos con resoluciones variables es un factor a tener en cuenta en el diseño de una web y sobre todo, el diseño para dispositivos móviles.

Como primer paso, un bien criterio es relativizar todo, o sea, en vez de dar una tamaño a un div o una imagen, dejemos que el dispositivo la adapte a su resolución por medio del uso de anchuras porcentuales y metaetiquetas. Algunos consejos prácticos son

1. Poner en el head:
   <meta name="viewport" content="width=device-width"> ( ver variantes y ajustes en manuales de internet
2. Pasar los css de  div  de width:900px  a width: 100%, de esta forma ese bloque se ajusta a la anchura del dispositivo

3. Si tenemos una imagen que excede de 300 px, saldrá de la pantalla del móvil. Es importante usar css para las imágenes y el estilo del css contener un max-width: 600px, de forma que si la imagen es de 640 px en el móvil se ajusta a su resolución y en el ordenador se muestra hasta los 600 px. Para imágenes mas grandes se puede crear otro estilo css. La forma para ajustar la imagen a la izquierda sería: .image-izquierda{float:left; vertical-align:text-top; margin-right:5px; margin-bottom:5px; padding:2px; width:100%; max-width: 600px;}

Veremos ahora las Tablas