Etilos

1

Estilos

TEMAS

Estilos de etiqueta. Estilos de encabezado. Estilos importados.

OBJETIVOS ESPECÍFICOS

Definir un estilo. Aplicar estilos a una página Web. Crear una hoja de estilos Importar estilos.

ACTIVIDADES

En los documentos HTML creados anteriormente, aplicar estilos de encabezado que afecten a toda la página.

Crear una hoja de estilos con el nombre importar.css y en ella utilice diferentes etiquetas con determinados formatos que afecten a sus documentos y luego impórtelo a sus documentos HTML realizados anteriormente.

1. Estilos de etiquetas.

Al definir el formato a nivel de tags (etiqueta) se afectará a un tag por documento. Para esto existen dos posibilidades:

1.1 Definir clases.

Para realizar esto es necesario definir clases dentro de parámetros definidos en <STYLE>.

Los parámetros anteriores definen tres funcionamientos para títulos con tags <h2>. Esto otorga la flexibilidad de emplear títulos con diferentes colores. Para utilizar la funcionalidad los tags son llamados con los parámetros class.

<head><title>Documento de CSS</title><style></style></head>

2

1.2 Definir en línea.

Esta se especifica dentro del tag garantizando que solo la etiqueta sea afectada. De la siguiente manera:

Ejemplo 1:

<form> <input type="Text" style="width:100px; height:20px; background-color:red; color:yellow; font-size:10pt; font-family:Verdana; text-align:center;"></form>

Ejemplo 2:

<form> <input type="text" style="width:70px; height:30px; font-size:12pt; font-family:Helvetica; font-weight:bold; color: #004080; border-width:thin; border-style:solid; border-color: #004080; background-image:url(cielo.jpg);"></form>

<body><h2 class="azul" > Título en Azul </h2><h2 class="verde"> Título centrado verde </h2><h2 class="amarilla">Título en itálica </h2><h2> Sin ningún efecto</h2></body></html>

<h1 style="color: red; font-style: Italic"> Título definido <br> con parámetros de línea <h1>

31.3 Atributos CSS utilizados.

width, que fija la anchura de la caja.

height, que fija la altura de la caja.

background, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal.

color, que define el color de la fuente, y cuyo valor puede venir dado en su nombre web en inglés o como formato hexadecimal.

font-family, que fija el tipo de la fuente.

text-align, que define la alineación del texto en la caja.

padding-right (left / top/ bottom), que fija el margen entre el extremo derecho (izquierdo / superior /inferior) de la caja y el texto que contiene.

border-width (thin / medium / thick / none), que define el ancho del borde.

border-style (none / solid / double / groove / ridge / inset / outset), que fija el estilo del borde.

border-color, que define el color del borde.

background-image, que establece una imagen de fondo para la caja de texto.

Ejemplo 3 (estilo a las barras de desplazamiento de las Textarea) :

<textarea cols="10" rows="5" style="scrollbar-face-color:#DFFFBF; scrollbar-shadow-color:green;"></textarea>

Ejemplo 4 :

<form><font face="Helvetica" size="3"><textarea name="comentario" cols="20" rows="5" style="width:200px; height:100px; font-size:12px; font-family:Helvetica; background-color:green; color:yellow;"></textarea></font> </form>

4Ejemplo 5:

<form><font face="Courier" size="1"> <select style="width:170px; height:50px; color:red; background-color:yellow; font-size:12px; font-family:courier;"> <option value="uno">uno</option> <option value="dos">dos</option> <option value="tres">tres</option></font></form>

Ejemplo 6:

<form> <input type="radio" name="opcion" value="uno" style="width:200px; height:50px; background-color:yellow;"> <input type="radio" name="opcion" value="dos" style="width:200px; height:50px; background-color:blue; border-width:thick; border-style:solid; border-color:red;"></form>

Ejemplo 7:

