You are on page 1of 310

CSS

Ángel Sobrino

cursoprogramadores@gmail.com
Página 2 de 310
CSS Introducción

Lo que deberías saber ya


Antes de continuar, debe tener un conocimiento básico de los siguientes temas:

 HTML / XHTML

¿Qué es CSS?
 CSS es sinónimo de C ascading S tyle S heets
 Los estilos definen la forma de mostrar los elementos HTML
 Los Estilos se añadieron a 4,0 HTML
 Las Hojas de estilo externas puede ahorrar un montón de trabajo
 Las Hojas de estilo externas se almacenan en los archivos CSS

CSS demo
Visitar csszengarden.com

Los Estilos Css resuelven un gran problema


HTML nunca fue pensado para contener etiquetas para dar formato a un documento.

HTML fue pensado para definir el contenido de un documento:

<h1> Este es un encabezado </ h1>

<p> Este es un párrafo. </ p>

Cuando las etiquetas como<font> y los atributos de color se añadieron a la especificación


HTML 3.2, comenzó una pesadilla para los desarrolladores web. Los Desarrollo de sitios web
de gran tamaño, donde las fuentes y la información de color se agregan a cada página, se
convirtieron en un proceso largo y costoso.

Para resolver este problema, el Consorcio World Wide Web (W3C) creó CSS.

En HTML 4.0, todo el formato puede ser eliminado del documento HTML, y almacenarse en
un archivo CSS.

Hoy en día todos los navegadores soportan CSS.

Página 3 de 310
CSS ahorra mucho trabajo!
CSS define cómo los elementos HTML se van a mostrar.

Los estilos se guardan normalmente en archivos CSS externos. Las Hojas de estilo externas
le permiten cambiar el aspecto y el diseño de todas las páginas de un sitio Web,
simplemente editando un solo archivo!

CSS Sintaxis

Una regla CSS consta de dos partes principales: un selector, y de una o más declaraciones:

El selector es normalmente el elemento HTML al que deseamos aplicar el estilo.

Cada declaración consta de una propiedad y un valor.

La propiedad es el atributo de estilo que deseamos cambiar. Cada propiedad tiene un valor.

Ejemplo CSS
Una declaración CSS siempre termina con un punto y coma, y los grupos de la declaración
están rodeadas por llaves:

p {color:red;text-align:center;}

Para hacer más legible la CSS, puedes poner una declaración en cada línea, así:

Ejemplo
p
{
color:red;
text-align:center;
}

<!DOCTYPE html>
<html>
<head>

Página 4 de 310
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>

<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

<html>
<head>
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>

<body>

<h1>This header is 36 pt</h1>


<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>
</html>

En este orden:
• a:link Es el estilo de un enlace que no ha sido explorado por el usuario.
• a:visited Es el estilo de un enlace que ha sido visitado.
• a:hover Es el estilo de un enlace que tiene el ratón encima, pero sin estar seleccionado.
• a:active Estilo de un enlace seleccionado, mientras está siendo seleccionado.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:tan;}
Página 5 de 310
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
</style>
</head>

<body>
<h1>This is a header 1</h1>
<hr>
<p>You can see that the style
sheet formats the text</p>

<p><a href="http://www.google.com"
target="_blank">This is a link</a></p>

</body>
</html>

CSS Comentarios
Los comentarios se utilizan para explicar su código, y puede ayudarte a la hora de editar el
código fuente en una fecha posterior. Los comentarios son ignorados por los navegadores.

Un comentario CSS comienza con "/ *" y finaliza con "* /", así:

/*Esto es un comentario*/
p
{
text-align:center;
/*Esto es otro comentario*/
color:black;
font-family:arial;
}

CSS Id y Clase

Los selectores id y class


Además de establecer un estilo para un elemento HTML, CSS le permite especificar tus
propios selectores: "id" y "class".

Página 6 de 310
El selector id
El selector id se utiliza para especificar un estilo para un elemento individual, único.

El selector de ID utiliza el atributo id del elemento HTML, y se define con un "#".

La regla de estilo a continuación se aplica al elemento con id = "para1":

Ejemplo
#para1
{
text-align:center;
color:red;
}

Código completo

<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

NO empezar un nombre de identificación con un número! No funciona en Mozilla / Firefox.

El selector de clase
El selector de clase se utiliza para especificar un estilo para un grupo de elementos. A
diferencia del selector de id, el selector de clase es la más utilizada sobre varios elementos.

Esto le permite definir un estilo particular para muchos elementos HTML de la misma clase.

El selector de clase utiliza el atributo de clase HTML, y se define con un "."

En el siguiente ejemplo, todos los elementos HTML con class = "centro" estará alineado al
centro:

Ejemplo

Página 7 de 310
.center {text-align:center;}

<!DOCTYPE html>
<html>
<head>
<style>
.centro
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="centro">Center-aligned heading</h1>
<p class="centro">Center-aligned paragraph.</p>
</body>
</html>

También puede especificar que sólo determinados elementos HTML debería verse afectada
por una clase.

En el ejemplo de abajo, todos los elementos p con class = "centro" serán alineado al centro:

Ejemplo
p.centro {text-align:center;}

<!DOCTYPE html>
<html>
<head>
<style>
p.centro
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="centro">This heading will not be affected</h1>
<p class="centro">This paragraph will be center-aligned.</p>
</body>
</html>

NO empezar un nombre de clase con un número! Esto sólo es compatible con Internet
Explorer.

CSS Cómo...

Cuando un navegador lee una hoja de estilo, aplicará el formato al documento


de acuerdo con ella.

Página 8 de 310
Tres formas de insertar CSS
Hay tres formas de insertar una hoja de estilo:

 Hoja de estilos externa


 Hoja de estilo interna
 Estilo en línea

Hoja de estilos externa


Una hoja de estilos externa es ideal cuando el estilo se aplica a muchas páginas. Con una
hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un
archivo. Cada página debe enlazar a la hoja de estilo con la etiqueta <link>. La etiqueta
<link> va dentro de la sección ―head‖:

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

Una hoja de estilo externa puede ser escrita en cualquier editor de texto. El archivo no debe
contener ninguna etiqueta HTML. Su hoja de estilo debe ser guardado con una extensión.
Css. Un ejemplo de un archivo de hoja de estilo se muestra a continuación:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

No agregues un espacio entre el valor de la propiedad y la unidad

(como margin-left: 20px).

La forma correcta es: margin-left:20px

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Página 9 de 310
<body>
<h1 class="centro">no le afectará el centrado</h1>
<p class="centro">le afectará</p>
</body>
</html>

mystyle.css
p.centro {color:sienna;text-align:center;}
p {margin-left:20px;}

Hoja de estilo interna


Una hoja de estilo interna debe ser usada cuando tenemos un documento único que tiene un
estilo único.Para definir estilos internos utilizamos la etiqueta <style>en la sección de
cabecera de una página HTML, , así:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Código completo

<!DOCTYPE html>

<html>

<head>

<style>

p.centro {color:sienna;text-align:center;}

p {margin-left:20px;}

</style>

</head>

Página 10 de 310
<body>

<p>no le afectará el centrado</p>

<p class="centro">le afectará</p>

</body>

</html>

Estilos en línea
El estilo en línea pierde muchas de las ventajas de las hojas de estilo ya que el contenido de
la página se mezcla con la presentación. Utiliza este método con moderación!

Para utilizar estilos en línea se utiliza el atributo de estilo en la etiqueta correspondiente. El


atributo de estilo puede contener cualquier propiedad CSS. El ejemplo muestra cómo
cambiar el color y el margen izquierdo de un párrafo:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Múltiples hojas de estilo


Si algunas propiedades se han establecido para el mismo selector en diferentes hojas de
estilo, los valores se heredará de la hoja de estilo más específico.

Por ejemplo, una hoja de estilo externa tiene estas propiedades para el selector h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Y una hoja de estilo interna consta de las siguientes propiedades para el selector h3:

h3
{
text-align:right;
font-size:20pt;
}

Si la página con la hoja de estilo interna también se vincula a la hoja de estilos externa las
propiedades h3 será:

Página 11 de 310
color:red;
text-align:right;
font-size:20pt;

El color se hereda de la hoja de estilos externa y la alineación del texto y el tamaño de


fuente se sustituye por la hoja de estilo interna.

Múltiples estilos en cascada en Uno


Los estilos pueden ser especificados:

 dentro de un elemento HTML


 dentro de la sección de la cabeza de una página HTML
 en un archivo CSS externo

Consejo: podemos referenciar varias hojas de estilo externas en un mismo documento


HTML.

Orden en cascada

¿Qué estilo se utiliza cuando hay más de un estilo especificado para un


elemento HTML?

En términos generales podemos decir que todos los estilos funcionaran"en cascada" y
generarán en una nueva hoja de estilo "virtual" con las siguientes reglas, la número cuatro
tiene la prioridad más alta:

1. Navegador predeterminado
2. Hoja de estilos externa
3. Hoja de estilo interna (en la sección de la cabeza)
4. Estilo en línea (dentro de un elemento HTML)

Por lo tanto, un estilo en línea (dentro de un elemento HTML) tiene la mayor prioridad, lo
que significa que va a reemplazar un estilo definido dentro de la etiqueta head, o en una
hoja de estilos externa, o en un navegador (el valor predeterminado).

Nota: Si el enlace a la hoja de estilos externa se coloca después de la hoja de estilo


interna en <head> HTML, la hoja de estilos externa anulará la hoja de estilo interna!

CSS Background

La Propiedad CSS Background se utilizan para definir el fondo de un elemento.

Las propiedades CSS utilizadas para efectos de fondo:

 background-color
 background-image
 background-repeat
 background-attachment
Página 12 de 310
 background-position

Color de fondo
La propiedad background-color especifica el color de fondo de un elemento.

El color de fondo de una página se define en el selector de cuerpo:

Ejemplo
body {background-color:#b0c4de;}

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>My CSS web page!</h1>


<p>Hello world! This is a W3Schools.com example.</p>

</body>
</html>

Con CSS, un color se suele especificar a través de:

 un valor HEX - como "#ff0000"


 un valor RGB - como "rgb (255,0,0)"
 un nombre de color - como "red"

En el ejemplo siguiente, el h1, p, y los elementos div tienen diferentes colores de fondo:

Ejemplo
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
Página 13 de 310
div
{
background-color:#b0c4de;
}
</style>
</head>

<body>

<h1>CSS background-color example!</h1>


<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

</body>
</html>

Imagen de fondo
La propiedad background-image especifica una imagen para usar como fondo de un
elemento.

Por defecto, la imagen se repite por lo que cubre todo el elemento.

La imagen de fondo de una página se puede establecer de la siguiente manera:

Ejemplo
body {background-image:url('paper.gif');}

paper.gif

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('paper.gif');
}
</style>
Página 14 de 310
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

A continuación se muestra un ejemplo de una mala combinación de texto y la imagen de


fondo. El texto es casi ilegible:

Ejemplo
body {background-image:url('bgdesert.jpg');}

bgdesert.jpg

<!DOCTYPE html>
<html>
<head>
<style>
body {background-image:url('bgdesert.jpg');}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</body>
</html>

Imagen de fondo - Repetición horizontal o vertical

Página 15 de 310
De manera predeterminada, la propiedad background-image repite una imagen tanto
horizontal como verticalmente.

Algunas de las imágenes sólo se debe repetir en horizontal o vertical, para que no quede
demasiado mal:

Ejemplo
body
{
background-image:url('gradient2.png');
}

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Si la imagen es repetida sólo horizontalmente (repeat-x), el fondo se verá mejor:

Página 16 de 310
Ejemplo
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Gradient.png

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Imagen de fondo - Ajustar la posición y no repetir-


Página 17 de 310
Cuando se utiliza una imagen de fondo, utiliza una imagen que no perturbe el texto.

Mostrar la imagen sólo una vez se especifica mediante la propiedad background-repeat:

Ejemplo
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>Ejemplo de imagen en el Background.</p>
<p>La imagen de fondo se muestra una sola vez, pero hace que el texto no se lea
bien!</p>
</body>

</html>

Página 18 de 310
En el ejemplo anterior, la imagen de fondo se muestra en el mismo lugar que el
texto. Queremos cambiar la posición de la imagen, de manera que no moleste demasiado al
texto.

La posición de la imagen se especifica mediante la propiedad background-position:

Ejemplo
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Vamos a separar un poco el texto de fondo de la parte de la derecha.

<!DOCTYPE html>
<html>
<head>

<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>Background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>

Página 19 de 310
<p>In this example we have also added a margin on the right side, so the background
image will never disturb the text.</p>
</body>

</html>

Background - Abreviando las propiedades


Como se puede ver en los ejemplos anteriores, hay muchas propiedades a tener en cuenta
cuando se trata de fondos.

Para acortar el código, también es posible especificar todas las propiedades en una sola
propiedad.Esto se llama una propiedad resumida.

La propiedad abreviada para el fondo no es más que "background":

Ejemplo
body {background:#ffffff url('img_tree.png') no-repeat right top;}

<!DOCTYPE html>
<html>
<head>

<style>
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the
text.</p>
<p>In this example we have also added a margin on the right side, so that the background
image will not disturb the text.</p>
</body>

</html>

Cuando se utiliza la propiedad resumen el orden de los valores de la propiedad es:

 background-color
 background-image
 background-repeat
 background-attachment //Controla si la imagen de fondo se mueve o permanece fija
cuando se hace scroll en la ventana del navegador
 background-position

Página 20 de 310
No importa si uno de los valores de la propiedad está ausente, siempre que los que están
presentes estén en este orden.

Este ejemplo usa CSS más avanzado.

<!DOCTYPE html>

<html>

<head>

<style>

body

margin-left:200px;

background:#5d9ab2 url('img_tree.png') no-repeat top left;

.container

Página 21 de 310
{

text-align:center;

.center_div

border:1px solid gray;

margin-left:auto;

margin-right:auto;

width:90%;

background-color:#d0f0f6;

text-align:left;

padding:8px;

</style>

</head>

<body>

<div class="container">

<div class="center_div">

<h1>Hello World!</h1>

<p>Este ejemplo contiene algunos métodos Css avanzados que no conocemos todavía. Pero
que veremos mas tarde.</p>

</div>

</div>

</body>

</html>

Página 22 de 310
Añadimos un color de fondo al div de clase container y un texto para poder apreciar ambos
contenedores

<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin-left:200px;
background:#5d9ab2 url('img_tree.png') no-repeat top left;
}

.container
{
background-color:#c0c0c0;
text-align:center;
}

.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>

<body>
<div class="container">
Mi web

Página 23 de 310
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned yet. But,
we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
</body>
</html>

Más ejemplos
Cómo establecer una imagen de fondo fija
este ejemplo muestra cómo establecer una imagen de fondo fija. La imagen no se desplazará
con el resto de la página aunque movamos el scroll.

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('w3css.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
<p>La imagen de fondo está fija. mueve el scroll hacia abajo.</p>
</body>
</html>

Todas las Propiedades de fondo CSS


Propiedad Descripción
background Establece todas las propiedades de fondo en una declaración
background-attachment Establece si una imagen de fondo se fija o se desplaza con el resto de la
página
background-color Establece el color de fondo de un elemento
Página 24 de 310
background-image Establece la imagen de fondo de un elemento
background-position Establece la posición inicial de una imagen de fondo
background-repeat Establece una imagen de fondo se repetirá

CSS Text

Color del texto


La propiedad color se utiliza para establecer el color del texto.

Con CSS, un color se especifica con mayor frecuencia a través de:

 un valor HEX - como "# ff0000"


 un valor RGB - como "rgb (255,0,0)"
 un nombre de color - como "red"

El color por defecto para una página se define en el selector body.

Ejemplo
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a
page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

W3C indica que: Si define la propiedad de color, también debe definir la propiedad
background-color.

Alineación del texto


La propiedad text-align se utiliza para establecer la alineación horizontal del texto.

Página 25 de 310
El texto puede ser centrado, alineado a la izquierda, a la derecha, o justificado.

Cuando el valor para text-align es "justificar", cada línea se estira para que cada línea tenga
la misma anchura y los márgenes izquierdo y derecho sean rectos (como en revistas y
periódicos).

Ejemplo
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. 'Whenever you feel like criticizing
anyone,' he told me,
'just remember that all the people in this world haven't had the advantages that you've
had.'</p>
<p><strong>Note:</strong> Resize the browser window to see how the value "justify"
works.</p>
</body>

</html>

Decoración del Texto


La propiedad text-decoration se utiliza para establecer o quitar las decoraciones de texto.

La propiedad text-decoration se utiliza sobre todo para eliminar el subrayado de los


hipervínculos (y aplicarle luego otros diseños):

Ejemplo
a {text-decoration:none;}

<!DOCTYPE html>
<html>
<head>
<style>
a {text-decoration:none;}
</style>
</head>

Página 26 de 310
<body>
<p>Link to: <a href="http://www.google.com">Google.com</a></p>
</body>

</html>

También se puede utilizar para decorar texto:

Ejemplo
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome,Firefox, o Safari</p>
</body>
</html>

No se recomienda subrayar texto que no sea un enlace, ya que a menudo confunde a los
usuarios.

Transformación de Texto
La propiedad text-transform se utiliza para especificar letras mayúsculas y minúsculas en un
texto.

Se puede utilizar para convertir todo en letras mayúsculas o minúsculas, o mayúscula la


primera letra de cada palabra.

Ejemplo
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

<!DOCTYPE html>
<html>
Página 27 de 310
<head>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

Sangría del Texto


La propiedad text-indentación se utiliza para especificar la sangría de la primera línea de un
texto.

Ejemplo
p {text-indent:50px;}

<!DOCTYPE html>
<html>
<head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've
been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told
me, 'just remember that all the people in this world haven't had the advantages that you've
had.'</p>

</body>
</html>

Más ejemplos
Especificar el espacio entre caracteres
Este ejemplo demuestra cómo aumentar o disminuir el espacio entre caracteres.

This is heading 1
Página 28 de 310
Thisisheading2
<!DOCTYPE html>

<html>

<head>

<style>

h1 {letter-spacing:2px;}

h2 {letter-spacing:-3px;}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

</body>

</html>

Especificando el interlineado

En este ejemplo se muestra cómo especificar el espacio entre las líneas de un párrafo.

<!DOCTYPE html>

Página 29 de 310
<html>

<head>

<style>

p.small {line-height:70%;}

p.big {line-height:200%;}

</style>

</head>

<body>

<p>

This is a paragraph with a standard line-height.<br/>

This is a paragraph with a standard line-height.<br/>

The default line height in most browsers is about 110% to 120%.<br/>

</p>

<p class="small">

This is a paragraph with a smaller line-height.<br/>

This is a paragraph with a smaller line-height.<br/>

This is a paragraph with a smaller line-height.<br/>

This is a paragraph with a smaller line-height.<br/>

</p>

<p class="big">

This is a paragraph with a bigger line-height.<br/>

This is a paragraph with a bigger line-height.<br/>

This is a paragraph with a bigger line-height.<br/>

This is a paragraph with a bigger line-height.<br/>

</p>

Página 30 de 310
</body>

</html>

Ajuste de la posición del texto de un elemento


En este ejemplo se muestra cómo cambiar la dirección del texto de un elemento

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {direction:rtl;}

</style>

</head>

<body>

<div>Some text. Default writing direction.</div>

<div class="ex1">Some text. Right-to-left direction.</div>

</body>

</html>

Aumentar el espacio en blanco entre las palabras


En este ejemplo se muestra cómo aumentar el espacio en blanco entre las palabras en un
párrafo.

<!DOCTYPE html>

<html>

Página 31 de 310
<head>

<style>

word-spacing:30px;

</style>

</head>

<body>

<p>

This is some text. This is some text.

</p>

</body>

</html>

Desactive el ajuste de texto dentro de un elemento


En este ejemplo se muestra cómo deshabilitar el ajuste de texto dentro de un elemento.(no
cambia de renglón cuando llega al final y por lo tanto nos aparece un scroll vertical)

<!DOCTYPE html>

<html>

<head>

<style>

white-space:nowrap;
Página 32 de 310
}

</style>

</head>

<body>

<p>

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

</p>

</body>

</html>

Ejemplo con tabla

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table width="400" border="1" cellpadding="10" cellspacing="0" bordercolor="#000000">

<tr>

<td nowrap>Aunque este texto sea m&aacute;s ancho que los 400 p&iacute;xeles

de la tabla, &eacute;sta no puede dividir mediante saltos de l&iacute;nea

el contenido de la misma, por lo que se estira para albergar toda la frase.</td>

</tr>

Página 33 de 310
</table>

</body>

</html>

La alineación vertical de una imagen


En este ejemplo se muestra cómo establecer la alineación vertical de una imagen en un
texto.

<!DOCTYPE html>

<html>

<head>

<style>

img.top {vertical-align:text-top;}

img.bottom {vertical-align:text-bottom;}

</style>

</head>

<body>

<p>An <img src="paper.gif" alt="paper" width="270" height="50" /> image with a default
alignment.</p>

<p>An <img class="top" src="paper.gif" alt="paper" width="270" height="50" /> image


with a text-top alignment.</p>

<p>An <img class="bottom" src="paper.gif" alt="paper" width="270" height="50" />


image with a text-bottom alignment.</p>

</body>

Página 34 de 310
</html>

Todas las propiedades del texto CSS


Propiedad Descripción
color Establece el color del texto

direction Especifica la dirección del texto / escritura dirección

letter-spacing Aumenta o disminuye el espacio entre caracteres en un texto

line-height Ajusta la altura de la línea

text-align Especifica la alineación horizontal del texto

text-decoration Especifica la decoración añadida al texto

text-indent Especifica la sangría de la primera línea de un bloque de texto

text-shadow Especifica el efecto de sombra añadido al texto

text-transform Controla la capitalización del texto

unicode-bidi

vertical-align Establece la alineación vertical de un elemento

white-space Especifica cómo un espacio en blanco dentro de un elemento se maneja

word-spacing Aumenta o disminuye el espacio entre las palabras de un texto

Alineaciones mas complejas (no ver de momento)

http://css-tricks.com/almanac/properties/v/vertical-align/

CSS Fuente

Las propiedades CSS de fuente definen la familia de fuentes, el grosor, el


tamaño y el estilo de un texto.

Diferencia entre Serif y fuentes Sans-serif

Página 35 de 310
En las pantallas de ordenador, los textos sans-serif se consideran más fáciles de leer que
las fuentes serif.

Familias de fuentes CSS


En CSS, hay dos tipos de de familias de fuentes:

 Familia genérica - un grupo de familias de fuentes con un aspecto similar (como


"Serif" o "Monospace")
 Familia tipográfica - una familia de fuentes específicas (como "Times New Roman"
o "Arial")

Familia genérica Familia de fuentes Descripción


Serif Times New Roman Las fuentes serif tienen pequeñas líneas en los
extremos de algunos caracteres
Georgia
Sans-serif Arial "Sans" significa sin - estas fuentes no tienen las
líneas en los extremos de los caracteres
Verdana
Monospace Courier New Todos los caracteres Monospace tienen el mismo
ancho
Lucida Console

Font Family
La familia de fuentes de un texto se establece con la propiedad font-family.

La propiedad font-family debería soportar varios tipos de fuentes. Si el navegador no es


compatible con la primera fuente, intenta con la siguiente fuente.

Coloca en primera posición la fuente que desees, y termina con una familia genérica, para
que el navegador elija un tipo de letra similar en la familia genérica, si no hay otras fuentes
disponibles.

Nota : Si el nombre de una familia de fuentes tiene más que una palabra, debe estar entre
comillas, como font-family: "Times New Roman".

Se especifica más de una familia de fuentes en una lista separada por comas:

Ejemplo
p{font-family:"Times New Roman", Times, serif;}
Página 36 de 310
<!DOCTYPE html>
<html>
<head>
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>

<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

Listado Fuentes "seguras"


http://www.elwebmaster.com/articulos/fuentes-seguras-para-la-web-como-y-cuales-son

Font Style
La propiedad font-style se utiliza sobre todo para especificar texto en cursiva.

Esta propiedad tiene tres valores:

 normal - El texto se muestra normalmente


 cursiva - El texto se muestra en cursiva
 oblicuo - El texto se "inclina" (oblicua es muy similar a la cursiva, pero está menos
soportado, de hecho yo no veo diferencia)

En imprenta, si se vería la diferencia

Ejemplo
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Página 37 de 310
</style>
</head>

<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

</html>

Podemos usar dos clases a la vez haciendo:

<div class="clas1 clas2">


Un texto cualquiera
</div>
Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
p.serif{font-family:"Times New Roman",Times,serif;}
</style>
</head>

<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>

<p class="oblique serif">


Un texto cualquiera
</p>
</body>

</html>

Google Fonts en tu página web


Google nos ha brindado muchas cosas útiles y prácticas en este nuevo universo del internet, el mejor motor de
búsqueda, un sistema operativo muy bueno para los teléfonos, Google Maps, la lista es larga. Ahora, uno de esos
productos que uso mucho últimamente es Google Fonts. Más de 600 tipos de letras disponibles. Totalmente gratis,
para que puedas usar y adornar o arreglar tu página web. Bueno, acá les explico como usarl Google Fonts.

Usando Google Fonts. La Explicación Rápida


En el encabezado del documento HTML vas a añadir la siguiente línea:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Rokkitt”>

Luego, en tu hoja de estilos vas a especificar la fuente (tipo de letra) que deseas usar, así:
<style> body { font-family: ‘Rokkitt'; } </style>

Como usar Google Fonts en tu Página Web


<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Chango">
Página 38 de 310
<div>Usando una fuente tipográfica de Google Fonts</div>

<!-- ### Puedes cambiar el nombre de la fuente a: ### -->

<!-- ### Hanalei, Ribeye, Fondamento, etc... #### -->

<!-- ### No olvides que el nombre tambien lo debes cambiar en el CSS ### -->
<!-- Para mas fuentes ve a google.com/fonts -->

Fichero CSS

@charset "UTF-8";

/* CSS Document */

body {

background-color:white;

font-family: 'Chango', serif;

font-size: 48px;

/* Puedes cambiar el nombre de la fuente a:

Hanalei, Ribeye, Fondamento, etc... */

/* #### Si cambias el nombre de la fuente aca


debes de cambiarlo tambien en el archivo HTML ### */

Como añadir varias fuentes de Google a tu proyecto


Puedes añadir varias fuentes de Google en el mismo enlace, separando cada nombre de
fuente con el carácter ―|‖ y asegurándote de usar el símbolo ―+‖ para las fuentes con
nombres compuestos.

Ejemplo:

<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Finger+Paint|Baumans|Ubuntu+Condensed|Lily+S
cript+One|Roboto|Rosario" />

Tamaño de la Fuente
La propiedad font-size establece el tamaño del texto.

Ser capaz de manejar el tamaño del texto es importante en el diseño web. Sin embargo, no
debes usar ajustes del tamaño de fuente para hacer pasar párrafos como encabezados o
títulos como párrafos.

Utiliza siempre las etiquetas HTML adecuadas, como <h1> -<h6> para los títulos y <p>
para párrafos.

El valor de font-size puede ser un tamaño absoluto o relativo.

Tamaño absoluto:
Página 39 de 310
 Establece el texto a un tamaño especificado
 No permite al usuario cambiar el tamaño de texto en todos los navegadores (malo
por razones de accesibilidad)
 El tamaño absoluto es útil cuando el tamaño físico de la salida se conoce

Tamaño relativo:

 Establece el tamaño en relación con los elementos del entorno


 Permite al usuario cambiar el tamaño del texto en los navegadores

Si no se especifica un tamaño de fuente, el tamaño predeterminado para el texto normal,


como párrafos, es 16px (16px = 1em).

1EM equivale a la medida de la letra "M" del tamaño de letra que estemos utilizando (y se pilla la M
porque sus dimensiones son más o menos cuadradas, mide más o menos lo mismo de alto que de
ancho).

Por defecto el tamaño de letra debería ser de 16px, es decir que si no toco nada 1EM = 16px. PERO,
aqui está la clave, si yo redefino el FONT-SIZE el tamaño de 1EM VARIARÁ TAMBIÉN. Es decir que si
yo pongo body { font-size: 10px } 1EM=10px.

Establecer Tamaño de fuente con píxeles


Ajustar el tamaño del texto con píxeles ofrece un control total sobre el tamaño del texto:

Ejemplo
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in px allows Internet Explorer 9, Firefox, Chrome, Opera, and
Safari to resize the text.</p>
<p><b>Note:</b> This example does not work in IE, prior version 9.</p>

</body>
</html>

Página 40 de 310
El ejemplo anterior permite a Internet Explorer 9, Firefox, Chrome, Opera y Safari cambiar el
tamaño del texto.

Nota: El ejemplo anterior no funciona en la versión de IE anterior a la 9.

El texto se puede cambiar el tamaño de todos los navegadores que utilizan la herramienta de
zoom (sin embargo, esto cambia el tamaño de la página entera, no sólo el texto).

Establecer tamaño de fuente con Em


Para evitar problemas de cambio de tamaño con las versiones anteriores de Internet
Explorer, muchos desarrolladores usan em en lugar de píxeles.

La unidad de medida recomendado por el W3C es el em.

1em es igual al tamaño actual de la fuente. El tamaño de texto por defecto en los
navegadores es 16px. Por lo tanto, el tamaño predeterminado de 1em es 16px.

El tamaño se puede calcular de píxeles a em utilizando esta fórmula: pixeles / 16 = em

Ejemplo
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it
becomes larger/smaller than it should.
</p>
</body>
</html>

En el ejemplo anterior, el tamaño del texto en em es el mismo que el ejemplo anterior en


píxeles.Sin embargo, con el tamaño de la EM, es posible ajustar el tamaño del texto en todos
los navegadores.

Por desgracia, todavía hay un problema con las versiones anteriores de IE. El texto se hace
más grande de lo que debiera cuando agrandamos la fuente y más pequeño de lo que
debería cuando bajamos el zoom.

Página 41 de 310
Use una combinación de porcentaje y Em
La solución que funciona en todos los navegadores, es establecer una fuente predeterminada
de tamaño en porcentaje para el elemento <body>:

Ejemplo
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

<!DOCTYPE html>
<html>
<head>
<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all
major browsers, and allows all browsers to resize the text!</p>

</body>
</html>

Nuestro código ahora funciona muy bien! Se muestra el mismo tamaño del texto en todos los
navegadores, y permite que todos los navegadores hacer zoom o cambiar el tamaño del
texto!

Más ejemplos
Establezca el grosor de la fuente
En este ejemplo se muestra cómo establecer la audacia de una fuente.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Página 42 de 310
</style>
</head>

<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>

</html>

Establecer la variante de la fuente


en este ejemplo se muestra cómo establecer la variante de una fuente.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>

<body>
<p class="normal">Hola a Todo el Mundo.</p>
<p class="small">Hola a Todo el Mundo.</p>
</body>
</html>

Todas las propiedades de la fuente en una declaración


En este ejemplo se muestra cómo utilizar la propiedad abreviada para establecer todas las
propiedades de la fuente en la declaración.

Propiedad resumen Font


Existe una manera sencilla de reflejar todo los cambios que hemos realizado hasta el
momento, y esta es la propiedad ―font‖. Muchos le llamarán atajo, pero sigue siendo una
propiedad en sí y básicamente su función consiste en combinar los valores de ―font-style‖,
―font-variant‖, ―font-weight‖, ―font-size‖, ―line-height‖ y ―font-family‖ en una sola línea de
texto. La manera de definir su valor es separar cada propiedad separada por un espacio,
como se muestra aquí:

p { font: bold small-caps 12px 1.5 arial, helvetica, sans-serif }

La propiedad compuesta font permite definir simultáneamente las


propiedades relacionadas con el tipo de letra: font-style, font-

Página 43 de 310
variant, font-weight, font-size , line-height y font-family (explicadas más
adelante en esta misma página).
Al escribir la propiedad compuesta, el orden en que deben aparecer
los valores es el orden en que aparecen las propiedades simples en el
párrafo anterior. Las únicas propiedades que deben aparecer
obligatoriamente son font-size y font-family. Si se escribe la
propiedad line-height debe aparecer separada de font-size por una
barra (/).
p.uno {
font: 150% sans-serif;
}
Esto es un párrafo
con fuente sans-
serif (en Windows
suele ser Arial) al
150%.
p {
font: bold 90% monospace; Esto es un párrafo con
}
fuente monospace (en Windows
suele ser Courier) al 90% y
en negrita.

p {

Esto es un párrafo
font: oblique bold 120%
cursive;
}

con fuente cursive (en


Windows suele ser
Comic Sans) al 120%,
en negrita y en
oblicuo.
p {
font: small-caps 100%/200%
serif;
} ESTO ES UN PÁRRAFO CON
Página 44 de 310
FUENTE SERIF (EN WINDOWS

SUELE SER TIMES NEW ROMAN)

AL 100%, CON UN INTERLINEADO

DOBLE, Y EN VERSALITAS.

Si no están las propiedades en el orden correcto, o falta alguna de las


propiedades obligatorias, los navegadores no hacen caso.
p {
font: monospace 150%; Esto debería ser un párrafo con
/* el orden no es correcto
*/ fuente monospace (en Windows suele ser Courier)
} al 150%.

p {
font: bold 90%;
/* falta font-family */ Esto debería ser un párrafo al 90% y en negrita.
}

Si los primeros valores son correctos, pero al final hay valores que
deberían estar en otro lugar, los navegadores aplican los valores
correctos e ignoran los valores finales (font-family también se ignora).
p {
font: oblique 120% sans-serif bold;
/* bold debería estar al principio */ Esto debería ser un
}
párrafo con fuente sans-
serif (en Windows suele
ser Arial) al 120%, y en
negrita.
p {
font: 120% sans-serif small-caps;
/* small-caps debería estar al principio Esto debería ser un
*/
} párrafo con fuente sans-
serif (en Windows suele
ser Arial) al 120% y en
Página 45 de 310
versalitas.

<!DOCTYPE html>
<html>
<head>
<style>
/*Orden seguido font-style, font-variant, font-weight, font-size , line-
height y font-family */
p.ex1
{
font:15px arial,sans-serif;
}

p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
</style>
</head>

<body>
<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a
paragraph.</p>
</body>
</html>

Todas las propiedades de fuente CSS


Propiedad Descripción
font Establece todas las propiedades de la fuente en la declaración

font-family Especifica la familia de fuentes para el texto

font-size Especifica el tamaño de fuente del texto

line-height Especifica el tamaño del interlineado

font-style Especifica el estilo de fuente para el texto

font-variant Especifica si el texto debe aparecer en una fuente small-caps

font-weight Especifica la anchura de una fuente

Página 46 de 310
CSS Links

Los enlaces pueden tener también estilos.

Styling Links
Los enlaces pueden tener cualquier propiedad CSS (por ejemplo, color, font-family, fondo, etc.)

Los enlaces son que pueden tenerdiferentesestilos dependiendo del estado en que están

Los cuatro estados enlaces son los siguientes:

 a: link - un enlace normal, no visitado


 a: visited - un enlace que el usuario ha visitado
 a: hover - un enlace cuando el usuario pone el mouse sobre el
 a: active - un enlace el momento en que se hace clic en él

Ejemplo
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>

<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>

Al configurar el estilo de los enlaces, hay algunas reglas de orden:

 a: hover debe ir después a: link y: visited


 a: active debe venir después de un: hover

Estilos comunes de enlace


En el ejemplo anterior, el color del enlace cambia en función del estado en que está

Página 47 de 310
Vamos a ver algunas de las formas comunes de dar estilo a los enlaces:

DecoraciónTexto
La propiedad text-decoration se utiliza sobre todo para eliminar el subrayado de enlaces:

Ejemplo
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

<!DOCTYPE html>
<html>
<head>
<style>
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
</style>
</head>

<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>

Color de fondo
La propiedad background-color especifica el color de fondo en los enlaces:

Ejemplo
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

<!DOCTYPE html>
<html>
<head>
<style>
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>

<body>
<p><b><a href="http://google.es" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>

Página 48 de 310
Más ejemplos
Añadir estilos a hipervínculos
En este ejemplo se muestra cómo agregar otros estilos a hipervínculos.

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>Mouse over the links to see them change layout.</p>

<p><b><a class="one" href="http://google.es" target="_blank">This link changes


color</a></b></p>
<p><b><a class="two" href="http://google.es" target="_blank">This link changes font-
size</a></b></p>
<p><b><a class="three" href="http://google.es" target="_blank">This link changes background-
color</a></b></p>
<p><b><a class="four" href="http://google.es" target="_blank">This link changes font-
family</a></b></p>
<p><b><a class="five" href="http://google.es" target="_blank">This link changes text-
decoration</a></b></p>
</body>

</html>

Avanzado - Crear cuadros de enlace


Este ejemplo muestra un ejemplo más avanzado en el que se combinan varias propiedades CSS para
mostrar los enlaces como cuadros.

Página 49 de 310
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="http://google.es" target="_blank">Esto es un enlace</a>
</body>
</html>

CSS listas

Las propiedades de la lista de CSS permiten:

 Establecer diferentes marcadores de elementos de lista para las listas ordenadas


 Establecer diferentes marcadores de elementos de lista para listas desordenadas
 Establecer una imagen como marcador de elemento de la lista

Lista
En HTML, hay dos tipos de listas:

 listas no ordenadas - los elementos de la lista están marcados con balas


 listas ordenadas - los elementos de la lista están marcados con números o letras

Con CSS, las listas pueden utilizar imágenes como marcadoresde los ítems de la lista.

Página 50 de 310
Diferentes marcadores para los items de lista
El tipo de marcador de elemento de lista se especifica con la propiedad list-style-type:

Ejemplo
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}


ol.d {list-style-type: lower-alpha;}

Example of unordered lists:

o Coffee
o Tea
o Coca Cola

 Coffee
 Tea
 Coca Cola

Example of ordered lists:

I. Coffee
II. Tea
III. Coca Cola

a. Coffee
b. Tea
c. Coca Cola

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>Example of unordered lists:</p>

<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
<li>Coffee</li>

Página 51 de 310
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Unos estilos son para listas desordenadas, y otros para listas ordenadas.

Una imagen como marcador de elemento de lista


Para especificar una imagen como marcador de elemento de la lista, utiliza la propiedad list-style-image:

Ejemplo
ul
{
list-style-image: url('sqpurple.gif');
}

http://www2.uca.es/iconos3/sqpurple.gif

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

El ejemplo anterior no se muestra igual en todos los navegadores. IE y Opera mostrarán la imagen con
una posición un poco más alta que Firefox, Chrome y Safari (en las últimas versiones no se distingue)

Si deseas que la imagen se coloque por igual en todos los navegadores, una solución se explica a
continuación.

Solución Crossbrowser
Página 52 de 310
El siguiente ejemplo muestra la imagen del marcador por igual en todos los navegadores:

Ejemplo
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url('sqpurple.gif');
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>

</html>

Ejemplo explicado:

 Para ul:
o Ajusta el list-style-type a none para quitar el marcador de elemento de la lista
o Establece el relleno y el margen para 0px (para la compatibilidad cross-browser)
 Para todos los li del ul :
o Establece la URL de la imagen, y mostrar sólo una vez (no-repeat)
o Coloca la imagen donde desee (izquierda y abajo 0px 5px)
o Coloca el texto en la lista con padding-left

List - propiedad abreviada

Página 53 de 310
También es posible especificar todas las propiedades de lista en una sola propiedad. Esto se llama una
propiedad resumida.

La propiedad abreviada utilizada para las listas, es la propiedad list-style:

Ejemplo
ul
{
list-style: square url("sqpurple.gif");
}

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style:square url("sqpurple.gif");
}
</style>
</head>

<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Cuando se utiliza la propiedad resumida, el orden de los valores son:

 list-style-type
 list-style-position (para una descripción, consulte la tabla de propiedades CSS a continuación)
 list-style-image

No importa si uno de los valores anteriores se han perdido, mientras que el resto están en el orden
especificado.

Más ejemplos
Todos los diferentes elementos de lista para las listas de marcadores
Este ejemplo muestra todos los diferentes marcadores de elementos de lista en CSS.

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}

