Professional Documents
Culture Documents
Ángel Sobrino
cursoprogramadores@gmail.com
Página 2 de 310
CSS Introducción
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
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.
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:
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>
</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
Página 6 de 310
El selector id
El selector id se utiliza para especificar un estilo para un elemento individual, único.
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>
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.
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...
Página 8 de 310
Tres formas de insertar CSS
Hay tres formas de insertar una hoja de estilo:
<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");}
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;}
<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>
</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!
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;
Orden en cascada
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).
CSS Background
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.
Ejemplo
body {background-color:#b0c4de;}
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
</body>
</html>
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>
</body>
</html>
Imagen de fondo
La propiedad background-image especifica una imagen para usar como fondo de un
elemento.
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>
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>
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>
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>
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.
Ejemplo
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
<!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>
Para acortar el código, también es posible especificar todas las propiedades en una sola
propiedad.Esto se llama una propiedad resumida.
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>
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.
<!DOCTYPE html>
<html>
<head>
<style>
body
margin-left:200px;
.container
Página 21 de 310
{
text-align:center;
.center_div
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>
CSS Text
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.
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>
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>
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.
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>
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>
</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>
</p>
<p class="small">
</p>
<p class="big">
</p>
Página 30 de 310
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {direction:rtl;}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
Página 31 de 310
<head>
<style>
word-spacing:30px;
</style>
</head>
<body>
<p>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
white-space:nowrap;
Página 32 de 310
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<tr>
<td nowrap>Aunque este texto sea más ancho que los 400 píxeles
</tr>
Página 33 de 310
</table>
</body>
</html>
<!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>
</body>
Página 34 de 310
</html>
unicode-bidi
http://css-tricks.com/almanac/properties/v/vertical-align/
CSS Fuente
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.
Font Family
La familia de fuentes de un texto se establece con la propiedad font-family.
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>
Font Style
La propiedad font-style se utiliza sobre todo para especificar texto en cursiva.
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>
<!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>
</html>
Luego, en tu hoja de estilos vas a especificar la fuente (tipo de letra) que deseas usar, así:
<style> body { font-family: ‘Rokkitt'; } </style>
<!-- ### 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-size: 48px;
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.
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:
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.
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>
</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.
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).
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.
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>
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>
</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>
<!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>
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;
}
DOBLE, Y EN VERSALITAS.
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>
Página 46 de 310
CSS Links
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
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>
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>
</html>
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
Lista
En HTML, hay dos tipos de listas:
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;}
o Coffee
o Tea
o Coca Cola
Coffee
Tea
Coca Cola
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>
<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.
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
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.
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>
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>
CSS Tablas
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.
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
<!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>
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/
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>
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>
<!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>
Ejemplo
td
{
height:50px;
vertical-align:bottom;
}
<!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>
(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
Página 71 de 310
COLUMNAS PARES E IMPARES
(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>
<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á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.
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.
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.
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
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>
Ancho = ancho total del elemento + relleno izquierdo + relleno derecho + borde izquierdo + borde
derecho + margen izquierdo + margen derecho
Altura total del elemento = altura +relleno superior + relleno inferior + borde superior + borde inferior
+ margen superior + margen inferior
CSS Bordes
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
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:
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>
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>
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>
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
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>
<!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>
<!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>
<!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>
<!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>
border-bottom Establece todas las propiedades del borde de fondo en una declaración
border-left Establece todas las propiedades del borde izquierdo en una declaración
border-right Establece todas las propiedades del borde derecho en una declaración
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".
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.
<!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>
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>
<!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>
<!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>
<!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á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).
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.
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:
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.
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
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>
<!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>
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>
<!DOCTYPE html>
<html>
<head>
<style>
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
</body>
</html>
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
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.
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>
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>
<!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>
<!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>
<!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>
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;
}
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).
A es hijo de B,
ó bien,
A es hijo de C que es descendiente de B.
Y para los que no entendieron nada, aquí esta el árbol del documento HTML del ejemplo.
S1 > S2 {...}
donde S2 es hijo de S1. Esto permite aplicar estilos solo a aquellos elementos hijos de S1.
Veamos un ejemplo:
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á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>
Existen 4 formas de utilizar este tipo de selectores de las cuales solo veremos las 2 primeras.
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.
2. [ATRIBUTO = VALOR]
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:
Mas ejemplos
atributo llamado nombre_atributo y cuyo valor es una lista de palabras separadas por
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[class] { color:blue; }
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color:blue; }
sea "externo" */
a[class~="externo"] { color:blue; }
*[lang=en] { ... }
*[lang|="es"] { color:red }
CSS Dimensiones
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>
<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>
<!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>
<!DOCTYPE html>
<html>
<head>
<style>
img {width:200px;}
</style>
</head>
<body>
</body>
</html>
<!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>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>
<!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>
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
<!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>
<h1>
<p>
<div>
Un elemento en línea sólo ocupa el ancho que sea necesario, y no fuerza saltos de línea.
<span>
<a>
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>
<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>
Ejemplo
span {display:block;}
<!DOCTYPE html>
<html>
<head>
<style>
<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>
<!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.
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:
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>
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.
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.
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.
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.
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.
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>
Los elementos posicionados fijos se eliminan del flujo normal. El documento y los otros elementos se
comportan como el elemento fijo no existiera.
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.
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.
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.
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left
{
background:#c0c0c0;
position:relative;
left:-20px;
}
h2.pos_right
{
background:#c0c0c0;
<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;
}
<!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.
img.desplazada {
position:relative;
top: 8em;
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.
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.
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.
En los siguientes ejemplos, se utiliza la página HTML que muestra la siguiente imagen:
div {
padding: 1em;
width: 300px;
<div>
mi viverra augue, at pulvinar turpis leo sed orci. Donec ipsum. Curabitur
</div>
div img {
position:absolute;
top: 50px;
left:50px;
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:
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.
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 {
padding: 1em;
width: 300px;
position:relative;
div img {
position:absolute;
top:50px;
left:50px;
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:
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.
Inicialmente
<!DOCTYPE html>
<html lang="es">
<head>
<title>posicionamiento</title>
<style type="text/css">
.cuadro1 {
height:200px;width:200px;
background-color:#FF8000;
color:#ffffff;
.cuadro2{
height:200px;width:200px;
background-color:#0000FF;
.cuadro3{
height:200px;width:200px;
background-color:#008000;
color:#ffffff;
</style>
</head>
<body>
</body>
</html>
<head>
<title>posicionamiento absoluto</title>
<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>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>posicionamiento absoluto</title>
<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>
Contenedor
</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).
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.
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:
asumiendo que ambos “Ps” tienen unas dimensiones de 50px X 55 px, crearemos
respectivamente las regiones recortadas delimitadas por puntos de la siguiente imagen:
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140" />
</body>
</html>
<!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>
<!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>
"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 */
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.
Float se utiliza a menudo para las imágenes, pero también es útil cuando se
trabaja con cualquier diseño.
Los elementos colocados después del elemento flotante fluirá alrededor del
mismo envolviéndolo.
<!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>
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"/>
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>
}
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:
</html>
<!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;
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>
<!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>
<!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>
</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>
<h1>
<p>
<div>
Ejemplo
<!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>
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>
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;
.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>
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>
Ejemplo
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
<!DOCTYPE html>
<html>
<head>
</body>
</html>
<!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>
</body>
</html>
CSS pseudo-clases
Sintaxis
La sintaxis de pseudo-clases:
selector:pseudo-class {property:value;}
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>
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>
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>
<!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>
<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>
<!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>
CSS - La Pseudo-clase:lang
La pseudo-clase :lang permite definir reglas especiales para diferentes
idiomas.
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
<!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>
</body>
</html>
CSS pseudo-elementos
Sintaxis
La sintaxis de 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.
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>
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>
propiedadessource
propiedadescolor
propiedadesbackground
propiedadesmargin
propiedadespadding
propiedadesborder
text-decoration
vertical-align (solo si "float" es "none")
text-transform
line-height
float
clear
p.article:first-letter {color:#ff0000;}
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.
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.
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>
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>
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>
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:
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:
<!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:
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.
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:
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>A background color is added to the links to show the link area. The
whole link area is clickable, not just the text.</p>
</body>
</html>
<!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>
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;
<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>
Imagen normal:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
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 */
}
Código completo
<!DOCTYPE html>
<html>
<head>
<style>
img
opacity:0.4;
img:hover
{
Página 189 de 310
opacity:1.0;
</style>
</head>
<body>
<h1>Image Transparency</h1>
</body>
</html>
<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>
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.
http://www.w3schools.com/css/img_navsprites.gif
Ejemplo
img.home
{
width:46px;
height:44px;
<!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:
http://www.w3schools.com/css/img_trans.gif
Esta es la forma más fácil de usar sprites de imagen, ahora veremos su uso
mediante enlaces y efectos hover.
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>
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>
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.
<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>
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
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>
<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>
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>
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>
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
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.
<!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;
}
Definición y uso
La propiedad transición es una propiedad resumida para las cuatro propiedades de transición:
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.
Sintaxis
Value Descripción
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;
div:hover
width:300px;
</style>
</head>
<body>
<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;
</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
<html>
<head>
<style>
body
margin:30px;
background-color:#E9E9E9;
div.polaroid
width:294px;
background-color:white;
/* Add box-shadow */
div.rotate_left
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);
div.rotate_right
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-moz-transform:rotate(-8deg); /* Firefox */
-o-transform:rotate(-8deg); /* Opera */
transform:rotate(-8deg);
</style>
</head>
<body>
</div>
</div>
</body>
</html>
.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;
}
.polaroid:hover{
transform:scale(1.5);
}
Multiples cambios
<!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>
</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/
https://howsecureismypassword.net/
El Diseño
A continuación se muestra el diseño que vamos a utilizar como base.
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.
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.
<html>
<head>
</head>
<body>
</body>
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.
#page-container { }
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.
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.
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:
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.
<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>
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;
}
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:
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;
}
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;
}
#content {
float: right; background: green;
}
Estableciendo un ancho para el div content (por defecto va a querer
ocupar todo el ancho)
width: 480px;
#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?
<div id="sidebar-a">
¿Qué podemos hacer para solucionar este problema? Utilizaremos la propiedad css
“clear”.
#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.
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".
.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.
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 ...
<div id="header">
<h1>Enlighten Designs</h1>
</div>
h1 {
margin: 0; padding: 0;
}
Nota: Hemos utilizado listas de definición pero tendríamos que utilizar listas no ordenadas.
<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">
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.
<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>
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.
#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.
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;
}
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>
#sidebar-a {
float: right;
width: 280px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
}
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>
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
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');
}
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>
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.
#footer {
clear: both;
height: 66px;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
font-size: 10px;
color: #c9c9c9;
}
#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 {
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;
}
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.
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
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
Guardarlos en /images/nav/
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
#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;
}
#main-nav dt {
float: left;
}
#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 {
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:
../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
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CompanyName - PageName</title>
</head>
<body class="about">
<div id="page-container">
<div id="main-nav">
<dl>
</dl>
</div>
<div id="header">
<h1><img src="http://www.subcide.com/examples/creating-a-
css-layout-from-scratch/images/general/logo_enlighten.gif"
</div>
<div id="sidebar-a">
</div>
<div id="content">
<div class="padding">
portfolio.</p>
Email: <a
href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a><br />
</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> -
</div>
<div id="copyright">
</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 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">
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:
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 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.
http://www.sitepoint.com/article/888
http://www.alistapart.com/stories/smarttags/
http://www.officesmarttags.com/
¡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
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ú.
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 */
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>
ul.menu
list-style:none;
display:none;
list-style:none;
ul.menu */
display:block;
</style>
</head>
<body>
<ul class="menu">
<li>opcion 1
<ul>
<li>una a</li>
<li>una b</li>
</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>
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.
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;
}
Vamos a darle un poco de color, puedes hacerlo más mejor con poco esfuerzo.
<!DOCTYPE html>
<html>
<head>
<title>hola</title>
<style type="text/css">
list-style:none;
ul.menu */
display:block;
top:-1px;
display:none;
list-style:none;
ul.menu li
display:block;
position:relative;
padding:1px 5px;
Página 254 de 310
background:#8888ff;
width:80px;
ul.menu li:hover
background:#aaaaff;
</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>
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>
Y este es el resultado
<!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>
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;
padding: 0;
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 */
.mi-menu li {
display: block;
height: 40px;
list-style: none;
margin: 0;
padding: 0;
position: relative;
.mi-menu li a {
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;
.mi-menu ul {
left: 0;
margin: 0;
position: absolute;
/* 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 */
.mi-menu ul li {
overflow: hidden;
padding: 0;
/* animamos su visibildiad */
overflow: visible;
padding: 0;
.mi-menu ul li a {
border: none;
margin: 0;
width: 100px;
</style>
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.
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">
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
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 {
33 float:left;
34 padding: 13px;
35 }
36
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
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.
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*/
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;
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;
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{
61 padding-left:28px;
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
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
#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{
#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;
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
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”).
Ejemplo:
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.
1. body {
2. background: green ;
3. }
4.
5. @media (max-width: 600px) {
6. body {
Hará que el fondo de la web sea verde, pero cuando la pantalla sea menor a 600px el fondo será rojo.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
https://rolandocaldas.com/ejemplos-blog/media-queries/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</div>
</body>
</html>
Css
body {
background: green;
.oculta{
width:50%;
height:120px;
background: yellow;
margin:auto;
body {
Página 278 de 310
background: red;
.oculta{
display:none;
Ejemplo:
<head>
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.
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.
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
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:
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>
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í:
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. }
Vista móvil
Vista PC
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.
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.
Vista tablet
Vista PC
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.
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:
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. }
Vista móvil
Vista tablet
Media queries para pantallas en horizontal con un ancho mínimo de 400px y uno máximo de 600px:
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:
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.
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.
Primeros pasos
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.
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.
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á:
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>
El maquetado realmente es muy simple, recuerdan que las veces que comenzamos un
código comenzamos con algo así:
<html>
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í:
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í:
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 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.
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
<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>
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.
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
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>
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>
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>
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í:
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í:
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 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.
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>
<div id="nav">
<div id="logos">
<ul id="horizontal">
</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
<hgroup>
<div class="subnav">
<div class="box">
</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>
</div>
</div>
Página 300 de 310
</hgroup>
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.
<footer>
<hgroup>
<div class="left_footer">
<ul class="footer_list">
</ul>
</div>
<div class="rigth_footer">
<ul class="footer_right">
</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.
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:
#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.
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;
header {
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.
http://cl.ly/3C0q2s2e2R0z
media-queries.css
header {
#nav {
width: 100%; height: 40px; margin-left: 20px; padding-top: 10px; margin: auto; padding:
auto;
#title {
margin-left: 10px;
#logos {
margin-right: 10px;
.subnav {
.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%;
h2 {
.subnav_tiny {
#content {
.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 {
transition-duration: 2s ease-in;
-webkit-transition-duration: 2s ease-in;
header {
#nav {
width: 100%; height: 40px; margin-left: 20px; padding-top: 10px; margin: auto; padding:
auto;
}
Página 306 de 310
.subnav {
.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{
.right_footer{
.footer_right li {
display: none;
h2 {
#content {
.subnav_tiny {
.portfolio {
.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;
transition-duration: 2s ease-in;
-webkit-transition-duration: 2s ease-in;
header {
#title {
#logos {
#horizontal li {
display: inline;
list-style-type: none;
footer {
width: 100%;
p{
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 {
.subnav {
.subnav .box {
float: none;
#content {
.subnav_tiny {
.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;