FORO
CONTACTO
anterior siguiente
CSS 2

INDICE

0. Introduccisn.

1. Implementacisn de una hoja de estilo.

2. Background y Color 3. Selectores. 4. Margenes, espaciados y bordes. 5. Fuentes. 6. Texto. 7. Tablas. 8. Listas. 9. Miscelanea. 10. Enlaces y recursos.


0. Introduccisn

Aviso: A lo largo del tutorial la informacisn crmtica se resaltara en rojo. Es mas que recomendable que tengais conocimientos de HTML para poder seguirlo.

Podeis trabajar con Bloc de Notas o con algzn editor de texto mas avanzado, yo he usado para hacer esta pagina EditPlus.

?Qui son las hojas de estilo?
Las hojas de estilo o CSS (Cascading Style Sheets) son un complemento al HTML que nos permiten una mayor flexibilidad y control de la apariencia de nuestras paginas web, por un lado sustituyen a etiquetas y atributos de HTML desabrobados u obsoletos y por otro nos ofrecen mas posibilidades que el HTML convencional.
Su sintaxis normalmente es: selector {propiedad: valor; propiedad: valor; ...} pero esto ya lo iremos viendo.

Aviso: En principio los ejemplos citados siguen la especificacisn reglamentaria y deberman funcionar en Netscape 6 y Explorer 5, pero ya sabemos lo que suele pasar con estas cosas...

Este tutorial es un resumin de Anthony's Cascading Style Sheets 2 Tutorial revisado y ampliado con algunos conceptos.

Por zltimo siempre que necesiten volver al indice, fijen su vista en la esquina superior derecha. Al final lo cuento. Ale a pasarlo bien ;)


1. Implementacisn de una hoja de estilo

Podemos hacerlo de tres maneras:

1.1 Hoja de estilo directa.

<html>
<head>
<title>Tmtulo del documento</title>
</head>
<body>
<p style="aqum van los elementos de estilo">
</p>
</body>
</html>
        
1.2 Hoja de estilo interna.
<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
aqum van los elementos de estilo
</style>
</head>
<body>
Aqum van los contenidos
</body>
</html>
        
1.3 Hoja de estilo externa.
<html>
<head>
<title>Tmtulo del documento</title>
<LINK href="filename.css" rel="stylesheet" type="text/css">
</head>
<body>
Aqum van los contenidos
</body>
</html>
?Qui tipo de implementacisn debermamos usar?
  • En el estilo directo los atributos van en cada etiqueta. Es muy poco practico.
  • En las hojas externas los atributos se especifican en el <head> en la etiqueta <style>. Son ztiles para manejarse con pocas paginas web. Nosotros aqum vamos a trabajar con esta modalidad.
  • En las hojas externas los estilos, que antes estaban en el encabezado, estan en un archivo .css al que hacen referencia todas las paginas del sitio. Si quieres controlar los estilos de un sitio web amplio es recomenndable el uso de hojas externas. Asm, por ejemplo, para cambiar el color de texto de todo un sitio sslo necesitariamos hacer una modificacisn en el csdigo de la hoja externa.
No obstante de ser necesario podemos combinar los diferentes. Las mismas reglas de herencia que rigen para el HTML funcionan para CSS: si un elemento hijo no especifica su propio estilo hereda el estilo de su elemento padre.

2. Background & Color