Página 54 de 310
ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}

ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}

</style>
</head>

<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

Página 55 de 310
<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="m">
Página 56 de 310
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="u">
<li>None type</li>
Página 57 de 310
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

Todas las propiedades de la lista de CSS


Propiedad Descripción
list-style Establece todas las propiedades de una lista en una declaración
list-style-image Especifica una imagen como marcador de ítems de lista
list-style-position Especifica si los marcadores list-item debe aparecer dentro o fuera del flujo de
contenido
list-style-type Especifica el tipo de marcador de ítems de lista

CSS Tablas

El aspecto de una tabla HTML puede ser mejorado con CSS:

Empresa Contacto País


Alfreds Futterkiste Maria Anders Alemania
Berglunds snabbköp Christina Berglund Suecia
Centro comercial Moctezuma Francisco Chang México
Ernst Handel Roland Mendel Austria
Isla Trading Helen Bennett Reino Unido
Königlich Essen Philip Cramer Alemania
Riendo Winecellars Bacchus Yoshi Tannamuri Canadá
Magazzini Alimentari Riuniti Giovanni Rovelli Italia
Norte / Sur Simon Crowther Reino Unido
París spécialités Marie Bertrand Francia
The Big Cheese Liz Nixon EE.UU.
Vaffeljernet Palle Ibsen Dinamarca

Bordes de tabla
Para especificar los bordes de la tabla en CSS, utiliza la propiedad border.

El ejemplo siguiente especifica un borde negro para la tabla, y los elementos th y td:

Ejemplo
Página 58 de 310
table, th, td
{
border: 1px solid black;
}

Firstname Lastname
Peter Griffin
Lois Griffin

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

Fíjate como la tabla del ejemplo anterior tiene bordes dobles. Esto se debe a que la tabla y los
elementos th / td tienen bordes separados.

Para mostrar un borde sencillo para la tabla, utiliza la propiedad border-collapse.

Border-Collapse
La propiedad border-collapse establece si los bordes de la tabla se colapsan en un solo borde o por lo
contrario deben estar separados:

Ejemplo
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

Firstname Lastname

Página 59 de 310
Peter Griffin
Lois Griffin

Note: If a !DOCTYPE is not specified, the border-collapse property can


produce unexpected results in IE8 and earlier versions.

<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p>
<b>Note:</b>
If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results in IE8 and
earlier versions.
</p>
</body>
</html>

Inciso uso de navegadores

Distintos estudios que cada uno dice una cosa

Browser Statistics w3schools.com

2013 Internet Explorer Firefox Chrome Safari Opera


March 13.0 % 28.5 % 51.7 % 4.1 % 1.8 %

Página 60 de 310
Fuente http://www.softzone.es/2013/02/04/internet-explorer-domina-el-mercado-de-los-
navegadores-con-mas-de-un-55-de-cuota/

Ancho y Alto del Cuadro


La anchura y altura de una tabla está definida por las propiedades anchura y la altura.

El ejemplo siguiente establece el ancho de la tabla a 100%, y la altura de los elementos th a 50px:

Ejemplo
table
{
width:100%;
}
th
{
height:50px;
}

<!DOCTYPE html>
<html>

Página 61 de 310
<head>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Alineación del texto de la Tabla


El texto de una tabla está alineada con las propiedades text-align y vertical-align .

La propiedad text-align establece la alineación horizontal, como izquierda, derecha o centro:

Ejemplo
td
{
text-align:right;
}

<!DOCTYPE html>
<html>

