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

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

</style>
</head>

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.

2

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

1.2 Definir en línea.

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

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

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>

3
1.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;
background-color:green;
color:yellow;">
</textarea>
</font>
</form>

4
Ejemplo 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>
<style>
<!--
input.text.uno {width:140px;
height:30px;
font-size:14pt;
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-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>
<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/for
mularios_1.html"> Página sobre formularios recomendada </a>
</body>
</html>

6
El 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.

<html
<head>
<style>

</style>
</head>
<body>
<a href="http://www.mailxmail.com/curso/informatica/css">
Curso: css práctico </a>
</body>
</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.

7
1.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;
}

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;}

8
El 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:

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

Y el documento HTML sería:

<head>
<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>

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.

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>

10
Posicionamiento 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:

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

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

11
superfluos, 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>
</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;
color:#004080;
background-image:url(cielo.jpg);
}

input.dos {
width:20px;
height:20px;
font-size:14pt;
font-weight:bold;
border-width:thin;
border-style:solid;
color:#004080;
}

14
select {
width:300px;
height:30px;
font-size:14pt;
font-weight:bold;
border-width:thin;
border-style:solid;
color:#004080;
}

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

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

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

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

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

#t14 {
font-size:14pt;
}

th {
color:#ffffff;
background-color: #004080;
font-size:14pt;
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>
</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;
font-size:10pt;
font-weight:bold;
}

.m2 {
width:300px;
height:105px;
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-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

Más contenido relacionado

La actualidad más candente (19)

Destacado (20)

Similar a Etilos (20)

Etilos