2.1 Background color:
<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
body { background:#00ff00}
</style>
</head>
<body>
Aqum van los contenidos
</body>
</html>
El color de fondo sera verde. Tambiin podems usar { background:green }

2.2 Background-image:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
body { background-image: url("image.gif") }
</style>
</head>
<body>
Aqum van los contenidos
</body>
</html>
Aqum habra un gif de fondo

2.3 Background-attachment:

<style type="text/css">
body { background-image: url("image.gif"); background-attachment: fixed }
</style>
La imagen de fondo permenacera fija. La alternativa: background-attachment: scroll.
Fijaros que cuando hay dos o mas atributos se separan con punto y coma.

2.4 Background-repeat:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
body { background-image: url("image.gif"); background-repeat: repeat-y }
</style>
</head>
<body>
Aqum van los contenidos
</body>
</html>
La imagen de fondo se repetira verticalmente sslo en una fila.

Otros valores:
background-repeat: repeat-x: se repetira sslo horizontalmente en una fila.
background-repeat: repeat se repetira una fila vertical y horizontal.
background-repeat: no-repeat se mostrara solo una copia de la imagen de fondo.

Podemos poner varios atributos juntos:
body { background-image: url("image.gif"); background-repeat: repeat-y; background- attachment: fixed }

Una forma resumida de poner lo anterior:
body { background-image: url("image.gif"); repeat-y fixed }

2.5 Color

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
body { background:#000000; color:#ffff00 }
</style>
</head>
<body>
Aqum van los contenidos
</body>
</html>
Con esto tenemos el fondo negro y el texto amarillo, tambiin vale black y yellow. El W3C recomienda poner siempre juntos los atributos background y color. Nosotros como vamos a trabajar sobre fondo blanco, que es el que sale por defecto en todo navegador, no lo especificaremos salvo que usemos otro color.

Podeis aplicar color a los diferentes etiquetas relacionadas con el texto:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
body { color:#ffff00 }
h1 { color:red }
em { color:blue }
</style>
</head>
<body>
<h1>Encabezado rojo</h1>
El texto es verde pero <en>cursiva es azul</em>
</body>
</html>
El resultado serma:

Encabezado rojo

El texto es verde pero en cursiva es azul

Podemos agrupar elementos y ahorrarnos trabajo:

<style type="text/css">
body { background:#000000; color:#ffff00 }
h1, h2, h3, h4, h5, h6, em { color:red }
</style>

3. Selectores

3.1 Selectores de clase:

SI usamos este csdigo: h1 { color:green; } todos los encabezados h1 nos saldran en amarillo. Pero pongamos que queremos uno en rojo, otro en verde y otro en azul. Haremos lo siguiente:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
.green { color:green}
.blue { color:blue}
.red { color:red}
</style>
</head>
<body>
<h1 class="green">Header</h1>
<h1 class="blue">Header</h1>
<h1 class="red">Header</h1>
</body>
</html>
Estos son los selectores de clase y el resultado serma este:

Encabezado

Encabezado

Encabezado

Las clases van siempre precedidas de un punto cuando las definimos .red { color:red } pero no cuando las aplicamos <h1 class="green">

Una vez definida una clase podemos aplicarla en cualquier etiqueta. Por ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
.yellow { color:green; background:#000000 }
</style>
</head>
<body>
<h3 class="verde">Encabezado</h3>
<em class="verde">texto</em>
<p class="verde">mas texto</p>
</body>
</html>

Encabezado

texto

mas texto

Las clases pueden ser asignadas a un sslo elemento de estilo. Ejemplo:
<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
h1.azul { color:blue}
</style>
</head>
<body>
<h3>Este no es azul.</h3>
<h3 class="azul">Este sm es azul.</h3>
</body>
</html>

Este no es azul.

Este sm es azul.

3.3 Selectores ID:

Son casi igual que los anteriores se diferencian en que cuando los definimos ponemos una almohadilla en vex de un punto delante #blue { color:blue; background:#000000 } y cuando los aplicamos los expresaremos asm <h1 ID="blue">.

Un ejemplo breve:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
#azul { color:blue }
</style>
</head>
<body>
<h3 id="azul">Header</h3>
</body>
</html>

Azul

3.3 Pseudo clases de A:

Estas pseudoclases han sido creadas para determinar la apariencia de los enlaces. Probad este csdigo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
A.blue:link { color: blue }
A.blue:visited { color: red }
A.blue:hover { background: lime; }
A.blue:active { color: green }
</style>
</head>
<body>
Visita mi pagina <a href="http://myaddress.com">haciendo clic aqum</a>
</body>
</html>
Visita mi pagina haciendo clic aqum
A:link determina el color por defecto del enlace
A:visited determina el color del enlace visitado
A:hover determina el color del enlace cuando el ratsn pasa por encima
A:active determina el color del enlace activo
Atencisn siempre se deben especificar en este orden

Tambiin esta permitido expresarlos asm:
:link
:visited
:hover
:active

Podemos usar estas pseudoclases como selectores de clase. Ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
A.green:link { color: green }
A.green:visited { color: red }
A.green:hover { background: blue ; color: white }
A.green:active { color: green }
A.blue:link { color: blue }
A.blue:visited { color: red }
A.blue:hover { background: lime; }
A.blue:active { color: green }
</style>
</head>
<body>
<a class="green" href="http://myaddress.com">un enlace</a> <br>
<a class="blue" href="http://myfriends.com">otro enlace</a>
</body>
</html>
un enlace
otro enlace

4. Margenes, espaciados y bordes

4.1 Margenes:

Antes de nada echad un vistazo a iste grafico para aclararos con los tirminos margin, padding y border.

 foto tomada de la especificacisn de CSS2 del W3C

En donde LM es left margin, LB es left border, LP es left padding... etc.

Las medidas pueden ser expresadas en valores absolutos (no vamos a liarnos y usaremos pixels px) o percentuales(%). Vamos con un ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
h3 { margin-left: 40px; margin-top:40px }
</style>
</head>
<body>
<h3>40 px. me separan de la parte superior e izquierda</h3>
</body>
</html>

40 px. me separan de la parte superior e izquierda

Otras formas de especificar las medidas mas brevemente:
p { margin:25px 30px }= arriba y abajo 25px - derecha e izquierda 30px
p { margin:25px 30px 35px }= arriba 25px - derecha 30px - abajo 35px - izquierda 30px

4.2 Espaciados:

Vamos a ver un ejemplo del uso de padding:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
h3.padding { background:red; padding-top:20px; 
padding-right:20px; padding- bottom:20px; padding-left:20px }
</style>
</head>
<body>
<h3>H3</h3>
</body>
</html>

H3

Una vez mas podemos resumir esto en padding:20px

4.3 Bordes:

Para los bordes tenemos los siguientes atributos:

  • Para el ancho: 'border-width', 'border-top-width', 'border-right-width', 'border- bottom-width', 'border-left-width', and 'border-width'. Los valores son: thin, medium, thick o un valor fijo.
  • Para el estilo:'border-style', 'border-top-style', 'border-right-style', 'border-bottom- style', 'border-left-style', and 'border-style'. Los valores son: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
  • Para el color:'border-color', 'border-top-color', 'border-right-color', 'border- bottom-color', 'border-left-color', and 'border-color

Vamos con un ejemplo un poco retorcido:
<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
h1 { border-width: 20px; border-color:#0000ff; border-style:outset }
</style>
</head>
<body>
<h3>Texto</h3>
</body>
</html>

Texto

Podemos usar fsrmulas mas breves como en los casos anteriores:
h1 { border-bottom: medium solid blue; border-top: thick double red }
h2 { border: thin dotted lime }


5. Fuentes

5.1 Font-family:
<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
p { font-family: Verdana, Arial, 'Times New Roman', serif }
</style>
</head>
<body>
<p>Verdana</p>
</body>
</html>

verdana

Recordad que es muy recomendable especificar mas de un tipo de fuente y acabar con una genirica: serif, sans-serif, cursive, fantasy, o monospace.
Los nombre de fuentes con mas de un espacio deben ir entre comillas simples: 'Times New Roman'.

5.2 Font-style:

Los estilos de texto pueden ser: normal, italic u oblique

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
h3 { font-style:italic }
</style>
</head>
<body>
<h3>Cursiva</h3>
</body>
</html>

Cursiva

5.3 Font-weight:

Posibles valores: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Un ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
p { font-weight:bold }
em { font-weight:200 }
</style>
</head>
<body>
<p>bold text</p>
<em>light text</em>
</body>
</html>

bold text

light text

5.4 Font-size:

Posibles valores:
Valores absolutos: xx-small, x-small, small, medium, large, x-large, xx-large .
Valores relativos: larger, smaller
Un ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
p { font-size:xx-large }
em { font-size:10px }
</style>
</head>
<body>
<p>extra extra large text</p>
<em>10px text</em>
</body>
</html>

extra extra large text

10px text

Siempre podremos poner varios estilos juntos y en forma abreviada como en este ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
p { font: bold italic 14pt 'Times New Roman', serif }
div { font-family: 'Comic Sans Ms', Arial, Serif; 
font-size:18px; font-weight:bold; font- style:normal; 
color:green }
</style>
</head>
<body>
<p>aqum una muestra ...</p>
<div>aqum otra ...</div>
</body>
</html>

aqum una muestra ...

aqum otra ...


6. Texto

6.1 Text-indent:

Con este atributo especificaremos el sangrado del texto.

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
p { text-indent:30pt }
</style>
</head>
<body>
<H3>Normal</H3>
<p>Este texto esta sangrado 30 puntos respecto al anterior.</p>
</body>
</html>

Normal

Este texto esta sangrado 30 puntos respecto al anterior.

6.2 Text-align:

Alineacisn del texto, con los valores: left, right, center, justify.

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
p { text-align:center }
div { text-align:right }
</style>
</head>
<body>
<p>centrado</p>
<div>derecha</div>
</body>
</html>

centrado

derecha

6.3 Text-decoration:

Decoracisn del texto. Valores: none, underline, overline, line-through, blink.
Blink azn no funciona en Explorer 5.5.
Vamos con el ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
p { text-decoration:underline }
div { text-decoration:line-through }
h5 { text-decoration:overline }
</style>
</head>
<body>
<p>subrayado</p>
<div>tachado.</div>
<h5>sobrelineado</h5>
</body>
</html>

subrayado

tachado

sobrelineado
6.4 Letter-spacing y Word-spacing:

Con estos especificaremos espaciado entre letras y palabras respectivamente, word-spacing no va en Explorer 5.5:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
p { letter-spacing:5pt }
em { word-spacing:20px }
</style>
</head>
<body>
<p>letras espaciadas 5 puntos</p>
<div>palabras espaciadas 20 pixels</div>
</body>
</html>

letras espaciadas 5 puntos

palabras espaciadas 20 pixels

6.5 text-transform:

Para controlar el tema de mayzsculas y minzsculas. Tenemos los siguientes valores: capitalize, uppercase, lowercase, none. Demostracisn:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
h3 { text-transform: uppercase }
p { text-transform:capitalize }
div { text-transform:lowercase }
</style>
</head>
<body>
<h3>mayzsculas</h3>
<p>capitales en cada palabra</p>
<div>MINZSCULAS.</div>
</body>
</html>

mayzsculas

capitales en cada palabra

MINZSCULAS


6. Tablas

6.1 Una tabla de ejemplo:

A las tablas podrmamos aplicarles todos los elementos vistos arriba. Veamos un ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
table { border: yellow solid 7px }
caption {text-align: center; padding-bottom:10px; font-weight:bold }
th { border-bottom: yellow 3px solid; text-align:center; 
font-weight:bold; font-size:25px; padding-top:15px; padding-bottom:15px }
td { text-align:left; font-style:italic; color:green; padding-left:15px }
td.green { border:lime groove 10px }
td.purple { background:#800080; color:#ffffff; text-align:left; 
font-family:Verdana, Arial, Serif; font-size:11px }
td.minus18 { border:#FFC001 double 8px; text-decoration:underline }
</style>;
</head>
<body>
<table border="1" width="50%" cellpadding="5" cellspacing="0">
<caption>TABLA CSS</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>John</td>
<td>35</td>
</tr>
<tr>
<td class="green">Mary</td>
<td>30</td>
</tr>
<td class="purple" colspan="2">Mark: esperando mas informacisn</td>
</tr>
<td>Nick</td>
<td class="minus18">14</td>
</tr>
</table>
</html>
TABLA CSS
Nombre Edad
John 35
Mary 30
Mark: esperando mas informacisn
Nick 14

7. Listas

8.1 List-style-type:

Con este parametro controlamos el estilo de las viqetas. Los posibles valores son: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none. Demostracisn:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
ol { list-style-type: upper-roman }
ul { list-style-type: circle }
</style>
</head>
<body>
<ol>
<li> uno.
<li> dos.
<li> tres.
</ol>
<br>
<ul>
<li> first item.
<li> second item.
<li> third item.
</ul>
</html>
  1. uno.
  2. dos.
  3. tres.

  • first item.
  • second item.
  • third item.

8.2 List-style-image:

Nos permite usar una imagen como viqeta:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
ul { list-style-image: url("arrow.gif") }
</style>
</head>
<body>
<ul>
<li> first item
<li> second item
<li> third item
</ul>
</html>
  • first item
  • second item
  • third item

8.3 List-style-position:

Controla la posicisn de los items de la lista. Los posibles valores son: inside o outside. Ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
ul.outside { list-style-position: outside }
ul.inside { list-style-position: inside }
</style>
</head>
<body>
<ul class="outside">
<li>primero
<li>segundo
</ul>
<ul class="inside">
<li>first
<li>second
</ul>
</html>
  • first list item comes first
  • second list item comes second
  • first list item comes first
  • second list item comes second
Para las listas tambiin podemos usar el mitodo abreviado con list-style. Por ejemplo: ul { list-style: square outside }

9. Miscelanea

9.1 Capas:

Con el posicionamiento de capas nos metermamos ya en terrenos mas escabrosos (DHTML:una combinacisn de HTML, CSS y JavaScript). Sinceramente creo que es mejor recurrir a un buen editor como Dreamweaver o GoLive, antes de matarnos en exceso la cabeza (para algo estan). No onstante os comento por encima los principales parametros para que al menos sepais por donde van los tiros.Veamos el siguiente csdigo:

<html>
<head>
<title>Tmtulo del documento</title>
<style type="text/css">
body { background:#000000; color:#ffffff }
#capa { position:relative; left:100px; top:20px; width:500px; 
height:200px; background:#0000ff; color:#ffffff; ; z-index:1 }
</style>
</head>
<body>
<div id="capa">
Esta es la capa.
</div>
</html>
Hemos creado una capa de 500 x 200 pixels (width:500px; height:200px) con el color de fondo rojo y el de texto blanco (background:#0000ff; color:#ffffff).
Position:relative quiere decir la colocacisn del elemento al que se aplica el estilo es respecto al elemento mas cercano en el flujo del texto, mientras que con position:absolute la colocacisn se hace con respecto al elemento padre. En este caso esta a 100 pixels del lado izquierdo de la pagina y 20 de la parte superior left:100px; top:20px, podemos darle valores negativos, con lo cual parte de la capa estarma oculta.
El valor z-index nos da la posicion de la capa en el tercer eje de posicionamiento. Una capa con valor 2 se situarma encima de una con valor 1, una con valor 3 encima de las dos anteriores ...etc. En caso de no especificar este valor, se dispondran en el mismo orden que en el csdigo (la primera abajo, la siguiente encima ...etc).

9.2 Cursores:

Una de las cosas divertidas que podemos hacer es ampliar nuestro abanico de cusores con el atributo cursor. Sus valores son: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw- resize, n-resize, se-resize, sw-resize, s-resize, w-resize| text, wait, help.

cursores

Vamos con un ejemplo sencilo, usando esta vez estilos directos:

<html>
<head>
<title>Tmtulo del documento</title>
</head>
<body>
<P style="cursor:crosshair">CROSSHAIR
<P style="cursor:move">MOVE
<P style="cursor:wait">WAIT
</body>
</html>
Ahora pasa el ratsn sobre las palabras:

CROSSHAIR

MOVE

WAIT

9.3 Formularios:

Los mismos elementos con los que hemos estado trabajando nos pueden servir para hacer unos formularios vistosos, un pequeqo ejemplo:

<html>
<head>
<title>Tmtulo del documento</title>
</head>
<style>
textarea {background:#CCFFFF; color:#0000ff; font-weight:bold}
fieldset {background:#FFFFCC; color:#0000FF; border-color:#0000FF; 
border-width:5px; border-style:double}
input {background: #3399CC; color:#FFFFFF; font-weight:bold}
</style>
<body>
<FORM METHOD=POST ACTION="x">
<FIELDSET>
<LEGEND>FORMULARIO</LEGEND>
<TEXTAREA NAME="escriba algo" ROWS="8" COLS="35">
</TEXTAREA>
<INPUT TYPE="submit">
</FIELDSET>
</FORM>
</body>
</html>
FORMULARIO


10. Enlaces y recursos

 

autor:Miguel A. Hernández

 

anterior siguiente
 

Novedades

Realidad Virtual
Quest 3D
Modelado 3D
Iluminación Giles
Conway's Game of Life

Stereoscopía
Foto 3D

Internet
HTML
Dreamweaver
JavaScript
ASP

 

 
Hagaloustedmismo
Contacte en : hagaloustedmismo@wanadoo.es
Phohibida toda reproducción total o parcial sin permiso del autor