Página 62 de 310
<head>
<style>
table,td,th
{
border:1px solid black;
}
td
{
text-align:right;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Haciendo que afecte solo a determinadas columnas.

<!DOCTYPE html>

<html>

<head>

<title>CSS-ESTILOS TABLAS</title>

<style>

table,th,td
{
border:1px solid blue;
}
table
{
width:100%;
}

Página 63 de 310
th
{
height:50px;
}
td.der
{
text-align:right;
}

</style>

</head>

<body>

<table>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Ahorros</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="der">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td class="der">$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="der">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td class="der">$250</td>
</tr>
</table>

<p>
<strong>Note:</strong>
If a !DOCTYPE is not specified, the border-collapse property can produce unexpected
results in IE8 and earlier versions
</p>

</body>

<hr/>

</html>

La propiedad vertical-align establece la alineación vertical, como arriba, abajo o en medio:

Ejemplo
td
{
height:50px;
vertical-align:bottom;
}

Firstname Lastname Savings


Página 64 de 310
Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Cleveland Brown $250

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:bottom;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Página 65 de 310
Relleno de Cuadro
Para controlar el espacio entre el borde y el contenido de una tabla, utiliza la propiedad de relleno
(padding) en los elementos th y td:

Ejemplo
td
{
padding:15px;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Colores de Tabla
En el ejemplo siguiente se especifica el color de los bordes y el color del texto y del fondo de los
elementos th:

Página 66 de 310
Ejemplo
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

Más ejemplos
Página 67 de 310
Haz una tabla de fantasía
En este ejemplo se muestra cómo crear una tabla de lujo.

<!DOCTYPE html>
<html>
<head>
<style>
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
Página 68 de 310
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>

REGLAS PARES E IMPARES

Una forma de mejorar la legibilidad de tablas de gran tamaño es pintar las


filas de colores alternados. Por ejemplo, en la tabla que aparece a
continuación, las filas pares tienen fondo gris claro y las filas impares, fondo
blanco. Las reglas para hacerlo son extremadamente sencillas:

(even/par, odd/impar)
tr:nth-child(even) {background: #CCC }
tr:nth-child(odd) {background: #FFF}

Página 69 de 310
De hecho, CSS no sólo permite alternar entre pares e impares, sino también
según intervalos arbitrarios. Las palabras claves "even" y "odd" no son más
que abreviaturas de conveniencia. Por ejemplo, con una lista larga podríamos
hacer esto:
li:nth-child(5n+3) {font-weight: bold}

Lo que quiere decir que cada quinto elemento contando a partir del tercero
aparecerá en negrita. Dicho de otro modo, estarán en negrita los elementos
con la numeración 3, 8, 13, 18, 23, etc.

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
tr:nth-child(even) {background: #CCC }
tr:nth-child(odd) {background: #FFF}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
Página 70 de 310
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

nth-child cuenta como hijos todos los elementos del body, por lo que
en el siguiente ejemplo le estamos diciendo el elemento <p> que sea el
segundo hijo (el primer hijo es el encabezado <h1>).Una etiqueta div o
un Br no lo cuenta

También funcionaría con párrafos


<!DOCTYPE html>
<html>
<head>
<style>
/*podemos probar con nth-child(odd), nth-child(even) o nth-child(2n+1)*/
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p><b>Note:</b> Internet Explorer does not support the :nth-child() selector.</p>
</body>
</html>

Página 71 de 310
COLUMNAS PARES E IMPARES

Lo mismo vale para columnas de tablas, pero entonces debe haber un


elemento del documento que se corresponda con la columna. A tal fin existe
en HTML el elemento COL. La tabla debe tener un COL al principio de cada
columna:
<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Mes<th>1994<th>1995<th>1996...

(El elemento COL sirve para otros usos además de la aplicación de estilos,
pero en este caso lo único que necesitamos es que haya elementos COL).
Las siguientes reglas ponen fondo amarillo a la primera columna y luego
fondo gris a las columnas impares a partir de la número 3:
col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

Página 72 de 310
El fondo de las filas (TR) se dibuja enfrente del fondo de las columnas
(COL), de modo que no hay que ponerle fondo a las filas, o el fondo de
las columnas no será visible.

<!DOCTYPE html>
<html>
<head>
<style>
table.ex2 {border-spacing: 0}
table.ex2 td, th {padding: 0 0.2em}
table.ex2 col:first-child {background: #FF0}
table.ex2 col:nth-child(2n+3) {background: #CCC}
</style>
</head>
<body>

<pre>
col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
</pre>
<table class="ex2">
<colgroup>
<col><col><col><col><col><col><col><col><col><col>
</colgroup>
<tbody>
<tr>
<th>Mes</th>
<th>1994</th>
<th>1995</th>
<th>1996</th>
<th>1997</th>
<th>1998</th>
<th>1999</th>
<th>2000</th>
<th>2001</th>
<th>2002</th>
</tr>
<tr>
<td>ene</td>
<td>14</td>
<td>13</td>

Página 73 de 310
<td>14</td>
<td>13</td>
<td>14</td>
<td>11</td>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>feb</td>
<td>13</td>
<td>15</td>
<td>12</td>
<td>15</td>
<td>15</td>
<td>12</td>
<td>14</td>
<td>13</td>
<td>13</td>
</tr>
<tr>
<td>mar</td>
<td>16</td>
<td>15</td>
<td>14</td>
<td>17</td>
<td>16</td>
<td>15</td>
<td>14</td>
<td>15</td>
<td>15</td>
</tr>
</tbody>
</table>
</body>
</html>

Ajusta la posición de la leyenda de la tabla


Este ejemplo muestra cómo colocar el título de la tabla.

Table 1.1 Customers


Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK

Note: IE8 supports the caption-side property if a !DOCTYPE is specified.


<!DOCTYPE html>
<html>
<head>
Página 74 de 310
<style>
caption
{
caption-side:bottom;
}
</style>
</head>

<body>

<table border="1">
<caption>Table 1.1 Customers</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>

<p><b>Note:</b> IE8 supports the caption-side


property if a !DOCTYPE is specified.</p>
</body>
</html>

CSS Box Model


El modelo de caja CSS

Página 75 de 310
Todos los elementos HTML pueden ser considerados como cajas. En CSS, el término "modelo de caja" se
usa cuando se habla de diseño y de layout.

El modelo de caja CSS es esencialmente una caja que envuelve los elementos HTML, y se compone de:
los márgenes, bordes, el relleno y el contenido en sí.

El modelo de caja nos permite colocar un borde alrededor de los elementos y los elementos espaciales
en función de otros elementos.

La siguiente imagen ilustra el modelo de caja:

Explicación de las diferentes partes:

 Margen - Referencia un área alrededor del borde. El margen no tiene un color de fondo, que es
completamente transparente. Se aplica a todos los elementos, salvo margin-top y margin-
bottom que sólo se aplican a los elementos de bloque y a las imágenes.
 Borde - Un borde que va alrededor del relleno y contenido. El borde se ve afectado por el color
de fondo de la caja
 Relleno –Hace referencia a un área alrededor del contenido. El relleno se ve afectado por el
color de fondo de la caja
 Contenido - El contenido de la caja, donde aparecen el texto y las imágenes

Con el fin de establecer el ancho y el alto de un elemento correctamente en todos los navegadores, lo
que necesitas saber es cómo funciona el modelo de caja.

Anchura y altura de un elemento

Importante: Cuando estableces el ancho y el alto de un elemento con CSS, solo estableces la
anchura y la altura del área de contenido . Para calcular el tamaño total de un elemento, también debe
agregar el relleno, los bordes y los márgenes.

La anchura total del elemento en el siguiente ejemplo es 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Vamos a hacer los cálculos:


250px (anchura)
+ 20px (relleno izquierdo y derecho)
+ 10px (borde izquierdo y derecho)
+ 20px (margen izquierdo y derecho)
= 300px

Página 76 de 310
Supóngamos que sólo tenemos 250 píxeles de espacio. Haremos un elemento con un ancho total de
250px:

Ejemplo
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

<!DOCTYPE html>
<html>
<head>
<style>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="w3css.gif" width="250px" height="250px" />
<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>
</body>
</html>

La anchura total de un elemento debe calcularse así:

Ancho = ancho total del elemento + relleno izquierdo + relleno derecho + borde izquierdo + borde
derecho + margen izquierdo + margen derecho

La altura total de un elemento se calcula de este modo:

Altura total del elemento = altura +relleno superior + relleno inferior + borde superior + borde inferior
+ margen superior + margen inferior

Problema de compatibilidad de los Navegadores


Versiones de IE8 y versiones anteriores de IE, incluyen el relleno y el borde en la propiedad anchura.
Página 77 de 310
Para solucionar este problema, añade un <!DOCTYPE html> en la página HTML.

CSS Bordes

Propiedades CSS para Border


Las propiedades de borde CSS permiten especificar el estilo y el color del borde de un elemento.

Border Style
La propiedad border-style especifica el tipo de borde que desea mostrar.

Ninguna de las propiedades de borde tendrá ningún efecto a menos que la propiedad border-style se
establezca!

valores border-style:
none: Define que no habrá borde

dotted: Define un borde de puntos

dashed: Define un borde discontinuo

solid: Define un borde sólido

double: define dos líneas. La anchura de las dos líneas son el mismo que el valor límite de ancho

groove: Define un borde acanalado 3D. El efecto depende del valor de border-color

ridge: Define un borde estriado 3D. El efecto depende del valor de border-color

inset: Define un borde inset 3D (recuadro). El efecto depende del valor de border-color

outset: define una borde outset 3D. El efecto depende del valor de border-color

Ejemplo

Página 78 de 310
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>

Página 79 de 310
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>

</html>

Border-width
La propiedad border-width se usa para ajustar el ancho del borde.

El ancho se establece en píxeles, o mediante el uso de uno de los tres valores predefinidos: thin,
medium, o thick

Nota: La propiedad "border-width" no funciona si se utiliza solo. Utilice la propiedad "border-style" para
establecer las bordes primero.

Ejemplo
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

<!DOCTYPE html>
<html>
<head>
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style"
property to set the borders first.</p>
</body>

</html>

Página 80 de 310
Border-Color
La propiedad border-color se utiliza para establecer el color del borde. El color se puede ajustar por:

 Nombre - indique el nombre del color, como "red"


 RGB - especifica un valorRGB como "rgb (255,0,0)"
 Hex – indica un valor hexadecimal como "# ff0000"

También puede configurar el color del borde como "transparent" (transparente).

Nota: La propiedad "border-color" no funciona si se utiliza solo. Utilice la propiedad "border-style" para
establecer las fronteras primero.

Ejemplo
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

<!DOCTYPE html>
<html>
<head>
<style>
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>

<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style"
property to set the borders first.</p>
</body>
</html>

Border - lados individuales


En CSS es posible especificar límites diferentes para cada uno de los lados:

Página 81 de 310
Ejemplo
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>

El ejemplo anterior también se puede ajustar con una sola propiedad:

Ejemplo
border-style:dotted solid;

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:dotted solid;
}
</style>
</head>

<body>
<p>2 different border styles.</p>
</body>
</html>

La propiedad estilo de borde puede tener desde uno a cuatro valores.

 border-style: dotted solid double dashed;


o borde superior es dotted
o borde derecho es solid
o borde inferior es el double
o borde izquierdo es dashed

 border-style: dotted solid double;


o borde superior es dotted
Página 82 de 310
o bordes derecho e izquierdo son solid
o borde inferior es double

 border-style: dotted solid;


o bordes superior e inferior es dotted
o bordes derecho e izquierdo son solid

 border-style: dotted;
o los cuatro bordes son dotted

Hemos utilizado la propiedad border-style en el ejemplo anterior. Sin embargo, también funciona con
border-width y border-color

Border - Abreviatura de las propiedades


Como se puede ver en los ejemplos anteriores, hay muchas propiedades a tener en cuenta cuando se
trata de bordes.

Para acortar el código, también es posible especificar todas las propiedades de bordes individuales en
una propiedad. Esto se llama una propiedad resumida.

La propiedad border es una forma abreviada de las propiedades de bordes individuales siguientes:

 border-width
 border-style (requerido)
 border-color

Ejemplo
border:5px solid red;

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:5px solid red;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

Más ejemplos
Página 83 de 310
Todas las propiedades de borde superior en una declaración
este ejemplo se muestra una propiedad abreviada para establecer todas las propiedades para el borde
superior en una declaración.

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>

<body>
<p>This is some text in a paragraph.</p>
</body>

</html>

Establezca el estilo del borde inferior


Este ejemplo muestra cómo establecer el estilo del borde inferior.

<!DOCTYPE html>
<html>
<head>
<style>
p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>

<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>

Ajuste el ancho del borde izquierdo


Este ejemplo muestra cómo establecer el ancho del borde izquierdo.

<!DOCTYPE html>

<html>
<head>
<style>
p
{
Página 84 de 310
border-style:solid;
border-left-width:15px;
}
</style>
</head>

<body>
<p><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-
style" property to set the borders first.</p>
</body>
</html>

Ajuste el color de los cuatro bordes


Este ejemplo muestra cómo establecer el color de los cuatro bordes. Se puede tener de uno a cuatro
colores.

<!DOCTYPE html>
<html>
<head>
<style>
p.one
{
border-style:solid;
border-color:#0000ff;
}
p.two
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
p.three
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>

<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style"
property to set the borders first.</p>
</body>
</html>

Ajuste el color del borde derecho


Este ejemplo muestra cómo establecer el color del borde derecho.

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border-style:solid;
border-right-color:#ff0000;
}
</style>
</head>

Página 85 de 310
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>

Todas las propiedades de borde CSS


Propiedad Descripción
Border Establece todas las propiedades de borde en una declaración

border-bottom Establece todas las propiedades del borde de fondo en una declaración

border-bottom-color Establece el color del borde inferior

border-bottom-style Establece el estilo del borde inferior

border-bottom-width Establece el ancho del borde inferior

border-color Establece el color de los cuatro bordes

border-left Establece todas las propiedades del borde izquierdo en una declaración

border-left-color Establece el color del borde izquierdo

border-left-style Establece el estilo del borde izquierdo

border-left-width Establece el ancho del borde izquierdo

border-right Establece todas las propiedades del borde derecho en una declaración

border-right-color Establece el color del borde derecho

border-right-style Establece el estilo del borde derecho

border-right-width Establece el ancho del borde derecho

border-style Establece el estilo de los cuatro bordes

border-top Establece todas las propiedades de borde superior en una declaración

border-top-color Establece el color del borde superior

border-top-style Establece el estilo del borde superior

border-top-width Establece el ancho del borde superior

border-width Establece el ancho de los cuatro bordes

Página 86 de 310
CSS Outlines

Un contorno es una línea que se dibuja en torno a los elementos (fuera de los bordes)
para que el elemento "destaque".

Las propiedades del contorno especifican el estilo, el color y el ancho de un contorno.

Esquema CSS
Sin embargo, la propiedad Outline es diferente de la propiedad border.

El contorno no es una parte de las dimensiones de un elemento; anchura total del elemento y la altura
no se ve afectada por el ancho del contorno.

Se coloca encima del margen, no afecta a las dimensiones del


bloque.

<!DOCTYPE html>
<html>
<head>
<style>
p.one
{
border:1px solid red;
outline-style:solid;
outline-width:10px;
margin:100px;

Página 87 de 310
}

</style>
</head>
<body>

<p class="one">This is some text in a paragraph.</p>

<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is


specified.</p>
</body>
</html>

Ejemplos
Traza una línea alrededor de un elemento (contorno)
En este ejemplo se muestra cómo dibujar una línea alrededor de un elemento, fuera del borde.

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>

<body>
<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is
specified.</p>
</body>
</html>

Definir el estilo de un outline


En este ejemplo se muestra cómo establecer el estilo de un outline.

<!DOCTYPE html>
<html>
<head>
<style>
p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>

<p class="dotted">A dotted outline</p>


<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
Página 88 de 310
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
<b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is
specified.
</body>
</html>

Establecer el color de un outline


En este ejemplo se muestra cómo establecer el color de un esquema.

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
outline-style:dotted;
outline-color:#00ff00;
}
</style>
</head>

<body>
<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.</p>
</body>
</html>

Establecer el ancho de un outline


En este ejemplo se muestra cómo establecer el ancho de un esquema.

<!DOCTYPE html>
<html>
<head>
<style>
p.one
{
border:1px solid red;
outline-style:solid;
outline-width:thin;
}
p.two
{
border:1px solid red;
outline-style:dotted;
outline-width:3px;
}
</style>
</head>
<body>

<p class="one">This is some text in a paragraph.</p>


<p class="two">This is some text in a paragraph.</p>

<p><b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is


specified.</p>
</body>
</html>

Todas las Propiedades del esquema CSS

Página 89 de 310
El número en el "CSS" en la columna indica qué versión de CSS se define la propiedad (CSS1 o CSS2).

Propiedad Descripción Valores CSS


Outline Establece todas las propiedades de esquema en una outline-color 2
declaración outline-style
outline-width
inherit
outline-color Establece el color de un esquema color_name 2
hex_number
rgb_number
invert
inherit
outline-style Establece el estilo de un esquema none 2
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width Establece el ancho de un esquema thin 2
medium
thick
length
inherit

CSS Margen

Las propiedades de los márgenes CSS definen el espacio alrededor de los elementos.

Margen
El margen hace referencia a un área alrededor de un elemento (fuera del borde). El margen no tiene un
color de fondo, y es completamente transparente.

El margen superior, derecho, inferior e izquierdo se pueden cambiar independientemente mediante el


uso de propiedades separadas. Una propiedad margen abreviada se puede utilizartambién, para cambiar
todos los márgenes a la vez.
El comportamiento de los márgenes verticales es más complejo de lo que se puede imaginar. Cuando se
juntan dos o más márgenes verticales, se fusionan de forma automática y la altura del nuevo margen
será igual a la altura del margen más alto de los que se han fusionado.

Página 90 de 310
Figura: Fusión automática de los márgenes verticales

De la misma forma, si un elemento está contenido dentro de otro elemento, sus márgenes verticales se
fusionan y resultan en un nuevo margen de la misma altura que el mayor margen de los que se han
fusionado:

Figura: Fusión de los márgenes de los elementos interiores

Aunque en principio puede parecer un comportamiento extraño, la razón por la que se propuso este
mecanismo de fusión automática de márgenes verticales es el de dar uniformidad a las páginas web
habituales. En una página con varios párrafos, si no se diera este comportamiento y se estableciera un
determinado margen a todos los párrafos, el primer párrafo no mostraría un aspecto homogéneo
respecto de los demás.

Figura:Motivo por el que se fusionan automáticamente los márgenes verticales

Página 91 de 310
En el caso de un elemento que se encuentra en el interior de otro y sus márgenes se fusionan de forma
automática, se puede evitar este comportamiento añadiendo un pequeño relleno (padding: 1px) o un
borde (border: 1px solid transparent) al elemento contenedor.

Valores posibles
Valor Descripción
auto El navegador calcula un margen
length Especifica un margen en px, pt, cm, valor por defecto es 0px etc
% Especifica un margen en porcentaje de la anchura del elemento que lo contiene
inherit Especifica que el margen se hereda del elemento padre

Es posible utilizar valores negativos, para solapar contenido.

Margen - lados individuales


En CSS, es posible especificar diferentes márgenes por cada uno de los lados:

Ejemplo
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

<!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>

<body>
<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>
</body>

</html>

Margen - Abreviatura de las propiedades


Para acortar el código, es posible especificar todas las propiedades del margen en una propiedad
resumen.La propiedad abreviada para todas las propiedades de margen es "margin":
Página 92 de 310
Ejemplo
margin:100px 50px;

<!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>

<body>
<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>
</body>

</html>

La propiedad de margen puede tener de uno a cuatro valores.

 margin: 25px 50px 75px 100px;


o margen superior es de 25px
o margen derecho es 50px
o margen inferior es de 75px
o margen izquierdo es de 100px

 margin: 25px 50px 75px;


o margen superior es de 25px
o márgenes derecho e izquierdo son 50px
o margen inferior es de 75px

 margin: 50px 25px;


o márgenes superior e inferior son 25px
o márgenes derecho e izquierdo son 50px

 margin: 25px;
o los cuatro márgenes son 25px

Más ejemplos
Establece el margen superior de un texto
Este ejemplo muestra cómo se establece el margen superior de un texto en cm

Página 93 de 310
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {margin-top:2cm;}
</style>
</head>
<body>
<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 2cm top margin.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>

Establece el margen inferior de un texto usando un valor de porcentaje


este ejemplo muestra cómo se establece el margen inferior en porcentaje, respecto a la altura del
elemento que lo contiene.

<!DOCTYPE html>
<html>
<head>
<style>
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>

<p>This is a paragraph with no margin specified.</p>


<p class="bottommargin">This is a paragraph with a specified bottom margin.</p>
<p>This is a paragraph with no margin specified.</p>

</body>
</html>

Todas las propiedades de los márgenes CSS


Propiedad Descripción
margin Una propiedad abreviada para establecer las propiedades de los márgenes en una
declaración
margin-bottom Establece el margen inferior de un elemento
margin-left Establece el margen izquierdo de un elemento
margin-right Establece el margen derecho de un elemento
margin-top Establece el margen superior de un elemento

Página 94 de 310
CSS Padding (Relleno)

Las propiedades de relleno CSS definen el espacio entre el borde del elemento y el
contenido del elemento.

Relleno
El relleno reservca un área alrededor del contenido (dentro del borde) de un elemento. El relleno se ve
afectado por el color de fondo del elemento.

El relleno superior, derecho, inferior e izquierdo se pueden cambiar independientemente con el uso de
propiedades separadas. Una propiedad de relleno abreviadapermite cambiar todos los rellenos a la vez.

Valores posibles
Valor Descripción
Length Define un relleno fijo (en píxeles, pt, em, etc)
% Define un relleno en% del elemento contenedor

Relleno - lados individuales


En CSS, es posible especificar el relleno diferente para partes diferentes:

Ejemplo
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

<!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>

</html>

Página 95 de 310
Padding - Abreviatura de las propiedades
Para acortar el código, es posible especificar todas las propiedades de relleno en una propiedad.

La propiedad abreviada para todas las propiedades de relleno es "padding":

Ejemplo
padding:25px 50px;

<!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:yellow;
}
p.padding
{
padding:25px 50px;
}
</style>
</head>

<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>

</html>

La propiedad padding puede tener de uno a cuatro valores.

 padding: 25px 50px 75px 100px;


o relleno superior es 25px
o relleno derecho es 50px
o relleno inferior es 75px
o margen izquierdo es 100px

 padding: 25px 50px 75px;


o relleno superior es 25px
o rellenos derecha e izquierda son 50px
o relleno inferior es 75px

 padding: 25px 50px;


o rellenos superior e inferior son 25px
o rellenos derecha e izquierda son 50px

 padding: 25px;
o los cuatro rellenos son 25px

Página 96 de 310
Más ejemplos
Todas las propiedades de relleno en una declaración
este ejemplo se demuestra una propiedad abreviada para establecer todas las propiedades de relleno en
una declaración, pueden tener de uno a cuatro valores.

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>
<body>
<p class="ex1">This text has equal padding on each side. The padding on each side is 2cm.</p>
<p class="ex2">This text has a top and bottom padding of 0.5cm and a left and right padding of
3cm.</p>
</body>
</html>

Ajustar el margen izquierdo


En este ejemplo se muestra cómo establecer el margen izquierdo del elemento P.

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}
</style>
</head>
<body>
<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>
</body>
</html>

Ajuste el margen derecho


de este ejemplo se muestra cómo establecer el margen derecho del elemento p.

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {padding-right:2cm;}
p.padding2 {padding-right:50%;}
</style>
</head>

<body>
<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right
padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This
text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This
text has a right padding of 50%.</p>
</body>
</html>

Página 97 de 310
Establezca el relleno superior
En este ejemplo se muestra cómo establecer el relleno superior de elemento P.

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {padding-top:2cm;}
p.padding2 {padding-top:50%;}
</style>
</head>

<body>
<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top
padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text
has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text
has a top padding of 50%.</p>
</body>

</html>

Ajusta el margen inferior


Este ejemplo muestra cómo establecer el margen inferior del elemento ap.

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {padding-bottom:2cm;}
p.padding2 {padding-bottom:50%;}
</style>
</head>

<body>
<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no
bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.
This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%.
This text has a bottom padding of 50%.</p>
</body>
</html>

Todas las propiedades de relleno de CSS


Propiedad Descripción
padding Una propiedad abreviada para establecer las propiedades de relleno en una
declaración
padding-bottom Establece el margen inferior de un elemento
padding-left Establece el margen izquierdo de un elemento
padding-right Establece el margen derecho de un elemento
padding-top Define el relleno superior de un elemento

CSS Selectores Agrupación y anidamiento

Selectores Agrupación
Página 98 de 310
En las hojas de estilo a menudo existen elementos con el mismo estilo.

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

Para reducir al mínimo el código, puedesagrupar selectores.

Separa cada selector con una coma.

En el siguiente ejemplo hemos agrupado los selectores en el código anterior:

Ejemplo
h1,h2,p
{
color:green;
}

<!DOCTYPE html>
<html>
<head>
<style>
h1,h2,p
{
color:green;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

Selectores de anidamiento
Es posible aplicar un estilo para un selector dentro de otro selector.

En el siguiente ejemplo, tenemos un estilo especificado para todos los elementos p, un estilo
especificado para todos los elementos con class = "marked", y un tercer estilo se especifica sólo para
elementos p dentro de los elementos con class = "marked":

Ejemplo
p
{
color:blue;
text-align:center;

Página 99 de 310
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>

<body>
<p>Esto es un párrafo azul y centrado</p>
<div class="marked">
<p>Este párrafo no debería estar en azul.</p>
</div>
<p class="marked">los párrafos que están dentro de un elemento de clase "marked" mantienen la
alineación pero tienen un diferente color para el texto.</p>
</body>
</html>

Selectores hijos
Hijo: Un elemento A se considera hijo de B si y solo si B es el padre de A (el nodo en el nivel
inmediatamente anterior a A).

Descendiente: Un elemento A se considera descendiente de B si, o bien,

A es hijo de B,
ó bien,
A es hijo de C que es descendiente de B.

Antecesor: Un elemento A se considera ancestro de B si y solo si B es un descendiente de A.

Y para los que no entendieron nada, aquí esta el árbol del documento HTML del ejemplo.

Página 100 de 310


Un selector hijo se escribe de la forma:

S1 > S2 {...}

donde S2 es hijo de S1. Esto permite aplicar estilos solo a aquellos elementos hijos de S1.

Veamos un ejemplo:

UL > LI { font-size: 1cm }

En este ejemplo se aplicara el estilo a todos los elementos LI que sean hijos de UL. Así, en el
siguiente ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>mi página</title>
<style type="text/css">
p { color: #3366cc; font-family: arial; font-weight: bold;}
h1 { text-align: center;}
ul > li { font-size: 1cm ;}
</style>
</head>
<body>
<h1>bienvenidos todos a mi p&aacute;gina</h1>
<hr/>
<p>un párrafo cualquiera . </p>
<p>otro párrafo cualquiera. </p>
<ul>
<li>elemento 1 de la lista 1</li>
<ol>
<li>elemento 1 de la lista 2</li>
<li>elemento 2 de la lista 2</li>
<li>elemento 3 de la lista 2</li>
</ol>
<li>elemento 2 de la lista 1</li>

Página 101 de 310


<li>elemento 3 de la lista 1</li>
</ul>
<ol>
<li>elemento 1 de la lista 3</li>
<li>elemento 2 de la lista 3</li>
<li>elemento 3 de la lista 3</li>
</ol>
</body>
</html>

Solo los elementos LI en una lista sin orden mostraran el estilo.

Selectores por atributos


Supongamos que nosotros queremos aplicar un estilo a P pero solo si tiene el atributo ALIGN.
Para esto nos sirven los selectores por atributos.

Existen 4 formas de utilizar este tipo de selectores de las cuales solo veremos las 2 primeras.

Estos selectores solo funcionan si el atributo al que se refiere está escrito


inline, no hace caso a la herencia de CSS

1. [ATRIBUTO]
Aplica el estilo solo si el elemento contiene el atributo especificado:

p[align] { font-size: 1cm }: aplica el estilo a p pero solo si tiene el atributo align.

*[align] { font-size: 1cm }: aplica el estilo a cualquier elemento que contenga el


atributo align.

p[align][size]{ font-size: 1cm }: aplica el estilo a p pero solo si tiene los


atributos align y size.

2. [ATRIBUTO = VALOR]

Aplica el estilo solo si el elemento contiene el atributo y el valor especificados:

p[align=center] { font-size: 1cm }: aplica el estilo a p pero solo si tiene el


atributo align y el valor center.

*[align=center] { font-size: 1cm }: aplica el estilo a cualquier elemento que


contenga el atributo align y el valor center.

p[align=center][size]: aplica el estilo a p pero solo si tiene los atributos size y align y
el valor center para align.

Hasta ahora hemos utilizado los atributos vistos en el temario, sin embargo el siguiente código
también es valido:

Página 102 de 310


<html>
<head>
<title>mi página</title>
<style type="text/css">
*[nombre=ana] { color: #006699; font-family: arial; font-weight: bold;
font-size: 4pt }
p[nombre=pepe] { color: #ff0000; font-family: arial; font-weight:
bold;}
p[nombre=jorge] { color: #00ff00; font-family: arial; font-weight:
bold; }
p[nombre=juan] { color: #0000ff; font-family: arial; font-weight:
bold; }
</style>
</head>
<body>
<h1 nombre="ana">ana</h1>
<p nombre="pepe">pepe</p>
<p nombre="jorge">jorge</p>
<p nombre="juan">juan</p>
<p nombre="ana">ana</p>
</body>
</html>

Mas ejemplos

 [nombre_atributo~=valor], selecciona los elementos que tienen establecido un

atributo llamado nombre_atributo y cuyo valor es una lista de palabras separadas por

espacios en blanco en la que al menos una de ellas es exactamente igual a valor.

(ALT+126 o ALT GR+4)

 [nombre_atributo|=valor], selecciona los elementos que tienen establecido un

atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con

guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los
atributos de tipo lang que indican el idioma del contenido del elemento.

A continuación se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class", independientemente de su valor */

a[class] { color:blue; }

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class" con el valor "externo" */

Página 103 de 310


a[class="externo"] { color:blue; }

/* Se muestran de color azul todos los enlaces que apunten

al sitio "http://www.ejemplo.com" */

a[href="http://www.ejemplo.com"] { color:blue; }

/* Se muestran de color azul todos los enlaces que tengan

un atributo "class" en el que al menos uno de sus valores

sea "externo" */

a[class~="externo"] { color:blue; }

/* Selecciona todos los elementos de la página cuyo atributo

"lang" sea igual a "en", es decir, todos los elementos en inglés */

*[lang=en] { ... }

/* Selecciona todos los elementos de la página cuyo atributo

"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */

*[lang|="es"] { color:red }

CSS Dimensiones

La propiedad CSS dimension permite controlar la altura y la anchura de un elemento.

Ejemplos
Ajuste de la altura de los elementos
este ejemplo se muestra cómo establecer la altura de los diferentes elementos.

<!DOCTYPE html>
<html>
<head>
<style>

Página 104 de 310


img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is a paragraph with no height and width specified.
This is a paragraph with no height and width specified.
This is a paragraph with no height and width specified.</p>
</body>
</html>

Ajuste de la altura de una imagen utilizando porcentaje


este ejemplo se muestra cómo establecer el alto de un elemento con un valor porcentual. Ese porcentaje
es respecto al tamaño de su contenedor (si redimensionamos la ventana, veremos como cambia)

<!DOCTYPE html>
<html>
<head>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:40%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" /><br>
<img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>

Ajuste el ancho de un elemento con un valor de píxeles


Este ejemplo muestra cómo establecer el ancho de un elemento con un valor de píxel.

<!DOCTYPE html>
<html>
<head>
<style>
img {width:200px;}
</style>
</head>
<body>

<img src="logocss.gif" width="95" height="84" />

</body>
</html>

Página 105 de 310


Ajuste de la altura máxima de un elemento
este ejemplo se muestra cómo establecer la altura máxima de un elemento.

<!DOCTYPE html>
<html>
<head>
<style>
p
{
max-height:50px;
background-color:yellow;
}
</style>
</head>

<body>
<p>The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set
to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is
set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this
paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of
this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum
height of this paragraph is set to 50px.</p>
</body>
</html>

Ajuste la anchura máxima de un elemento utilizando porcentaje


este ejemplo se muestra cómo establecer la anchura máxima de un elemento mediante un valor
porcentual.

Página 106 de 310


<!DOCTYPE html>
<html>
<head>
<style>
p
{
max-width:20%;
background-color:yellow;
}
</style>
</head>
<body>

<p>This is some text. This is some text. This is some text.


This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>

</body>
</html>

Ajuste la altura mínima de un elemento


En este ejemplo se muestra cómo establecer la altura mínima de un elemento.

<!DOCTYPE html>
<html>

Página 107 de 310


<head>
<style>
p
{
min-height:100px;
background-color:yellow;
}
</style>
</head>

<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>

Ajustar el ancho mínimo de un elemento con un valor de píxeles


Este ejemplo muestra cómo establecer la anchura mínima de un elemento con un valor de píxel.

<!DOCTYPE html>
<html>
<head>
<style>
p
{
min-width:150px;
background-color:yellow;
}
</style>
</head>

<body>
<p>The minimum width of this paragraph is set to 150px.</p>
</body>
</html>

Todas las propiedades de dimensiones CSS


El número en el "CSS" en la columna indica qué versión de CSS se define la propiedad (o CSS1 CSS2).

Propiedad Descripción Valores CSS


height Establece el alto de un elemento auto 1
length
%
inherit

max-height Establece la altura máxima de un elemento none 2


length
%

Página 108 de 310


inherit

max-width Define la anchura máxima de un elemento none 2


length
%
inherit

min-height Establece la altura mínima de un elemento length 2


%
inherit

min-width Establece el ancho mínimo de un elemento length 2


%
inherit

width Establece el ancho de un elemento auto 1


length
%
inherit

CSS Display y Visibility

La propiedad display especifica el como se visualiza un elemento en la pantalla, y la


propiedad visibility especifica si un elemento debe ser visible u oculto.

Cómo ocultar un elemento - display: none o visibility: hidden


Un elemento se puede ocultar mediante el establecimiento de la propiedad display a "none" o
estableciendo la propiedad de visibility a "hidden". Sin embargo, hay que darse cuenta que estos dos
métodos producen resultados diferentes:

visibility: Oculta un elemento, pero el elemento ocupa el mismo espacio que antes. El elemento se
oculta, pero todavía afectan al diseño.

Ejemplo
h1.hidden {visibility:hidden;}

<!DOCTYPE html>
<html>
<head>
<style>
h2.hidden {visibility:hidden;}
</style>
Página 109 de 310
</head>

<body>
<h1>This is a visible heading</h1>
<h2 class="hidden">This is a hidden heading</h2>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>

display: none esconde un elemento, y no ocupa espacio. El elemento se oculta, y la página se mostrará
como si el elemento no estuviera:

Ejemplo
h1.hidden {display:none;}

<!DOCTYPE html>
<html>
<head>
<style>
H2.hidden {display:none;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h2 class="hidden">This is a hidden heading</h2>
<p>Notice that the hidden heading does not take up space.</p>
</body>
</html>

klematis_small.jpg

klematis2_small.jpg

Página 110 de 310


klematis3_small.jpg

<!DOCTYPE html>
<html>
<head>
<script>
function eliminarElemento()
{
document.getElementById("imgbox1").style.display="none";
}
function cambiarVisibilidad()
{
document.getElementById("imgbox2").style.visibility="hidden";
}
function reestablecerElementos()
{
document.getElementById("imgbox1").style.display="block";
document.getElementById("imgbox2").style.visibility="visible";
}
</script>
</head>
<body>
<div id="imgbox1">
Box 1<br/>
<img src="klematis_small.jpg" height="90" width="107"><br/>
<input onclick="eliminarElemento()" value="Borrar" type="button"/>
</div>
<div id="imgbox2">
Box 2<br/>
<img src="klematis2_small.jpg" height="80" width="107">
<input onclick="cambiarVisibilidad()" value="Esconder" type="button"/>
</div>
<div >
Box 3<br/>
<img src="klematis3_small.jpg" height="90" width="116">
<input onclick="reestablecerElementos()" value="Restablecer" type="button"/>
</div>
</body>
</html>

CSS Display - Block y inline


Página 111 de 310
Un elemento de bloque es un elemento que ocupa todo el ancho disponible completo, y tiene un salto de
línea antes y después de ella.

Ejemplos de elementos de bloque:

 <h1>
 <p>
 <div>

Un elemento en línea sólo ocupa el ancho que sea necesario, y no fuerza saltos de línea.

Ejemplos de elementos in-line:

 <span>
 <a>

Cambiar la forma en la que un elemento se muestra


Podemos cambiarla visualización de un elemento en línea a un elemento de bloque, o viceversa, puede
ser útil para hacer que la página se vea de una manera específica, y todavía siga los estándares web.

El ejemplo siguiente muestra los elementos una de lista como elementos en línea:

Ejemplo
li {display:inline;}

<!DOCTYPE html>
<html>
<head>
<style>
li{display:inline;}
</style>
</head>
<body>

<p>Display this link list as a horizontal menu:</p>

<ul>
<li><a href="http://google.es" target="_blank">Enlace 1</a></li>
<li><a href="http://google.es" target="_blank">Enlace 2</a></li>
<li><a href="http://google.es" target="_blank">Enlace 3</a></li>
<li><a href="http://google.es" target="_blank">Enlace 4</a></li>
</ul>

</body>
</html>

El siguiente ejemplo muestra abarcan elementos como elementos de bloque:

Ejemplo
span {display:block;}

<!DOCTYPE html>
<html>
<head>
<style>

Página 112 de 310


span
{
display:block;
}
</style>
</head>
<body>

<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>

</body>
</html>

Nota: cambiar el tipo de visualización de un elemento cambia sólo la visualización del elemento en la
pantalla, no el tipo de elemento que es. Por ejemplo: Un elemento en línea establecida en display: block
no se le permite tener un elemento de bloque anidado dentro de él.

Más ejemplos
Cómo mostrar un elemento como un elemento en línea.
Este ejemplo muestra cómo mostrar un elemento como un elemento en línea.

<!DOCTYPE html>
<html>
<head>
<style>
p {display:inline;}
</style>
</head>
<body>
<p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p>
</body>
</html>

Cómo mostrar un elemento como un elemento de bloque


En este ejemplo se muestra cómo mostrar un elemento como un elemento de bloque.

<!DOCTYPE html>
<html>
<head>
<style>
span
{
display:block;
}
</style>
</head>
<body>

<span>A display property with a value of "block" results in</span><span>a line break between the two
elements.</span>

</body>
</html>
Página 113 de 310
Cómo hacer que se colapse del elemento de tabla
Este ejemplo muestra cómo colapsar elemento de tabla.
Este ejercicio tendrá lógica cuando veamos javascript

En Chrome no funciona.

<!DOCTYPE html>
<html>
<head>
<style>
tr.collapse {visibility:collapse;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr class="collapse">
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>Note:</b> IE8 and earlier support visibility:collapse only if a !DOCTYPE is specified.</p>
</body>
</html>

Uno de los valores más curiosos de display es inline-block, que crea cajas
que son de bloque y en línea de forma simultánea. Una caja de tipo inline-
block se comporta como si fuera de bloque, pero respecto a los elementos que
la rodean es una caja en línea.

El enlace del siguiente ejemplo es de tipo inline-block, lo que permite por


ejemplo establecerle un tamaño mediante la propiedad width:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem
quis tellus vulputate lobortis. Vivamus fermentum, tortor id ornare
ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede.
Nulla cursus porta sem. Donec mollis nunc in leo. [display: inline-block,
width: 25%] Quisque semper, magna sed pharetra tincidunt, quam urna
dapibus dolor, a dignissim sem neque id purus. Etiam luctus viverra
nisi. Integer lobortis accumsan felis. Cras venenatis. Morbi cursus,
tellus vitae iaculis pulvinar, turpis nibh posuere nisl, sed vehicula
massa orci at dui. Morbi pede ipsum, porta quis, venenatis et,
ullamcorper in, metus. Nulla facilisi. Quisque laoreet molestie mi. Ut
mollis elit eget urna.
Si tu navegador soporta el valor inline-block, el ejemplo anterior se debe
visualizar tal y como muestra la siguiente imagen:

Página 114 de 310


soporte inline-block

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>

<body>
<strong> hola</strong>
<div style="width: 100px; display: inline-block; background-color: red; border: 3px solid
black;">display: inline-block</div>
<div style="width: 100px; display: inline-block; background-color: red; border: 3px solid
black;">display: inline-block</div>
<div style="width: 100px; display: inline-block; background-color: red; border: 3px solid
black;">display: inline-block</div>
<strong> hola</strong></body>
</html>

Página 115 de 310


CSS Posicionamiento

El posicionamiento puede ser difícil a veces!

Posicionamiento
Las propiedades de posicionamiento CSS permiten colocar un elemento. También se puede colocar un
elemento detrás de otro, y especificar qué debe ocurrir cuando el contenido de un elemento es
demasiado grande.

Los elementos se pueden colocar usando las propiedadestop, bottom, left, y right . Sin embargo, estas
propiedades no funcionarán a menos que la propiedad position se establezca en primer lugar. También
funcionan de forma diferente dependiendo del método de posicionamiento.

Hay cuatro métodos de posicionamiento diferentes.

Posicionamiento normal o estático


Los elementos HTML estático se colocan de forma predeterminada. Un elemento posicionado como
estático siempre se coloca de acuerdo con el flujo normal de la página.

Los elementos posicionados como estáticos no se ven afectados por las propiedades top, bottom, left, y
right.

El posicionamiento normal o estático es el modelo que utilizan por defecto los navegadores para mostrar
los elementos de las páginas. En este modelo, sólo se tiene en cuenta si el elemento es de bloque o en
línea, sus propiedades width y height y su contenido.

Los elementos de bloque forman lo que CSS denomina "contextos de formato de bloque". En este tipo de
contextos, las cajas se muestran una debajo de otra comenzando desde el principio del elemento
contenedor. La distancia entre las cajas se controla mediante los márgenes verticales.

Página 116 de 310


Figura 5.2 Posicionamiento normal de los elementos de bloque

Si un elemento se encuentra dentro de otro, el elemento padre se llama "elemento contenedor" y


determina tanto la posición como el tamaño de todas sus cajas interiores.

Si un elemento no se encuentra dentro de un elemento contenedor, entonces su elemento contenedor es


el elemento <body> de la página. Normalmente, la anchura de los elementos de bloque está limitada a
la anchura de su elemento contenedor, aunque en algunos casos sus contenidos pueden desbordar el
espacio disponible.

Los elementos en línea forman los "contextos de formato en línea". En este tipo de contextos, las cajas
se muestran una detrás de otra de forma horizontal comenzando desde la posición más a la izquierda de
su elemento contenedor. La distancia entre las cajas se controla mediante los márgenes laterales.

Figura 5.3 Posicionamiento normal de los elementos en línea

Si las cajas en línea ocupan más espacio del disponible en su propia línea, el resto de cajas se muestran
en las líneas inferiores. Si las cajas en línea ocupan un espacio menor que su propia línea, se puede
controlar la distribución de las cajas mediante la propiedad text-align para centrarlas, alinearlas a la
derecha o justificarlas.

Posicionamiento fijo
Un elemento con posición fija está situado con relación a la ventana del navegador.

No se moverá incluso si la ventana se desplaza:

El estándar CSS considera que el posicionamiento fijo es un caso particular del posicionamiento
absoluto, ya que sólo se diferencian en el comportamiento de las cajas posicionadas.

Cuando una caja se posiciona de forma fija, la forma de obtener el origen de coordenadas para
interpretar su desplazamiento es idéntica al posicionamiento absoluto. De hecho, si el usuario no mueve
Página 117 de 310
la página HTML en la ventana del navegador, no existe ninguna diferencia entre estos dos modelos de
posicionamiento.

La principal característica de una caja posicionada de forma fija es que su posición es inamovible dentro
de la ventana del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posición ni
aunque el usuario suba o baje la página en la ventana de su navegador.

Si la página se visualiza en un medio paginado (por ejemplo en una impresora) las cajas posicionadas de
forma fija se repiten en todas las páginas. Esta característica puede ser útil para crear encabezados o
pies de página en páginas HTML preparadas para imprimir.

Internet Explorer 6 y las versiones anteriores no lo soportan.

Ejemplo
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>


<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a
!DOCTYPE is specified.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some
text</p><p>Some text</p>
</body>
</html>

Nota: En IE7 e IE8 solo es compatible si se especifica un DOCTYPE!.

Los elementos posicionados fijos se eliminan del flujo normal. El documento y los otros elementos se
comportan como el elemento fijo no existiera.

Los elementos posicionados fijos pueden superponerse a otros elementos.

Ejemplos:

http://www.csszengarden.com/136/

http://www.caracolesdearagon.com/
Página 118 de 310
Posicionamiento relativo
Un elemento con posicionamiento relativo está situado relativamente a su posición normal.

El estándar CSS considera que el posicionamiento relativo es un caso particular del posicionamiento normal, aunque
en la práctica presenta muchas diferencias.

El posicionamiento relativo desplaza una caja respecto de su posición original establecida mediante el posicionamiento
normal. El desplazamiento de la caja se controla con las propiedades top, right, bottom yleft.

El valor de la propiedad top se interpreta como el desplazamiento entre el borde superior de la caja en su posición final
y el borde superior de la misma caja en su posición original.

De la misma forma, el valor de las propiedades left, right y bottom indica respectivamente el desplazamiento entre
el borde izquierdo/derecho/inferior de la caja en su posición final y el borde izquierdo/derecho/inferior de la caja original.

Por tanto, la propiedad top se emplea para mover las cajas de forma descendente, la propiedad bottom mueve las
cajas de forma ascendente, la propiedad left se utiliza para desplazar las cajas hacia la derecha y la
propiedad right mueve las cajas hacia la izquierda. Este comportamiento parece poco intuitivo y es causa de errores
cuando se empiezan a diseñar páginas con CSS. Si se utilizan valores negativos en las propiedades
top, right, bottom y left, su efecto es justamente el inverso.

El desplazamiento relativo de una caja no afecta al resto de cajas adyacentes, que se muestran en la misma posición
que si la caja desplazada no se hubiera movido de su posición original.

Figura 5.4 Ejemplo de posicionamiento relativo de un elemento

En la imagen anterior, la caja 2 se ha desplazado lateralmente hacia la derecha y verticalmente de


forma descendente. Como el resto de cajas de la página no modifican su posición, se producen
solapamientos entre los contenidos de las cajas.

Las cajas desplazadas de forma relativa no modifican su tamaño, por lo que los valores de las
propiedades left y right siempre cumplen que left = -right.

Si tanto left como right tienen un valor de auto (que es su valor por defecto) la caja no se mueve de su
posición original. Si sólo el valor de left es auto, su valor real es -right. Igualmente, si sólo el valor
de rightes auto, su valor real es -left.

Si tanto left como right tienen valores distintos de auto, uno de los dos valores se tiene que ignorar
porque son mutuamente excluyentes. Para determinar la propiedad que se tiene en cuenta, se considera
el valor de la propiedad direction.

La propiedad direction permite establecer la dirección del texto de un contenido. Si el valor


de direction es ltr, el texto se muestra de izquierda a derecha, que es el método de escritura habitual en
la mayoría de países. Si el valor de direction es rtl, el método de escritura es de derecha a izquierda,
como el utilizado por los idiomas árabe y hebreo.

Si el valor de direction es ltr, y las propiedades left y right tienen valores distintos de auto, se ignora la
propiedad right y sólo se tiene en cuenta el valor de la propiedad left. De la misma forma, si el valor
dedirection es rtl, se ignora el valor de left y sólo se tiene en cuenta el valor de right.

Página 119 de 310


Ejemplo
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left
{
background:#c0c0c0;
position:relative;
left:-20px;
}

h2.pos_right
{
background:#c0c0c0;

Página 120 de 310


position:relative;
left:20px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>

</html>

El contenido de elementos en posición relativa puede ser movido y se puede superponer a otros
elementos, pero el espacio reservado para el elemento se conserva aún en el flujo normal.

Ejemplo
h2.pos_top
{
position:relative;
top:-50px;
}

El elemento sigue "reservando/ocupando" el espacio que ocuparía en su posición


"normal"

<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved
space for the element is still preserved in the normal flow.</p>
</body>

</html>

Los elementos en posición relativa a menudo se utilizan como bloques contenedor para los elementos
con posición absoluta, como veremos a continuación.

El siguiente ejemplo muestra tres imágenes posicionadas de forma normal:

Página 121 de 310


Figura 5.5 Elementos posicionados de forma normal

Aplicando el posicionamiento relativo, se desplaza la primera imagen de forma descendente:

img.desplazada {

position:relative;

top: 8em;

<img class="desplazada" src="imagenes/imagen.png" alt="Imagen genérica" />

<img src="imagenes/imagen.png" alt="Imagen genérica" />

<img src="imagenes/imagen.png" alt="Imagen genérica" />

El aspecto que muestran ahora las imágenes es el siguiente:

Figura 5.6 Elemento posicionado de forma relativa

Página 122 de 310


El resto de imágenes no varían su posición y por tanto no ocupan el hueco dejado por la primera
imagen, ya que el posicionamiento relativo no influye en el resto de elementos de la página. El principal
problema de posicionar elementos de forma relativa es que se pueden producir solapamientos con otros
elementos de la página.

Posicionamiento absoluto
Un elemento con posición absoluta está situado con posición relativa al primer elemento padre que
tenga una posición que no sea estática. Si no se encuentra dicho elemento, el bloque de contención es
<html>:

El posicionamiento absoluto se emplea para establecer de forma exacta la posición en la que se muestra
la caja de un elemento. La nueva posición de la caja se indica mediante las
propiedades top, right, bottom yleft. La interpretación de los valores de estas propiedades es mucho
más compleja que en el posicionamiento relativo, ya que en este caso dependen del posicionamiento del
elemento contenedor.

Cuando una caja se posiciona de forma absoluta, el resto de elementos de la página se ven afectados y
modifican su posición. Al igual que en el posicionamiento relativo, cuando se posiciona de forma absoluta
una caja es probable que se produzcan solapamientos con otras cajas.

En el siguiente ejemplo, se posiciona de forma absoluta la caja 2:

Figura 5.7 Ejemplo de posicionamiento absoluto de un elemento

La caja 2 está posicionada de forma absoluta, lo que provoca que el resto de elementos de la página
modifiquen su posición. En concreto, la caja 3 deja su lugar original y pasa a ocupar el hueco dejado por
la caja 2.

El estándar de CSS 2.1 indica que las cajas posicionadas de forma absoluta "salen del flujo normal de la
página", lo que provoca que el resto de elementos de la página se muevan y en ocasiones, ocupen la
posición original en la que se encontraba la caja.

Por otra parte, el desplazamiento de una caja posicionada de forma absoluta se controla mediante las
propiedades top, right, bottom y left. A diferencia del posicionamiento relativo, la interpretación de los
valores de estas propiedades depende del elemento contenedor de la caja posicionada.

Determinar la referencia utilizada para interpretar los valores de top, right, bottom y left de una caja
posicionada de forma absoluta es un proceso complejo que se compone de los siguientes pasos:

 Se buscan todos los elementos contenedores de la caja hasta llegar al elemento <body> de la
página.

 Se recorren todos los elementos contenedores empezando por el más cercano a la caja y
llegando hasta el <body>

 El primer elemento contenedor que esté posicionado de cualquier forma diferente a position:
static se convierte en la referencia que determina la posición de la caja posicionada de forma
absoluta.

Página 123 de 310


 Si ningún elemento contenedor está posicionado, la referencia es la ventana del navegador, que
no debe confundirse con el elemento <body> de la página.

Una vez determinada la referencia del posicionamiento absoluto, la interpretación de los valores de las
propiedades top, right, bottom y left se realiza como sigue:

 El valor de la propiedad top indica el desplazamiento desde el borde superior de la caja hasta el
borde superior del elemento contenedor que se utiliza como referencia.

 El valor de la propiedad right indica el desplazamiento desde el borde derecho de la caja hasta
el borde derecho del elemento contenedor que se utiliza como referencia.

 El valor de la propiedad bottom indica el desplazamiento desde el borde inferior de la caja hasta
el borde inferior del elemento contenedor que se utiliza como referencia.

 El valor de la propiedad left indica el desplazamiento desde el borde izquierdo de la caja hasta
el borde izquierdo del elemento contenedor que se utiliza como referencia.

Ejemplo
h2
{
position:absolute;
left:100px;
top:150px;
}

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
Página 124 de 310
}
</style>
</head>

<body>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is
placed 100px from the left of the page and 150px from the top of the page.</p>
</body>

</html>

Si lo metemos dentro de un div con posicionamiento relativo, vemos que el bloque h2 se colocará en
posición relativa a dicho div

<!DOCTYPE html>
<html>
<head>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
div
{

position:relative;
left:-20px;
}

</style>
</head>

<body>
<div><h2>This is a heading with an absolute position</h2></div>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is
placed 100px from the left of the page and 150px from the top of the page.</p>
</body>

</html>

Los elementos con posición absoluta se eliminan del flujo normal. El documento y otros elementos se
comportan como si el elemento con posición absoluta no existiera.

Página 125 de 310


Los elementos con posición absoluta pueden superponer a otros elementos.

En los siguientes ejemplos, se utiliza la página HTML que muestra la siguiente imagen:

Figura 5.8 Situación original antes de modificar el posicionamiento

A continuación, se muestra el código HTML y CSS de la página original:

div {

border: 2px solid #CCC;

padding: 1em;

margin: 1em 0 1em 4em;

width: 300px;

<div>

<img src="imagenes/imagen.png"alt="Imagen genérica" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus

ullamcorper velit eu ipsum. Ut pellentesque, est in volutpat cursus, risus

mi viverra augue, at pulvinar turpis leo sed orci. Donec ipsum. Curabitur

felis dui, ultrices ut, sollicitudin vel, rutrum at, tellus.</p>

</div>

Página 126 de 310


En primer lugar, se posiciona de forma absoluta la imagen mediante la propiedad position y se indica su
nueva posición mediante las propiedades top y left:

div img {

position:absolute;

top: 50px;

left:50px;

El resultado visual se muestra en la siguiente imagen:

Figura 5.9 Imagen posicionada de forma absoluta

La imagen posicionada de forma absoluta no toma como referencia su elemento contenedor <div>, sino
la ventana del navegador, tal y como demuestra la siguiente imagen:

Figura 5.10 La referencia del posicionamiento absoluto es la ventana del navegador

Para posicionar la imagen de forma absoluta, el navegador realiza los siguientes pasos:
Página 127 de 310
1. Obtiene la lista de elementos contenedores de la imagen: <div> y <body>.

2. Recorre la lista de elementos contenedores desde el más cercano a la imagen (el <div>) hasta
terminar en el <body> buscando el primer elemento contenedor que esté posicionado.

3. El posicionamiento de todos los elementos contenedores es el normal o estático, ya que ni


siquiera tienen establecida la propiedad position

4. Como ningún elemento contenedor está posicionado, la referencia es la ventana del navegador.

5. A partir de esa referencia, la caja de la imagen se desplaza 50px hacia la derecha (left: 50px) y
otros 50px de forma descendente (top: 50px).

Como la imagen se posiciona de forma absoluta, el resto de elementos de la página se mueven para
ocupar el lugar libre dejado por la imagen. Por este motivo, el párrafo sube hasta el principio
del <div> y se produce un solapamiento con la imagen posicionada que impide ver parte de los
contenidos del párrafo.

A continuación, se modifica el ejemplo anterior posicionando de forma relativa el elemento <div> que
contiene la imagen y el párrafo. La única propiedad añadida al <div> es position: relative por lo que el
elemento contenedor se posiciona pero no se desplaza respecto de su posición original:

div {

border: 2px solid#CCC;

padding: 1em;

margin: 1em 0 1em 4em;

width: 300px;

position:relative;

div img {

position:absolute;

top:50px;

left:50px;

La siguiente imagen muestra el resultado obtenido:

Página 128 de 310


Figura 5.11 Imagen posicionada de forma absoluta

En este caso, como el elemento contenedor de la imagen está posicionado, se convierte en la referencia para el posicionamiento absoluto. El resultado es que la posición de
la imagen es muy diferente a la del ejemplo anterior:

Figura 5.12 La referencia del posicionamiento absoluto es el elemento contenedor de la imagen

Por tanto, si se quiere posicionar un elemento de forma absoluta respecto de su elemento contenedor, es imprescindible posicionar este último. Para ello, sólo es necesario
añadir la propiedad position: relative, por lo que no es obligatorio desplazar el elemento contenedor respecto de su posición original.

Ejemplo mas chulo

Inicialmente

Página 129 de 310


El atributo lang es usado para declarar el idioma de la página web para ayudar a los buscadores y a los navegadores

<!DOCTYPE html>

<html lang="es">

<head>

<title>posicionamiento</title>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>

<style type="text/css">

.cuadro1 {

height:200px;width:200px;

background-color:#FF8000;

color:#ffffff;

.cuadro2{

height:200px;width:200px;

background-color:#0000FF;

Página 130 de 310


color:#ffffff;

.cuadro3{

height:200px;width:200px;

background-color:#008000;

color:#ffffff;

</style>

</head>

<body>

<div class="cuadro1">cuadro1 ... </div>

<div class="cuadro2">cuadro2 ... </div>

<div class="cuadro3">cuadro3 ... </div>

</body>

</html>

Con posicionamiento absoluto

<!DOCTYPE html >

<html lang="es" >

<head>

<title>posicionamiento absoluto</title>

<meta http-equiv="Content-Type" content="text/html;

Página 131 de 310


charset=iso-8859-1" />

<style type="text/css">

.cuadro1 {height:200px;width:200px;

background-color:#FF8000;

color:#ffffff;

position:absolute;top:90px;left:80px;

.cuadro2 {height:200px;width:200px;

background-color:#0000FF;

color:#ffffff;}

.cuadro3 {height:200px;width:200px;

background-color:#008000;

color:#ffffff;}

</style>

</head>

<body>

<div class="cuadro1">cuadro1 ... </div>

<div class="cuadro2">cuadro2 ... </div>

<div class="cuadro3">cuadro3 ... </div>

</body>

</html>

Con contenedor relativo

Página 132 de 310


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

<head>

<title>posicionamiento absoluto</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">

.cuadro1 {height:200px;width:200px;

background-color:#FF8000;

color:#ffffff;position:absolute;top:90px;left:80px;}

.cuadro2 {height:200px;width:200px;

background-color:#0000FF;

color:#ffffff;}

.cuadro3 {height:200px;width:200px;

background-color:#008000;

color:#ffffff;}

.contenedor {

position:relative;

left:100px;

background-color:#c0c0c0;

color:#ffffff;}

html{

background-color:yellow;

</style>

</head>

<body>

Página 133 de 310


<div class="contenedor">

Contenedor

<div class="cuadro1">cuadro1 ... </div>

<div class="cuadro2">cuadro2 ... </div>

<div class="cuadro3">cuadro3 ... </div>

</div>

</body>

</html>

Elementos superpuestos
Cuando los elementos están posicionados fuera del flujo normal, pueden superponerse con otros
elementos.

La propiedad z-index especifica el orden de apilamiento de un elemento (el elemento que debe ser
colocado delante o detrás de los otros).

Un elemento puede tener un orden de apilamiento positivo o negativo:

Ejemplo
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
Página 134 de 310
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

Un elemento con mayor orden de pila siempre está en frente de un elemento con una orden de pila baja.

Nota: Si dos elementos posicionados se superponen sin especificarun z-index, el último elemento
posicionado en el código HTML se mostrará en la parte superior.

Variando un poquito el ejemplo

Página 135 de 310


<!DOCTYPE html>
<html>
<head>
<style>
div
{

position:relative;
left:-20px;
}

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<div><img src="w3css.gif" width="100" height="140" /></div>
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

Más ejemplos
Establecer la forma de un elemento
En este ejemplo se muestra cómo establecer la forma de un elemento. El elemento está recortado

Ejemplo:

p#one { clip: rect(5px, 40px, 45px, 5px); }


p#two { clip: rect(5px, 55px, 45px, 5px); }

asumiendo que ambos “Ps” tienen unas dimensiones de 50px X 55 px, crearemos
respectivamente las regiones recortadas delimitadas por puntos de la siguiente imagen:

Las distancias siempre se miden desde la parte de arriba y desde la parte de la


izquierda.

Solo funciona con posicionamiento absolute y fixed (COMPROBAR)

Página 136 de 310


<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;

Página 137 de 310


clip:rect(0px,60px,200px,0px);

}
</style>
</head>

<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>

¿Cómo mostrar desbordamiento en un elemento mediante desplazamiento


En este ejemplo se muestra cómo establecer la propiedad de desbordamiento para crear una barra de
desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área
especifica.

<!DOCTYPE html>
<html>
<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}

div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>

<body>
<p>The overflow property specifies what to do if the content of an element exceeds the size of the
element's box.</p>

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the
layout. The default value is visible.</div>

<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the
layout. The default value is visible.</div>
</body>
</html>

Página 138 de 310


Cómo configurar el navegador para manejar automáticamente desbordamiento
Este ejemplo muestra cómo configurar el navegador para manejar automáticamente desbordamiento.

<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:auto;
}
</style>
</head>

<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given width
and height properties.</p>

<div>
You can use the overflow property when you want to have better control of the layout. Try to change the
overflow property to: visible, hidden, scroll, or inherit and see what happens. The default value is visible.
</div>
</body>

</html>

Mostrar solo scroll Horizontal, no vertical

"overflow-x:scroll; overflow-y:hidden;"

http://www.brunildo.org/test/Overflowxy2.html

<!DOCTYPE html>

<html>

<head>

<style>

div.scroll

background-color:#00FFFF;

width:200px;

height:100px;

overflow-x: scroll;

overflow-y: hidden;

/*nowrap La diferencia con el modo normal es que no se aplican los saltos de línea a menos que
se encuentren incluidos en el texto origianal, por lo que el contenido puede desbordar los
límites del elemento */

Página 139 de 310


white-space: nowrap;

border:1px solid #000000; /* Solo lo puse para que se vea el cuadro*/

div.hidden

background-color:#00FF00;

width:100px;

height:100px;

overflow:hidden;

</style>

</head>

<body>

<p>The overflow property specifies what to do if the content of an element exceeds the size of the
element's box.</p>

<p>overflow:scroll</p>

<div class="scroll">You can use the overflow property when you want to have better control of the
layout. The default value is visible.ou can use the overflow property when you want to have better
control of the layout. The default value is visible.ou can use the overflow property when you want to
have better control of the layout. The default value is visible.</div>

<p>overflow:hidden</p>

<div class="hidden">You can use the overflow property when you want to have better control of the
layout. The default value is visible.</div>

</body>

</html>

Cambiar el cursor
En este ejemplo se muestra cómo cambiar el cursor.

Página 140 de 310


<!DOCTYPE html>
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

Todas las propiedades de posición CSS


El número en el "CSS" en la columna indica qué versión de CSS se define la propiedad (o CSS1 CSS2).

Propiedad Descripción Valores CSS


bottom Define el borde del margen inferior de una auto 2
caja posicionada length
%
inherit
clip Clips de un elemento con posición absoluta shape 2
auto
inherit
cursor Especifica el tipo de cursor que se mostrará url 2
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
left Establece el margen izquierdo de una caja auto 2
posicionada length
%
inherit
overflow Establece lo que sucede si se desborda auto 2
contenido de cuadros de un elemento hidden
scroll
visible
inherit
position Especifica el tipo de posicionamiento para un absolute 2
elemento fixed
relative

Página 141 de 310


static
inherit
right Establece el borde del margen derecho de auto 2
una caja posicionada length
%
inherit
top Define el borde del margen superior de una auto 2
caja posicionada length
%
inherit
z-index Establece el orden de apilamiento de un number 2
elemento auto
inherit

¿Qué es Float en CSS?

Con float en CSS, un elemento puede ser desplazado hacia la izquierda o


hacia la derecha, permitiendo que otros elementos lo envuelvan.

Float se utiliza a menudo para las imágenes, pero también es útil cuando se
trabaja con cualquier diseño.

¿Cómo hacer que los elementos de ―floten‖


Que los elementos estén flotando en horizontal, significa que un elemento
sólo se puede flotar hacia la izquierda o la derecha, no hacia arriba o hacia
abajo.

Un elemento flotante se moverá hacia la izquierda o hacia la derecha como


pueda. Normalmente esto significa que el elemento se desplace
completamente a la izquierda o derecha del elemento contenedor.

Los elementos colocados después del elemento flotante fluirá alrededor del
mismo envolviéndolo.

Los elementos antes del elemento flotante no se verán afectado.

Si una imagen flota a la derecha, un texto siguiente la envolverá alrededor


de ella, a la izquierda:

Página 142 de 310


Ejemplo
img
{
float:right;
}

<!DOCTYPE html>
<html>
<head>
<style>
img
{
float:right;
}
</style>
</head>

<body>
<p>In the paragraph below, we have added an image with style
<strong>float:right</strong>. The result is that the image will float to the
right in the paragraph.</p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
Página 143 de 310
</body>

</html>

Elementos flotantes al lado de otro


Si colocas varios elementos flotantes después de otro, flotaránuno al lado
del otro si hay espacio.

Aquí hemos hecho una galería de imágenes utilizando la propiedad float:

Ejemplo
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not
have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107"
height="90"/>
<img class="thumbnail" src="klematis2_small.jpg" width="107"
height="80"/>
<img class="thumbnail" src="klematis3_small.jpg" width="116"
height="90"/>

Página 144 de 310


<img class="thumbnail" src="klematis4_small.jpg" width="120"
height="90"/>
<img class="thumbnail" src="klematis_small.jpg" width="107"
height="90"/>
<img class="thumbnail" src="klematis2_small.jpg" width="107"
height="80"/>
<img class="thumbnail" src="klematis3_small.jpg" width="116"
height="90"/>
<img class="thumbnail" src="klematis4_small.jpg" width="120"
height="90"/>
</body>
</html>

Desactivación de Float - Uso Clear


Los elementos colocados después de un elemento flotante fluirán alrededor
del mismo. Para evitar esto, utilice la propiedad clear.

La propiedad clear especifica los lados de un elemento flotante donde los


elementos no están permitidos.

Agregaremos una línea de texto en la galería de imágenes, utilizando la


propiedad clear:

Ejemplo
.text_line
{
clear:both;
}

<!DOCTYPE html>
<html>
<head>
<style>
Página 145 de 310
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not
have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107"
height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107"
height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116"
height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120"
height="90">
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="klematis_small.jpg" width="107"
height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107"
height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116"
height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120"
height="90">
</body>
</html>

Un elemento en bloque colocado después de elementos flotantes se colocará por debajo


de los elementos flotantes, pero intentará que su contenido rodee a los elementos
flotantes (fíjate como se ve el fondo rojo debajo de los elementos flotantes, pero el texto
se queda rodeando las imágenes)

Página 146 de 310


Codigo ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;

}
h3{
background-color:#c0c0c0;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have
enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<h3 >Second row</h3>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
Página 147 de 310
</body>
</html>

Más ejemplos
Una imagen con borde y márgenes que flota a la derecha de un párrafo
Deja flotar una imagen a la derecha de un párrafo. Añade un borde y
márgenes a la imagen.

<!DOCTYPE html>
<html>
<head>
<style>
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>

<body>
<p>
In the paragraph below, the image will float to the right. A dotted black
border is added to the image.
We have also added margins to the image to push the text away from the
image:

Página 148 de 310


0 px margin on the top and right side, 15 px margin on the bottom, and 20
px margin on the left side of the image.
</p>
<p>
<img src="logocss.gif" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>

</html>

Una imagen con caption que flota a la derecha


Deja una imagen flotar a la derecha.

<!DOCTYPE html>
<html>
<head>
<style>
div
{
float:right;
width:120px;
margin:0px 0px 15px 20px;
padding:15px;
Página 149 de 310
border:1px solid black;
text-align:center;
}
</style>
</head>

<body>
<div>
<img src="logocss.gif" width="95" height="84" /><br>
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
In the paragraph above, the div element is 120 pixels wide and it contains
the image.
The div element will float to the right.
Margins are added to the div to push the text away from the div.
Borders and padding are added to the div to frame in the picture and the
caption.
</p>
</body>

</html>

Hay ocasiones que queremos que en nuestra página web un elemento que
se visualice siempre en la parte inferior de su contenedor. Si nunca te ha
surgido la necesidad, tiempo al tiempo... Creo que lo primero que se
prueba, ya te adelanto el resultado: no funciona, es lo siguiente:

#elemento{

float:bottom;

Página 150 de 310


}

Pero como ya he comentado no funciona. La solución por suerte es bastante


sencilla. Vamos a ver como realizarlo.

Solución

<!DOCTYPE html>
<html>
<head>
<title>Fixed footer example 1</title>
<style type="text/CSS">
html, body{
padding: 0px;
margin: 0px;
}

body {
padding-bottom: 70px;
background-color: yellow;
}

#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
background-color: green;
}
</style>
</head>
<body>
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto
<div id="footer"> esto es el pie
</div>
</body>
</html>

Página 151 de 310


Deja la primera letra de un párrafo flote a la izquierda

<!DOCTYPE html>
<html>
<head>
<style>
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>

<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

Página 152 de 310


Creación de un menú horizontal

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
Página 153 de 310
In the example above, we let the ul element and the a element float to the
left.
The li elements will be displayed as inline elements (no line break before or
after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a
width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>

</body>
</html>

Menú Vertical

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
/*float:left;*/
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
display:block;
}
a:hover {
Página 154 de 310
background-color:#ff3300;
}
/*li {display:inline;}*/
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>

<li><a href="#">Link two</a></li>

<li><a href="#">Link three</a></li>

<li><a href="#">Link four</a></li>

</ul>

<p>
In the example above, we let the ul element and the a element float to the
left.
The li elements will be displayed as inline elements (no line break before or
after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a
width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>

</body>
</html>

Creación de una página web sin tablas


Utiliza float para crear una página web con un encabezado, un pie de
página, contenido a la izquierda y la página principal.

Página 155 de 310


<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{

Página 156 de 310


margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h1 class="header">Bienvenido a nuestra
web</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the
number of entities required to explain anything." William of Ockham (1285-
1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum."</p>
</div>
<div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
</div>
</body>
</html>

Todas las propiedades CSS Float


El número en el "CSS" en la columna indica qué versión de CSS se define la
propiedad (o CSS1 CSS2).

Propiedad Descripción Valores CSS


clear Especifica los lados de un left 1
elemento donde otros elementos right
flotantes no están permitidos both
none
inherit
float Especifica si una caja debe flotar left 1
right
none
inherit

Página 157 de 310


CSS Alineación Horizontal

En CSS, varias propiedades se utilizan para


alinear elementos horizontalmente.

Alineación de elementos de bloque


Un elemento de bloque es un elemento que ocupa todo el ancho disponible
completo, y tiene un salto de línea antes y después de ella.

Ejemplos de elementos de bloque:

 <h1>
 <p>
 <div>

En este apartado veremos cómo alinear horizontalmente los elementos de


bloque.

Alineación central utilizando la propiedad


margen
Los elementos de bloque se pueden alinear ajustando los márgenes
izquierdo y derecho a "auto".

Nota: El uso de "margin: auto" no funciona en Internet Explorer 8 y


versiones anteriores, a menos que se declare un DOCTYPE!.

Ajustaremos los márgenes izquierdo y derecho a auto especifica que se


debe dividir el margen disponible por igual. El resultado es un elemento
centrado:

Ejemplo

Página 158 de 310


.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember
that all the people in this world haven't had the advantages that you've
had.'</p>
</div>
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a
!DOCTYPE is declared.</p>
</body>
</html>

Consejo: Alinear no tiene efecto si el ancho es de 100%.

Nota: En IE5 hay un error de manipulación margen para elementos de


bloque. No vamos a intentar solventarlo.
Página 159 de 310
Alineación izquierda y derecha utilizando la
propiedad posición
Un método para alinear elementos es utilizar el posicionamiento absoluto:

Ejemplo
.right
{
position:absolute;
right:0px; /*le digo que esté a 0px de la derecha, así que
se me pega a la derecha y como especifico el ancho del
bloque a 300, el bloque se queda a la derecha con ese
ancho*/
width:300px;
background-color:#b0e0e6;
}

<!DOCTYPE html>
<html>
<head>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember
that all the people in this world haven't had the advantages that you've
had.'</p>
</div>
</body>
</html>

Nota: los elementos posicionados en posición absoluta se eliminan del flujo


normal, ylos elementos pueden solaparse.

Página 160 de 310


Cuestiones de Compatibilidad crossbrowser
Al alinear los elementos de este tipo, siempre es una buena idea predefinir
el margen y el relleno para el elemento <body>. Esto es para evitar
diferencias visuales en diferentes navegadores.

Hay un problema con IE8 y anteriores, cuando se utiliza la propiedad


position. Si un elemento contenedor (en nuestro caso <div
class="container">) tiene una anchura especificada, y falta la declaración
DOCTYPE, en las versiones de IE8 y anteriores se añadirá un margen 17px
a la derecha.Este parece ser el espacio reservado para una barra de
desplazamiento. Coloca siempre la declaración DOCTYPE al utilizar la
propiedad position:

Ejemplo
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:0;
padding:0;
}
.container
{
margin:auto;
position:relative;

Página 161 de 310


width:70%;
}

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>Note: </b>When aligning using the position property, always
include the !DOCTYPE declaration! If missing, it can produce strange results
in IE browsers.</p>
</div>
</div>
</body>
</html>

Alinear a la Izquierda o a la Derecha


Utilizando la propiedad float
Un método para alinear elementos es utilizar la propiedad float:

Ejemplo
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

<!DOCTYPE html>
<html>
<head>
<style>
.right
{
float:right;
Página 162 de 310
width:300px;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember
that all the people in this world haven't had the advantages that you've
had.'</p>
</div>
</body>
</html>

Cuestiones de Compatibilidad crossbrowser


Al alinear los elementos de estamanera, siempre es una buena idea
predefinir margen y el relleno para el elemento <body>. Esto es para evitar
diferencias visuales en diferentes navegadores.

Hay un problema con IE8 y anteriorescuando usamos la propiedad float. Si


falta la declaración! DOCTYPE , En IE8 y versiones anteriores se añade un
margen de 17px en el lado derecho. Este parece ser el espacio reservado
para una barra de desplazamiento. Coloca siempre la declaración DOCTYPE
al utilizar la propiedad float:

Ejemplo
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

<!DOCTYPE html>
<html>
<head>

Página 163 de 310


<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>Note: </b>When aligning using the float property, always include
the !DOCTYPE declaration! If missing, it can produce strange results in IE
browsers.</p>
</div>

</body>
</html>

Creando web con un poquito de javascript

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
Página 164 de 310
</style>
<script language="javascript" type="text/javascript">
function Inicio(){
var obj = document.getElementById('destino');
obj.innerHTML = 'Estas en <strong>Inicio</strong>';
}
function Contacto(){
var obj = document.getElementById('destino');
obj.innerHTML = '<strong>Estas en contacto</strong>';
}
</script>
</head>
<body>
<ul>
<li><a href="#" onclick="Inicio()">Inicio</a></li>
<li><a href="#" onclick="Contacto()">Contacto</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<div id="destino">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,


sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</div>

</body>
</html>

CSS pseudo-clases

La pseudo-clases CSS se utilizan para añadir efectos especiales


a algunos selectores.

Sintaxis
La sintaxis de pseudo-clases:

selector:pseudo-class {property:value;}

Las Clases CSS también se puede utilizar con pseudo-clases:


Página 165 de 310
selector.class:pseudo-class {property:value;}

Las pseudo-clases para hipervínculos


Los enlaces pueden aparecer de forma diferente como ya hemos visto:

Ejemplo
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>

<body>
<p><b><a href="default.asp" target="_blank">This is a
link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the
CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition
in order
to be effective.</p>
</body>
</html>

Nota: a: hover debe ir después a: link y de a: visited en la definición CSS


para que funcione!

Nota: a: active debe ir después de una: hover en la definición CSS para


que funcione!

Nota: Los nombre de las Pseudo-clase no distinguen entre mayúsculas y


minúsculas.

Página 166 de 310


Clases y pseudo-clases en CSS
Las pseudo-clases pueden ser combinados con clases CSS:

/*hipervínculos de la clase red que han sido visitados*/


a.red:visited {color:#FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

Si el enlace en el ejemplo anterior se ha visitado, se muestran en rojo.

CSS –La pseudo-clase :first-child


La pseudo-clase:first-child hace referencia aun elemento determinado, el
primer hijo de un elemento.

Nota: Para que funcione :first-child en IE8 y anteriores, debemos definir el


<DOCTYPE!> .

Referenciando al primer elemento <p>


En el ejemplo siguiente, el selector referencia a cualquier elemento <p>
que es el primer hijo de cualquier elemento, tiene efecto solo si el primer
hijo es un párrafo, en este caso:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE
must be declared.</p>
</body>
</html>
Página 167 de 310
Si añadimos los elementos p dentro de un Div, haremos referencia al primer hijo p de
cada uno de los div(o de cualquier otro elemento contenedor)

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<div>
<p>This is some text.</p>
<p>This is some text.</p>
</div>
<div>
<p>This is some text.</p>
<p>This is some text.</p>
</div>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE
must be declared.</p>
</body>
</html>

Referenciando al primer elemento <i> en


todos los elementos <p>
En el ejemplo siguiente, el selector hace referencia al primer elemento
<em>de todos los elementos <p>:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
p > em:first-child /*primer hijo directo <em> de <p>, el <em> no puede
estar dentro de otro contenedor*/
{
color:blue;
}
Página 168 de 310
</style>
</head>

<body>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p><strong>Note:</strong> For :first-child to work in IE8 and earlier, a
DOCTYPE must be declared.</p>
</body>
</html>

Probar la diferencia entre lo anterior y lo siguiente

<!DOCTYPE html>
<html>
<head>
<style>
p > em:first-child /*variaremos esto tb para ver la diferencia.
Probaremos tb con p i:first-child */
{
color:blue;
}
</style>
</head>

<body>
<p><span>I am a <em>strong</em> man.</span>I am a
<em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p><strong>Note:</b> For :first-child to work in IE8 and earlier, a
DOCTYPE must be declared.</strong>
</body>
</html>

Haciendo referencia a todos los elementos<i>


en todos los elementos <p>que sean el
primer hijo
Ejemplo

<html>
<head>
<style>
p:first-child i
{
color:blue;
Página 169 de 310
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>

Ahora meteremos los <p> dentro de un <div> y copiaremos el elemento <div>

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be


declared.

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>

<body>
<div>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE
must be declared.</p>
</div>
<div>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

Página 170 de 310


</div>
</body>
</html>

CSS - La Pseudo-clase:lang
La pseudo-clase :lang permite definir reglas especiales para diferentes
idiomas.

Nota: IE8 soporta la pseudo-clase :lang sólo si se especifica el


<DOCTYPE!> .

En el siguiente ejemplo, la pseudo-clase :lang define las comillas para los


elementos de q con lang = "no":

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no)
{
quotes: "**~" "~**"; /*primera y segunda comilla*/
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with
lang="no":</p>
<p><b>Note:</b> IE8 supports the :lang pseudo class
only if a !DOCTYPE is specified.</p>
</body>
</html>

Más ejemplos

Página 171 de 310


Uso de: focus
Este ejemplo muestra cómo utilizar pseudo-clase :focus.

<!DOCTYPE html>
<html>
<head>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>

<body>
<form action="form_action.asp" method="GET">
First name: <input type="text" name="fname" /><br>
Last name: <input type="text" name="lname" /><br>
<input type="submit" value="Submit" />
</form>

<p><b>Note:</b> IE8 supports the :focus pseudo-class only if a


!DOCTYPE is specified.</p>

</body>
</html>

CSS pseudo-elementos

Los pseudo-elementosCSS se utilizan para añadir efectos


especiales a algunos selectores.

Sintaxis
La sintaxis de los pseudo-elementos:

Página 172 de 310


selector:pseudo-element {property:value;}

Las Clases CSS también se puede utilizar con los pseudo-elementos:

selector.class:pseudo-element {property:value;}

El Pseudo-elemento :First-line
El Pseudo-elemento :First-line se utiliza para agregar un estilo especial a la
primera línea de un texto.

En el siguiente ejemplo el navegador formatea la primera línea de texto en


un elemento de <p> de acuerdo con el estilo del Pseudo-elemento :First-
line (el donde el navegador quiebre la línea depende del tamaño de la
ventana del navegador):

Ejemplo
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can use the :first-line pseudo-element to add a special effect to the
first line of a text.</p>
</body>
</html>

Nota: El pseudo-elemento :first-line sólo se puede utilizar con los


elementos a nivel de bloque.

Nota: Las siguientes propiedades se aplican pseudo-elemento :first-line

Página 173 de 310


propiedades source
propiedades color
propiedades background
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height

 clear

El pseudo-elemento:First-letter
El pseudo-elemento:First-letter se utiliza para agregar un estilo especial a la
primera letra de un texto:

Ejemplo
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>

<body>
<p>You can use the :first-letter pseudo-element to add a special effect to
the first character of a text!</p>
</body>
</html>

Nota: El pseudo-elemento:First-letter sólo se puede utilizar con los


elementos a nivel de bloque.

Página 174 de 310


Nota: Las siguientes propiedades se aplican al pseudo-elemento:First-
letter:

propiedadessource
propiedadescolor
propiedadesbackground
propiedadesmargin
propiedadespadding
propiedadesborder
 text-decoration
 vertical-align (solo si "float" es "none")
 text-transform
 line-height
 float
 clear

Los pseudo-elementos y las clases CSS


Los pseudo-elementos se pueden combinar con las clases CSS:

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

El ejemplo anterior muestra la primera letra de todos los párrafos con class
= "artícle", en rojo.

Múltiples pseudo-elementos
Varios pseudo-elementos también se pueden combinar.

En el siguiente ejemplo, la primera letra de un párrafo será de color rojo, en


un tamaño de letra extra grande. El resto de la primera línea será de color
azul, y en small-caps. El resto del párrafo tendrá el tamaño de fuente y el
color predeterminados:

Ejemplo
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
Página 175 de 310
{
color:#0000ff;
font-variant:small-caps;
}

<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add
a special effect to the first letter and the first line of a text!</p>
</body>
</html>

El pseudo-elemento CSS:before
El pseudo-elemento :before se puede utilizar para insertar un cierto
contenido antes del contenido de otro elemento.

El ejemplo siguiente inserta una imagen antes de cada elemento h1:

Ejemplo
h1:before
{
content:url(smiley.gif);
}
Página 176 de 310
This is a heading
The :before pseudo-element inserts content before an element.

This is a heading
Note: IE8 supports the content property only if a !DOCTYPE is specified.

<!DOCTYPE html>
<html>
<head>
<style>
h1:before {content:url('smiley.gif');}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property
only if a !DOCTYPE is specified.</p>
</body>
</html>

El pseudo-elemento CSS :after


El pseudo-elemento CSS :after se puede utilizar para insertar un cierto
contenido después del contenido de otro elemento.

El ejemplo siguiente inserta una imagen después de cada elemento h1:

Ejemplo
h1:after
{
content:url(smiley.gif);
}

<!DOCTYPE html>
<html>
<head>
Página 177 de 310
<style>
h1:after {content:url(smiley.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is
specified.</p>
</body>
</html>

También admite texto


h1:after {content:" esto el texto añadido";}
o incluso esto
h1:after {content:url(smiley.gif) " esto el texto añadido"}

Todas las pseudo-clases CSS


Selector Ejemplo Ejemplo de descripción
:link a:link Selecciona todos los enlaces no visitados
:visited a:visited Selecciona todos los enlaces visitados
:active a:active Selecciona el enlace activo
:hover a:hover Selecciona enlaces ratón sobre
:focus input:focus Selecciona el elemento que tiene el foco de entrada
:first-letter p:first-letter Selecciona la primera letra de cada elemento <p>
:first-line p:first-line Selecciona la primera línea de cada elemento <p>
:first-child p:first-child Selecciona cada <p> elementos que es el primer
hijo de su padre
:before p:before Insertar contenido antes de cada elemento <p>
:after p:after Insertar contenido después de cada elemento <p>
: lang p:lang(it) Selecciona todos los elementos <p> con un valor
( language ) de atributo lang comenzando con "eso"

Demostración: Navigation Bar

Página 178 de 310


Barras de navegación
Que la navegación sea fácil es importante para cualquier sitio web.

Con CSS podemos transformar aburridos menús HTML en barras de


navegación agradables.

Barra de navegación = Lista de Enlaces


En nuestro ejemplo vamos a construir la barra de navegación a partir de
una lista HTML estándar.

Una barra de navegación es básicamente una lista de enlaces, así que usar
el <ul> y elementos <li>es bastante lógico:

Ejemplo
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be
URLs.</p>

</body>
</html>

Ahora vamos a quitar los puntos, los márgenes y el relleno de la lista:

Ejemplo
Página 179 de 310
ul
{
list-style-type:none;
margin:0;
padding:0;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Expliquemos el ejemplo:

 list-style-type: none - Elimina los puntos. Una barra de navegación


no necesita marcadores de lista
 Utilizamos el ajuste de márgenes y el relleno a 0 para eliminar la
configuración del navegador por defecto

El código en el ejemplo anterior es el código estándar que se utiliza en las


dos barras de navegación vertical y horizontal.

Barra de navegaciónVertical
Para crear una barra de navegación vertical, sólo tenemos que añadir el
estilo de los elementos <a>, al código anterior:

Página 180 de 310


Ejemplo
a
{
display:block;
width:60px;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>

Expliquemos el ejemplo:

 display: block –La Visualización de los enlaces como elementos de


bloque hace el área entera del vínculo clickable (no sólo el texto), y
nos permite especificar la anchura
 Ancho: 60px - Los elementos de bloque ocupan todo el ancho
disponible de forma predeterminada. Queremos especificar un ancho
de 60 píxeles
Página 181 de 310
Nota: Especifica siempre el ancho de los elementos <a> en una barra de
navegación vertical. Si se omite el ancho, IE6 puede producir resultados
inesperados.

Barra de NavegaciónHorizontal
Hay dos formas de crear una barra de navegación horizontal. Mediante el
uso de elementos inline o floatingde una lista.

Ambos métodos funcionan muy bien, pero si quieres que los enlaces sean
del mismo tamaño, tiene que utilizar el método de float.

Artículos de Lista Inline


Una forma de crear una barra de navegación horizontal es especificar los
elementos <li>como inline (inline va a eliminar el retorno de carro que por
defecto se añade a cada elemento de la lista):

Ejemplo
li
{
display:inline;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
Página 182 de 310
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Expliquemos el ejemplo:

 display: inline; - De forma predeterminada, los elementos <li> son


elementos de bloque. En este sentido, eliminaremos los saltos de
línea antes y después de cada elemento de la lista, para mostrarlos
en una sola línea

Elementos flotantes Lista


En el ejemplo anterior los enlaces tienen anchuras diferentes.

Para que todos los vínculos tegan un ancho igual, utiliza el float con los
elementos <li> y especifica el ancho de los elementos <a>:

Ejemplo
li
{
float:left;
}
a
{
display:block;
width:60px;
}

hidden: Este valor indica que los contenidos que, por el tamaño de la capa,
no quepan en la misma, se deben recortar. Por ello, la capa tendrá siempre
el tamaño configurado, pero los contenidos en ocasiones podrán no verse
por completo.El desbordamiento se recorta. Entre otras cosas nos sirve para
que, en determinados casos, en el caso de desbordamiento, no nos
aparezcan los scrolls

http://www.w3schools.com/cssref/playit.asp?filename=playcss
_overflow&preval=hidden
Página 183 de 310
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can


produce unexpected results.</p>

<p>A background color is added to the links to show the link area. The
whole link area is clickable, not just the text.</p>

<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li


elements from going outside of the list.</p>

</body>
</html>

Página 184 de 310


Expliquemos el ejemplo:

 float: left - Usamos float para que los elementos de bloque se


deslicen uno al lado del otro
 display: block –La Visualización de los enlaces como elementos de
bloque hace que el área entera del vínculo sea clickable (no sólo el
texto), y nos permite especificar la anchura
 anchura: 60px - Dado que los elementos de bloque tomantodo el
ancho completo disponible, no podemos hacerlos ―flotar‖ al lado de
otro si no especificamos el ancho de los enlaces, en este caso lo
establecemos a 60px
 overflow:hidden añadimos este elemento para prevenir que los
elementos se salgan de la lista. Entre otras cosas no nos aparecerán
scrolls.

Ejemplo completo del overflow:hidden

<!DOCTYPE html>
<html>
<head>
<style>
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}

div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>

<body>
<p>The overflow property specifies what to do if the content of an element
exceeds the size of the element's box.</p>

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to
have better control of the layout. The default value is visible.</div>

<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to
have better control of the layout. The default value is visible.</div>

Página 185 de 310


</body>
</html>

CSS Galería de imágenes

Podemos utilizar CSS para crear una galería de imágenes.

Galería de imágenes
La siguiente galería de imágenes se crea con CSS:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
div.img
{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;

Página 186 de 310


margin: 2px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="klematis_big.htm"><img
src="klematis_small.jpg" alt="Klematis" width="110" height="90"/></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"><img
src="klematis2_small.jpg" alt="Klematis" width="110" height="90"/></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"><img
src="klematis3_small.jpg" alt="Klematis" width="110" height="90"/></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"><img
src="klematis4_small.jpg" alt="Klematis" width="110" height="90"/></a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

CSS Image Opacidad / Transparencia

Crear imágenes transparentes con CSS es sencillo.

Nota: La propiedad opacity pertenece a CSS 3.

Ejemplo 1 - Creación de una imagen


transparente
Página 187 de 310
Primero mostraremos cómo crear una imagen transparente con CSS.

Imagen normal:

La misma imagen con transparencia:

Mira el siguiente CSS:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9, Firefox, Chrome, Opera, Safari usan la propiedad opacity para la


transparencia. La propiedad de opacity puede tomar un valor comprendido
entre 0,0 - 1.0. Un valor más bajo hace que el elemento más transparente.

IE8 y anteriores usan el filtro filter: alfa (opacity = x) . La x puede


tomar un valor entre 0 - 100. Un valor más bajo hace el elemento más
transparente.

Ejemplo 2 - Transparencia de imagen - Efecto


Hover

Página 188 de 310


El CSS es el siguiente:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

El primer bloque de CSS es similar al código del Ejemplo 1. Hemos añadido


lo que debería ocurrir cuando un usuario coloque el cursor sobre una de las
imágenes. En este caso se desea que la imagen no sea transparente cuando
el usuario coloque el cursor sobre ella.

El CSS para esto es: opacidad = 1 .

IE8 y anteriores: filtro: alfa (opacidad = 100) .

Cuando el puntero del ratón se mueve fuera de la imagen, la imagen será


transparente de nuevo.

Código completo

<!DOCTYPE html>

<html>

<head>

<style>

img

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

img:hover

{
Página 189 de 310
opacity:1.0;

filter:alpha(opacity=100); /* For IE8 and earlier */

</style>

</head>

<body>

<h1>Image Transparency</h1>

<img src="klematis.jpg" width="150" height="113" alt="klematis"/>

<img src="klematis2.jpg" width="150" height="113" alt="klematis"/>

<p><strong>Note:</strong> In IE, a &lt;!DOCTYPE&gt; must be added for


the :hover selector to work on other elements than the &lt;a&gt;
element.</p>

</body>

</html>

Ejemplo 3 - Texto en un div Transparente

Página 190 de 310


El código fuente es el siguiente:

<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url('klematis.jpg') repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

En primer lugar, se crea un elemento div (class = "background") con una


altura fija y anchura, una imagen de fondo y un borde. Luego creamos un
div más pequeño (class = "transbox") dentro del primer elemento div. El div

Página 191 de 310


"transbox" tiene un ancho fijo, un color de fondo, y un borde - y es
transparente. En el interior del div transparente, añadimos un poco de texto
dentro del elemento <p>.

CSS Sprites de Imagen

Sprites de imagen
Un sprite de imagen es una colección de imágenes puestas en una sola
imagen.

Una página web con muchas imágenes puede tardar mucho tiempo para
cargar y genera múltiples peticiones del servidor.

El uso de sprites de imagen reducirá el número de solicitudes al servidor y


ahorraremos ancho de banda.

Sprites de Imagen - Ejemplo simple


En lugar de utilizar tres imágenes diferentes, utilizamos una sola imagen
("img_navsprites.gif"):

http://www.w3schools.com/css/img_navsprites.gif

Con CSS, podemos mostrar sólo la parte de la imagen que necesitamos.

En el ejemplo siguiente, el CSS especifica qué parte de la


imagen"img_navsprites.gif" queremos mostrar:

Ejemplo
img.home
{
width:46px;
height:44px;

Página 192 de 310


background:url(img_navsprites.gif) 0 0;
}

<!DOCTYPE html>
<html>
<head>
<style>
img.home
{
width:46px;
height:44px;
background:url('img_navsprites.gif') 0 0;
}
img.next
{
width:43px;
height:44px;
background:url('img_navsprites.gif') -92px 0;/*hay que poner el px que
si no no funciona*/
}
</style>
</head>

<body>
<img class="home" src="img_trans.gif" width="1" height="1" />
<br><br>
<img class="next" src="img_trans.gif" width="1" height="1" />
</body>
</html>

Explicación delEjemplo:

 <img class="home" src="img_trans.gif" /> - Sólo define una


pequeña imagen transparente porque el atributo src no puede estar
vacío. La imagen que aparecerá será la imagen de backgroundque
especificamos en CSS

http://www.w3schools.com/css/img_trans.gif

 width: 46px; height: 44px; - Define la parte de la imagen que


deseamos utilizar
 background: url (img_navsprites.gif) 0 0, - Define la imagen de fondo
y su posición (left 0px, top 0px)

Esta es la forma más fácil de usar sprites de imagen, ahora veremos su uso
mediante enlaces y efectos hover.

Página 193 de 310


Sprites de imagen - Crear una lista de
navegación
Queremos utilizar la imagen de sprite ("img_navsprites.gif") para crear una
lista de navegación.

Vamos a utilizar una lista de HTML, ya que puede ser un enlace y también
es compatible con una imagen de fondo:

http://www.w3schools.com/css/img_navsprites.gif
Ejemplo
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-
style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
</style>
</head>

Página 194 de 310


<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

Explicación del Ejemplo:

 # Navlist {position: relative;} –la posición se establece como relativa


para permitor posiciones absolutas en su interior
 # Navlist li {margin: 0; padding: 0; list-style: none; position:
absolute; top: 0;} –El margen y el relleno se establece en 0, el list-
style se elimina, y todos los elementos de la lista están posicionados
de forma absoluta
 #navlist li, #navlist a{height:44px;display:block;} - la altura de
todas las imágenes se establece a 44px

Ahora empieza a posicionar y establecer el estilo para cada parte específica:

 #home{left:0px;width:46px;}- Posicionamos todo a la izquierda, y la


anchura de la imagen es 46px
 #home{background:url(img_navsprites.gif) 0 0;} - Define la imagen
de fondo y su posición (izquierda 0px, top 0px)
 #prev{left:63px;width:43px;}- Posicionamos 63px a la derecha
#home width 46px + algo más de espacio entre ítems) y el ancho es
de 43px.
 # prev {background: url ('img_navsprites.gif')-47px 0;} - Define la
imagen de fondo a 47px a la derecha (#home width 46px + 1px
divisor de línea de 1 píxel)
 #next{left:129px;width:43px;} - Situado 129px a la derecha (inicio
de #prev is 63px + #prev width 43px + espacioextra), y el ancho es
de 43px.
 #next{background:url('img_navsprites.gif') no-repeat -91px 0;} -
Define la imagen de fondo a 91px a la derecha (#home width 46px +
divisor de línea 1px + #prev width 43px +divisor de línea de 1 píxel)

Sprites de imagen - Efecto Hover


Ahora queremos añadir un efecto hover en nuestra lista de navegación.

Nuestra nueva imagen ("img_navsprites_hover.gif") contiene tres imágenes


de navegación y tres imágenes para utilizar con los efectos hover:

Página 195 de 310


http://www.w3schools.com/css/img_navsprites_hover.gif

Como se trata de una sola imagen, y no seis archivos separados, no


habrá ningún retardo en la carga cuando un usuario pase el ratón sobre
la imagen.

Tendremos que añadir solo tres líneas de código para agregar el efecto
hover:

Ejemplo
#home a:hover{background: url('img_navsprites_hover.gif') 0
-45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -
47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -
91px -45px;}

<!DOCTYPE html>
<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>

Página 196 de 310


<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>

Explicación del Ejemplo:

 Dado que el elemento de la lista contiene un enlace, podemos usar la


pseudo-clase :hover
 #home a:hover{background: transparent
url(img_navsprites_hover.gif) 0 -45px;} - Para las tres imágenes
hover se especifica la posición del fondo mismo, sólo que 45px más
abajo

CSS Tipos de Medios

Con los tipos de medio una página puede tener un diseño


para pantalla, uno para la impresión, una para dispositivos de
mano, etc

Tipos de Medios
Algunas propiedades CSS sólo están diseñados para un medio de
distribución determinado. Por ejemplo, la propiedad "voice-family"está
diseñada para aplicaciones de usuario auditivas. Algunas otras
propiedades se pueden utilizar para diferentes tipos de medios. Por
ejemplo, lapropiedad "tamaño de fuente" se puede utilizar tanto para la
pantalla como para los medios impresos, pero podríamos tenerlos con
diferentes valores. Un documento por lo general tiene un mayor tamaño
de letra en una pantalla que en papel, y sans-serif es más fácil de leer
en la pantalla, mientras que las fuentes serif son más fáciles de leer en
papel.

La regla @media
La regla @media permite diferentes reglas de estilo para los diferentes
medios de comunicación en la misma hoja de estilo.

Página 197 de 310


El estilo en el siguiente ejemplo le indica al navegador que muestre un
tipo de letra Verdana 14 píxeles en la pantalla. Pero si la página se
imprime, será en un tipo de letra Times de 10 pixeles de
tamaño.Observa que el font-weight se establece en negrita, tanto en
pantalla como en papel:

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-
size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>

<body>
....
</body>
</html>

Míralo tu mismo! Trata de Imprimir esta página, y verá que el párrafo


de abajo será mostrado en otra fuente, y tienen un tamaño de letra más
pequeño que el resto del texto.

Otros tipos de medios


Nota: Los nombres de los tipos de medios no distinguen entre
mayúsculas y minúsculas.

Tipo de Descripción
soporte
all Se utiliza para todos los dispositivos de tipo de medios de
comunicación
aural Se utiliza para voz y sintetizadores de sonido
braille Se utiliza para dispositivos táctiles en Braille
embossed Se utiliza para impresoras braille paginados
Página 198 de 310
handheld Se utiliza para pequeños dispositivos o de mano
print Se utiliza para impresoras
projection Usado para presentaciones como diapositivas proyectadas,
screen Se utiliza para pantallas de ordenador
tty Se utiliza para los medios de comunicación utilizando una
cuadrícula de caracteres de ancho fijo, como teletipos y terminales
tv Se utiliza para dispositivos tipo televisión

Ver manual de responsive web design al final de los apuntes.

CSS selectores atributo

Elementos de Estilo HTML con atributos


específicos
Es posible establecer el estilo <elementos HTML con atributos específicos,
no sólo con clase e id.

Nota: En IE7 y IE8 los selectores de atributos sólo se soportan si se


especifica un DOCTYPE!. La Selección de atributos NO se admite en IE6 e
inferiores.

Selector de atributos
En el ejemplo de abajo se modifica el estilo a todos los elementos con un
atributo title:

Ejemplo
[title]
{
color:blue;
}

<!DOCTYPE html>
<html>
<head>
<style>

Página 199 de 310


[title]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="google" href="http://google.com">google</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>

Selector de Atributo y Valor


En el ejemplo de abajo modificaremos el estilo de todos los elementos con
title = "":

Ejemplo
[title='hola']
{
border:5px solid green;
}

<!DOCTYPE html>
<html>
<head>
<style>
[title= 'hola']
{
border:5px solid green;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<img title="hola" src="w3css.gif" width="270" height="50" />
<br>

Página 200 de 310


<a title=" hola" href="http://google.com">Google</a><!—con el espacio
delante del hola no funcionará -->
<hr>
<h2>Will not apply to:</h2>
<p title="greeting">Hi!</p>
<a class="hola" href="http://google.com">Google</a>
</body>
</html>

Selector por atributo y valor - Varios Valores


En el ejemplo de abajo estableceremos los estilos a todos los elementos con
un atributo de título que contiene un valor especificado. Esto funciona
incluso si el atributo tiene valores separados por espacios:

Ejemplo
[title~=hello] { color:blue; }

<!DOCTYPE html>
<html>
<head>
<style>
[title~=hello]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>Will not apply to:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>

Página 201 de 310


En el ejemplo de abajo aplicaremos los estilos a todos los elementos con un
atributo lang que contiene un valor especificado. Esto funciona incluso si el
atributo tiene valores separados con un guión (-), (si tiene espacio en
blanco no funcionaría):

Ejemplo
[lang|=en] { color:blue; }

<!DOCTYPE html>
<html>
<head>
<style>
[lang|=en]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>Will not apply to:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
</body>
</html>

Diseño en Formularios
Los selectores de atributos son particularmente útiles para dar diseño a
formularios sin clase o ID:

Ejemplo
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
Página 202 de 310
{
width:120px;
margin-left:35px;
display:block;
}

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="" method="GET">
Firstname:<input type="text" name="Name" value="Peter" size="20"/>
Lastname:<input type="text" name="Name" value="Griffin" size="20"/>
<input type="button" value="Example Button"/>
</form>
</body>
</html>

Border Radius

<!DOCTYPE html>
<html>
<head>
<style>
div

Página 203 de 310


{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>
<div>The border-radius property allows you to add rounded corners to
elements.</div>
</body>
</html>

Box-shadows

Sintaxis
box-shadow: h-shadow v-shadow blur spread color inset;
Ejemplos
http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow

Note: The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each
specified by 2-4 length values, an optional color, and an optional inset keyword. Omitted lengths are 0.

Value Description Play it


h-shadow Required. The position of the horizontal shadow. Negative values are Play it »
allowed
v-shadow Required. The position of the vertical shadow. Negative values are Play it »
allowed
blur Optional. Difuminado de la sombra Play it »
spread Optional. El tamaño de la sombra Play it »
color Optional. The color of the shadow. Look at CSS Color Values for a Play it »
complete list of possible color values
inset Optional. Changes the shadow from an outer shadow (outset) to an Play it »
inner shadow

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888; /*5px para el difuminado*/
}
Página 204 de 310
</style>
</head>
<body>

<div></div>

</body>
</html>

CSS Code:
div
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:40px 40px 50px 20px pink;
}

Ejemplos de posibles valores

10px 10px black

50px 50px black

50px 50px 5px black

50px 50px 10px black

50px 50px 20px black

50px 50px 50px black

50px 50px 50px 5px black

50px 50px 50px 10px black

50px 50px 50px 20px black

50px 50px 50px 20px red


Página 205 de 310
50px 50px 50px 20px blue

50px 50px 50px 20px pink

40px 40px 50px 20px pink

20px 20px 50px 20px pink

10px 10px 50px 20px pink inset

10px 10px 30px 20px pink inset

10px 10px 5px 20px pink inset

10px 10px 5px 10px pink inset

10px 10px 5px 5px pink inset

Propiedad CSS3 transición

Compatibilidad con exploradores

La propiedad transition no es compatible con todos los navegadores.

Firefox 4 es compatible con una alternativa, la propiedad -moz-transition

Safari y Chrome apoyan otra alternativa, la propiedad -webkit-transition

Opera soporta una alternativa, la propiedad -o-transition.

Definición y uso

La propiedad transición es una propiedad resumida para las cuatro propiedades de transición:

transition-property, transition-duration, transition-timing-function, and transition-delay.

Nota: Siempre especifique la propiedad duración de transición, de lo contrario la duración es 0, y la transición no tendrá ningún efecto.

Default value: all 0 ease 0


Inherited: No
Version: CSS3
JavaScript syntax: object.style.transition="width 2s"

Sintaxis

transition: property duration timing-function delay;

Página 206 de 310


Atributos: http://www.css3.info/preview/css3-transitions/

Value Descripción

transition- Especifica el nombre de la propiedad CSS


property para la que tendrá efecto la transición e

transition- Especifica cuántos segundos o milisegundos


duration dura la transición

transition- Especifica la curva de velocidad del efecto de


timing- transición
function

transition- Define cuando el efecto de transición se


delay iniciará

http://leaverou.github.io/animatable/

Ejemplo

Pase el ratón sobre un elemento div para cambiar gradualmente el ancho de 100px a 300px:

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover {width:300px;}

<!DOCTYPE html>

<html>

<head>

<style>

div

width:100px;

height:100px;

background:red;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

Página 207 de 310


-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

div:hover

width:300px;

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>

Con keyframes

<!DOCTYPE html>

<html>

<head>

<style>

div

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

Página 208 de 310


@keyframes mymove

0% {top:0px; left:0px; background:red;}

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

75% {top:100px; left:0px; background:green;}

100% {top:0px; left:0px; background:red;}

@-webkit-keyframes mymove /* Safari and Chrome */

0% {top:0px; left:0px; background:red;}

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

75% {top:100px; left:0px; background:green;}

100% {top:0px; left:0px; background:red;}

</style>

</head>

<body>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>

</html>

Rotaciones

http://www.w3schools.com/cssref/pulpitrock.jpg

http://www.w3schools.com/cssref/cinqueterre.jpg

Página 209 de 310


<!DOCTYPE html>

<html>

<head>

<style>

body

margin:30px;

background-color:#E9E9E9;

div.polaroid

width:294px;

padding:10px 10px 20px 10px;

border:1px solid #BFBFBF;

background-color:white;

/* Add box-shadow */

box-shadow:2px 2px 3px #aaaaaa;

Página 210 de 310


}

div.rotate_left

float:left;

-ms-transform:rotate(7deg); /* IE 9 */

-moz-transform:rotate(7deg); /* Firefox */

-webkit-transform:rotate(7deg); /* Safari and Chrome */

-o-transform:rotate(7deg); /* Opera */

transform:rotate(7deg);

div.rotate_right

float:left;

-ms-transform:rotate(-8deg); /* IE 9 */

-moz-transform:rotate(-8deg); /* Firefox */

-webkit-transform:rotate(-8deg); /* Safari and Chrome */

-o-transform:rotate(-8deg); /* Opera */

transform:rotate(-8deg);

</style>

</head>

<body>

<div class="polaroid rotate_left">

<img src="pulpitrock.jpg" alt="" width="284" height="213" />

<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>

</div>

Página 211 de 310


<div class="polaroid rotate_right">

<img src="cinqueterre.jpg" alt="" width="284" height="213" />

<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>

</div>

</body>

</html>

Si quiero que se anime la foto cuando paso el ratón por encima

.polaroid:hover{
/* -8 grados */
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);

.polaroid{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

El valor all es por defecto y significa que todas las propiedades


serán afectadas, también puedo separar con comas las distintas
propiedades que se verán afectadas o poner una sola.
Para que además crezca cuando pasamos el ratón

.polaroid:hover{
transform:scale(1.5);
}

Multiples cambios

Puedo hacer transform:rotate(180deg) scale(1.5);

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
Página 212 de 310
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* For
Safari 3.1 to 6.0 */
transition:width 2s, height 2s, transform 2s;
}

div:hover
{
width:200px;
height:200px;
-webkit-transform:rotate(180deg);
/* Chrome, Safari, Opera */
transform:rotate(180deg);
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and


earlier versions.</p>

<div>Hover over me to see the transition effect!</div>

</body>
</html>

Web Css3
http://leaverou.github.io/animatable/

http://www.dhteumeuleu.com/ (http://codepen.io/ge1doot/)

http://lysergicstudio.com/animated-polaroid-gallery-with-pure-css/

como comprobar la seguridad de una clave

https://howsecureismypassword.net/

Creación de un diseño CSS desde cero


Vamosa intentar paso a paso, seguir el proceso de crear un diseño CSS totalmente
funcional. Vamos a explicar los conceptos paso a paso.

El Diseño
A continuación se muestra el diseño que vamos a utilizar como base.

Nuestra misión es conseguir el diseño mediante XHTML, CSS y algunas imágenes:

Página 213 de 310


Primero tenemos que identificar los principales elementos estructurales del diseño, para
poder saber cómo estructurar nuestro documento HTML.

La web está basada en rectángulos, y tenemos que recordar como dividir nuestro diseño.
Estas divisiones principales terminarán siendo siempre etiquetas <div> (en html5
podemos utilizar otras etiquetas que no sean <div>). Un <div> va a ser un recipiente
rectangular que podemos situar mediante el uso de CSS.

El siguiente diagrama muestra la forma en que se dividirá el diseño.

Página 214 de 310


Hemos identificado 5 elementos principales:

 Menú principal
Es el menú principal de este sitio web. Las imágenes cambian cuando el cursor del
ratón está encima de él (mediante hover).
Ancho: 760px
Alto: 50px

 Encabezado (banner)
El encabezado de página web incluye una imagen de fondo (puramente para la
estética), y el nombre de la empresa.
Ancho: 760px
Alto: 150px

 Contenido
La mayor parte de los contenidos del sitio web estarán aquí.
Ancho: 480px
Altura: cambiará en función del contenido

 Sidebar
Esto será segundo nivel de contenido que no es tan importante como el contenido
Página 215 de 310
principal.
Ancho: 280px
Altura: cambiará en función del contenido

 Pie de página
Información de copyright, créditos y texto alternativo.
Ancho: 760px
Alto: 66px

Este sitio también se centrará en la ventana del navegador. Ahora tenemos toda la
información que necesita para comenzar.

3. Plantilla HTML predeterminada


Partiremos de un documento HTML básico como punto de partida para todos los sitios
web. Si usted no entiende lo que es una línea de código significa paticular, mantenga el
puntero del ratón sobre la línea para una explicación.

Copie la plantilla y pégalo en tu editor HTML.


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="title" content="Web site" />

<meta name="description" content="Site description here" />

<meta name="keywords" content="keywords here" />

<meta name="language" content="en" />

<meta name="subject" content="Site subject here" />

<meta name="robots" content="All" />

<meta name="copyright" content="Your company" />

<meta name="abstract" content="Site description here" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<link id="theme" rel="stylesheet" type="text/css" href="style.css"


title="theme" />

</head>

<body>

</body>

Página 216 de 310


</html>

Guardar como index.html en eldirectorio raíz de su web (htdocs).

La estructura de directorios del sitio web debe ser así:

4. Ajuste del contenedor


Como te darás cuenta en el diseño, todo en nuestra página es 760px de ancho o menos,
y nada sale fuera de ese ancho. Lo que vamos a hacer es crear un contenedor para
nuestra página que es 760px de ancho, y se centra en el medio de la página. Los 5
elementos principales serán colocados en el interior de este contenedor.

Entre los <body></ body>, crearemos un <div> con un atributo id = "page-container ":

<body>

<div id="page-container">

Hello world.

</div>

</body>

Y eso es todo el código HTML que necesitamos para nuestro contenedor. Aparte del
CSS.

Crearemos un nuevo archivo de texto en blanco y lo guardaremos como style.css en el


directorio /css/.

Crearemos una nueva regla en la hoja de estilos para el contenedor de la página:

#page-container { }

El # delante del Id indica al navegador que estamos seleccionando un elemento


determinado con ese id.

Un id es un identificador único que se utiliza para las cosas que sólo van a aparecer una
vez en la página. Así que para los encabezados, pies de página, el menú de navegación,
etc usamos el id, y para cualesquiera elementos como los enlaces debemos utilizar las
clases, que pueden aparecer varias veces en la misma página.

Página 217 de 310


No vamos a ser capaces de ver los cambios que estamos haciendo a este <div>, porque
es transparente por defecto. Así que lo primero que haremos es hacer que el fondo del
div sea rojo, para darnos un indicador visible de lo que estamos haciendo:

#page-container { background: red; }

Deberíamos ver algo como esto en toda la anchura de su navegador:

Primero debemos establecer un ancho de 760px a este div.

#page-container { width: 760px; background: red; }

Actualizar la página en su navegador para ver como se aplica la regla.

Ahora vamos a centrar este div. Esto se hace mediante el establecimiento de los
márgenes a auto. Cuando los márgenes izquierdo y derecho están establecidos en
automático, el div se colocará en el centro del contenedor.

#page-container { width: 760px; margin: auto; background: red; }

Ahora deberíamos tener un bloque centrado en rojo con un ancho de 760px y el texto
"Hello World." escrito en él. Pero está colocado a unos 8px de la parte de arriba del
navegador.

Esto se debe a que las etiquetas <html> y <body> tienen márgenes predeterminados y/o
relleno en casi todos los navegadores. Así que tenemos que escribir una regla CSS para
restablecer los márgenes y el relleno en las etiquetas <html> y <body> a cero. Añade
esta regla a la parte superior de tu archivo css:

html, body { margin: 0; padding: 0; }

Una coma entre selectores CSS significa "y", por lo que aquí la regla se aplica a la
etiqueta html y al body. Debido a que ambos existen en la página, se aplica a ambos.

Ahora nuestra caja está donde debe estar. Ten en cuenta que a medida añadimos más
contenido a esta div, la altura se cambiará automáticamente para adaptarse a cualquier
contenido que se coloque en su interior.

Vamos a seguir adelante.

5. Los elementos principales


Tenemos que añadir 5 divs, todos con un id individual que describe su propósito. Estos
divs se corresponden con las áreas principales del diseño que hemos identificado en el
paso 2. Sustituiremos el texto Hello World. por el div que hay debajo. Sólo por ahora
Página 218 de 310
también vamos a poner texto dentro de los divs para una fácil identificación visual
cuando veamos la página.

<div id="page-container">
<div id="main-nav">
Main Nav
</div>
<div id="header">
Header
</div>
<div id="sidebar-a">
Sidebar A
</div>
<div id="content">
Content
</div>
<div id="footer">
Footer
</div>
</div>

La página debería ser algo como esto:

Sin CSS, los divs se organizarán de arriba a abajo, uno debajo del otro, en el mismo
orden en que están en el código. Esto normalmente se refiere como el "flujo" del
documento.

Así que vamos a utilizar la información que tenemos para hacer nuestros divs del
tamaño correcto.

Quitaremos el fondo rojo del # page-container, y añadiremos una nueva regla para el
#main-nav. Estableceremos el fondo del menú principal a rojo para que lo podamos ver,
ajustando su altura a 50px:

#page-container {
width: 760px; margin: auto;
}

#main-nav {
background: red; height: 50px;
}

Ten en cuenta que no se ha especificado la anchura del div. Esto es porque por defecto,
un div se estirará para llenar su contenedor principal, que en este caso, es nuestro div
#page-container que se fijó a 760px de ancho.

Haz lo mismo para el div de cabecera, utilizando la altura que nos dieron en el diseño.
Estableceremos el fondo como azul.
Página 219 de 310
#header {
background: blue; height: 150px;
}

Vamos a hacer el pie de página. El pie será de color naranja.

Recuerda que al escribir tu hoja de estilo, debes agrupar los estilos juntos. Así que todos
los estilos de encabezado irían juntos. Todos los estilos de pie de página estaríamos
juntos, y todos los estilos de navegación estarían juntos. También ayuda estructurar en
un orden similar al HTML, por lo que pondremos la cabecera en la parte superior, y el
pie en la parte inferior.

#footer {
background: orange; height: 66px;
}

Ahora los próximos 2 divs son ligeramente diferentes. Las alturas son dependientes del
contenido que está dentro de ellos, de modo que no definiremos una altura. Vamos a
hacerlos verde oscuro y verde. Pon las reglas del css entre el encabezado y pie de
página. Esto hace que sean más fáciles de encontrar una vez que la hoja de estilo se
haga más grande.

#header {
background: blue; height: 150px;
}

#sidebar-a {
background: darkgreen;
}

#content {
background: green;
}

#footer {
background: orange; height: 66px;
}

Si todo ha ido bien, deberíamos tener una página que tiene este aspecto:

Página 220 de 310


6. Float
El concepto de Float puede ser un concepto difícil entender al principio. Básicamente un
float es un elemento que está alineado hacia la izquierda o hacia la derecha de su
contenedor.

En el caso de esta web, vamos a hacer un float de nuestro div sidebar-a a la derecha,
con un ancho de 280px. Agrega el siguiente CSS:

#sidebar-a {
float: right; width: 280px; background: darkgreen;
}

La página tiene este aspecto:

Sólo para hacer una prueba, reemplaza el texto contenido en el div por este:

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
gravida enim ut risus. Praesent sapien purus, ultrices a, varius
ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in
Página 221 de 310
nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae
lacus euismod vulputate. Nullam rhoncus mauris ac metus.
Maecenas vulputate aliquam odio. Duis scelerisque justo a pede.
Nam augue lorem, semper at, porta eget, placerat eget, purus.
Suspendisse mattis nunc vestibulum ligula. In hac habitasse
platea dictumst.
</div>

Observa que el texto contenido en el div se envuelve alrededor del div sidebar-a,
establecido como float, como se muestra a continuación:

Esto no es lo que queremos. Queremos que el contenido del div se coloque al lado del
div del sidebar, con su borde derecho pegado al borde izquierdo de la barra lateral.

Una forma sencilla de lograr esto en una página con un float, es poner un margen a la
derecha en nuestro div content que tenga el mismo ancho que nuestra barra lateral, en
este caso 280px. Esto pondrá el borde derecho del contenido lejos del borde derecho de
la página de contenedor.

#content {
margin-right: 280px; background: green;
}

Podríamos haber obtenido el mismo resultado colocando

#content {
float: right; background: green;
}
Estableciendo un ancho para el div content (por defecto va a querer
ocupar todo el ancho)

width: 480px;

Y modificando el footer con clear: both; (esto lo veremos a


continuación porque también ocurrirá con el sidebar-a)
Página 222 de 310
Quedando de esta manera:

#content {
background: green;float: right; width: 480px;
}

#footer {
background: orange; height: 66px; clear:both;
}

Bueno ya casi tenemos el diseño solucionado. Pero hay algo más que debemos
considerar ... ¿qué pasa si el div de la barra lateral es más alto que el div contenido?

Vamos a ver. Copia y pega este texto en la barra lateral div:

<div id="sidebar-a">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam


gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac,
suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum
gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod
vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam
odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta
eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula.
In hac habitasse platea dictumst.
</div>

Eso no es lo que queremos en absoluto. La razón por la que el pie de página no se ha


movido hacia abajo porque la barra lateral 'flota' a la derecha.

Página 223 de 310


Explicación: Por defecto, cualquier elemento flotante no va a empujar hacia abajo los
elementos que están debajo de él. Esto se debe a que los elementos flotantes no se
consideran parte del "flujo" del documento. Es como si estuvieran "flotando" en otra
capa por encima de los demás elementos, y por esto, no pueden afectar a sus posiciones.

¿Qué podemos hacer para solucionar este problema? Utilizaremos la propiedad css
“clear”.

Agrega esto a su hoja de estilos:

#footer {
clear: both; background: orange; height: 66px;
}

Cuando un elemento tiene la propiedad clear, si entra en contacto con un elemento float
se coloca justo debajo de donde el elemento flotado termina. Se puede especificar si se
realizan sólo para la parte izquierda o sólo para la parte derecha, en este caso podríamos
utilizar "right" o "both". Vamos a utilizar clear: both sólo para asegurarnos.

7. Estructura adicional
Ahora que tenemos los divs de diseño básico en su lugar, podemos añadir el resto de la
estructura que conforma el esqueleto de este sitio web.

Las principales elementos que todavía tenemos que añadir son:

Página 224 de 310


 Enlaces de Navegación
 Headings (Encabezamientos y títulos de contenido del sitio)
 Contenido
 Información del Pie (información de derechos de autor, créditos, y navegación
alternativa)

Con el fin de empezar a aplicar estos elementos sin romper el diseño de la página,
vamos a crear una clase útil que se llame "hidden".

Añadelo cerca de la parte superior de la hoja de estilo, después de la definición de la


etiqueta body:

.hidden {
display: none;
}

Esto significa que ahora podemos etiquetar cualquier elemento en el sitio como
"hidden", y no se mostrará en la página. Esto será muy útil más adelante. Vamos a
olvidarnos de él por ahora.

Vamos a hablar de títulos.

Los títulos en un documento HTML se definen por las etiquetas <h1>… <h6> según el
orden de importancia. Por ejemplo, h1 para el nombre del sitio web, <h2> para los
títulos principales (es decir, nombre de página), <h3> para los títulos secundarios, etc ...

Vamos a añadir un <h1> dentro de nuestro div cabecera, y a poner el nombre de la


empresa, en este caso Enlighten Designs. (hay que quitar el texto anterior en el que
ponía "header")

<div id="header">
<h1>Enlighten Designs</h1>
</div>

Si actualizas tu página te darás cuenta de que Enlighten Designs se ha introducido en


letras grandes dentro de la cabecera, pero también hay ahora una gran cantidad de
espacio en blanco alrededor del título. Esto es causado por los márgenes
predeterminados en <h1>.

Página 225 de 310


Así que tenemos que eliminar los márgenes y el relleno haciendo lo siguiente:

h1 {
margin: 0; padding: 0;
}

Ahora vamos a añadir la navegación. Los entresijos de cómo funciona la navegación


puede ser bastante complicado.

Nota: Hemos utilizado listas de definición pero tendríamos que utilizar listas no ordenadas.

La navegación se estructurará como una lista de definiciones (<dl>) con id individual en


cada término de definición (<dt>). Estos términos de definición tendrán enlaces a
nuestras secciones principales dentro de ellos. Si esto suena confuso, sólo tiene que
añadir este código en su main-nav div:

<div id="main-nav">
<dl>
<dt id="about">
<a href="#">About</a>
</dt>
<dt id="services">
<a href="#">Services</a>
</dt>
<dt id="portfolio">
<a href="#">Portfolio</a>
</dt>
<dt id="contact">

Página 226 de 310


<a href="#">Contact Us</a>
</dt>
</dl>
</div>

En términos fáciles de entender, el <dl> actúa como un contenedor, el <dt> 's son
identificadores únicos para cada elemento de navegación y los enlaces son ... Enlaces.

Usamos el identificador único más tarde cuando tengamos que hacer funcionar esta
navegación

Si actualizas, te darás cuenta de que parece un poco feo, así que por ahora, sólo
tendremos que ocultar la barra de navegación que agregamos, con la clase "hidden" que
hemos hecho antes.

<div id="main-nav">
<dl class="hidden">
<dt id="about">
<a href="#">About</a>
</dt>
<dt id="services">
<a href="#">Services</a>
</dt>
<dt id="portfolio">
<a href="#">Portfolio</a>
</dt>
<dt id="contact">
<a href="#">Contact Us</a>
</dt>
</dl>
</div>

"Y desaparecerá…"

Ahora vamos a ir directamente al apartado pie de página. Hay dos partes en el pie de
página, la información de derechos de autor y los créditos a la izquierda, y la parte de
navegación alternativa a la derecha.

Queremos que la navegación alternativa flote a la derecha, como lo hicimos con la barra
lateral y el contenido, así que vamos a poner eso en el primer div.

Colóquelo en un div con un id único de este modo:

<div id="footer">
<div id="altnav">
<a href="#">About</a>-
<a href="#">Services</a> -
<a href="#">Portfolio</a> -
<a href="#">Contact Us</a> -
<a href="#">Terms of Trade</a>
</div>
</div>

Por debajo de ese div, añadiremos los derechos de autor y el texto de los créditos.
Página 227 de 310
<div id="footer">
<div id="altnav">
<a href="#">About</a> -
<a href="#">Services</a> -
<a href="#">Portfolio</a> -
<a href="#">Contact Us</a> -
<a href="#">Terms of Trade</a>
</div>
Copyright © Enlighten Designs Powered by
<a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and
<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

Y eso es lo que haremos en el pie de página por ahora. Sólo para asegurarnos de que
estamos haciendolo bien, esto es lo que su sitio debería quedar así:

Vamos ahora a añadir el contenido en la parte principal. Utiliza etiquetas <h2> para los
epígrafes "About" y "Contact Us". Incluye los párrafos </ p>, y utiliza <br/> para los
saltos de línea.

<div id="content">
<h2>About</h2>
<p>
<strong>Enlighten Designs</strong> is an Internet solutions
provider that specialises in front and back end
development. To view some of the web sites we have created
view our portfolio.
</p>
<p>

Página 228 de 310


We are currently undergoing a 'face lift', so if you have
any questions or would like more information about the
services we provide please feel free to contact us.
</p>
<h2>Contact Us</h2>

<p>
Phone: (07) 853 6060
<br/>
Fax: (07) 853 6060
<br/>
Email:
<a href="mailto:info@enlighten.co.nz">Correo</a>
<br />
PO Box: 14159, Hamilton, New Zealand
</p>
<p>
<a href="#">More contact information…</a>
</p>
</div>

Refresca tu página y te darás cuenta de que hay más espacio en blanco apareciendo en
todo el contenido del div. Esto es debido a los márgenes predeterminados de las
etiquetas <h2> y <p>.

Tenemos que quitarle los márgenes y el relleno. Sin embargo, no queremos hacer esto
para cada etiqueta, solo para el párrafo y el título secundario que va a estar en el sitio
web. Para ello tenemos que utilizar selectores de CSS de descendientes.

Todos los elementos en HTML tienen una relación "padre, hijo 'entre sí. Si el 'tag a' esta
dentro del 'tag b', entonces la etiqueta a es el padre de la etiqueta b. En el código
anterior, nuestras etiquetas <h2> y nuestros <p> son ambos hijos del div #content.

Si queremos seleccionar los elementos secundarios de un padre específico, sepáralos


con un espacio, como el ejemplo siguiente:

#content h2 {
margin: 0; padding: 0;
}

#content p {
margin: 0; padding: 0;
}

O todo junto:

#content h2,#content p {
margin: 0; padding: 0;
}

Así que las reglas anteriores le indican al navegador que tiene que aplicar estos estilos
sólo a los <p> y a los <h2> que son elementos secundarios del div #content.

A continuación haremos que el texto se vea un poco mejor.


Página 229 de 310
8. Algunos estilos de texto básicos
Si estas harto de ver esas horribles colores de fondo, vamos a deshacernos de ellos
ahora. Vamos a quitarlos todos a excepción del menú de navegación rojo.

Así lo veremos un poco mejor, pero el texto aún se ve horrible. Vamos a establecer una
familia de fuentes global, el color y el tamaño para utilizar como una fuente agradable.
Los atributos de fuente que fijamos en el cuerpo serán heredados automáticamente a
cualquier otro texto en el sitio a menos que explícitamente sea reemplazado con otro
estilo. Insertaremos una nueva regla CSS justo antes de la clase "hidden" cerca de la
parte superior de la hoja de estilos:

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}

Las detalles del estilo son bastante auto explicativos

Si todo va según el plan, deberíamos ver algo como esto:

Lo que esto necesita es un poco de relleno para separar los bloques de contenido entre
sí.

De acuerdo con el diseño, el hueco por debajo de los encabezados de contenido es más
o menos 15px, y los huecos por debajo de cada párrafo son de alrededor de 15px. Así
que vamos a coger estas 2 reglas CSS que hemos hecho anteriormente y añadirles las
reglas para el padding-bottom:
Página 230 de 310
#content h2
{
margin: 0; padding: 0;
padding-bottom: 15px;
}

#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

También necesitamos 25px de relleno alrededor del div content , dándole un poco de
espacio para respirar.

Esta parte debe ser fácil, en teoría. Tenemos que establecer el relleno: 25px; sobre el
div, pero lamentablemente, debido a problemas en Internet Explorer, no podemos hacer
esto.

Vamos a insertar un div adicional dentro de los divs que queremos rellenar, y establecer
su clase a "padding". El relleno es lo único que se aplicará a estos divs relleno.

La razón por la que esto funciona es que los divs relleno no tienen un ancho establecido.

<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam gravida enim ut risus. Praesent sapien purus,
ultrices a, varius ac, suscipit ut, enim. Maecenas in
lectus. Donec in sapien in nibh rutrum gravida. Sed ut
mauris. Fusce malesuada enim vitae lacus euismod vulputate.
Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam
odio. Duis scelerisque justo a pede. Nam augue lorem,
semper at, porta eget, placerat eget, purus. Suspendisse
mattis nunc vestibulum ligula. In hac habitasse platea
dictumst.
</div>
</div>

Haz lo mismo para el div contenido.

Ahora bien, en la hoja de estilos vamos a crear 2 nuevas reglas:

#sidebar-a {
float: right;
width: 280px;
}

#sidebar-a .padding {
padding: 25px;
}

#content {
margin-right: 280px;
}

Página 231 de 310


#content .padding {
padding: 25px;
}

Usando el mismo método que usamos antes, hemos seleccionado sólo los elementos con
class = "padding" que son hijos de los #sidebar-a, o de divs #content.

El interlineado (espacio vertical entre las líneas de texto) en el texto del contenido del
sidebar debe ser mayor, de acuerdo con el proyecto gráfico. En CSS, se establece con el
atributo line-height. Añadiremos una altura de línea de 18px:

#sidebar-a {
float: right;
width: 280px;
line-height: 18px;
}

#content {
margin-right: 280px;
line-height: 18px;
}

Siguiendo con nuestro diseño, el título <h2> que hemos añadido parecer un poco feo.
Debido a que la fuente que tendríamos que utilizar no es una fuente web, vamos a tener
que reemplazarlos con imágenes. Crearemos dos imágenes como las siguientes, y los
pondremos en el directorio /images/headings/

http://www.subcide.com/images/dynamic/css-layout/about.gif

http://www.subcide.com/images/dynamic/css-layout/contact.gif

Reemplazaremos el texto del título con estas imágenes, pero recuerda que debemos
mantener las etiquetas <h2> alrededor de las etiquetas de imagen. Recuerda también
poner los atributos alt en las imágenes. Los Atributos ALT están diseñadas para
aparecer como una alternativa a la imagen si un usuario ve la página en un navegador
que no es compatible con imágenes, o las imágenes se han deshabilitado. También es
útil para los motores de búsqueda, ya que no pueden comprender las imágenes.

<h2>
<img src="./images/headings/about.gif" width="54px"
height="14px" alt="About" />

</h2>

<h2>
<img src="./images/headings/contact.gif" width="98px"
height="14px" alt="Contact Us" />

</h2>

Página 232 de 310


Esto está empezando a tomar forma. Deberíamos ver algo como esto:

9. La Cabecera
Para implementar la cabecera, tenemos que conseguir colocar la imagen de fondo en el
div de cabecera, Reemplazar el texto con un logo gráfico y colocarlo en el lugar
correcto en el encabezado (la barra gris oscuro a la derecha).

En primer lugar crear dos imágenes similares a las siguientes (o simplemente guardar
estos):

http://www.subcide.com/images/dynamic/css-layout/logo_enlighten.gif

Guardalo como /images/general/logo_enlighten.gif

Página 233 de 310


http://www.subcide.com/images/dynamic/css-layout/about.jpg

Guardalo como /images/headers/about.jpg

La primera parte es fácil. Establecer una imagen de fondo en el CSS usando el siguiente
formato:

#header {
height: 150px;
background: #db6d16 url('../images/headers/about.jpg');
}

La propiedad background que hemos usado es en realidad una propiedad resumen, lo


que nos permite especificar el color de fondo, la imagen, la posición de la imagen, y
cómo se repite la imagen, todo en una propiedad. Hemos establecido el background a la
misma tonalidad de naranja que el encabezado utiliza, sólo para que la página no se vea
demasiado suave si el usuario no tiene las imágenes habilitadas en su navegador (esto
hace tiempo era muy habitual). Las rutas de las imágenes en el archivo CSS son
direcciones relativas al archivo CSS, no a la página html. Esta es la razón por la que
necesitamos el .. / en la ruta anterior.

Ahora reemplaza el texto "Ilumina Designs" con la imagen del logotipo. Una vez más,
recuerda que debes mantener la etiqueta <h1> y poner un atributo alt descriptivo.

<div id="header">
<h1>
<img src="./images/general/logo_enlighten.gif" width="236"
height="36" alt="Enlighten Designs" border="0" />
</h1>
</div>

Página 234 de 310


Ahora tenemos que colocarla en su lugar correcto. Haremos esto mediante la flotación
de <h1> a la derecha, y luego con las propiedades "margin-top" y "padding-right" para
obtener la posición exacta. Agrega lo siguiente a la regla <h1> en tu hoja de estilos:

h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}

La razón por la que usamos padding-right en lugar de margin-right se debe a que los
márgenes con frecuencia puede provocar errores extraños en IE viejos si se utiliza en
ciertos lugares.

Y ya tenemos la cabecera en su sitio.

10. Pie de página


Lo primero que necesitamos es hacer que el texto se muestre adecuadamente. El diseño
muestra un texto gris claro(# c9c9c9), Tahoma y de 10px de tamaño.

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
}

Y para cambiar el color de los enlaces (y eliminar el enlace subrayado) se añade lo


siguiente:

#footer a {
color: #c9c9c9;
text-decoration: none;
}