<html><head><title>Documento de CSS</title><style><!-- input.text.uno {width:140px; height:30px; font-size:14pt; font-family:Helvetica; font-weight:bold; color:#004080; border-width:thin; border-style:solid; border-color:#004080; background-image:url(cielo.jpg);}

5

label.uno { color:#004080; font-size:14pt; font-family:Helvetica; font-weight:bold; }--></style></head><body><form> <label for="tlf" class="uno" >Teléfono</label> <input type="text" class="uno" name="tlf" id="tlf" /></form></body></html>

1.4 Estilos de encabezado.

Dento del tag <STYLE> es posible definir la apariencia del tag que afectará a todo el documento html.

<html><head><title>Documento de CSS</title><style></style></head><body><h1>Estilo de encabezado</h1><h2>afecta a todo el documento</h2><a href="http://www.terra.es/personal6/morenocerro2/manual/formularios/formularios_1.html"> Página sobre formularios recomendada </a></body></html>

6El orden de precedente que ocurre es:

1. Tags a nivel tags (clases y en línea).2. Tags a nivel de documento. (tag <style>)3. Tags a nivel de varios documentos (importación de archivo)

1.5 Estilos importados.

Esta implementación es aquella utilizada a lo largo de varios documentos y su funcionamiento depende de un archivo que es llamado al documento. Esta declaración es similar a la de una imagen. Existen dos posibilidades:

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

@import url(http://www.osmosislatina.com/css/estilo.css”

La diferencia de ambas líneas superiores estriba en la manera de ser declaradas en el documento html.

Si se inicia con  esto implica que todo contenido sería comentarios y no sería utilizado por el navegador. Sin embargo, el uso de comentarios dentro de los tags <style> se debe a que muchos navegadores (anteriores a 1997) no reconocen el tag <style> y por lo tanto se requiere de un comentario, que de lo contrario generaría error. Los que reconocen el tag <style> ignoran los tags de comentario  y utilizan el contenido.

<html<head><title>Documento de CSS</title><link rel="stylesheet" type="text/css" href="kycestilos.css"><style></style></head><body><a href="http://www.mailxmail.com/curso/informatica/css"> Curso: css práctico </a></body></html>

http://www.osmosislatina.com/css/estilo.css

71.6 Hojas de estilo.

Las hojas de estilo css (Cascading Style Sheet) intentan separar el contenido de la página de la forma de presentarlo en la ventana. Son sensible a la diferencia entre mayúscula y minúscula.

La hoja de estilo es un fichero externo (kycestilos.css) sin la etiqueta <style> y para utilizarlo en un documento html se coloca en la cabecera del mismo así:<link rel="stylesheet" type="text/css" href="kycestilos.css">.

Ejemplo 8: (nombre del archive: kycestilos.css)

input {font-family:Verdana,sans-serif;font-size:16;color:#151b8d;border: 1px solid #555;background-color: #cde;}

select {font-family:Verdana,sans-serif;font-size:16;color:#151b8d;border: 1px solid #555;background-color: #cde;}

tr {color:#150567;background-color: #98afc7;cellpading:8;cellspacing:8;

}

1.7 Clases.

Es un estilo para cualquier etiqueta, no para una etiqueta determinada, es decir, es para una clase determinada. Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrán utilizarse en cualquier punto del documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces solo todas las etiquetas de ese tipo en el documento utilizarán dicho estilo.

.cita {font-weight: bold; color: red;}

8El punto inicial es necesario para mantener la definición de este estilo desvinculada de cualquier elemento del documento.

Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos párrafos que queremos que tengan un margen determinado y color verde, y deseamos que uno solo de los párrafos tenga los mismos márgenes, pero de color azul. Se definen dos clases distintas, y se utiliza el parámetro ID.

En la hoja de estilo se define:

Y el documento HTML sería:

Notar que en el caso de los enlaces (a:link, a:visited, a:active), algunos de ellos hacen referencia a páginas que ya han sido o no visitadas, para ello utilizamos unas estructuras virtuales que no se corresponden con ningún objeto del documento HTML, conocidas como pseudo-clases.

.verde { color: green; margin-left: 30px }#ej1 {color: blue; }.amarillo {color: yellow; }.lila {color: #9D009D; }

<head><title>Documento de CSS</title><link rel="stylesheet" type="text/css" href="kycestilos.css"><style></style></head><body><a href="http://www.google.co.pe">Google</a><p class="verde"> este es un párrafo de color verde con margen izquierdo de 30px</p><p class="lila">y este es un párrafo de color lila y si margen izquierdo</p><p class="verde" id="ej1" >pero este otro de color azul con margen izquierdo de 30px</p></body>

9

Posicionamiento de elementos de formulario.

Lo que sigue ahora es también exclusivo de Explorer, y es una aplicación directa de las Hojas de Estilo en Cascada y del hecho de que este navegador reconoce cualquier elemento HTML como un objeto en sí mismo. Como consecuencia de ello podemos usar los atributos de posicionamiento de CSS para situar relativa o absolutamente un elemento en pantalla.

Para posicionar elementos de formulario dentro de la ventana de nuestro navegador deberemos introducir los parametros position (absolute / relative), top. (normalmente en píxeles, y define la posición de la esquina superior izquierda del elemento respecto al borde superior de la ventana del navegador) y left (normalmente en píxeles, que determina la distancia respecto al borde izquierdo de la ventana del navegador) dentro del atributo style del elemento.

La sintaxis general sería del tipo:

<form> <input type="Text" style="width:100px; height:20px; background-color:red; color:yellow; font-size:10pt; font-family:Verdana;text-align:center; position:absolute; top:50px; left:200px;"></form>

que situaría la caja de texto a 50 píxeles por debajo del borde superior de la ventana del navegador y a 200 píxeles del borde izquierdo.

En el caso de que varios elementos se superpusieran aparecería aquel que estuviera situado antes en la estructura del código HTML de la página. Esto se puede cambiar mediante el atributo z-index, que define una coordenada z o de profundidad de los elementos en la pagina.

<form action="cgi-bin/control.cgi" method="post" enctype="text/plain" name= "miform"> <textarea name="comentario1" cols="20" rows="10" style="position:absolute;top:50px;left:50px;z-index:1;"> </textarea> <textarea name="comentario2" cols="20" rows="10" style="position:absolute;top:70px;left:70px;z-index:2;"> </textarea></form>

10Posicionamiento mediante capas.

El gran inconveniente de posicionar elementos de formulario mediante estilos directos es que aquellos visitantes que usen Nestcape Navigator no verán una página agradable. Entonces. ¿Qué podemos hacer si queremos posicionar un elemento para que sea visible en ambos navegadores?.

La solución pasa por colocar los elementos dentro de una capa, creada mediante las etiquetas <DIV> y/o <SPAN>, con sus respectivas de cierre. Con esto, podemos posicionar estas capas, y con ellas los elementos que contienen, en nuestra página, y esto será contemplado adecuadamente por los dos navegadores.

Un ejemplo de esto sería, basándonos en el anterior:

En el caso de que varios elementos se superpusieran aparecería aquel que estuviera situado antes en la estructura del código HTML de la página. Esto se puede cambiar mediante el atributo z-index, que define una coordenada z o de profundidad de los elementos en la página.

Maquetación de formularios

Hemos visto hasta ahora cómo implementar los diferentes elementos que forman un formulario, pero de una forma aislada, y esta no es la forma en que estos trabajan. Para que un formulario sea atractivo, lo primero que debe tener es una buena apariencia estética. Y luego, por supuesto, que esté realizado técnicamente bien y que el programa que lo vaya a gestionar en el servidor sea el adecuado.

Para dar un buen aspecto a nuestro formulario deberemos primero estudiar, antes de hacer nada, qué datos queremos recopilar, eliminando los

<form action="php.php" method="post" name="formX" ><div style="position:absolute; top:50px; left:50px; width:200px; height:200px; clip:rect(0,200,200,0); z-index:2;"> <label for="comentario1">Primer comentario:</label><br> <textarea name="comentario1" cols="20" rows="5"></textarea></div><div style="position:absolute; top:80px; left:50px; width:200px; height:200px; clip:rect(0,200,200,0); z-index:1;"> <label for="comentario2">Segundo comentario:</label><br> <textarea name="comentario2" cols="20" rows="10"></textarea></div></form>

11superfluos, y hacer un esquema en papel de cómo va a estar dispuestos los diferentes elementos en la página.

Bien, podemos construirlo usando principalmente dos técnicas distintas, aunque la basada en capas o posicionamientos directos de elementos.

Maquetación mediante tablas.

La técnica más general para maquetar una página es la basada en tablas.

La idea general es crear una tabla compuesta de dos columnas y tantas filas como nos sean necesarias. En la primera columna van a ir los mensajes de cada campo, y el la segunda los propios campos del formulario.

Deberemos tener en cuenta:

* especificar la anchura de la tabla y de las celdas que la van a componer.

* si se usa color de fondo a las celdas es conveniente dejar un pequeño margen entre las celdas, mediante el atributo cellspacing.

* en las celdas "vacías" introducir dentro de ellas un espacio ( ) o una imagen transparente de 1 píxel.

* disponer todo el formulario en la visual de la ventana del navegador.

* para separar elementos que estén dentro de la misma celda utilizar tantos espacios ( ) como sea necesario.

Ejemplo 9:

12<html><head><title>Maquetación con tablas</title><link rel="stylesheet" type="text/css" href="kycestilos.css"></head><body><form action="guardar.php" method="post" >

<table class="uno" align="center" ><th colspan="2">Por favor, rellena estos datos</th><td rowspan="9"><img src="paisaje1.jpg"></td><tr> <td width="35%">Nombre:</td> <td width="65%" ><input type="text" name="nombre" class="uno"></td></tr><tr> <td>Apellidos:</td> <td><input type="text" name="apellidos" class="uno"></td></tr><tr> <td>Dirección:</td> <td><input type="text" name="direccion" class="uno"></td></tr><tr> <td>¿Incha de qué equipo?</td> <td id="t14"> <input type="Radio" name="equipo" value="universitario" class="dos" checked> Universitario <input type="Radio" name="equipo" value="alianza" class="dos" > Alianza Lima</tr><tr> <td><b>Música favorita:</b></td> <td> <table border="0"> <tr><td id="t14" > <input type="checkbox" name="musica" value="festejo" class="dos" > Festejo </td> <td id="t14"> <input type="checkbox" name="musica" value="huaylas" class="dos" > Huaylas </td> <td id="t14"> <input type="checkbox" name="musica" value="cumbia" class="dos" > Cumbia </td> <tr> <td id="t14"> <input type="checkbox" name="musica" value="salsa" class="dos" checked> Salsa </td> <td> </td><td> </td></tr> </table> </td></tr><tr> <td>Escritor que admiras:</td>

13 <td> <select> <option value="vargas">Vargas Llosa</option> <option value="arguedas">José María Arguedas</option> <option value="vallejo">César Vallejo</option> <option value="mariategui">José Carlos Mariátegui</option> </select> </td></tr><tr> <td><b>¿Algún comentario?</b></td> <td> <textarea name="comentario" > </textarea></td></tr><tr> <td colspan="2" align="center"> <input type="submit" value="Enviar" class="boton"> <input type="reset" value="Borrar" class="boton"> </td></tr></table> </form>

Este ejemplo requiere a su vez de un documento CSS:

input.uno { width:300px; height:30px; font-size:14pt; font-family:Helvetica,Verdana,sans-serif; font-weight:bold; border-width:thin; border-style:solid; border-color:#004080; color:#004080; background-color: #cde; background-image:url(cielo.jpg);}

input.dos { width:20px; height:20px; font-size:14pt; font-family:Helvetica,Verdana,sans-serif; font-weight:bold; border-width:thin; border-style:solid; border-color:#004080; color:#004080; background-color: #cde;}

14select { width:300px; height:30px; font-size:14pt; font-family:Helvetica,Verdana,sans-serif; font-weight:bold; border-width:thin; border-style:solid; border-color:#004080; color:#004080; background-color: #cde;}

textarea { width:300px; height:100px; font-size:14pt; font-family:Helvetica; font-weight:bold; border-width:thin; border-style:solid; border-color:#004080; color:#004080; background-color:#cde;}

.boton { width:120px; height:40px; font-size:14pt; font-family:Helvetica; font-weight:bold; border-width:thin; border-style:solid; border-color:#004080; color:#ffffff; background-color:#cde; background-image:url(fondo.jpg)}

table.uno { width: 1000px; cellpading:2; cellspacing:2; border: 0;}

15tr { height:34px; color:#150567; background-color: #98afc7; cellpading:0; cellspacing:0;}

td { color:#004080; background-color: #cde; cellpading:2; cellspacing:2; font-size:12pt; font-family:Helvetica; font-weight:bold; }

#t14 { font-size:14pt;}

th { color:#ffffff; background-color: #004080; font-size:14pt; font-family:Helvetica; font-weight:bold; }

Maquetación mediante capas.

Otra forma de maquetar un formulario es utilizando capas, definidas mediante las etiquetas <DIV>...</DIV> y/o <SPAN>...</SPAN>, que vamos a situar en nuestra página mediante los atributos de style position, top y left. Ya hemos dicho antes que este método suele traer problemas en Nestcape.

La idea ahora es ir creando y posicionando las capas, introduciendo en cada una de ellas bien un mensaje de campo bien el propio campo.

El mismo ejercicio anterior ahora está implementado utilizando capas.

Maquetación es un término que se utiliza en esta parte para indicar la distribución de texto y campos en una ventana utilizando código HTML. En el caso de utilizar capas es necesario definir los puntos de la ventana utilizando como medida los píxeles u otra medida.

16

<html><head><title> Maquetación mediante capas<title><link rel="stylesheet" type="text/css" href="kycestilos.css"></head><body><form name="miform"><div id="cabecera">Por favor, rellena estos datos</div><div id="capaA0" class="m">Nombre:</div><div id="capaA1" class="m"> <input type="text" class="uno" name="nombre"></div><div id="capaB0" class="m">Apellidos:</div><div id="capaB1" class="m"> <input type="text" class="uno" name="apellidos"></div><div id="capaC0" class="m">Direción:</div><div id="capaC1" class="m"> <input type="text" class="uno" name="direccion"></div><div id="capaD0" class="m">Marca tu equipo favorito:</div><div id="capaD1" class="m"><input type="Radio" name="equipo" value="universitario" checked>Universitario <input type="Radio" name="equipo" value="alianza">Alianza</div><div id="capaE0" class="m">Marca tu música favorita:</div><div id="capaE1" class="m"> <input type="checkbox" name="musica" value="marinera" checked>Marinera <input type="checkbox" name="musica" value="lando" checked>Lando

17 <input type="checkbox" name="musica" value="cumbia">Cumbia</div><div id="capaF0" class="m">Elige un escritor:</div><div id="capaF1" class="m"> <select> <option value="Cervantes">Cervantes <option value="Reverte">Reverte <option value="Asimov">Asimov </select></div><div id="capaG0" class="m2">¿Algún comentario?</div><div id="capaG1" class="m2"> <textarea name="comentario" cols="20" rows="10"> </textarea></div><div id="capaH0" class="m"> <input type="submit" value="enviar" onclick="alert('botón de prueba. No esta activo')"; class="boton"></div><div id="capaH1" class="m"> <input type="reset" value="borrar" class="boton"></div></form></body></html>

Además de este código se utiliza las clases CSS. Al documento de hojas de estilo se le ha agregado nuevas clases, que complementan las antes citadas.

.m { width:300px; height:34px; background-color:#cde; font-family:Verdana; font-size:10pt; font-weight:bold;}

.m2 { width:300px; height:105px; background-color:#cde; font-family:Verdana; font-size:10pt; font-weight:bold;}

18 #cabecera{ position:absolute; top:22px; left:20px; width:500px; height:25px; color:#ffffff; background-color:#004080; text-align:center; font-family:Verdana; font-size:12pt; font-weight:bold; padding-top:5px;}

#capaA0{position:absolute;top:50px;left:20px;} #capaA1{position:absolute;top:50px;left:220px;} #capaB0{position:absolute;top:85px;left:20px;} #capaB1{position:absolute;top:85px;left:220px;} #capaC0{position:absolute;top:120px;left:20px;} #capaC1{position:absolute;top:120px;left:220px;} #capaD0{position:absolute;top:155px;left:20px;} #capaD1{position:absolute;top:155px;left:220px;} #capaE0{position:absolute;top:190px;left:20px;} #capaE1{position:absolute;top:190px;left:220px;} #capaF0{position:absolute;top:225px;left:20px;} #capaF1{position:absolute;top:225px;left:220px;} #capaG0{position:absolute;top:260px;left:20px;} #capaG1{position:absolute;top:260px;left:220px;} #capaH0{position:absolute;top:367px;left:20px;padding-left:80px;} #capaH1{position:absolute;top:367px;left:220px;}

ACTIVIDAD 1:

Implementar un documento HTML que permita ingresar los campos correspondientes a una factura (o boleta) de un negocio (ferretería, farmacia, tienda de abarrotes, etc.) utilizando maquetación mediante capas y la misma aplicación aplicando ahora maquetación con tablas y utilizando un archivo tipo CSS externo, en ambos casos.

Etilos

Documents

Transcript of Etilos