Pero para los vínculos necesitamos una manera de destacarlos al pasar el ratón sobre
ellos, así que vamos a hacer que se conviertan en naranja con a:hover:

#footer a:hover {

Página 235 de 310


color: #db6d16;
}

También tenemos que añadir un borde superior de 1 píxel en el div del pie de página,
estableceremos un poco de relleno y un interlineado de 18px. Debido a que estamos
poniendo el relleno en el div pie de página, vamos a eliminar la propiedad height. No
necesitamos altura en este div:

#footer {
clear: both;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}

Lo último que queda por hacer es flotar la navegación alternativa a la derecha. Ten en
cuenta que los elementos flotantes deben tener un ancho especificado para que
funcionen correctamente, por lo que estableceremos un ancho ligeramente más grande
que lo que el nav realmente necesita, y estableceremos la alineación de texto a la
derecha para que el texto se coloque donde debería.

#footer #altnav
{
width: 350px;
float: right;
text-align: right;
}

Ya tenemos nuestro pie de página.

11. La Navegación
Hay un montón de CSS medianamente completo en este apartado, no es imprescindible
que entiendas exactamente lo que cada trocito de CSS hace, sólo que seas capaz de
modificar este css para hacer lo que quieras para otros sitios web, que es, básicamente,
cambiar anchos de alturas e imágenes . Sin embargo, a intentar explicar el código.

Vamos a comenzar de forma fácil. Quitar el fondo rojo en el css, y mostrar la


navegación quitando la clase "hidden" de la lista de definiciones.

El método de rotado de imagenes que vamos a utilizar para este menú es una solución
100% CSS. La premisa básica detrás de esta solución es colocar los elementos de la

Página 236 de 310


lista de definiciones uno lado del otro (lado a lado, en horizontal) ocultar el texto en
ellos, y usar CSS para cambiar la imagen de fondo, en función del estado en que se
encuentra el botón (hover , normal o seleccionados).

Para cada uno de los 4 elementos de navegación necesitamos crear una imagen como la
de arriba. La primera imagen es el estado normal, la segunda es el estado mouseover, y
el tercero es el estado seleccionado. El gif animado muestra cómo funcionará:

http://www.subcide.com/images/dynamic/css-layout/hoverexplained.gif

Esperamos que tengan algún tipo de entendimiento de cómo funciona esto en el


diagrama anterior. Hagamos nuestras 4 imágenes de navegación.

Guardarlos en /images/nav/

Página 237 de 310


http://www.subcide.com/images/dynamic/css-layout/nav/about.gif

http://www.subcide.com/images/dynamic/css-layout/nav/services.gif

http://www.subcide.com/images/dynamic/css-layout/nav/portfolio.gif

http://www.subcide.com/images/dynamic/css-layout/nav/contact.gif

Ahora vamos a intentar explicar este bloque.

Reemplaza la regla #main-nav con el siguiente código:

Página 238 de 310


/* Main Navigation */
#main-nav {
height: 50px;
}

#main-nav dl {
margin: 0;
padding: 0;
}

Establecemos la altura del div main-nav a 50px, y eliminamos todos los márgenes de
la lista de datos.

#main-nav {
height: 50px;
padding-left: 11px;
overflow: hidden;
}

Esto establece el margen izquierdo del div main-nav a 11px.

#main-nav dt {
float: left;
}

Esto establece los términos de definición (nuestros contenedores individuales de


elementos de navegación) como float a la izquierda, y se apila de izquierda a derecha,
en lugar de uno debajo del otro.

Ahora vamos a establecer el hipervínculo con las mismas dimensiones que su


contenedor, y ocultar el texto con la propiedad overflow.

#main-nav dt a {
display: block;
height: 0px;
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}

Establecemos la posición del fondo para moverse hacia arriba 50px cuando pasemos el
ratón sobre un vínculo.

#main-nav dt a:hover {
background-position: 0 -50px;
}
////////////////////////////////
Hay veces que no funciona y hay que añadir
#main-nav dt:hover {

Página 239 de 310


background-position: 0 -50px;
}
/////////////////////////////////////

Establecemos las anchuras individuales de cada elemento de navegación, y las rutas de


cada imagen.

#main-nav dt#about, #main-nav dt#about a {


width: 71px;
background-image: url('../images/nav/about.gif');
}

#main-nav dt#services, #main-nav dt#services a {


width: 84px;
background-image: url('../images/nav/services.gif');
}

#main-nav dt#portfolio, #main-nav dt#portfolio a {


width: 95px;
background-image: url('../images/nav/portfolio.gif');
}

#main-nav dt#contact, #main-nav dt#contact a {


width: 106px;
background-image: url('../images/nav/contact2.gif');
}

Ahora bien, si todas las imágenes son nombrados como las de arriba, y se guardan en el
lugar correcto, la navegación debería funcionar.

La última cosa que necesitamos hacer para que la navegación funcione, es conseguir
que los estados de los botones seleccionados aparezcan cuando estás en la página
correspondiente.

Tenemos que añadir algunos nuevos css, y modificar algunos existente para lograrlo.
Añade este CSS debajo del resto de tu CSS para el menú de navegación:

body.about dt#about,
body.about dt#about a,
body.services dt#services,
body.services dt#services a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a {
background-position: 0 -100px;
}

Este gran selector CSS comprueba para ver qué clase tiene el tag body, a continuación,
establece la posición correcta del background del navbar. Así que si queremos que la
barra de navegación “about” esté seleccionada, deberíamos establecer una class =
"About" en la etiqueta body. Vamos a hacerlo ahora:

Página 240 de 310


Ahora el problema que tenemos, es que también queremos que la imagen de cabecera
cambie dependiendo de qué sección estamos viendo. Así que tenemos que modificar la
regla # header de este modo:

../images/headers/about.jpg está en

http://www.subcide.com/examples/creating-a-css-layout-from-
scratch/images/headers/about.jpg

body.about #header {
height: 150px;
background: #db6d16 url('../images/headers/about.jpg');
}

Ahora, al crear páginas para tus otras secciones, tendrás que cambiar la clase en el body
de “About” a, por ejemplo, “Contact”, establece una regla CSS que apunta a la imagen
de cabecera correcta, y ya está.

Ejemplo final

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=UTF-


8" />

<title>CompanyName - PageName</title>

<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />

<meta name="keywords" content="Keywords" />

<meta name="author" content="Enlighten Designs" />

Página 241 de 310


<style type="text/css" media="all">@import "style.css";</style>

</head>

<body class="about">

<div id="page-container">

<div id="main-nav">

<dl>

<dt id="about"><a href="#">About</a></dt>

<dt id="services"><a href="#">Services</a></dt>

<dt id="portfolio"><a href="#">Portfolio</a></dt>

<dt id="contact"><a href="#">Contact Us</a></dt>

</dl>

</div>

<div id="header">

<h1><img src="http://www.subcide.com/examples/creating-a-
css-layout-from-scratch/images/general/logo_enlighten.gif"

width="236" height="36" alt="Enlighten Designs" border="0"


/></h1>

</div>

<div id="sidebar-a">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Nullam gravida enim ut risus.

Praesent sapien purus, ultrices a, varius ac, suscipit ut,


enim. Maecenas in lectus.

Donec in sapien in nibh rutrum gravida. Sed ut mauris.


Fusce malesuada enim vitae lacus

euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas


vulputate aliquam odio.

Página 242 de 310


Duis scelerisque justo a pede. Nam augue lorem, semper at,
porta eget, placerat eget,

purus. Suspendisse mattis nunc vestibulum ligula. In hac


habitasse platea dictumst.

</div>

<div id="content">

<div class="padding">

<h2><img src="images/headings/about.gif" width="54"


height="14" alt="About" /></h2>

<p><strong>Enlighten Designs</strong> is an Internet


solutions provider that specialises in

front and back end development. To view some of the web


sites we have created view our

portfolio.</p>

<p>We are currently undergoing a 'face lift', so if you


have any questions or would

like more information about the services we provide


please feel free to contact us.</p>

<h2><img src="images/headings/contact.gif" width="98"


height="14" alt="Contact Us" /></h2>

<p>Phone: (07) 853 6060<br />

Fax: (07) 853 6060<br />

Email: <a
href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a><br />

P.O Box: 14159, Hamilton, New Zealand</p>

<p><a href="#">More contact information...</a></p>

</div>

</div>

<div id="footer">

<div id="altnav">

<a href="#">About</a> -
Página 243 de 310
<a href="#">Services</a> -

<a href="#">Portfolio</a> -

<a href="#">Contact Us</a> -

<a href="#">Terms of Trade</a>

</div>

<div id="copyright">

Copyright &copy; Enlighten Designs<br />

Powered by <a href="http://www.enlightenhosting.com/">Enlighten


Hosting</a> and

<a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>

</div>

</div>

</div>

</body>

</html>

Css

html, body {
margin: 0;
padding: 0;
}

body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
text-align: center;
}

.hidden {
display: none;
}

#page-container {
width: 760px;
margin: auto;
text-align: left;
}

/* Main Navigation */
Página 244 de 310
#main-nav { height: 50px; }
#main-nav dl { margin: 0; padding: 0; }

#main-nav { padding-left: 11px; }

#main-nav dt { float: left; }

#main-nav dt a {
display: block;
height: 0px;
padding: 50px 0 0 0;
overflow: hidden;
background-repeat: no-repeat;
}

#main-nav dt a:hover {
background-position: 0 -50px;
}

#main-nav dt#about,
#main-nav dt#about a { width: 71px; background-image:
url("http://www.subcide.com/images/dynamic/css-layout/nav/about.gif");
}

#main-nav dt#services,
#main-nav dt#services a { width: 84px; background-image:
url("http://www.subcide.com/images/dynamic/css-
layout/nav/services.gif"); }

#main-nav dt#portfolio,
#main-nav dt#portfolio a { width: 95px; background-image:
url("http://www.subcide.com/images/dynamic/css-
layout/nav/portfolio.gif"); }

#main-nav dt#contact,
#main-nav dt#contact a { width: 106px; background-image:
url("http://www.subcide.com/images/dynamic/css-
layout/nav/contact.gif"); }

body.about dt#about,
body.about dt#about a,
body.about dt#about a:hover,
body.services dt#services,
body.services dt#services a,
body.services dt#services a:hover,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.portfolio dt#portfolio a:hover,
body.contact dt#contact,
body.contact dt#contact a,
body.contact dt#contact a:hover {
background-position: 0 -100px;
}

body.about #header {
height: 150px;
background: #db6d16
Página 245 de 310
url("http://www.subcide.com/examples/creating-a-
css-layout-from-scratch/images/headers/about.jpg");
}

h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}

#sidebar-a {
float: right;
width: 280px;
}

#sidebar-a .padding {
padding: 25px;
}

#content {
margin-right: 280px;
}

#content .padding {
padding: 25px;
}

#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}

#footer #altnav {
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}

#footer #copyright {
Página 246 de 310
padding-top: 13px;
}

#footer a {
color: #c9c9c9;
text-decoration: none;
}

#footer a:hover {
color: #db6d16;
}

Meta Keywords
<META NAME="keywords" CONTENT="frutas, manzana, naranjas, pera">
Los "keywords" son palabras claves que describen el contenido de tu página web.

Meta Description
<META NAME="description" CONTENT="Ventas de frutas frescas a través de internet.">
La descripción de tu página es muy importante. Debes saber que la mayoría de los motores de búsqueda solo
toman los primeros 150 caracteres de la descripción. Así que debes colocar una descripción bastante concisa y
efectiva.

Meta Redirect.
<META HTTP-EQUIV="refresh" CONTENT="10; url=http://www.ecodig.com">
Con este meta podemos redireccionar al usuario de una pagina a otra. Por ejemplo: En esta META de arriba, al
cabo de 10 segundos el usuario será trasladado a www.ecodig.com.

Meta Refresh
<META HTTP-EQUIV="refresh" CONTENT="600"> Recarga la página periódicamente. El número 600 indica los
segundos que se tardará en recargar la página.

Meta Window-target
<META HTTP-EQUIV="Window-target" CONTENT="_top">
Se usa para mantener la página web fuera del marco (frame).
Los siguientes meta se describen por sí solo.

Meta Author
<META NAME="Author" CONTENT="Jaime Olmo ">

Meta Date
<META NAME="Date" CONTENT="May 17, 2002">

Meta Copyright
<META NAME="Copyright" CONTENT="2000-2003 Ecodig. Todos los derechos reservados.">

Meta Expiration
<META HTTP-EQUIV="expires" CONTENT= "thu, 31 DEC 2002 00:04:00 EST">

El navegador carga la página directamente de la caché. Una vez expire la fecha el navegador carga la página
desde el servidor.
<META HTTP-EQUIV="expires" CONTENT="0">Recarga la página web directamente al servidor.

META Cache-Control
<META HTTP-EQUIV="Cache-Control" CONTENT ="no-cache">
Evita que la página web sea cargada al cache por el servidor o el navegador.
La siguiente etiqueta solo funciona en los navegadores de Netscape.
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Página 247 de 310


META Content-Type
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

META Content-Style-Type
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

META Robots Los "Robots" son programas usados por los motores de búsqueda para indexar las páginas de un
website. Si deseas que todas las paginas sean indexadas utiliza el siguiente meta:

<META NAME="robots" CONTENT="all">

Pero si no lo deseas, puedes:

<META NAME="robots" CONTENT="noindex,nofollow">

No añade la pagina al motor de búsqueda. También puedes usar


<META NAME="robots" CONTENT="none"> )
<META NAME="robots" CONTENT="noindex,follow">

No añade la página inicial pero el robot continua el orden de los enlaces de tu site.
<META NAME="robots" CONTENT="index,nofollow">
Solo indexa la pagina inicial.

<META NAME="robots" CONTENT="index,follow>


Es la opción por "default" y las mas utilizada.

META Generator
<META NAME="generator" CONTENT="program name and version">
Es añadido automaticamente por la mayoría de los programas para crear páginas web.

META "Smart Parsing"


<META NAME="MSSmartTagsPreventParsing" CONTENT="true">
Esta etiqueta es una creacion de Microsoft para enlazar las paginas web con alguna palabra clave dentro de un
documento. Permitía deshabilitar las llamadas SmartTags, un producto que nunca llegó a implementarse en
ningún navegador. No recomiendo su uso pero si deseas mas información visita las siguientes páginas:

http://www.sitepoint.com/article/888
http://www.alistapart.com/stories/smarttags/
http://www.officesmarttags.com/

La palabra reservada !important

¡important funciona como una palabra clave para ignorar las reglas de cascada. Cualquier
definición que vaya acompañada de un !important tendrá mayor importancia que cualquier
otra.
Ahora veamos unos ejemplos para poder entenderlo bien:
Cuando tenemos una misma propiedad aplicada dos veces, el navegador hará caso a la
última:
#main {
width:600px;
width:800px;
}
Por lo tanto en este ejemplo el navegador asignará 800 píxeles.
La declaración !important puede ser usada para dar prioridad a diferentes parámetros:
#main {
width:600px !important;
width:800px;
}
Ahora en este ejemplo se aplicará un ancho de 600 píxeles.
Internet Explorer 6 y versiones anteriores ignoraba esta palabra clave (!important) mientras
que IE7 si la soporta por lo que se puede utilizar para realizar pequeños hacks CSS.
Página 248 de 310
O lo que es lo mismo para poder aplicar diferentes diseños en una misma hoja de estilo
tendremos que usar los Hacks, que no es otra cosa de utilizar reglas que únicamente las
entiendan uno de los dos navegadores.
Por lo tanto lo podemos utilizar de tal manera que distingamos entre distintas reglas
dependiendo del navegador y sin necesidad de usar Javascript, es un hack muy básico pero
sin duda ayudará a entender para que sirve la palabra clave ―!important‖:
#main {
margin: 0 auto 0;
max-width: 900px;
min-width: 770px;
width:auto !important;
width:800px;
}
En este ejemplo aplica un ancho dinámico (auto) a todos aquellos navegadores que soportan
―!important‖ mientras que aplica un ancho de 800 píxeles a aquellos que no lo soportan por
ejemplo IE6.
Este pequeño truco no es realmente del todo útil pero sin duda te ayudará a comprender el
significado de esta palabra clave CSS.
Pero no hay que olvidar que !important es muy potente porque se antepone al resto de
reglas por lo que hay que usarla con cuidado como por ejemplo cuando queremos que una
definición no sea sustituida por ninguna otra ó para restablecer el valor de una propiedad
que no nos acordamos donde le asignabamos un valor que ahora no queremos (sale algo en
color rojo y no nos acordamos pues color: green !important; y listo).

Menu desplegable

Menús desplegables con CSS

Vamos a hacer sólo con CSS un menú desplegable. El menú, simple, sin ningún tipo de estilo adicional que vamos a contar aquí es el
siguiente.

 opcion 1
 opcion 2

Al final lo tienes con algo más de color. Si le das a "opcion 2", "una c" verás que hay tres niveles. El estilo aquí propuesto en principio
vale para cualquier número de niveles que pongamos.

Empezamos haciendo el código html, que es más sencillo. Simplemente unas etiquetas <ul> y <li> convenientemente
anidadas:

<ul class="menu">
<li>opcion 1
<ul>
<li>una a</li>
<li>una b</li>
</ul>
</li>
<li>opcion 2
<ul>
<li>una c
<ul>
<li>otra</li>
<li>mas</li>
Página 249 de 310
</ul>
</li>
<li>una d</li>
</ul>
</li>
</ul>

Por supuesto, podríamos poner enlaces <a> en las opciones del menú.

Ocultar los submenús

Lo primero que vamos a hacer es ocultar los submenús para no se vean. Para ello, a los <ul> por debajo de los <li> les
ponemos un display:none. También hay que quitarles los puntitos que salen con list-style-type:none;

ul.menu
{
list-style:none;
}
ul.menu ul /* Para todos los ul debajo del ul.menu */
{
display:none;
list-style:none;
}

Ahora deberíamos hacerlos visibles cuando el ratón se coloca encima del <li> correspondiente. Para ello
usamos li:hover . El estilo CSS sería

/* Esto afecta a todos los ul inmediatamente debajo (el > ) de un li que a su vez esté
dentro de un ul.menu, el hover está sobre el li porque el li > ul está oculto y no
tendría sentido ponerlo un hover sobre un elemento oculto, no se ejecutaría nunca, así
que indico que afecte al ul.menu li:hover > ul cuando pase el ratón por encima del
ul.menu li:hover */

ul.menu li:hover > ul


{
display:block;
}

Haciéndolo de esta forma, con el >, sólo afecta a los <ul> que están justo dentro de un <li>, visualizándose sólo las
subopciones de la opción actual.

Código completo

<!DOCTYPE html>

<html>

<head>

<title>hola</title>

Página 250 de 310


<style type="text/css">

ul.menu

list-style:none;

ul.menu ul /* Para todos los ul debajo del ul.menu */

display:none;

list-style:none;

/* Esto afecta a todos los ul inmediatamente debajo

(el > ) de un li que a su vez esté dentro de un

ul.menu */

ul.menu li:hover > ul

display:block;

</style>

</head>

<body>

<ul class="menu">

<li>opcion 1

<ul>

<li>una a</li>

<li>una b</li>

Página 251 de 310


</ul>

</li>

<li>opcion 2

<ul>

<li>una c

<ul>

<li>otra</li>

<li>mas</li>

</ul>

</li>

<li>una d</li>

</ul>

</li>

</ul>

</html>

Con esto, el menú quedaría así

 opcion 1
 opcion 2

Si jugamos un poco, vemos que según van apareciendo los submenús, se mueve todo. También vemos (por el borde
que le he puesto), que los elementos ocupan casi el 100% de la página.

Lo segundo es fácil de solucionar, basta ponerles un width. Además, es necesario fijar un ancho para saber dónde
dibujar los submenus, a la distancia justa.

Lo del movimiento es algo más complejo de evitar. Para evitar esto, tenemos que sacar los submenús del flujo
normal de html. Les daremos una posición absoluta, para que aparezcan donde nosotros queramos.

No es bonito poner una posición absoluta global respecto a la página, porque tendríamos que calcularla cada vez que
toquemos el texto o modifiquemos la página. Afortunadamente, position:absolute situa un elemento en una posición
absoluta "respecto al componente padre que también esté posicionado, entre otras con position:relative".

Si a cada <li> le ponemos position:relative, no altera su posición en la página, pero podemos calcular la posición de
sus submenús con position:absolute y las coordenadas son relativas a las del <li> en cuestión.

Página 252 de 310


En fin, que haciendo todo esto y jugando un poco con las medidas de pixels para que todo cuadre, el estilo CSS queda
así

ul.menu
{
list-style:none;
}
ul.menu li
{
position:relative; /* Las coordenadas de los ul inferiores serán relativas al <li>
que los contiene */
width:70px;
}
ul.menu ul
{
position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
left:30px; /* Para que no monte sobre el <li> */
top:-1px;
display:none;
list-style:none;
}
ul.menu li:hover > ul
{
display:block;
}

Listo, con esto tenemos el menú hecho como lo vimos al principio.

Dándole un poco de color

Vamos a darle un poco de color, puedes hacerlo más mejor con poco esfuerzo.

Código completo (hay que mirar si hay cosas repetidas)

<!DOCTYPE html>

<html>

<head>

<title>hola</title>

<style type="text/css">

Página 253 de 310


ul.menu

list-style:none;

/* Esto afecta a todos los ul inmediatamente debajo

(el > ) de un li que a su vez esté dentro de un

ul.menu */

ul.menu li:hover > ul

display:block;

ul.menu ul/* Para todos los ul debajo del ul.menu */

position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */

left:51px; /* Para que no monte sobre el <li> */

top:-1px;

display:none;

list-style:none;

ul.menu li

display:block;

position:relative;

padding:1px 5px;
Página 254 de 310
background:#8888ff;

border-right:1px solid blue;

border-bottom:1px solid blue;

border-top:1px solid #ccccff;

border-left:1px solid #ccccff;

width:80px;

ul.menu li:hover

background:#aaaaff;

border-right:1px solid #ccccff;

border-bottom:1px solid #ccccff;

border-top:1px solid blue;

border-left:1px solid blue;

</style>

</head>

<body>

<ul class="menu">

<li>opcion 1

<ul>

<li>una a</li>

<li>una b</li>

</ul>
Página 255 de 310
</li>

<li>opcion 2

<ul>

<li>una c

<ul>

<li>otra</li>

<li>mas</li>

</ul>

</li>

<li>una d</li>

</ul>

</li>

</ul>

</html>

Poniendo horizontal el primer menú

Si queremos el primer menú horizontal, se puede hacer con relativa facilidad, aunque debemos complicar un poco el
CSS si queremos varios niveles.

Los <li> de primer nivel los tenemos que poner con display:inline Los <ul> debajo de los <li> de primer nivel llevan unas
posiciones absolutas distintas, ya que deben salir debajo de los <li> y no a su derecha.

El resto de los <ul> siguen como hasta ahora. El CSS resultante es lo que teníamos antes más este añadido para tratar
distinto los primeros <ul>

ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */


{
position:absolute;
left:-41px;
top:19px;
display:none;
list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
display:inline;
}

Y este es el resultado

Página 256 de 310


Código completo

<!DOCTYPE html>
<html>
<head>
<title>hola</title>
<style type="text/css">
ul.menu
{
list-style:none;
}
/* Esto afecta a todos los ul inmediatamente debajo
(el > ) de un li que a su vez esté dentro de un
ul.menu */
ul.menu li:hover > ul
{
display:block;
}
ul.menu ul/* Para todos los ul debajo del ul.menu */
{
position:absolute; /* Esta posición es relativa al <li> que contiene a este <ul> */
left:51px; /* Para que no monte sobre el <li> */
top:-1px;
display:none;
list-style:none;
}
ul.menu li
{
display:block;
position:relative;
padding:1px 5px;
background:#8888ff;
border-right:1px solid blue;
border-bottom:1px solid blue;
border-top:1px solid #ccccff;
border-left:1px solid #ccccff;
width:80px;
}
Página 257 de 310
ul.menu li:hover
{
background:#aaaaff;
border-right:1px solid #ccccff;
border-bottom:1px solid #ccccff;
border-top:1px solid blue;
border-left:1px solid blue;
}
ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
left:-41px;
top:19px;
display:none;
list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
display:inline;
}
</style>
</head>
<body>
<ul class="menu">
<li>opcion 1
<ul>
<li>una a</li>
<li>una b</li>
</ul>
</li>
<li>opcion 2
<ul>
<li>una c
<ul>
<li>otra</li>
<li>mas</li>
</ul>
</li>
<li>una d</li>
</ul>
</li>
</ul>
</html>

Página 258 de 310


Flujo normal de html

En html, cuando vamos poniendo distintos tags, el navegador los dibuja consecutivamente, en el mismo orden que los
hemos puesto. Esto es lo que se llama flujo normal de html.

Si mediante CSS usamos técnicas de posicionamiento de bloques, como position, float, etc, los elementos afectados se
salen del flujo normal. El navegador los siturará donde los hayamos posicionado e irá poniendo consecutivamente el
resto. Podemos incluso ponerlos superpuestos.

<style type="text/css">

/* el menú en si mismo */

.mi-menu {

border-radius: 5px;

list-style-type: none;

margin: 0 auto; /* si queremos centrarlo */

padding: 0;

/* la altura y su ancho dependerán de los textos */

height: 40px;

width: 510px;

/* el color de fondo */

background: #555;

background: -moz-linear-gradient(#555,#222);

background: -webkit-linear-gradient(#555,#222);

background: -o-linear-gradient(#555,#222);

background: -ms-linear-gradient(#555,#222);

background: linear-gradient(#555,#222);

/* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */

Página 259 de 310


.mi-menu br { display:none; }

/* cada item del menu */

.mi-menu li {

display: block;

float: left; /* la lista se ve horizontal */

height: 40px;

list-style: none;

margin: 0;

padding: 0;

position: relative;

.mi-menu li a {

border-left: 1px solid #000;

border-right: 1px solid #666;

color: #EEE;

display: block;

font-family: Tahoma;

font-size: 13px;

font-weight: bold;

line-height: 28px;

padding: 0 14px;

margin: 6px 0;

text-decoration: none;

/* animamos el cambio de color de los textos */

-webkit-transition: color .2s ease-in-out;

-moz-transition: color .2s ease-in-out;

-o-transition: color .2s ease-in-out;

-ms-transition: color .2s ease-in-out;

transition: color .2s ease-in-out;

/* eliminamos los bordes del primer y el último */

.mi-menu li:first-child a { border-left: none; }

.mi-menu li:last-child a{ border-right: none; }

/* efecto hover cambia el color */

.mi-menu li:hover > a { color: Crimson; }

Página 260 de 310


/* los submenús */

.mi-menu ul {

border-radius: 0 0 5px 5px;

left: 0;

margin: 0;

opacity: 0; /* no son visibles */

position: absolute;

top: 40px; /* se ubican debajo del enlace principal */

/* el color de fondo */

background: #222;

background: -moz-linear-gradient(#222,#555);

background: -webkit-linear-gradient(#22,#555);

background: -o-linear-gradient(#222,#555);

background: -ms-linear-gradient(#222,#555);

background: linear-gradient(#222,#555);

/* animamos su visibildiad */

-moz-transition: opacity .25s ease .1s;

-webkit-transition: opacity .25s ease .1s;

-o-transition: opacity .25s ease .1s;

-ms-transition: opacity .25s ease .1s;

transition: opacity .25s ease .1s;

/* son visibes al poner el cursor encima */

.mi-menu li:hover > ul { opacity: 1; }

/* cada un ode los items de los submenús */

.mi-menu ul li {

height: 0; /* no son visibles */

overflow: hidden;

padding: 0;

/* animamos su visibildiad */

-moz-transition: height .25s ease .1s;

-webkit-transition: height .25s ease .1s;

-o-transition: height .25s ease .1s;

-ms-transition: height .25s ease .1s;

transition: height .25s ease .1s;

Página 261 de 310


.mi-menu li:hover > ul li {

height: 36px; /* los mostramos */

overflow: visible;

padding: 0;

.mi-menu ul li a {

border: none;

border-bottom: 1px solid #111;

margin: 0;

/* el ancho dependerá de los textos a utilizar */

padding: 5px 20px;

width: 100px;

/* el último n otiene un borde */

.mi-menu ul li:last-child a { border: none; }

</style>

Con Css3

Crear menú desplegable con css3

En este apartadp vamos a crear un elegante menú desplegable utilizando css3, crearemos un efecto muy agradable
utilizando transition para darle movimiento a nuestro menú, además utilizaremos otras propiedades como border-radius y los
pseudo clases after y before para aplicar algunos efectos. Es algo sencillo será una lista desordenada con items anidados los cuales
acomodaremos con css y lo dejaremos a nuestro gusto, empecemos.

El menú se visualizara correcta mente en todos los navegadores, solo que los navegadores antiguos que no soporten animaciones de
css3 y algunas otras propiedades que utilizaremos no tendrán ese elegante menú que crearemos, pero de todos modos les funcionara.

Página 262 de 310


1. Estructura HTML

Para empezar crearemos un archivo HTML con la estructura básica, lo nombramos index.htmlo como quieras.
1 <!doctype html>
2 <html>

3 <head>

4 <meta charset="utf-8">
5 <title>Menú desplegable con Css3</title>
6 </head>

7
8 <body>
9 </body>
10 </html>
Dentro de las etiqueta <body> pega el siguiente código de la lista desordenada para la estructura del menú.

1 <ul id="menu">

2 <li><a class="active" href="#">Inicio</a></li>


3 <li><a href="#">Servicios</a></li>
4 <li><a href="#">Servicios</a></li>
5 <li>

6 <a href="#">Portfolio</a>
7 <ul class="children">
8 <li><a href="#">Diseño Web</a></li>
9 <li><a href="#">Logo tipos</a></li>
10 <li><a href="#">Impresión</a></li>
11 <li><a href="#">Diseño 3D</a></li>
12 <li><a href="#">Videos</a></li>
13 </ul>
14 </li>

15 <li><a href="#">Blog</a></li>
16 <li><a href="#">Artículos</a>
17 <ul class="children">
18 <li><a href="#">Diseño Web</a></li>
19 <li><a href="#">Logo tipos</a></li>
20 <li><a href="#">Impresión</a></li>
21 <li><a href="#">Diseño 3D</a></li>
22 <li><a href="#">Videos</a></li>
23 </ul>
Página 263 de 310
24 </li>

25 <li><a href="#">Contacto</a></li>
26 </ul>
Como puede notar es un menú desplegable de solo un nivel, la lista hija les agregamos unclass=children para referirnos directamente a
ella, no es obligatorio pero lo hago así para evitar conflicto, solo agrego el código necesario para el menú, cada uno que lo adapte a su
necesidad

2. Estilos para el menú principal

Ahora aplicaremos los estilos necesarios para la lista

1 /*Estilos para la Lista desordenada UL*/


2 ul {
3 text-align: left;
4 width: 100%;
5 background: #252525;
6 margin: 0px;

7 padding: 0px 0px 0px 20px;


8 border: 3px solid #1d1d1d;
9 list-style: none;
10 position: relative;
11 float:left;
12 box-sizing: border-box;/*propiedad css3*/
13 -moz-box-sizing: border-box;
14 -webkit-box-sizing: border-box;
15 border-radius: 5px;
16 -moz-border-radius: 5px;
17 -webkit-border-radius: 5px;
18 }

19
20 /*Estilos para los elementos li primer nivel*/
21 #contenedor ul li {
22 display: block;
23 float:left;
24 position: relative;
25 }
26
27 /*Listas primer nivel*/
28 #contenedor ul li a {

Página 264 de 310


29 font: bold 14px Tahoma, Geneva, sans-serif;
30 color: #fefefe;
31 text-decoration: none;
32 display: block;

33 float:left;
34 padding: 13px;
35 }
36

37 /*Estado Hover/Activo de los enlaces*/


38 #contenedor ul li a:hover, #contenedor ul li a.active {
39 background: #1d1d1d;
40 color: #b11e15;
41 font-weight: bold;
42 }

3. Sombra inferior del menú

Crearemos una sombra a la ul de primer nivel utilizando las pseudo-clases (:after – :before) para crear las sombras de cada lado del
menú, pero antes de crear las sombras ocultaremos momentáneamente la lista secundaria para que no estorbe agregando display:none a
laul.children
1 /*Estilos de la lista secundaria*/
2 #contenedor ul li ul {
3 display:none;
4}
Ahora crearemos la sombra utilizando los pseudo-clases antes mencionadas, agregando el siguiente código css

1 /*Genera la sombra derecha del menú (after = después)*/


2 #contenedor ul#menu:after {

3 z-index: -1;
4 position: absolute;
5
6 /* no aplico ningún contenidos HTML */
7 content: "";
8
9 /* posiciona la sombra con respecto al derecho y superior */
10 right: 10px;
11 top: 45%;
12
13 /* configura el tamaño de la caja generada*/
Página 265 de 310
14 width: 48%;
15 height: 20px;
16
17 /* color de fondo */
18 background: #000000;
19
20 /* definición de la sombra */
21 box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
22 -moz-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
23 -webkit-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
24
25 /* rotación de la sombra para que solo salga una parte de ella*/
26 -webkit-transform: rotate(2deg);
27 -moz-transform: rotate(2deg);
28 -o-transform: rotate(2deg);
29 -ms-transform: rotate(2deg);
30 transform: rotate(2deg);
31 }
32
33 /*Genera la sombra izquierda del menú (before = antes)*/
34 #contenedor ul#menu:before{

35 z-index: -1;
36 position: absolute;
37
38 /* no aplico ningún contenidos HTML */
39 content: "";
40
41 /* posiciona la sombra con respecto al izquierdo y superior */
42 left: 10px;
43 top: 45%;
44
45 /* configura el ancho */
46 width: 50%;
47 height: 20px;
48
49 /* color de fondo */
Página 266 de 310
50 background: #000000;
51
52 /* definición de la sombra */
53 box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
54 -moz-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
55 -webkit-box-shadow: 0 0 8px 7px rgba(0, 0, 0, 0.7);
56

57 /* rotacion de la sombra */
58 -webkit-transform: rotate(-2deg);
59 -moz-transform: rotate(-2deg);
60 -o-transform: rotate(-2deg);
61 -ms-transform: rotate(-2deg);
62 transform: rotate(-2deg);
63 }
Hasta este punto tenemos terminado el primer nivel del menú, en los siguientes pasos trabajaremos con el segundo nivel y aplicaremos
algún efecto con transition de css3.

Estilos para el menú segundo nivel

Lo normal en un menú desplegable con css es aplicarle al sub-menú un display:none y en su estado :hover le
aplicamos display:block para mostrarlo, de esta forma aparece sin ningún tipo de efecto, con css3 podemos animar varias propiedades
para que al apareces tenga algún efecto agradable a la vista, en nuestro caso no utilizaremos la propiedad display:block, si no que
animaremos el alto(height) y su opacidad, miremos el código necesario para esto.
1 /*Estilos de la lista secundaria*/
2 #contenedor ul li ul {

3 margin: 0px;
4 padding: 0px;
5 width: 150px;
6 height: 0;

7 float: left;
8 position: absolute;
9 left: 0px;
10 top: 43px;
11 border: 0;
12 overflow: hidden;
13 background: #1D1D1D;
14 z-index: -1;

15
16 /*Aplicamos opacidad cero, animaremos a 1 en el estado hover*/

Página 267 de 310


17 opacity: 0;
18 filter: alpha(opacity=0); /* Internet Explorer*/
19
20 /*Aplicamos bordes redondeados a las esquinas inferiores.*/
21 border-radius: 0px 0px 5px 5px;
22 -moz-border-radius: 0px 0px 5px 5px;
23 -webkit-border-radius: 0px 0px 5px 5px;
24
25 /*definimos desde donde inicia el ancho de la caja*/
26 box-sizing: border-box;

27 -moz-box-sizing: border-box;
28 -webkit-box-sizing: border-box;
29
30 /*Aplicamos la animación */
31 -webkit-transition: all 0.3s ease-in-out 0s;
32 -moz-transition: all 0.3s ease-in-out 0s;
33 -ms-transition: all 0.3s ease-in-out 0s;
34 -o-transition: all 0.3s ease-in-out 0s;
35 transition: all 0.3s ease-in-out 0s;
36 }

37
38 #contenedor ul li ul.children li a{
39 color: #fefefe !important;
40 padding: 13px 0 13px 20px;

41 width: 130px;

42 border-bottom: 1px solid #2f2f2f;


background: url(img/arrow-normal.png) no-
43
repeat 7px center!important;
44 font-size: 12px;

45
46 /*Aplicamos efecto de transation a los enlaces*/
47 -webkit-transition: all 0.3s ease-in-out;
48 -moz-transition: all 0.3s ease-in-out;
49 -ms-transition: all 0.3s ease-in-out;

Página 268 de 310


50 -o-transition: all 0.3s ease-in-out;
51 transition: all 0.3s ease-in-out;
52 }

53
54 /*Eliminamos el border-bottom al último enlace de la lista*/
#contenedor ul li ul.children li:last-child a{border-
55
bottom:none!important;}
56
57 /*Aplicamos los cambios para los enlaces en el estado :hover*/
58 #contenedor ul li ul.children li a:hover{

59 color: #b11e15 !important;


60 font-weight: bold;

61 padding-left:28px;

62 background: url(img/arrow.png) no-repeat 15px center !important;


63 }
Hasta este punto el menu de segundo nivel se encuentra oculto ya que aplicamos una altura de 0(height:0px) y una opacidad:0.

Mostrar con efecto el segundo nivel

Para mostrar la lista de segundo nivel aplicaremos una altura y una opacidad distinta cuando se pase el ratón por encima de una de las
listas de primer nivel del menú, el código css necesario para esto es el siguiente.
1 #contenedor ul li:hover ul.children{
2 height:250px;
3 opacity:1;
4}
La altura es el único inconveniente a este sistema que he utilizado para animar esas propiedades, lo mas normal seria aplicar una altura
en auto para que se adapte al contenido, pero la altura en auto no se anima con transition, con este mismo método se pueden animar las
propiedades css y conseguir efectos muy interesantes

Conclusión

Como pueden notar es el mismo sistema que utilizamos desde antes que aparecieran las nuevas propiedades css3, solo que ahora
podemos agregar una pequeña animación y efecto de transparencia que hacen que el menú tome un plus a la hora de ser
mostrado. espero que el tutorial le sirva de algo, es un tutorial bastante sencillo pero seguro que a alguno le servirá.

http://www.promocionatupagina.com/t981-tutorial-css-aprende-a-crear-plantillas-css-avanzadas

Diseño y maquetación web para


smartphones y tablets
Página 269 de 310
En este apartado veremos como maquetar una web para que se adapte a diferentes
resoluciones de pantallas, smartphones y tablets. Tendencia que en inglés se
llamaResponsive Design.
El objetivo es utilizar la clase y propiedades CSS3 media queries para adaptar un único
diseño a diferentes resoluciones. Para ello basaremos la estructura de nuestra web y
elementos en medidas relativas como “em” y “%”.
Como resultado obtendremos una web mucho más navegable y funcional.
Principales ventajas de una web optimizada para moviles y tablets
 Diseño adaptado a nuestra pantalla
 Comodidad a la hora de navegar y leer textos al no tener que usar el zoom.
 Contenido más directo, los elementos irrelevantes se eliminan.
 Mayor impacto visual.

Página 270 de 310


Otro ejemplo de web con Responsive Design, como veis hay 3 versiones de la misma
web que dependen del tamaño de la ventana y del dispositivo. Podéis encontrar muchos
más ejemplos en: http://mediaqueri.es/
Para ver el funcionamiento de la clase @media sólo debéis ir estrechando la ventana de
vuestro navegador.

Comenzar…
1 Maqueta tu web utilizando unidades relativas:
En lugar de usar px utiliza % o em para el tamaño de tus capas, fuentes e imágenes
(especialmente para el ancho). Así te será más cómodo adaptar tu web a diferentes
resoluciones. Inicialmente puedes limitar la capa contenedora con la propiedad max-
width, o bien establecer un ancho en px y luego cambiarlo a % a través de @media
2 Añade el meta tag viewport en el <head>
XHTML

<meta name="viewport"content="width=device-width, minimum-scale=1.0, maximum-


scale=1.0" />

Página 271 de 310


Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los
navegadores móviles. Así nos aseguramos que el contenido se ajusta al ancho del
dispositivo. En este caso estamos indicando que el contenido tendrá el ancho del
dispositivo y que la escala mínima y máxima es de 1. Más detalles e info en
http://www.html-5.com/metatags/index.html#viewport-meta-tag
3 Utilzamos la clase @media para adaptar nuestra web
La expresión @media de css3, es fundamental. Nos permite estableces condiciones
desde CSS para conocer el dispositivo desde el se accede a nuestra web y aplicar nuevos
estilos CSS. Por ejemplo: podemos eliminar el sidebar de nuestro blog si el navegador
mide menos de 600px.
Tenéis la info más detallada en: http://www.w3.org/TR/css3-mediaqueries/
Las propiedades que más nos interesan son las siguientes:
a) width y height:
Ancho y alto del navegador (podemos añadir el prefijo min- o max-)
b) device-width y device-height:
Ancho y alto del dispositivo, móviles y tablets (podemos añadir el prefijo min- o max- )
c) orientation:
Orientación del móvil o tablet (para panorámico utilizaremos orientation:portrait,
para vertical orientation:landscape)

¿Como trabajar con media queries?


Sintaxis, ejemplos básicos

Ventana o monitor menor de 800px

@media screen and(max-width:800px){

#contenedor{

width:100%;

Con @media screen estamos iniciando la consulta media query, para añadir condiciones
debemos utilizar “and”. Es este caso estamos aplicando un ancho del 100% a la capa
#contenedor si el monitor o ventana tiene una resolución inferior 800px
max-width es el ancho del área donde se va a mostrar, es decir el navegador
max-device-width es el ancho del dispositivo en sí, es decir, de la pantalla.
Smartphones
@media screen and(max-device-
width:480px){

#sidebar{

Página 272 de 310


display:none;

#menu{

text-align:center;

Los anteriores estilos sólo se aplicaran a si el dispositivo tiene un ancho inferior a 480px
Ipad en posición vertical
CSS
@media screen and (min-device-width : 768px) and (max-
device-width : 1024px) and (orientation : landscape){

.entry, .entry-content

font-size:1.2em;

line-height:1.5em;

Uniendo esta tres condiciones “and (min-device-width : 768px) and (max-device-width


: 1024px)” Estamos limitando que los estilos sólo se apliquen a dispositivos que con
una resolución de entre 768px y 1024, y con “and (orientation : landscape)” indicamos
que se apliquen cuando estén en posición vertical.
Está media query se aplicaría a Ipad.

Página 273 de 310


Resoluciones y media queries para para los principales móviles,
tablets y monitores

Lista de recursos
@media queries: http://nmsdvid.com/snippets/
Simulador de dispositivos móviles, podrás ver como queda tu web en los teléfonos y
talets más usados http://www.responsinator.com/
@media queries para principales monitores, smartphones y tablets:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Herramienta para redimensionar nuestro navegador a las principales resoluciones de
monitores, tablets y smartphones: http://resizemybrowser.com/
Plantilla basada en 960.css para maquetar con responsive
design: https://github.com/davatron5000/Foldy960
- See more at: http://www.destacaimagen.com/diseno-y-maquetacion-web-
smartphones-y-tablets/#sthash.aignaHMk.dpuf

Manual de Responsive Web Design

Media queries como base del


responsive design
Está de moda y es el futuro. Toda web de nueva factura tiene que estar maquetada siguiendo los
principios del responsive design.
Cuando el responsive design empezó a utilizarse, muchos lo vieron con ojos nuevos, otros lo
confundían con el diseño líquido y otros tantos lo vieron como una evolución del diseño líquido
(entre los que me incluyo, aunque no al 100%).
De una forma u otra, un diseño adaptable se basa en cambiar la apariencia de la web (tanto el
contenido como su distribución) en función del dispositivo desde el cual se accede. No se debe

Página 274 de 310


confundir con tener una versión de la página para cada dispositivo, sino que con la misma
maquetación HTML y con el mismo código CSS asociado, el diseño varía en función del
dispositivo.
Y es aquí donde entran las media queries. El concepto no es 100% nuevo de CSS3, sino que tiene
su punto de partida en los media types.

Antes de “entrar en materia”, como siempre la versión en vídeo del artículo:

¿Qué es un media type?


Los media types permiten indicar una serie de estilos que se aplicarán según el tipo del medio, en
algunas páginas, al ver el código fuente, nos encontramos algo como lo siguiente en su head:

1. <link rel="stylesheet" type="text/css" media="all" href="style.css">


2. <link rel="stylesheet" type="text/css" media="print" href="print.css">

En ese ejemplo, se incluye una hoja de estilos llamada style.css siempre (media=”all”), pero existe
una hoja de estilos llamada print.css que sólo se ejecutará cuando se esté imprimiendo el documento
(media=”print”).

Los media types más típicos son:

 all: para todo (valor por defecto).


 print: en la vista previa de impresión y a la hora de imprimir.
 screen: para las pantallas de ordenador.
 tv: para televisores.

Su uso más habitual se limitaba a “all” y “print”.

Las media queries entran en juego


Las media queries son propias de CSS3 y vienen a extender a los media, utilizando un media type
con una serie de expresiones relacionadas con las características del dispositivo desde el cual se
accede a la web. Las media queries dan como resultado verdadero o falso. Si el resultado es
verdadero, se leen las reglas CSS de su interior, si es falso no.

Ejemplo:

1. @media (max-width: 600px) {


2.
3. }

Este sencillo ejemplo tiene una media query que significa lo siguiente:
Cuando el ancho de la pantalla tenga un ancho menor a 600px lees el código encerrado dentro de las
llaves que abren y cierran la media querie.

Por lo tanto este CSS:

1. body {
2. background: green ;
3. }
4.
5. @media (max-width: 600px) {
6. body {

Página 275 de 310


7. background: red ;
8. }
9. }

Hará que el fondo de la web sea verde, pero cuando la pantalla sea menor a 600px el fondo será rojo.

Incluimos la hoja de estilos a un documento HTML y vemos su resultado:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" media="all" href="style.css">

</head>

<body>

</body>

</html>

fondo verde con el navegador maximizado

Página 276 de 310


Media queries para cambiar el fondo para ventanas con un ancho menor de 600px

https://rolandocaldas.com/ejemplos-blog/media-queries/index.html

Hciendo que desaparezca un div

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" type="text/css" media="all" href="style.css">

</head>

<body>

Página 277 de 310


<div class="oculta">

</div>

</body>

</html>

Css

body {

background: green;

.oculta{

width:50%;

height:120px;

background: yellow;

margin:auto;

@media (max-width: 600px) {

body {
Página 278 de 310
background: red;

.oculta{

display:none;

Cómo enlazar media queries que están en varios ficheros

Ejemplo:
<head>

<link rel="stylesheet" href="smartphone.css"


media="only screen and (min-device-width : 320px)
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css"


media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css"


media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css"


media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css"


media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)">
</head>

¿Qué Es El HTML5 Shiv?

HTML5 shiv es algo que se escucha mucho a la hora de hacer un sitio web usando HTML5.

Si el sitio que estás haciendo solo debe funcionar en navegadores más avanzados como los que usan Webkit (Chrome, Safari,
etc) o Firefox, entonces no es necesario que sigas leyendo esto… a no ser que tu sitio en HTML5 requiera de
ser correctamente interpretado por Internet Explorer.

Página 279 de 310


IE no reconoce los nuevos elementos del HTML5 (article, section, etc), es por esto que para que los mismos se visualicen
correctamente estilizados en el mencionado navegador, es necesario crearlos mediante javascript.

La solución es bastante simple, tienes que poner el siguiente código en el head de tu sitio:

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

Cada vez hay menos excusas para empezar a usar HTML5 en nuestros sitios!

http://www.tutosytips.com/creando-un-diseno-responsive-design-con-css3-media-queries/

Las Media queries se componen de un media type y una o mas expresiones, implicando
características del medio, la cual se resuelve como verdadera o falsa. El resultado de la consulta es
verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo
que está siendo mostrado y todas las expresiones en el media query son verdaderas.

Principales expresiones a utilizar en las media


queries
Al igual que hay varios media types, las media queries tienen varias expresiones a utilizar, las más
interesantes para el responsive design son:

 orientation: permite tomar por valores landscape o portrait lo que significa que la
orientación sea horizontal o vertical, o sea, landscape si la ventana es más ancha que alta
y portrait si es más alta que ancha.
 resolution: Permite las variantes min-resolution y max-resolution. El valor que toma es la
densidad de la pantalla en valor de puntos por pulgada (dpi) o en puntos por pixel (dppx).
Su uso principal es para cambiar los background de imágenes según el dispositivo sea de
alta resolución (como los retina display, iphone, …) o normal para que no se carguen más
datos de los necesarios.
 width: El alto del dispositivo. Se permiten las variantes min-width y max-width. Es la
principal expresión para el responsive design.

Se puede consultar la lista completa y ampliar la información sobre las media queries en la
documentación para desarrolladores de mozilla.
https://developer.mozilla.org/es/docs/CSS/Media_queries

Las media queries como base para el responsive


design
Gracias a las media queries podemos cambiar totalmente la vista y distribución de los elementos de
la maqueta en función del ancho del dispositivo, pudiendo mostrar u ocultar etiquetas.

Lo que normalmente se hace, es establecer tres o cuatro tamaños límite de pantalla y personalizar las
reglas vía media queries. Vamos a hacer un pequeño ejemplo.

Para nuestro ejemplo, utilizaremos el concepto de mobile first, usado en los modernos frameworks
CSS responsive design, se basa en preparar primero la vista óptima para el móvil y utilizar las media
queries para ir adaptando la maqueta a dispositivos mayores.
Página 280 de 310
Con esta idea en la cabeza, utilizamos la página de ejemplo del último artículo, para hacer que el
texto se muestre de la siguiente manera:

 Vista móvil: 1 columna.


 Vista tablet: 2 columnas.
 Vista PC: 3 columnas.

El código HTML será siempre el mismo:

View Raw Code?

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Texto a tres columnas con HTML5 y CSS3</title>
5. <meta charset="UTF-8">
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <link rel="stylesheet" href="./style_responsive.css" type="text/css" media="all">
8. </head>
9. <body>
10. <div class="three-columns">
11. <p>
12. En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo
que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y
galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches,
duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura
los domingos, consumían las tres partes de su hacienda. El resto della concluían
sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo,
y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su
casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte,
y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.
Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia,
seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza. Quieren decir
que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia
en los autores que deste caso escriben; aunque, por conjeturas verosímiles, se deja
entender que se llamaba Quejana. Pero esto importa poco a nuestro cuento; basta que
en la narración dél no se salga un punto de la verdad.
13. </p>
14. <p>
15. Es, pues, de saber que este sobredicho hidalgo, los ratos que estaba ocioso, que
eran los más del año, se daba a leer libros de caballerías, con tanta afición y
gusto, que olvidó casi de todo punto el ejercicio de la caza, y aun la
administración de su hacienda. Y llegó a tanto su curiosidad y desatino en esto,
que vendió muchas hanegas de tierra de sembradura para comprar libros de
caballerías en que leer, y así, llevó a su casa todos cuantos pudo haber dellos; y
de todos, ningunos le parecían tan bien como los que compuso el famoso Feliciano de
Silva, porque la claridad de su prosa y aquellas entricadas razones suyas le
parecían de perlas, y más cuando llegaba a leer aquellos requiebros y cartas de
desafíos, donde en muchas partes hallaba escrito: La razón de la sinrazón que a mi
razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la
vuestra fermosura. Y también cuando leía: ...los altos cielos que de vuestra
divinidad divinamente con las estrellas os fortifican, y os hacen merecedora del
merecimiento que merece la vuestra grandeza.
16. </p>
17. </div>
18. </body>
19. </html>

Media queries para vista móvil

Como estamos siguiendo el principio de mobile first, nuestro CSS base, será el óptimo para móvil,
así que nuestro style_responsive.css será así:

Página 281 de 310


View Raw Code?

1. * {
2. box-sizing: border-box;
3. margin: 0;
4. padding: 0;
5. }
6.
7. html {
8. font-size: 62.5%;
9. line-height: 1;
10. }
11.
12. p {
13. font-size: 15px;
14. font-size: 1.5rem;
15. line-height: 1.333333334;
16. margin-bottom: 20px;
17. margin-bottom: 2rem;
18. text-align: justify;
19. }
20.
21. .three-columns {
22. margin: 20px;
23. margin: 2rem;
24. }

Con este código, las tres vistas tienen el mismo resultado:

Vista móvil

Página 282 de 310


Vista tablet

Vista PC

Media queries para vista tablet

Ya tenemos nuestra web sencilla maquetada de forma que se ve siempre igual. Ahora, vamos a hacer
que se muestre a dos columnas si se accede desde un tablet.

Para determinar que se está en “vista tablet”, usamos las media queries para activar la “vista tablet”
cuando el ancho de la pantalla sea superior a 600px.

View Raw Code?

1. * {
2. box-sizing: border-box;
3. margin: 0;
4. padding: 0;
5. }
6.
7. html {
8. font-size: 62.5%;
9. line-height: 1;
Página 283 de 310
10. }
11.
12. p {
13. font-size: 15px;
14. font-size: 1.5rem;
15. line-height: 1.333333334;
16. margin-bottom: 20px;
17. margin-bottom: 2rem;
18. text-align: justify;
19. }
20.
21. .three-columns {
22. margin: 20px;
23. margin: 2rem;
24. }
25.
26. @media (min-width: 600px) {
27. .three-columns {
28. -webkit-column-count: 2; /* Chrome, Safari, Opera */
29. -moz-column-count: 2; /* Firefox */
30. column-count: 2;
31.
32. -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
33. -moz-column-gap: 40px; /* Firefox */
34. column-gap: 40px;
35.
36. -webkit-column-gap: 4rem; /* Chrome, Safari, Opera */
37. -moz-column-gap: 4rem; /* Firefox */
38. column-gap: 4rem;
39.
40. -webkit-column-rule: 5px solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
41. -moz-column-rule: 5px solid rgb(75, 180, 149) ; /* Firefox */
42. column-rule: 5px solid rgb(75, 180, 149) ;
43.
44. -webkit-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
45. -moz-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Firefox */
46. column-rule: 0.5rem solid rgb(75, 180, 149) ;
47. }
48. }

Con este código, la vista de móvil se mantiene, pero la vista tablet cambia colocando el texto a dos
columnas, algo que ocurre también en la vista PC.

Página 284 de 310


Vista móvil

Vista tablet

Vista PC

¿Por qué funciona?

Las reglas CSS que están fuera de las media queries siempre se leen, de forma que, por ejemplo, la
etiqueta .three-columns siempre tiene el margin indicado en el CSS.

Cuando la pantalla tiene un ancho de 600px o más, además de las reglas ya leídas en la vista de
móvil, se ejecuta la regla que está dentro de la media query.

De esta manera, además de todo el CSS usado en la “vista móvil”, se leen y ejecutan las reglas que
ponen el texto a 2 columnas.

Página 285 de 310


Media queries para vista PC

Para terminar, sólo tenemos que utilizar las media queries para establecer que el texto se mostrará a
tres columnas cuando el dispositivo tenga un ancho superior a 900px. Para ello, dejamos el CSS de
la siguiente manera:

View Raw Code?

1. * {
2. box-sizing: border-box;
3. margin: 0;
4. padding: 0;
5. }
6.
7. html {
8. font-size: 62.5%;
9. line-height: 1;
10. }
11.
12. p {
13. font-size: 15px;
14. font-size: 1.5rem;
15. line-height: 1.333333334;
16. margin-bottom: 20px;
17. margin-bottom: 2rem;
18. text-align: justify;
19. }
20.
21. .three-columns {
22. margin: 20px;
23. margin: 2rem;
24. }
25.
26. @media (min-width: 600px) {
27. .three-columns {
28. -webkit-column-count: 2; /* Chrome, Safari, Opera */
29. -moz-column-count: 2; /* Firefox */
30. column-count: 2;
31.
32. -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
33. -moz-column-gap: 40px; /* Firefox */
34. column-gap: 40px;
35.
36. -webkit-column-gap: 4rem; /* Chrome, Safari, Opera */
37. -moz-column-gap: 4rem; /* Firefox */
38. column-gap: 4rem;
39.
40. -webkit-column-rule: 5px solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
41. -moz-column-rule: 5px solid rgb(75, 180, 149) ; /* Firefox */
42. column-rule: 5px solid rgb(75, 180, 149) ;
43.
44. -webkit-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Chrome, Safari, Opera */
45. -moz-column-rule: 0.5rem solid rgb(75, 180, 149) ; /* Firefox */
46. column-rule: 0.5rem solid rgb(75, 180, 149) ;
47. }
48. }
49.
50. @media (min-width: 900px) {
51. .three-columns {
52. -webkit-column-count: 3; /* Chrome, Safari, Opera */
53. -moz-column-count: 3; /* Firefox */
54. column-count: 3;
55. }
56. }

Página 286 de 310


Y ya tenemos nuestras vistas listas:

Vista móvil

Vista tablet

Página 287 de 310


Vista PC

Conclusiones sobre las media queries


Como la finalidad de este artículo es explicar la base, las media queries utilizadas son muy sencillas,
pero se pueden complicar para afinar al máximo nuestra maqueta, por ejemplo:

Media queries para pantallas en horizontal con un ancho mínimo de 400px y uno máximo de 600px:

1. @media (orientation: landscape) and (min-width: 400px) and (max-width: 600px)


2. {
3. }

Media queries para pantallas horizontales con un ancho mínimo de 400px, máximo de 600px y que
sea un dispositivo de alta resolución:

1. @media (orientation: landscape) and (min-width: 400px) and (max-width: 600px),


(min-resolution: 2dppx)
2. {
3. }

Las posibilidades y combinaciones son muchas y su uso está


generalizado. Bootstrap o Foundation son sólo dos ejemplos de frameworks CSS que basan todo su
funcionamiento en las media queries, lo que nos permite tener webs adaptables.

Es más, como se pueden crear aplicaciones híbridas multiplataforma utilizando HTML5, éstas
pueden hacer uso de las media queries para facilitar el desarrollo multi-dispositivo, algo que al final
es bastante más sencillo que los múltiples layouts en android.

Habilitar media queries en Internet Explorer


Igual estás pensando en lo que conlleva usar media queries y diseñar/maquetar bajo la filosofía de
mobile first… claro que sí… Internet Explorer 8 e inferiores no soporta media queries.

Como IE no entiende lo que son las media queries, no va a leer nunca las reglas CSS que están
dentro de las media queries… por lo que cuando se acceda desde IE8 o inferior, la web se mostrará
como si se viese desde un móvil.

Bueno, si en tu caso es vital el soporte para esas versiones viejas de IE, no pasa nada… viene
Javascript al rescate en forma de dos estupendas librerías que emulan el soporte para las media
queries en IE5+
Página 288 de 310
 Respond.js
 CSS3 Media Queries JS

¿Alguna excusa más para no usar media queries? Claro que no!!

Recursos disponibles
 Ejemplo base: http://rolandocaldas.com/ejemplos-blog/media-queries/index.html
 Ejemplo con texto a tres columnas: http://rolandocaldas.com/ejemplos-blog/media-
queries/index_responsive.html
 Puedes ver el proceso paso a paso en mi canal de youtube

http://www.cristalab.com/tutoriales/dise
no-de-layout-fluido-y-responsive-design-
con-media-queries-css-c105349l/
Guia para crear tu sitio web ajustable a
diferentes resoluciones de pantalla

Un nuevo apartado llegó y es un poco más allá del diseño, quisimos orientarnos a
la programación o desarrollo, y más especificamente al “Responsive Web Design”.

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una
técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes
fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio
web al entorno del usuario.

Página 289 de 310


Vamos a dar el primer paso de una serie de artículos para crear tu primer portafolio de
trabajo en con un diseño y programación web totalmente flexible.

Primeros pasos

Comenzar un nuevo diseño no es algo complicado, lo esencial es tener bien ubicados


ciertos elementos, definirlos y comenzar a trabajar sobre ellos.

Uno de los elementos necesarios es definir al ancho total del diseño de tu pagina web.
Uno de los principios del Responsive Web Design es poder acoplarse a las diferentes
resoluciones de pantalla y estas las primordialmente las tomamos del ancho de pantalla.
Con los monitores actuales y las resoluciones cada vez mayos seria de suponerse que no
debería importarnos en gran medida esto, pero, un hecho es que hoy los nuevos
monitores no son los que captan el mayor trafico a los sitios web. Los dispositivos
móviles son los que han ganado la batalla y claramente estamos notando como es que,
cada vez es mas común que los sitios web, implementen características para hacer sus
sitios mas amigables con los móviles, nosotros al igual que muchos otros, creemos que
no es necesario hacer tantas modificaciones para ajustar cada sitio a una resolución de
pantalla diferente, creemos que basta con un solo esfuerzo, que tal vez al principio sea
mayor, pero al cabo del tiempo será la mejor opción.

La resolución de pantalla

Hoy en día tenemos estándares web de los cuales muchos se rigen por tecnologías ya
viejas, una de ellas es la resolución de pantalla. Hoy los sitios de internet, en su mayoría
tiene un común denominador, todos están escalados o pensados para leerse
perfectamente en pantallas de un mínimo de 1024 pixeles de ancho. Nosotros también
recomendamos también contemplar esta resolución, pero siendo un poco mas
visionarios. La resolución de la pantalla es de 1024 y justo por eso sabemos que nuestro
diseño debe ser menor a ese tamaño, porque? Simple, aun hay elementos que interfieren
y que podrían traer problemas, por ejemplo, la barra de scroll. Te recomendamos crear
tus diseños en medidas entre 980 y 950 pixeles de ancho.

Resoluciones secundarias de pantalla

Como lo platicábamos un poco mas arriba, hay otras resoluciones que deben ser
tomadas en cuenta por crear un diseño web flexible, estas medidas son esencialmente de
móviles, ya sea tabletas o smartphones.

Página 290 de 310


Para esto, vamos a tomar de ejemplo algunas otras resoluciones, que serán de 700
pixeles, 480 pixeles y 320 pixeles. La decisión de tomar estas medidas, es que muchos
dispositivos cuentan con resoluciones similares, por lo cual, estaríamos abarcando una
gran cantidad de dispositivos ya en el mercado.

El CSS y HTML

Un elemento que debes contemplar para recrear los ejemplos que aquí te daremos es tu
habilidad en HTML y mucho mas en CSS. Las versiones que desees tener conocimiento
es en la 4.1 de HTML y 2 en el caso de CSS, aunque si ya eres un Rockstar en CSS 3 y
HTML 5, no importa, entenderás mas rápido y mejor.

El comienzo

Ya tienes las bases y el porque de casa una, en el siguiente articulo, comenzaremos a ver
el comienzo de tu pagina web flexible. Lo ideal es que vayas practicando y que tu
mismo pongas a prueba tus habilidades o las vayas perfeccionando.

Manos a la obra

Crear un sitio desde cero para muchos puede ser algo intimidante, pero es de lo más
fácil del mundo. Para hacerlo, como te lo comentamos en el artículo anterior,
necesitamos que sepas un poco de HTML y CSS, con esto como mínimo podremos
crear un buen producto.

Validación

Para comenzar con este sitio necesitamos enfocar ciertos puntos importantes que harán
funcional todo el concepto. Comenzaremos por definir los elementos del código de
cabecera. Como sabes en HTML5 ya no es necesario que agreguemos la validación del
documento. Para los que tienen un poco de más experiencia, recordaran que tiempo
atrás (antes de la maquinación con HTML5) debíamos agregar antes de las etiquetas
<HTML> una validación como está:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

Pero ahora con el nuevo estándar, si no queremos agregar esta validación no pasa
absolutamente nada, el sitio trabaja perfectamente, pero si aún quieres seguir con la
estructura, lo único que debes agregar es:

<!DOCTYPE html>

Comenzando con el maquetado

El maquetado realmente es muy simple, recuerdan que las veces que comenzamos un
código comenzamos con algo así:

<html>

Página 291 de 310


Bueno aquí es lo mismo, no necesitamos agregar nada más para comenzar. Un buen
consejo es que cada vez que creemos una etiqueta es cerrarla inmediatamente, por lo
cual si yo fuera ustedes al momento de escribir <html> agregaría el cierre de la etiqueta
</html>

Ahora si vamos con los puntos especiales.

En HTML y HTML5 hay secciones importantes que dan estructura al sitio web, estas
secciones también se dividen por etiquetas, que son:

<head>

Dentro de esta sección vamos a agregar los valores que le darán a la página estilos,
descripciones, nombres, entre otras cosas.

<body>

En el body tenemos todo el contenido de la página en cuestión, mismo que se rige por lo
que dictan los elementos que están dentro del head.

Si tomamos hasta ahora lo que tenemos, nuestra estructura de código sería similar a
esto:

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

El siguiente paso va dentro del head, como les comente un poco antes, los datos que
estén dentro de la etiqueta body se regirán por lo que diga el head, desde aquí podremos
agregar desde el titulo, las palabras clave, los estílos y para nosotros un punto muy
importante, el modo en el que se desplegara la pantalla dependiendo el tamaño.

Acto seguido vamos a agregar estos elementos, los cuales serian algo así:

<title>Mi sitio web</title>


<meta name="viewport" content="width=device-width, initial-scale=1.0">

El title, no tiene ninguna dificultad, es simplemente el titulo con el cual se desplegara la


página, en cambio el <meta> si es importante para nosotros, lo que hace este último es
darle un reset a los estílos definidos por el dispositivo en el cual despleguemos el sitio.

Lo siguiente es agregar el link para la hoja de estilo; como saben muchos agregar hojas
de estilo externas al código es común ya que aligera la carga de la página. Nuestro
código será algo así:

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

Página 292 de 310


Dentro de estas hojas de estilo viene nuestro segundo punto importante, y es que vamos
a agregar una segunda hoja de estilo. ¿Porque? Como lo vimos en el artículo anterior,
para hacer que funcione un diseño flexible, se introdujo algo llamado media queries.

Media Queries

Los media queries básicamente son partes de código que permiten diferentes estilos a un
mismo elemento.

Este es uno de los puntos claves con el cual vamos a hacer funcionar nuestro diseño.
Aunque podríamos agregarlo a la misma hoja de estilo en la cual vamos a usar para
darle diseño al sitio, me gusta agregarla de forma independiente para tener un mejor
control de ella.

El codigo para agregarla seria:

<link href="media-queries.css" rel="stylesheet" type="text/css">

El contenido

Ya hablamos que el contenido está en la parte del body y es ahora donde vamos
comenzar a utilizarlo. Decidi que la mejor forma de mostrarles como funciona esto es
combinar un poco de HTML5, HTML4, CSS y CSS3, aunque parezcan muchos
lenguajes, la idea es tomar lo esencial de cada uno para hacernos la vida más amena y
obtener los resultados deseados en poco tiempo.

Lo principal es saber como vamos a estructurar nuestro diseño, yo decidí crearlo de la


siguiente manera:

Header y Barra Navegacion


Titulo
Contenido
Footer

Como ven en la imagen es de forma muy sencilla la forma en que se mostrara el sitio,
no pretendo llenarlo de elementos innecesarios que no vayamos a utilizar esta ocasión,
solo lo fundamental.

Header

Para agregar nuestro header este será nuestro código:

<header>
<div id="nav">
<div id="title"><a href="#" border="0"><img
src="img/title.png"></a></div>
<div id="logos">
<ul id="horizontal">
<li><a href="#" border="0"><img src="img/dribbble.png"></a></li>
<li><a href="#" border="0"><img src="img/behance.png"></a></li>
<li><a href="#" border="0"><img src="img/twitter.png"></a></li>
Página 293 de 310
<li><a href="#" border="0"><img src="img/pinterest.png"></a></li>
</ul>
</div>
</div>
</header>

Aquí vemos que existen básicamente 5 imagenes y que estas están divididas por 3 divs,
que son “nav”, “title” y “logos”. Aunque pude haberlo hecho de una forma más fácil,
crear diferente divs para el heder me permite tener mejor control al momento de jugar
con los mismos elementos en cada resolución de pantalla.

El titulo

Para hacerlo me voy a basar en otro tag de HTML5 el <hgroup> el cual también
constará de 2 divs dentro del grupo, que son “subnav” y “box”, y el código sería como
el siguiente:

<hgroup>
<div class="subnav">
<div class="box">
<h2>Hola bienvenido a mi sitio web</h2>
</div>
</div>
</hgroup>

El contenido

El contenido por el cual opte esta ocasión fue básicamente una serie de imagenes que
mostraran mis trabajos recientes, esta serie de imagenes o thumbnails deberá de tener la
capacidad de autoajustarse dependiendo del tamaño de pantalla desde la cual lo veamos.
La mejor opción fue agregar un nuevo hgroup con distintos divs para cada imagen, y el
código seria como el siguiente:

<hgroup>
<div id="content">
<div class="portfolio">
<div class="thumbnail mask"><a class="thumb" href="#"><img
src="img/xuntoz.jpg"></a></div>
</div>
</div>
</hgroup>

En el div de la imagen podremos agrega la cantidad que deseemos de imagenes,


realmente no hay un limite. Lo siguiente es agregar el footer

El footer

Para este vamos a seguir los mismos pagos que los contenidos anteriores, etiquetas de
diferenciación en HTML5 y algunos divs para poder controlar el estilo.

El código del footer sería como el siguiente:

Página 294 de 310


<footer>
<hgroup>
<div class="left_footer">
<p>Sitios en los que participo y que te podrían interesar</p><br />
<ul class="footer_list">

<li class="footer"><a class="menu" href="#">Ok Hosting</a></li>


<li class="footer"><a class="menu" href="#">Ok Honsting Blog</a></li>
<li class="footer"><a class="menu" href="#">Dominios</a></li>
<li class="footer"><a class="menu" href="#">Hosting</a></li>
</ul>
</div>
<div class="rigth_footer">
<ul class="footer_right">
<li class="footer_2"><a class="menu" href="#">Home</a></li>
<li class="footer_2"><a class="menu" href="#">Bio</a></li>
<li class="footer_2"><a class="menu" href="#">Contact</a></li>
</ul>
</div>
</hgroup>
</footer>

Basicamente ya tenemos hecho nuestro sitio web, tenemos las imagenes recortadas, los
títulos y hemos agregado un poco de color a cada sección, pero aún no hemos hecho que
nuestro diseño sea flexible, y esto es lo que haremos a continuación.

Recuerdan que les comente que habría una hoja de estilo definida solamente para los
media queries, pues aquí es donde vamos a comenzar a utilizarla.

Comenzaremos por definir la cantidad de pantallas para las que vamos a estilizar
nuestros diseños, cada pantalla es similar a un querie diferente; yo me enfocare a
explicar 2 para notar la diferencia, aunque en el archivo descargable, tendremos mas
estilos definidos.

abordaremos un poco más rápido una serie de conceptos que en la primera parte
explicamos y que si no has visto, es recomendable que la analices (link)

http://okhosting.com/blog/guia-para-crear-tu-sitio-web-ajustable-a-diferentes-
resoluciones-de-pantalla-3/

Manos a la obra

Crear un sitio desde cero para muchos puede ser algo intimidante, pero es de lo más
fácil del mundo. Para hacerlo, como te lo comentamos en el artículo anterior,
necesitamos que sepas un poco de HTML y CSS, con esto como mínimo podremos
crear un buen producto.

Validación

Página 295 de 310


Para comenzar con este sitio necesitamos enfocar ciertos puntos importantes que harán
funcional todo el concepto. Comenzaremos por definir los elementos del código de
cabecera. Como sabes en HTML5 ya no es necesario que agreguemos la validación del
documento. Para los que tienen un poco de más experiencia, recordaran que tiempo
atrás (antes de la maquinación con HTML5) debíamos agregar antes de las etiquetas
<HTML> una validación como está:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

Pero ahora con el nuevo estándar, si no queremos agregar esta validación no pasa
absolutamente nada, el sitio trabaja perfectamente, pero si aún quieres seguir con la
estructura, lo único que debes agregar es:

<!DOCTYPE html>

Comenzando con el maquetado

El maquetado realmente es muy simple, recuerdan que las veces que comenzamos un
código comenzamos con algo así:

<html>

Bueno aquí es lo mismo, no necesitamos agregar nada más para comenzar. Un buen
consejo es que cada vez que creemos una etiqueta es cerrarla inmediatamente, por lo
cual si yo fuera ustedes al momento de escribir <html> agregaría el cierre de la etiqueta
</html>

Ahora si vamos con los puntos especiales.

En HTML y HTML5 hay secciones importantes que dan estructura al sitio web, estas
secciones también se dividen por etiquetas, que son:

<head>

Dentro de esta sección vamos a agregar los valores que le darán a la página estilos,
descripciones, nombres, entre otras cosas.

<body>

Página 296 de 310


En el body tenemos todo el contenido de la página en cuestión, mismo que se rige por lo
que dictan los elementos que están dentro del head.

Si tomamos hasta ahora lo que tenemos, nuestra estructura de código sería similar a
esto:

<!DOCTYPE html>

<html>

<head></head>

<body></body>

</html>

El siguiente paso va dentro del head, como les comente un poco antes, los datos que
estén dentro de la etiqueta body se regirán por lo que diga el head, desde aquí podremos
agregar desde el titulo, las palabras clave, los estílos y para nosotros un punto muy
importante, el modo en el que se desplegara la pantalla dependiendo el tamaño.

Acto seguido vamos a agregar estos elementos, los cuales serian algo así:

<title>Mi sitio web</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

El title, no tiene ninguna dificultad, es simplemente el titulo con el cual se desplegara la


página, en cambio el <meta> si es importante para nosotros, lo que hace este último es
darle un reset a los estílos definidos por el dispositivo en el cual despleguemos el sitio.

Lo siguiente es agregar el link para la hoja de estilo; como saben muchos agregar hojas
de estilo externas al código es común ya que aligera la carga de la página. Nuestro
código será algo así:

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

Página 297 de 310


Dentro de estas hojas de estilo viene nuestro segundo punto importante, y es que vamos
a agregar una segunda hoja de estilo. ¿Porque? Como lo vimos en el artículo anterior,
para hacer que funcione un diseño flexible, se introdujo algo llamado media queries.

Media Queries

Los media queries básicamente son partes de código que permiten diferentes estilos a un
mismo elemento.

Este es uno de los puntos claves con el cual vamos a hacer funcionar nuestro diseño.
Aunque podríamos agregarlo a la misma hoja de estilo en la cual vamos a usar para
darle diseño al sitio, me gusta agregarla de forma independiente para tener un mejor
control de ella.

El codigo para agregarla seria:

<link href="media-queries.css" rel="stylesheet" type="text/css">

El contenido

Ya hablamos que el contenido está en la parte del body y es ahora donde vamos
comenzar a utilizarlo. Decidi que la mejor forma de mostrarles como funciona esto es
combinar un poco de HTML5, HTML4, CSS y CSS3, aunque parezcan muchos
lenguajes, la idea es tomar lo esencial de cada uno para hacernos la vida más amena y
obtener los resultados deseados en poco tiempo.

Lo principal es saber como vamos a estructurar nuestro diseño, yo decidí crearlo de la


siguiente manera:

 Header y Barra Navegacion


 Titulo
 Contenido
 Footer

Como ven en la imagen es de forma muy sencilla la forma en que se mostrara el sitio,
no pretendo llenarlo de elementos innecesarios que no vayamos a utilizar esta ocasión,
solo lo fundamental.

Página 298 de 310


Header

Para agregar nuestro header este será nuestro código:

<header>

<div id="nav">

<div id="title"><a href="#" border="0"><img src="img/title.png"></a></div>

<div id="logos">

<ul id="horizontal">

<li><a href="#" border="0"><img src="img/dribbble.png"></a></li>

<li><a href="#" border="0"><img src="img/behance.png"></a></li>

<li><a href="#" border="0"><img src="img/twitter.png"></a></li>

<li><a href="#" border="0"><img src="img/pinterest.png"></a></li>

</ul>

</div>

</div>

</header>

Aquí vemos que existen básicamente 5 imagenes y que estas están divididas por 3 divs,
que son "nav", "title" y "logos". Aunque pude haberlo hecho de una forma más fácil,
crear diferente divs para el heder me permite tener mejor control al momento de jugar
con los mismos elementos en cada resolución de pantalla.

El titulo

Página 299 de 310


Para hacerlo me voy a basar en otro tag de HTML5 el <hgroup> el cual también
constará de 2 divs dentro del grupo, que son "subnav" y "box", y el código sería como el
siguiente:

<hgroup>

<div class="subnav">

<div class="box">

<h2>Hola bienvenido a mi sitio web</h2>

</div>

</div>

</hgroup>

El contenido

El contenido por el cual opte esta ocasión fue básicamente una serie de imagenes que
mostraran mis trabajos recientes, esta serie de imagenes o thumbnails deberá de tener la
capacidad de autoajustarse dependiendo del tamaño de pantalla desde la cual lo veamos.
La mejor opción fue agregar un nuevo hgroup con distintos divs para cada imagen, y el
código seria como el siguiente:

<hgroup>

<div id="content">

<div class="portfolio">

<div class="thumbnail mask">

<a class="thumb" href="#"><img src="img/xuntoz.jpg"></a>

</div>

</div>

</div>
Página 300 de 310
</hgroup>

En el div de la imagen podremos agrega la cantidad que deseemos de imagenes,


realmente no hay un limite. Lo siguiente es agregar el footer

El footer

Para este vamos a seguir los mismos pagos que los contenidos anteriores, etiquetas de
diferenciación en HTML5 y algunos divs para poder controlar el estilo.

El código del footer sería como el siguiente:

<footer>

<hgroup>

<div class="left_footer">

<p>Sitios en los que participo y que te podr&iacute;an interesar</p><br />

<ul class="footer_list">

<li class="footer"><a class="menu" href="#">Ok Hosting</a></li>

<li class="footer"><a class="menu" href="#">Ok Honsting Blog</a></li>

<li class="footer"><a class="menu" href="#">Dominios</a></li>

<li class="footer"><a class="menu" href="#">Hosting</a></li>

</ul>

</div>

<div class="rigth_footer">

<ul class="footer_right">

<li class="footer_2"><a class="menu" href="#">Home</a></li>


Página 301 de 310
<li class="footer_2"><a class="menu" href="#">Bio</a></li>

<li class="footer_2"><a class="menu" href="#">Contact</a></li>

</ul>

</div>

</hgroup>

</footer>

Basicamente ya tenemos hecho nuestro sitio web, tenemos las imagenes recortadas, los
títulos y hemos agregado un poco de color a cada sección, pero aún no hemos hecho que
nuestro diseño sea flexible, y esto es lo que haremos a continuación.

Recuerdan que les comente que habría una hoja de estilo definida solamente para los
media queries, pues aquí es donde vamos a comenzar a utilizarla.

Comenzaremos por definir la cantidad de pantallas para las que vamos a estilizar
nuestros diseños, cada pantalla es similar a un querie diferente; yo me enfocare a
explicar 2 para notar la diferencia, aunque en el archivo descargable, tendremos mas
estilos definidos.

El estilo que vamos a utilizar es el que esta entre 980 y 700 pixeles.

Como recordaran decidi hacer hojas de estilo diferentes para el diseño principal y otra
con los media queries de cada tamaño de la pantalla esto con la intención de tener un
mejor control de ambos diseños, aunque si ustedes lo desean, puede mantener solo una
hoja de estilos y en la misma colocar los media queries.

El estilo principal

Si ven la imagen a continuación, notaran como es que decidí estructurar el sitio, algo
muy esencial, un header, una pleca de bienvenida, el contenido y el footer. Cada uno de
estos tiene una medida que le asigne conforme lo creo coherente, por ejemplo la plega
negra tiene un height de 40 pixeles, la segunda pleca tiene un height de 60 pixeles y
ambas tienen un width de 100% para ajustarse completamente al ancho de la pantalla.
Cada uno de ustedes puede asignarle valores diferentes a sus barras y con esto, jugar un
poco más con su propio diseño.

Página 302 de 310


En el caso del cuerpo de la pagina no tengo una medida estándar, por lo cual tuve que
agregar una altura automática a la caja de contenido; y en cuanto al footer solo le
agregue una altura de 120 pixeles.

Como lo he repetido, no quiero entrar en detalles de CSS porque estoy seguro que
ustedes pueden ver y entender las características de los elementos sin problema.

Para agregar un media querie es necesario que dejemos sentadas las bases de lo que
deseamos que este realice al notar que la resolución de pantalla está entre los parámetros
que le hemos designado; para hacer que esto ocurra debemos agregar un media screen al
estilo, algo que quedará similar a esto:

@media screen and (max-width: 980px) {

#tuselementos

Con esto nosotros le estamos diciendo que si la pantalla tiene hasta un máximo de 980
pixeles y sobre escriba los elementos que vamos a agregar. Dentro del media querie
deben de ir los estilos que manejamos en la hoja principal, por ejemplo el header. En la
parte anterior les comente que el heder tenia una altura de 40 pixeles en resoluciones
mayores a 980 pixeles, pero ¿Que pasa si hay pantallas que tienen una resolución
menor? bueno, comenzamos a agregar los estilos que se sobre escribirán y esto se hace
de una forma muy fácil; solo debemos de agregar los elementos como en la hoja de
estilo principal y darle parámetros distintos, mismos que se deben de ajustar
directamente a la resolución de pantalla que en ese momento estamos trabajando, el
ejemplo lo haremos con el header.

En el estilo principal teníamos el header con los siguientes parámetros:

 Altura: 40 pixeles
 Ancho: 100%
 Background: #232323

Dentro del medie querie que es inferior a 980 pixeles nosotros podemos agregar los
datos que creamos convenientes, por ejemplo yo puedo decirlo que cuando la pantalla
Página 303 de 310
sea menor a 980 pixeles, la altura deberá ser de 60 pixeles, el ancho tiene que quedar de
100% y el color de fondo debe cambiar a un gris (#dddddd), pero también podemos
agregar parámetros nuevos, por ejemplo que esta misma área tenga un padding a la
izquierda y derecha de 5% y que el texto lo deberá alinear a la derecha, esto debería
quedar en código de la siguiente manera:

header {

width: 100%; height: 40px; background: #dddddd; padding: 0 5%; text-align: right;

Si lo comparamos con el anterior podemos notar la dieferencia:

header {

width: 100%; height: 40px; background: #232323;

Pero si lo hacemos en un preview del diseño es cuando veremos como es que funciona
al desplegarse en el browser. Si te das cuenta, el diseño web flexible o responsive web
design es un tipo de diseño y programación ajustable que también es flexible al
momento de programar en el. Como sabemos que esta fue una guía rápida, te dejamos
los documentos para que los descargues y puedas seguir aprendiendo a tu propio paso.
Como siempre si tienes dudas o comentarios, hazlo saber.

url descarga fichero


https://s3.amazonaws.com/f.cl.ly/items/1Y0d2x3W232k2624463A/RWD.zip

http://cl.ly/3C0q2s2e2R0z

media-queries.css

@media screen and (max-width: 980px) {

header {

width: 100%; height: 40px; background: #1a1a1a;

Página 304 de 310


}

#nav {

width: 100%; height: 40px; margin-left: 20px; padding-top: 10px; margin: auto; padding:
auto;

#title {

margin-left: 10px;

#logos {

margin-right: 10px;

.subnav {

width: 100%; height: 45px; background: #ffd62c;

.subnav .box {

max-width: 100%; height: 60px; margin: auto; padding: auto; padding-top: 15px; text-align:
center;

#logos {

float: right;

#horizontal li {

display: inline;

list-style-type: none;

footer {

width: 90%;

.left_footer{

width: 80%;

.right_footer{

width: 10%;

Página 305 de 310


}

h2 {

font-size: 100%; color: #1a1a1a; text-transform: uppercase; font-family: Helvetica;

.subnav_tiny {

overflow: hidden; height: 0; width: 0;

#content {

width: 99%; height: auto; margin: auto; padding: auto;

.portfolio {

max-width: 95%; min-width: 60%; height: auto; margin: auto; padding: auto!important;
margin-top: 20px;

.thumbnail {

width: 23%; height: 16%; display: inline-block; margin-left: 5px; margin-bottom: 5px; -moz-
width: 23%;

.thumbnail:hover {

display: inline-table; position: relative;

background-image: url(img/hover.jpg) no-repeat; background-position: center;

transition-duration: 2s ease-in;

-webkit-transition-duration: 2s ease-in;

@media screen and (max-width: 700px) {

header {

width: 100%; height: 40px; background: #1a1a1a;

#nav {

width: 100%; height: 40px; margin-left: 20px; padding-top: 10px; margin: auto; padding:
auto;

}
Página 306 de 310
.subnav {

width: 100%; height: 45px; background: #ffd62c;

.subnav .box {

max-width: 100%; height: 60px; margin: auto; padding: auto; padding-top: 15px; text-align:
center;

#horizontal li {

display: inline;

list-style-type: none;

footer {

width: 90%;

.left_footer{

width: 100%; clear: both;

.right_footer{

width: 100%; clear: both;

.footer_right li {

display: none;

h2 {

font-size: 70%; color: #1a1a1a; text-transform: uppercase; font-family: Helvetica;

#content {

width: 99%; height: auto; margin: auto; padding: auto;

.subnav_tiny {

overflow: hidden; height: 0; width: 0;

.portfolio {

Página 307 de 310


max-width: 95%; min-width: 60%; height: auto; margin: auto; padding: auto!important;
margin-top: 20px;

.thumbnail {

width: 22%; height: 11%; background: transparent; display: inline-table; margin-left: 3px;
margin-bottom: 3px;

.mask:hover {

width: 22%; height: 11%; display: inline-table; overflow: hidden; position: relative;

background: url(img/hover.jpg) no-repeat; background-position: center;

transition-duration: 2s ease-in;

-webkit-transition-duration: 2s ease-in;

@media screen and (max-width: 480px) {

header {

width: 100%; height: 50px; background: #232323;

#title {

float: left; margin-top: 8px; margin-left: 38%;

#logos {

overflow: hidden; margin: 0; padding: 0; height: 0; width: 0;

#horizontal li {

display: inline;

list-style-type: none;

footer {

width: 100%;

p{

Página 308 de 310


margin-left: 5px;

ul.footer_list li {

clear: both; display: table; height: 30px; background: #232323; width: 100%; padding: 10px
5px 0px 5px; border-bottom: 1px solid #2d2d2d;

ul.footer_list li:hover {

background: #2d2d2d;

.footer_3 {

padding-bottom: 20px; margin: 0;

.subnav {

overflow: hidden; height: 0; width: 0;

.subnav .box {

float: none;

#content {

width: 99%; height: auto; margin: auto; padding: auto;

.subnav_tiny {

width: 100%!important; height: 30px!important; background: #ffd62c!important; overflow:


inherit!important;

.portfolio {

max-width: 94%; height: auto; margin: auto; padding: auto!important; margin-top: 20px;

.thumbnail {

width: 30%; height: 90px; background: transparent; display: inline-table; margin-left: 2px;
margin-bottom: 2px;

.mask:hover {

width: 30%; height: 10%; display: inline-table; overflow: hidden; position: relative;
Página 309 de 310
background: url(img/hover.jpg) no-repeat; background-position: center;

transition-duration: 2s ease-in;

-webkit-transition-duration: 2s ease-in;

Página 310 de 310

You might also like