0% encontró este documento útil (0 votos)

0 vistas92 páginas

2 - CSS

Cargado por

edievale

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

0 vistas92 páginas

2 - CSS

Cargado por

edievale

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

CSS

CSS Introducción

Lo que usted debe saber ya

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

• HTML / XHTML

Si quieres estudiar estos temas en primer lugar, encontrar los tutoriales en nuestro página de Inicio.

¿Qué es CSS?

• CSS es sinónimo de C ascading S tyle S heets

• Los estilos definen la forma de mostrar los elementos HTML
• Estilos se añadieron a 4,0 HTML para resolver un problema
• Hojas de estilo externas puede ahorrar un montón de trabajo
• Hojas de estilo externas se almacenan en los archivos CSS

CSS demo

Un documento HTML se pueden visualizar con diferentes estilos: Vea cómo funciona

Estilos resuelto un gran problema

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

HTML fue pensado para definir el contenido de un documento, como:

<h1> Este es un encabezado </ h1>

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

Cuando las etiquetas gusta <font> y atributos de color se han añadido a la especificación HTML 3.2, comenzó una
pesadilla para los desarrolladores web. Desarrollo de sitios web de gran tamaño, donde las fuentes y la
información de color se agregaron a cada página, se convirtió en un proceso largo y costoso.

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

En HTML 4.0, todo el formato podría ser eliminado del documento HTML, y se almacena en un archivo CSS.

Todos los navegadores soportan CSS hoy.

CSS ahorra mucho trabajo!

CSS define cómo los elementos HTML se van a mostrar.

Los estilos se guardan normalmente en archivos CSS externos.. Hojas de estilo externas le permiten cambiar el
1

aspecto y el diseño de todas las páginas de un sitio Web, simplemente editando un solo archivo!
Página
CSS Sintaxis

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

El selector es normalmente el elemento HTML que desee estilo.

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

La propiedad es el atributo de estilo que desea 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, usted puede poner una declaración en cada línea, así:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
color:red;
text-align:center;
}
</style>
</head>

<body>
<p>Hello World!</p><p>This paragraph is styled with CSS.</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í:

/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
2

color:black;
Página

font-family:arial;
}
CSS Id y Clase
Los selectores id y class

Además de establecer un estilo para un elemento HTML, CSS le permite especificar sus propios selectores llamado
"id" y "clase".

El selector de id

El selector de id se utiliza para especificar un estilo para un elemento individual, único.

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

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

Ejemplo

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

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

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

El selector de clase

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

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

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

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">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, con todos los elementos p class = "center" será alineado al centro:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link] {
text-align:center;
}
</style>
</head>

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

No NO iniciar un nombre de clase con un número! Esto sólo es compatible con Internet Explorer.
4
Página
CSS Cómo ...
Cuando un navegador lee una hoja de estilo, se dará formato al documento de acuerdo con ella.

Tres formas de insertar CSS

Hay tres formas de insertar una hoja de estilo:

• Hoja de estilos externa

• Hoja de estilo interna
• Estilo en línea

Hoja de estilos externa

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

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/[Link]");}

No agregue un espacio entre el valor de la propiedad y de la unidad (como margin-left: 20 px). La forma
correcta es: margin-left: 20px

Hoja de estilo interna

Una hoja de estilo interna debe ser usado cuando un documento único que tiene un estilo ú[Link] definir estilos
internos en la sección de cabecera de una página HTML, utilizando la etiqueta <style>, así:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/[Link]");}
</style>
</head>
5
Página
Estilos en línea

Un estilo en línea pierden muchas de las ventajas de hojas de estilo por el contenido de la mezcla con la
presentación. Utilice este método con moderación!

Para utilizar estilos en línea se utiliza el atributo de estilo en la etiqueta correspondiente. El atributo de estilo
puede contener cualquier propiedad CSS. El ejemplo muestra cómo cambiar el color y el margen izquierdo de un
párrafo:

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

Múltiples hojas de estilo

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

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

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

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

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

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

color:red;
text-align:right;
font-size:20pt;

El color se hereda de la hoja de estilos externa y la alineación del texto y el tamaño de fuente se sustituye por la
hoja de estilo interna.

Múltiples estilos en cascada en Uno

Los estilos pueden ser especificados:

• dentro de un elemento HTML

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

Consejo: Incluso varias hojas de estilo externas se puede hacer referencia en un documento HTML.
6
Página
Orden en cascada

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

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

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

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

Nota: Si el enlace a la hoja de estilos externa se coloca después de la hoja de estilo interna en <head> HTML,
la hoja de estilos externa anulará la hoja de estilo interna!

7
Página
CSS Antecedentes

Propiedades de CSS de fondo se utilizan para definir los efectos de fondo de un elemento.

CSS propiedades utilizadas para efectos de fondo:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Color de fondo

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

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-color:#b0c4de;
}
</style>
</head>

<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a [Link] example.</p>
</body>
</html>

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

• un valor HEX - como "# ff0000"

• un valor RGB - como "rgb (255,0,0)"
• un nombre de color - como "rojo"
8
Página
En el ejemplo siguiente, el h1, p, y elementos div tienen diferentes colores de fondo:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1{
background-color:#6495ed;
}
p{
background-color:#e0ffff;
}
div{
background-color:#b0c4de;
}
</style>
</head>

<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>

Imagen de fondo

La propiedad background-image especifica una imagen para usar como fondo de un elemento. Por defecto, la
imagen se repite por lo que cubre todo el elemento. La imagen de fondo de una página se puede establecer la
siguiente manera:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-image:url('[Link]');}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>
</html>
9
Página
A continuación se muestra un ejemplo de una mala combinación de texto y la imagen de fondo. El texto es casi
ilegible:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-image:url('[Link]');}
</style>
</head>

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

Imagen de fondo - Repite horizontal o vertical

De manera predeterminada, la propiedad background-image repite una imagen tanto horizontal como
verticalmente.

Algunas de las imágenes se debe repetir sólo en horizontal o vertical, para que no parezca extraño, así:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-image:url('[Link]');
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>
</html>
10
Página
Si la imagen es repetida sólo horizontalmente (repeat-x), el fondo se vea mejor:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-image:url('[Link]');
background-repeat:repeat-x;
}
</style>
</head>

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

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

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

Ejemplo

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

<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but ... the reader!</p>
</body>
</html>
11
Página
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 perturbe el texto demasiado.

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and ... from the text.</p>
<p>In this example we have also added a ... will never disturb the text.</p>
</body>
</html>

Antecedentes - Abreviación de las propiedades

Como se puede ver en los ejemplos anteriores, hay muchas propiedades a tener en cuenta cuando se trata de
fondos. Para acortar el código, también es posible especificar todas las propiedades en una sola [Link] se
llama una propiedad resumida.

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
12

}
</style>
Página

</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown ... positioned away from the text.</p>
<p>In this example we have also ... image will not disturb the text.</p>
</body>
</html>

Cuando se utiliza la propiedad rápida el orden de los valores de la propiedad es:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

No importa si uno de los valores de la propiedad está ausente, siempre que los que están presentes son en este
orden.

Todas las Propiedades de fondo CSS

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

13
Página
CSS Text

Color del texto

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

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

• un valor HEX - como "# ff0000"

• un valor RGB - como "rgb (255,0,0)"
• un nombre de color - como "rojo"

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {color:red;}
h1 {color:#00ff00;}
[Link] {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice ... in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

Para W3C CSS compatible: Si define la propiedad de color, también debe definir la propiedad background-color.

14
Página
Alineación del texto

La propiedad text-align se utiliza para establecer la alineación horizontal del texto. El texto puede ser centrado o
alineado a la izquierda oa la derecha, o justificado.

Cuando text-align se ajusta a "justificar", cada línea se estira para que cada línea tiene la misma anchura y los
márgenes izquierdo y derecho son rectos (como en revistas y periódicos).

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {text-align:center;}
[Link] {text-align:right;}
[Link] {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 ... you've had.'</p>
<p><b>Note:</b> Resize the browser window ... the value "justify" works.</p>
</body>
</html>

Texto Decoración

La propiedad text-decoration se utiliza para establecer o quitar las decoraciones de texto. La propiedad text-
decoration se utiliza sobre todo para eliminar subraya de enlaces para propósitos de diseño:

Ejemplo

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

<body>
<p>Link to: <a href="[Link]
</body>
</html>
15
Página
También se puede utilizar para decorar texto:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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 ... Chrome, or Safari.</p>
</body>
</html>

Texto Transformación

La propiedad text-transform se utiliza para especificar las letras mayúsculas y minúsculas en un texto. Se puede
utilizar para convertir todo en letras mayúsculas o minúsculas, o mayúscula la primera letra de cada palabra.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link] {text-transform:uppercase;}
[Link] {text-transform:lowercase;}
[Link] {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>
16
Página
Texto Sangría

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>

Todas las propiedades del texto CSS

Propiedad Descripción
color Establece el color del texto
dirección Especifica la dirección del texto / escritura dirección
letter-spacing Aumenta o disminuye el espacio entre caracteres en un texto
line-height Ajusta la altura de la línea
text-align Especifica la alineación horizontal del texto
text-decoration Especifica la decoración añadida al texto
text-indent Especifica la sangría de la primera línea de un bloque de texto
text-shadow Especifica el efecto de sombra añadido al texto
text-transform Controla el capitalización de los texto
unicode-bidi
vertical-align Establece la alineación vertical de un elemento
espacio en blanco Especifica cómo un espacio en blanco dentro de un elemento se maneja
word-spacing Aumenta o disminuye el espacio entre las palabras de un texto
17
Página
CSS Fuente
CSS propiedades de fuente definir la familia de fuentes, la audacia, el tamaño y el estilo de un
texto.

Diferencia entre Serif y fuentes Sans-serif

En las pantallas de ordenador, sans-serif se consideran más fáciles de leer que las fuentes serif.

Familias de fuentes CSS

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

• genérico familia - un grupo de familias de fuentes con un aspecto similar (como "Serif" o "Monospace")
• Familia tipográfica - una familia de fuentes específicas (como "Times New Roman" o "Arial")

Familia genérica Familia de fuentes Descripción

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

Font Family

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

La propiedad font-family debería celebrar varios nombres de fuentes como un "retroceso" del sistema. Si el
navegador no es compatible con la primera fuente, se trata de la siguiente fuente.

Comience con la fuente que desee, y terminar con una familia genérica, para que el navegador elegir 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 es más que una palabra, debe estar entre comillas, como font-
family: "Times New Roman".

Más de una familia de la fuente se especifica en una lista separada por comas:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link]{font-family:"Times New Roman",Times,serif;}
[Link]{font-family:Arial,Helvetica,sans-serif;}
18

</style>
</head>
Página

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

Para las combinaciones de fuentes más comúnmente utilizadas, visita nuestra web Combinaciones de fuentes
seguras .

Font Style

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

Esta propiedad tiene tres valores:

• normal - El texto se muestra normalmente

• cursiva - El texto se muestra en cursiva
• oblicuo - El texto se "inclina" (oblicua es muy similar a la cursiva, pero apoyó menos)

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link] {font-style:normal;}
[Link] {font-style:italic;}
[Link] {font-style:oblique;}
</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>

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, usted no debe usar
19

ajustes de tamaño de la fuente para hacer parecer párrafos encabezados o títulos parecen párrafos.
Página

Utilice siempre las etiquetas HTML adecuadas, como <h1> - <h6> para los títulos y <p> de párrafos.
El valor de font-size puede ser un tamaño absoluto o relativo.

Tamaño absoluto:

• Establece el texto a un tamaño especificado

• No permite al usuario cambiar el tamaño de texto en todos los navegadores (malo por razones de
accesibilidad)
• El tamaño absoluto es útil cuando el tamaño físico de la salida se conoce

Tamaño relativo:

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

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

Si no se especifica un tamaño de fuente, el tamaño predeterminado para el texto normal, como párrafos, es
16px (16px = 1em).

Establecer Tamaño de fuente con píxeles

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

Ejemplo

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

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in px... and Safari to resize the text.</p>
<p><b>Note:</b> This example does not ... IE, prior version 9.</p>
</body>
</html>

El ejemplo anterior permite que Internet Explorer 9, Firefox, Chrome, Opera y Safari para cambiar el tamaño del
texto.

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

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

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

El tamaño de la unidad em es recomendado por el W3C.

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

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

Ejemplo

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

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size .. it should.</p>
</body>
</html>

En el ejemplo anterior, el tamaño del texto en em es el mismo que el ejemplo anterior en pí[Link] embargo,
con el tamaño de la EM, es posible ajustar el tamaño del texto en todos los navegadores.

Por desgracia, todavía hay un problema con las versiones anteriores de IE. El texto se hace más grande de lo que
debería cuando se hace más grande y más pequeño de lo que debería cuando hace más pequeño.
21
Página
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

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

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent ...resize the text!</p>
</body>
</html>

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

Todas las propiedades de fuente CSS

Propiedad Descripción
fuente Establece todas las propiedades de la fuente en una declaración
font-family Especifica la familia de fuentes para el texto
font-size Especifica el tamaño de fuente del texto
font-style Especifica el estilo de fuente para el texto
font-variant Especifica si el texto debe aparecer en una fuente small-caps
font-weight Especifica el peso de una fuente
22
Página
CSS Links
Los enlaces pueden ser de estilo de diferentes maneras.

Styling Links

Los enlaces pueden ser de estilo con cualquier propiedad CSS (por ejemplo, color, font-family, fondo, etc.)

Especial para los enlaces son que pueden ser de estilo de forma diferente dependiendo del estado en que están
adentro

Los cuatro estados enlaces son los siguientes:

• a: link - un enlace normal, no visitado

• a: visited - un enlace que el usuario ha visitado
• a: hover - un enlace cuando el usuario mouses sobre ella
• a: active - un enlace el momento en que se hace clic en

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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="[Link]" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>

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

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

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

Estilos comunes de enlace

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

Vamos a ir a través de algunas de las formas comunes a otros enlaces de estilo:

Página
Texto Decoración

La propiedad text-decoration se utiliza sobre todo para eliminar subraya de enlaces:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>

Color de fondo

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>

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

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

Lista

En HTML, hay dos tipos de listas:

• listas desordenadas - los elementos de la lista están marcados con balas

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

Con CSS, las listas pueden ser de estilo adicional, y las imágenes se puede utilizar como marcador elemento de la
lista.

Diferentes marcadores de elemento de lista

El tipo de marcador de elemento de lista se especifica con la propiedad list-style-type:

Ejemplo

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

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

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

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

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

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

<li>Coca Cola</li>
</ol>
Página
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

Algunos de los valores son para listas desordenadas, y algunos para listas ordenadas.

Una imagen como marcador de elemento de lista

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style-image:url('[Link]');
}
</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á la imagen de posición un
poco más alta que Firefox, Chrome y Safari.
26

Si desea que la imagen de marca que se coloca por igual en todos los navegadores, una solución crossbrowser se
Página

explica a continuación.
Solución Crossbrowser

El siguiente ejemplo muestra la imagen del marcador por igual en todos los navegadores:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li{
background-image:url([Link]);
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 explicó:

• Por ul:
o Ajuste el list-style-type a nadie para quitar el marcador de elemento de la lista
o Establezca el relleno y el margen para 0px (para la compatibilidad cross-browser)
• Para todos los li ul en:
o Establezca la URL de la imagen, y mostrar sólo una vez (no-repeat)
o Coloque la imagen donde desee (izquierda y abajo 0px 5px)
o Coloque el texto en la lista con padding-left
27
Página
Lista - propiedad abreviada

También es posible especificar todas las propiedades de lista en una, sola propiedad. Esto se llama una propiedad
resumida.

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {
list-style:square url("[Link]");
}
</style>
</head>

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

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

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

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

Todas las propiedades de la lista de CSS

Propiedad Descripción
list-style Establece todas las propiedades de una lista en una declaración
list-style-image Especifica una imagen como marcador de ítems de lista
list-style-position Especifica si los marcadores list-item debería aparecer en el interior de o fuera
de la flujo de contenido
list-style-type Especifica el tipo de marcador de ítems de lista
28
Página
CSS Tablas
El aspecto de una tabla HTML puede ser mejorado con CSS:

Empresa Contacto País

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

Bordes de tabla

Para especificar bordes de la tabla en CSS, utilice la propiedad border.

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
29
Página
Observe que la tabla del ejemplo anterior tiene bordes dobles. Esto se debe a que la tabla y los elementos th / td
tienen bordes separados.

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

Fronteras Collapse

La propiedad border-collapse establece si los bordes de la tabla se derrumbó en un solo borde o separados:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
30
Página
Cuadro Ancho y Alto

La anchura y altura de una tabla está definida por la anchura y la altura de propiedades. El ejemplo siguiente
establece el ancho de la tabla a 100%, y la altura de los elementos th a 50px:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
31
Página
Tabla Alineación del texto

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

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
32
Página
La propiedad vertical-align establece la alineación vertical, como arriba, abajo o en medio:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
33
Página
Cuadro Relleno

Para controlar el espacio entre el borde y el contenido de una tabla, utilice la propiedad de relleno en elementos th
y td:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
34
Página
Tabla de colores

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
35
Página
CSS Box Model

El modelo de caja CSS

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 diagramación.

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

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

La siguiente imagen ilustra el modelo de caja:

Explicación de las diferentes partes:

• Margen - Borra un área alrededor de la frontera. El margen no tiene un color de fondo, que es
completamente transparente
• Frontera - Un borde que va alrededor del relleno y contenido. El borde se ve afectado por el color de
fondo de la caja
• Relleno - Borra 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 el texto y las imágenes aparecen

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

Anchura y altura de un elemento

Importante: Al configurar el ancho y height de un elemento con CSS, que acaba de establecer la anchura y la
altura del área de contenido . Para calcular el tamaño total de un elemento, también debe agregar el relleno,
bordes y márgenes.

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

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

Vamos a hacer las matemáticas:

250px (anchura)
+ 20px (relleno izquierdo y derecho)
+ 10px (borde izquierdo y derecho)
+ 20px (margen izquierdo y derecho)
= 300px
36
Página
Suponga que sólo tenía 250 píxeles de espacio. Hagamos un elemento con un ancho total de 250px:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link]{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<div class="ex">The line above is 250px wide.<br />

The total width of this element is also 250px.</div>

<p><b>Important:</b> This example will not display correctly in IE8 and earlier
versions!<br />
However, we will solve that problem in the next example.</p>
</body>
</html>

La anchura total de un elemento debe calcularse así:

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

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

Altura total del elemento height = padding + top + relleno inferior + superior + frontera + borde inferior del
margen superior + inferior margen
37
Página
Navegadores problema de compatibilidad

El ejemplo anterior no se muestran correctamente en Internet Explorer 8 y versiones anteriores.

Versiones de IE8 y anteriores incluye el relleno y el borde de la anchura, si un DOCTYPE no se ha declarado .

Para solucionar este problema, basta con añadir un DOCTYPE de la página HTML:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link]{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<div class="ex">The line above is 250px wide.<br />

Now the total width of this element is also 250px.</div>

<p><b>Note:</b> In this example we have added a DOCTYPE declaration (above the

html element), so it displays correctly in all browsers.</p>
</body>
</html>

38
Página
Página
39
CSS Frontera

CSS Border Propiedades

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

Border Style

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

Ninguna de las propiedades de borde tendrá ningún efecto a menos que el border-stylepropiedad se establece!

border-style valores:

none: Define ninguna frontera

puntos: Define un borde de puntos

discontinua: Define un borde discontinuo

sólido: Define un borde sólido

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

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

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

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

inicio: define una frontera comienzo 3D. El efecto depende del valor de border-color

40
Página
Border Ancho

La propiedad border-width se usa para ajustar el ancho de la frontera.

El ancho se establece en píxeles, o mediante el uso de uno de los tres valores predefinidos: fino, medio o grueso.

Nota: El "border-width" propiedad no funciona si se utiliza solo. Utilice la opción "border-style" propiedad para
establecer las fronteras primero.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link] {
border-style:solid;
border-width:5px;
}

[Link] {
border-style:solid;
border-width:medium;
}

[Link] {
border-style:solid;
border-width:1px;
}
</style>
</head>

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

Límite Color

La propiedad border-color se utiliza para establecer el color de la frontera. El color se puede ajustar por:

• Nombre - indique el nombre del color, como "rojo"

• RGB - RGB especifica un valor, como "rgb (255,0,0)"
• Hex - indique un valor hexadecimal, como "# ff0000"
41

También puede configurar el color del borde de "transparente".

Página

Nota: El "border-color" propiedad no funciona si se utiliza solo. Utilice la opción "border-style" propiedad para
establecer las fronteras primero.
Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link] {
border-style:solid;
border-color:red;
}

[Link] {
border-style:solid;
border-color:#98bf21;
}
</style>
</head>

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

Border - partes individuales

En CSS es posible especificar límites diferentes para partes diferentes:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
42
Página

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
border-style:dotted solid;
}
</style>
</head>

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

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

• border-style: double sólida discontinua de trazos;

o borde superior está salpicado
o borde derecho es sólido
o borde inferior es el doble
o borde izquierdo es discontinua
• border-style: double sólidos puntos;
o borde superior está salpicado
o bordes derecho e izquierdo son sólidas
o borde inferior es el doble
• border-style: puntos sólidos;
o bordes superior e inferior están salpicadas
o bordes derecho e izquierdo son sólidas
• border-style: puntos;
o los cuatro bordes están salpicadas

La propiedad estilo de borde se utiliza en el ejemplo anterior. Sin embargo, también funciona con border-width y
borde de color.

Border - Abreviación de las propiedades

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

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
43
Página
Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
border:5px solid red;
}
</style>
</head>

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

Todas las propiedades de borde CSS

Propiedad Descripción
border Establece todas las propiedades de borde en una declaración
border-bottom Establece todas las propiedades del borde de fondo en una declaración
border-bottom-color Establece el color del borde inferior
border-bottom-style Establece el estilo del borde inferior
border-bottom-width Establece el ancho del borde inferior
border-color Establece el color de los cuatro bordes
border-left Establece todas las propiedades del borde izquierdo en una declaración
border-left-color Establece el color del borde izquierdo
border-left-style Establece el estilo del borde izquierdo
border-left-width Establece el ancho del borde izquierdo
border-right Establece todas las propiedades del borde derecho en una declaración
border-right-color Establece el color del borde derecho
border-right-style Establece el estilo del borde derecho
border-right-width Establece el ancho del borde derecho
border-style Establece el estilo de los cuatro bordes
border-top Establece todas las propiedades de borde superior en una declaración
border-top-color Establece el color del borde superior
border-top-style Establece el estilo del borde superior
border-top-width Establece el ancho del borde superior
border-width Establece el ancho de los cuatro bordes
44
Página
CSS Outlines
Un esquema es una línea que se dibuja en torno a los elementos (fuera de las fronteras) para que
el elemento "se salga".

Las propiedades del esquema especificar el estilo, el color y el ancho de un esquema.

Esquema CSS

Un esquema es una línea que se dibuja en torno a los elementos (fuera de las fronteras) para que el elemento "se
salga".

Sin embargo, la propiedad contorno es diferente de la propiedad frontera.

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

Todas las Propiedades del esquema CSS

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

Propiedad Descripción Valores CSS

outline Establece todas las propiedades de esquema en outline-color 2
una declaración contorno de estilo
contorno ancho de
heredar
outline-color Establece el color de un esquema color_name 2
hex_number
rgb_number
invertido
heredar
outline-style Establece el estilo de un esquema ninguno 2
de puntos
de trazos
sólidos
de doble
ranura
cresta
recuadro
principio
heredar
outline-width Establece el ancho de un esquema fino 2
a medio
espesor longitudheredar
45
Página
CSS Margen
Las propiedades de los márgenes CSS definen el espacio alrededor de los elementos.

Margen

El margen despeja un área alrededor de un elemento (fuera de la frontera). El margen no tiene un color de fondo,
y es completamente transparente.

El margen superior, derecho, inferior e izquierdo se pueden cambiar independientemente el uso de propiedades
separadas. Una propiedad margen taquigrafía también se puede utilizar, para cambiar todos los márgenes a la
vez.

Valores posibles

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

Margen - partes individuales

En CSS, es posible especificar diferentes márgenes por diversos lados:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
background-color:yellow;
}
[Link]{
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>
46
Página
Margen - Abreviación de las propiedades

Para acortar el código, es posible especificar todas las propiedades de margen en una [Link] se llama una
propiedad resumida. La propiedad abreviada para todas las propiedades de margen es "margen":

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
background-color:yellow;
}

[Link]{
margin:100px 50px;
}
</style>
</head>

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

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

• margen: 25px 50px 75px 100px;

o margen superior es de 25px
o margen derecho es 50px
o margen inferior es de 75px
o margen izquierdo es de 100px
• margen: 25px 50px 75px;
o margen superior es de 25px
o márgenes derecho e izquierdo son 50px
o margen inferior es de 75px
• margen: 50px 25px;
o márgenes superior e inferior son 25px
o márgenes derecho e izquierdo son 50px
• margen: 25px;
o los cuatro márgenes son 25px

Todas las propiedades de los márgenes CSS

Propiedad Descripción
margin Una propiedad abreviada para establecer las propiedades de los márgenes en
una declaración
47

margin-bottom Establece el margen inferior de un elemento

margin-left Establece el margen izquierdo de un elemento
margin-right Establece el margen derecho de un elemento
Página

margin-top Establece el margen superior de un elemento

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

Relleno

El relleno de borra 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 el uso de propiedades
separadas. Una propiedad de acolchado taquigrafía también se puede utilizar, para cambiar todos los rellenos a la
vez.

Valores posibles

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

Relleno - lados individuales

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
background-color:yellow;
}

[Link] {
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>
48
Página
Relleno - Abreviación de las propiedades

Para acortar el código, es posible especificar todas las propiedades de relleno en una [Link] se llama una
propiedad resumida. La propiedad abreviada para todas las propiedades de relleno es "relleno":

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
background-color:yellow;
}

[Link]{
padding:25px 50px;
}
</style>
</head>

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

La propiedad padding puede tener de uno a cuatro valores.

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

o acolchado superior es 25px
o relleno derecho es 50px
o acolchado inferior es 75px
o margen izquierdo es 100px
• padding: 25px 50px 75px;
o acolchado superior es 25px
o rellenos derecha e izquierda son 50px
o acolchado inferior es 75px
• padding: 25px 50px;
o acolchados superior e inferior son 25px
o rellenos derecha e izquierda son 50px
• padding: 25px;
o los cuatro rellenos son 25px

Todas las propiedades de relleno de CSS

Propiedad Descripción
padding Una propiedad abreviada para establecer las propiedades de relleno en una
declaración
padding-bottom Establece el margen inferior de un elemento
49

padding-left Establece el margen izquierdo de un elemento

padding-right Establece el margen derecho de un elemento
padding-top Define el relleno superior de un elemento
Página
CSS Agrupación y jerarquización Selectors
Selectores Agrupación

En las hojas de estilo a menudo existen elementos con el mismo estilo.

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

Para reducir al mínimo el código, puede selectores de grupo.

Separe cada selector con una coma.

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1,h2,p{
color:green;
}
</style>
</head>

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

50
Página
Selectores de anidación

Es posible aplicar un estilo para un selector dentro de un selector.

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
color:blue;
text-align:center;
}

.marked{
background-color:red;
}

.marked p{
color:white;
}
</style>
</head>

<body>
<p>This is a blue, center-aligned paragraph.</p>

<div class="marked">
<p>This p element should not be blue.</p>
</div>

<p>p elements inside a "marked" classed element keeps the alignment style, but
has a different text color.</p>
</body>
</html>

51
Página
CSS Dimension
Las propiedades de la dimensión de CSS permite controlar la altura y la anchura de un elemento.

Todas las propiedades de dimensiones CSS

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

Propiedad Descripción Valores CSS

height Establece el alto de un elemento auto 1
longitud
%
heredar
max-height Establece la altura máxima de un elemento ninguno longitud% heredar 2

max-width Define la anchura máxima de un elemento ninguno longitud% heredar 2

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

%
heredar
min-width Establece el ancho mínimo de un elemento longitud 2
%
heredar
width Establece el ancho de un elemento auto 1
longitud
%
heredar

52
Página
CSS Display y Visibilidad
La propiedad display especifica si / como un elemento en la pantalla, y la propiedad de visibilidad
especifica si un elemento debe ser visible u oculto.

Recuadro 1

Recuadro 2

Recuadro 3

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

Cómo ocultar un elemento se puede hacer mediante el establecimiento de la propiedad display a "ninguno" o la
propiedad de visibilidad de "oculto". Sin embargo, note que estos dos métodos producen resultados diferentes:

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link] {visibility:hidden;}
</style>
</head>

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

display: none esconde un elemento, y no ocupa espacio. El elemento se oculta, y la página se mostrará como si el
elemento no está ahí:
Página
Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link] {display:none;}
</style>
</head>

<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading does not take up space.</p>
</body>

</html>

CSS Display - Block y elementos en línea

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

Ejemplos de elementos de bloque:

• <h1>
• <p>
• <div>

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

Ejemplos de elementos en línea:

• <span>
• <a>

Cambiar la forma de un elemento se muestra

Cambio de un elemento en línea a un elemento de bloque, o viceversa, puede ser útil para hacer la página se vea
de una manera específica, y todavía siguen los estándares web.

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

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
54

li{display:inline;}
</style>
Página

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

<ul>
<li><a href="/html/[Link]" target="_blank">HTML</a></li>
<li><a href="/css/[Link]" target="_blank">CSS</a></li>
<li><a href="/js/[Link]" target="_blank">JavaScript</a></li>
<li><a href="/xml/[Link]" target="_blank">XML</a></li>
</ul>

</body>
</html>

El siguiente ejemplo muestra abarcan elementos como elementos de bloque:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span
{
display:block;
}
</style>
</head>
<body>

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

</body>
</html>

Nota: No cambiar el tipo de visualización de un elemento cambia sólo cómo el elemento en la pantalla, 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.
55
Página
CSS Posicionamiento

El posicionamiento puede ser difícil a veces! Decidir qué elemento va a mostrar en frente. Los elementos pueden
superponerse.

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 la parte superior, inferior, izquierda y propiedades adecuadas. Sin
embargo, estas propiedades no funcionará a menos que la propiedad position se establece en primer
lugar. También funcionan de forma diferente dependiendo del método de posicionamiento.

Hay cuatro métodos de posicionamiento diferentes.

Posicionamiento estático

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

Estáticas elementos posicionados no se ven afectados por la parte superior, inferior, izquierdo y propiedades
adecuadas.

Posicionamiento fijo

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

No se moverá incluso si la ventana se desplaza:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.pos_fixed{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>

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

<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>

<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
56

</body>
</html>
Página
Nota: IE7 e IE8 compatible con el valor fijo sólo si se especifica un DOCTYPE!.

“Some more text” permanece fijo mientras movemos el resto del

texto con el scrollbar o la rueda del ratón.

Fijos los elementos posicionados se elimina del flujo normal. El

documento y otros elementos se comportan como el elemento fijo
colocado no existe.

Fijos los elementos posicionados pueden superponerse otros

elementos.

Posicionamiento relativo

Un elemento posicionado relativo está situado con relación a su posición normal.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2.pos_left{
position:relative;
left:-20px;
}

h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>

<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">
This heading is moved left according to its normal position</h2>
<h2 class="pos_right">
This heading is moved right according to its normal position</h2>

<p>Relative positioning moves an element RELATIVE to its original position.</p>

<p>The style "left:-20px" subtracts 20 pixels from the element's original left
position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left
position.</p>
</body>
</html>
57
Página
El contenido de elementos en posición relativa puede ser movido y se superponen otros elementos, pero el espacio
reservado para el elemento se conserva aún en el flujo normal.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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 ... in the normal flow.</p>
</body>

</html>

Elementos en posición relativa a menudo se utilizan como bloques de contenedores para los elementos con
posición absoluta.

Posicionamiento absoluto

Un elemento posición absoluta está situado con relación al elemento padre primero que tiene una posición que no
sea estática. Si no se encuentra dicho elemento, el bloque de contención es <html>:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>

<body>
<h2>This is a heading with an absolute position</h2>
58

<p>With absolute ... from the top of the page.</p>

</body>
Página

</html>
Elementos con posición absoluta se eliminan del flujo normal. El documento y otros elementos se comportan como
el elemento con posición absoluta no existe.

Elementos con posición absoluta se pueden superponer otros elementos.

Elementos superpuestos

Cuando los elementos están posicionados fuera del flujo normal, pueden superponerse otros elementos.

La propiedad z-index especifica el orden de apilamiento de un elemento (elemento que debe ser colocado en
frente de o detrás de los otros).

Un elemento puede tener una orden de apilamiento positivo o negativo:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="[Link]" 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 la pila siempre está en frente de un elemento con una orden de pila baja.

Nota: Si dos elementos posicionados se superponen, sin un z-index especifica, el último elemento posicionado en
el código HTML se mostrará en la parte superior.
59
Página
Todas las propiedades de posición CSS

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

Propiedad Descripción Valores CSS

bottom Define el borde del margen inferior de auto longitud % heredar 2
una caja posicionada

clip Clips de un elemento con posición forma 2

absoluta automática
heredar
cursor Especifica el tipo de cursor que se url 2
mostrará auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
left Establece el margen izquierdo de una auto longitud % heredar 2
caja posicionada

overflow Establece lo que sucede si se desborda auto 2

contenido de cuadros de un elemento oculto
desplazamiento
visible
heredar
position Especifica el tipo de posicionamiento para absoluto 2
un elemento fijo
con relación
estática
heredar
right Establece el borde del margen derecho de auto longitud % heredar 2
una caja posicionada

top Define el borde del margen superior de auto longitud % heredar 2

una caja posicionada

z-index Establece el orden de apilamiento de un número 2

elemento de automóviles
heredar
60
Página
CSS Float
¿Qué es Float CSS?

Con flotador CSS, un elemento puede ser empujado hacia la izquierda o hacia la derecha, permitiendo que otros
elementos para envolver alrededor de ella. Float se utiliza a menudo para las imágenes, pero también es útil
cuando se trabaja con diseños.

¿Qué elementos de flotación

Los elementos están flotando en horizontal, esto significa que un elemento sólo se puede hacer flotar hacia la
izquierda o la derecha, no hacia arriba o hacia abajo.

Un elemento flotante se moverá hacia la izquierda o hacia la derecha como pueda. Normalmente esto significa que
todo el camino a la izquierda o derecha del elemento contenedor.

Los elementos después de que el elemento flotante fluirá alrededor del mismo. Los elementos antes del elemento
flotante no se verá afectado.

Si una imagen es flotado a la derecha, un texto siguiente fluye alrededor de ella, a la izquierda:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img {
float:right;
}
</style>
</head>

<body>
<p>In the paragraph below, we have added an image with style
<b>float:right</b>
. The result is that the image will float to the right in the paragraph.</p>

<p>
<img src="[Link]" 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.
...
</p>
</body>
</html>
61
Página
Elementos flotantes lado de la otra

Si coloca varios elementos flotantes después de la otra, que flotará lado de la otra si hay espacio.

Aquí hemos hecho una galería de imágenes utilizando la propiedad float:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.thumbnail {
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see ... the images does not have enough room.</p>

<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">

Desactivación Float - Uso Clear

Elementos después de que el elemento flotante fluirá alrededor del mismo. Para evitar esto, utilice la propiedad
claros.

La propiedad clear especifica los lados de un elemento flotante demás elementos no están permitidos.
62
Página
Agregar una línea de texto en la galería de imágenes, utilizando la propiedad claros:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.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 ... 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>

Todas las propiedades CSS Float

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

Propiedad Descripción Valores CSS

clear Especifica los lados de un elemento donde otros izquierda 1
elementos flotantes no están permitidos derecha
ambos
ninguno
heredar
63

float Especifica si una caja debe flotar izquierda 1

derecha
Página

no
heredar
CSS Horizontal Alinear
En CSS, varias propiedades se utilizan para alinear elementos horizontalmente.

Alineación de elementos de bloque

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

Ejemplos de elementos de bloque:

• <h1>
• <p>
• <div>

Para alinear texto, véase el texto CSS capítulo.

En este capítulo le mostraremos cómo alinear horizontalmente los elementos de bloque para fines de diseño.

Centro de Alineación Utilizar la propiedad margen

Los elementos de bloque se pueden alinear ajustando los márgenes izquierdo y derecho de "auto".

Nota: El uso margin: auto no funciona en Internet Explorer 8 y versiones anteriores, a menos que se declare
un DOCTYPE!.

Ajuste de los márgenes izquierdo y derecho de auto especifica que se debe dividir el margen disponible por
igual. El resultado es un elemento de centrado:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.center{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="center">
<p>In my younger and more ... ever since.</p>
<p>'Whenever you feel like criticizing anyone,'...that you've had.'</p>
</div>
<p><b>Note: </b>Using margin:auto will not work in IE8... declared.</p>
</body>
</html>
64
Página
Consejo: Alinear no tiene efecto si el ancho es de 100%.

Nota: En IE5 hay un error de manipulación margen para elementos de bloque. Para que el ejemplo anterior
trabajo en IE5, añadir algo de código adicional. Inténtelo usted mismo

Izquierda y Derecha Alinear Utilizar la propiedad posición

Un método para alinear elementos es utilizar el posicionamiento absoluto:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.right{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="right">
<p>In my younger and more ... my mind ever since.</p>
<p>'Whenever you feel like ... had the advantages that you've had.'</p>
</div>
</body>
</html>

Nota: los elementos posicionados absolutos se eliminan del flujo normal, y se pueden solapar elementos.

Cuestiones de Compatibilidad crossbrowser

Al alinear los elementos de este tipo, siempre es una buena idea para predefinir margen y el relleno para el
elemento <body>. Esto es para evitar diferencias visuales en diferentes navegadores.

Hay un problema con IE8 y anteriores, cuando se utiliza la propiedad position. Si un elemento contenedor (en
nuestro caso <div class="container">) tiene una anchura especificada, y la declaración! DOCTYPE falta, versiones
de IE8 y anteriores se añadirá un margen 17px a la [Link] parece ser el espacio reservado para una barra
de desplazamiento. Coloque siempre la declaración DOCTYPE al utilizar la propiedad position:
65
Página
Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.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>

Izquierda y Derecha Alinear Utilizar la propiedad float

Un método para alinear elementos es utilizar la propiedad float:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
66

}
</style>
Página

</head>

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

Cuestiones de Compatibilidad crossbrowser

Al alinear los elementos de este tipo, siempre es una buena idea para predefinir margen y el relleno para el
elemento <body>. Esto es para evitar diferencias visuales en diferentes navegadores.

Hay un problema con IE8 y cuando antes mediante la propiedad float. Si la declaración! DOCTYPE falta, IE8
versiones anteriores y se añade un margen de 17px en el lado derecho. Este parece ser el espacio reservado para
una barra de desplazamiento. Coloque siempre la declaración DOCTYPE al utilizar la propiedad float:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}

.right{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="right">
<p><b>Note: </b>When aligning using ... strange results in IE browsers.</p>
</div>
</body>
</html>
67
Página
CSS pseudo-clases
CSS pseudo-clases se utilizan para añadir efectos especiales a algunos selectores.

Sintaxis

La sintaxis de pseudo-clases:

selector:pseudo-class {property:value;}

Clases CSS también se puede utilizar con pseudo-clases:

[Link]:pseudo-class {property:value;}

Anchor Las pseudo-clases

Los enlaces pueden aparecer de forma diferente en un navegador CSS-apoyo:

Ejemplo

Nota: a: hover debe ir después a: link y: visited en la definición CSS con el fin de ser eficaces!

Nota: a: active debe venir después de un: hover en la definición CSS con el fin de ser eficaces!

Nota: Pseudo-clase nombres no distinguen entre mayúsculas y minúsculas.

68
Página
Las pseudo-clases y clases CSS

Las pseudo-clases pueden ser combinados con clases CSS:

[Link]:visited {color:#FF0000;}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

Si el enlace en el ejemplo anterior se ha visitado, se muestran en rojo.

CSS - The: first-child pseudo-clase

El: first-child pseudo-clase coincide con un elemento determinado, que es el primer hijo de otro elemento.

Nota: Para: En primer hijo a trabajar en IE8 y anteriores, un <DOCTYPE!> deben ser declarados.

Haga coincidir el elemento <p> primera

En el ejemplo siguiente, el selector equivale a cualquier elemento <p> que es el primer hijo de cualquier
elemento:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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 ... declared.</p>
</body>
</html>

Haga coincidir el elemento <i> por primera vez en todos los elementos <p>

En el ejemplo siguiente, el selector coincide con el elemento <i> primero en todos los elementos <p>:

Ejemplo

<!DOCTYPE html>
69

<html>
<head>
Página

<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>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be
declared.</p>
</body>
</html>

Coincidir todos los elementos <i> en todos los elementos <p> primer hijo

En el ejemplo siguiente, el selector equivale a todos los elementos <i> en <p> elementos que son el primer hijo
de otro elemento:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>

El: lang pseudo-clase permite definir reglas especiales para diferentes idiomas.

Nota: IE8 soporta el: lang pseudo-clase sólo si <DOCTYPE!> se especifica.

En el siguiente ejemplo, el: lang clase define las comillas para los elementos de Q con lang = "no":

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~";
}
</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>

Todas las pseudo-clases CSS / elementos

Selector Ejemplo Ejemplo de descripción
:link a:link Selecciona todos los enlaces no visitados
:visited a:visited Selecciona todos los enlaces visitados
:active a:active Selecciona el enlace activo
:hover a:hover Selecciona enlaces ratón sobre
:focus input:focus Selecciona el elemento que tiene el foco de entrada
:first-letter p:first-letter Selecciona la primera letra de cada elemento <p>
:first-line p:first-line Selecciona la primera línea de cada elemento <p>
:first-child p:first-child Selecciona cada <p> elementos que es el primer hijo de su
padre
:before p:before Insertar contenido antes de cada elemento <p>
:after p:after Insertar contenido después de cada elemento <p>
:lang(language) p:lang(it) Selecciona todos los elementos <p> con un valor de atributo
lang comenzando con "eso"
71
Página
CSS pseudo-elementos
CSS pseudo-elementos se utilizan para añadir efectos especiales a algunos selectores.

Sintaxis

La sintaxis de los pseudo-elementos:

selector:pseudo-element {property:value;}

Clases CSS también se puede utilizar con los pseudo-elementos:

[Link]:pseudo-element {property:value;}

: First-line Pseudo-elementos

La "primera línea" pseudo-elemento se utiliza para agregar un estilo especial a la primera línea de un texto.

En el siguiente ejemplo el navegador formatos de la primera línea de texto en un elemento de AP de acuerdo con
el estilo de la "primera línea" pseudo-elemento (donde el navegador rompe la línea, depende del tamaño de la
ventana del navegador):

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p:first-line {
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>You can use the :first-line pseudo-element ... line of a text.</p>
</body>
</html>

Nota: La "primera línea" pseudo-elemento sólo se puede utilizar con los elementos a nivel de bloque.

Nota: Las siguientes propiedades se aplican a la "primera línea" pseudo-elemento:

• propiedades de la fuente
• propiedades de color
• propiedades de fondo
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
72

• text-transform
• line-height
Página

• claro
: First-letter pseudo-elemento

La "primera carta" pseudo-elemento se utiliza para agregar un estilo especial a la primera letra de un texto:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>

<body>
<p>You can use the :first-letter pseudo-element to add a special effect to the first
character of a text!</p>
</body>
</html>

Nota: La "primera carta" pseudo-elemento sólo se puede utilizar con los elementos a nivel de bloque.

Nota: Las siguientes propiedades se aplican a la "primera carta" pseudo-elemento:

• propiedades de la fuente
• propiedades de color
• propiedades de fondo
• propiedades de los márgenes
• propiedades de relleno
• propiedades de borde
• text-decoration
• vertical-align (sólo si "float" es "ninguno")
• text-transform
• line-height
• flotar
• claro

Los pseudo-elementos y clases CSS

Los pseudo-elementos se pueden combinar con clases CSS:

[Link]:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

El ejemplo anterior muestra la primera letra de todos los párrafos con class = "artículo", en rojo.
73
Página
Múltiples pseudo-elementos

Varios pseudo-elementos también se pueden combinar. En el siguiente ejemplo, la primera letra de un párrafo
será de color rojo, en un tamaño de letra extra grande. El resto de la primera línea será de color azul.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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 of a text!</p>
</body>
</html>

CSS - The: antes de pseudo-elemento

El ": antes de" pseudo-elemento se puede utilizar para insertar un cierto contenido antes de que el contenido de
un elemento. El ejemplo siguiente inserta una imagen antes de cada elemento h1:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1:before {content:url([Link]);}
</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 ... is specified.</p>
</body>
</html>
74
Página
CSS - The: después de pseudo-elemento

El ": después de" pseudo-elemento se puede utilizar para insertar un cierto contenido después de que el contenido
de un elemento.

El ejemplo siguiente inserta una imagen después de cada elemento h1:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1:after {content:url([Link]);}
</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>

Todas las pseudo-clases CSS / elementos

Selector Ejemplo Ejemplo de descripción

:link a:link Selecciona todos los enlaces no visitados
:visited a:visited Selecciona todos los enlaces visitados
:active a:active Selecciona el enlace activo
:hover a:hover Selecciona enlaces ratón sobre
:focus input:focus Selecciona el elemento que tiene el foco de entrada
:first-letter p:first-letter Selecciona la primera letra de cada elemento <p>
:first-line p:first-line Selecciona la primera línea de cada elemento <p>
:first-child p:first-child Selecciona cada <p> elementos que es el primer hijo de su
padre
:before p:before Insertar contenido antes de cada elemento <p>
:after p:after Insertar contenido después de cada elemento <p>
:lang(language) p:lang(it) Selecciona todos los elementos <p> con un valor de atributo
lang comenzando con "eso"
75
Página
CSS Navigation Bar

Barras de navegación

Tener fácil de utilizar la navegación es importante para cualquier sitio web. Con CSS se puede transformar
aburridos menús HTML en barras de navegación guapos.

Navigation Bar = Lista de Enlaces

Una barra de navegación necesita HTML estándar como base. En nuestro ejemplo vamos a construir la barra de
navegación de una lista HTML estándar.

Ejemplo

<!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 ... URLs.</p>
</body>
</html>

Ejemplo

<!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>
76
Página
Ejemplo explicó:

• list-style-type: none - Elimina las balas. Una barra de navegación no necesita marcadores de lista
• Ajuste de márgenes y el relleno a 0 para eliminar la configuración del navegador por defecto

El código en el ejemplo anterior es el código estándar que se utiliza en las dos barras de navegación vertical y
horizontal.

Vertical barra de navegación

Para crear una barra de navegación vertical, sólo tenemos que el estilo de los elementos <a>, además del código
anterior:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
77
Página
Ejemplo explicó:

• display: block - Visualización de los enlaces como elementos de bloque hace que el área entera vínculo
clickable (no sólo el texto), y que nos permite especificar la anchura
• Ancho: 60px - Los elementos de bloque ocupar todo el ancho disponible de forma
predeterminada. Queremos especificar un ancho de 60 píxeles

Sugerencia: También echa un vistazo a nuestro estilo completamente ejemplo una barra vertical de navegación .

Nota: Especifique siempre el ancho de los elementos <a> en una barra de navegación vertical. Si se omite el
ancho, IE6 puede producir resultados inesperados.

Horizontal Barra de Navegación

Hay dos formas de crear una barra de navegación horizontal. El uso en línea o flotante elementos de la lista.
Ambos métodos funcionan muy bien, pero si quieres que los enlaces sean del mismo tamaño, usted tiene que
utilizar el método de flotación.

Artículos Inline Lista

Una forma de crear una barra de navegación horizontal es especificar los elementos <li> como en línea, además
de la "norma" el código de seguridad:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
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>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

Ejemplo explicó:
78

• display: inline; - De forma predeterminada, los elementos <li> son elementos de bloque. En este sentido,
eliminar los saltos de línea antes y después de cada elemento de la lista, para mostrar en una sola línea
Página

Sugerencia: También echa un vistazo a nuestro estilo completamente ejemplo barra de navegación horizontal .
Elementos flotantes Lista

En el ejemplo anterior los enlaces tienen anchuras diferentes.

Para todos los vínculos tener un ancho igual, flotan los elementos <li> y especificar el ancho de los elementos
<a>:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li{
float:left;
}

a{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p><b>Note:</b> If a !DOCTYPE is not specified, ... unexpected results.</p>

<p>A background color is added to the links to ... not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ... outside of the list.</p>
</body>
</html>

Ejemplo explicó:

• float: left - el uso del flotador para obtener los elementos de bloque se deslice al lado del otro
• display: block - Visualización de los enlaces como elementos de bloque hace que el área entera vínculo
clickable (no sólo el texto), y que nos permite especificar la anchura
79

• anchura: 60px - Dado que los elementos de bloque tomar hasta el ancho completo disponible, no pueden
flotar junto a la otra. Se especifica el ancho de los enlaces a 60px
Página

Sugerencia: También echa un vistazo a nuestro estilo completamente ejemplo barra de navegación horizontal .
CSS Galería de imágenes
CSS se puede utilizar para crear una galería de imágenes.

Añada una Añada una Añada una Añada una

descripción de la descripción de la descripción de la descripción de la
imagen aquí imagen aquí imagen aquí imagen aquí

Galería de imágenes

La galería de imágenes siguiente se crea con CSS:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link]{
margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}

[Link] img{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}

<div class="desc">Add a description of the image here</div>

</div>
80

<div class="img">
<a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg"
Página

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="desc">Add a description of the image here</div>

</div>
</body>
</html>

CSS Image Opacidad / Transparencia

Creación de imágenes transparentes con CSS es fácil.

Nota: La propiedad de opacidad CSS es una parte de la recomendación W3C CSS 3.

Ejemplo 1 - Creación de una imagen transparente

La propiedad CSS3 de transparencia es la opacidad .

Primero le mostraremos cómo crear una imagen transparente con CSS.

Imagen normal: La misma imagen con transparencia:

Mira el siguiente CSS:

img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9, Firefox, Chrome, Opera, Safari y utilizar la propiedad opacidad a la transparencia. La propiedad de opacidad
puede tomar un valor comprendido entre 0,0 - 1.0. Un valor más bajo hace que el elemento más transparente.
81

IE8 y anteriores usan filtro: alfa (opacidad = x) . La x puede tomar un valor entre 0 - 100. Un valor más bajo
hace que el elemento más transparente.
Página
Ejemplo 2 - Transparencia de imagen - Efecto Hover

Pase el ratón sobre las imágenes:

El CSS es el siguiente:

img{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

El primer bloque de CSS es similar al código en el Ejemplo 1. Además, hemos añadido lo que debería ocurrir
cuando un usuario coloque el cursor sobre una de las imágenes. En este caso se desea que la imagen no sea
transparente cuando el usuario coloque el cursor sobre ella.

El CSS para esto es: opacidad = 1 . IE8 y anteriores: filtro: alfa (opacidad = 100) . Cuando el puntero del
ratón se mueve fuera de la imagen, la imagen será transparente de nuevo.

Ejemplo 3 - Texto en la casilla Transparente

Este es un texto que se coloca en la caja transparente. Este es un texto que se coloca en la
caja transparente. Este es un texto que se coloca en la caja transparente. Este es un texto
que se coloca en la caja transparente. Este es un texto que se coloca en la caja
transparente.

El código fuente es el siguiente:

<html>
<head>
<style type="text/css">
[Link] {
width:500px;
height:250px;
background:url([Link]) repeat;
border:2px solid black;
}

[Link] {
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
82

border:1px solid black;

opacity:0.6;
Página

filter:alpha(opacity=60); /* For IE8 and earlier */

}
[Link] p {
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>

<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>

En primer lugar, se crea un elemento div (class = "background") con una altura fija y anchura, una imagen de
fondo y un borde. Luego creamos un div más pequeño (class = "transbox") dentro del elemento div en primer
lugar. El "transbox" div tiene un ancho fijo, un color de fondo, y una frontera - y es transparente. En el interior del
div transparente, añadimos un poco de texto dentro del elemento PA.

CSS Sprites Imagen

Sprites de imagen

Un sprite de imagen es una colección de imágenes puestas en una sola imagen.

Una página web con muchas imágenes puede tardar mucho tiempo para cargar y genera múltiples peticiones del
servidor.

Uso de sprites imagen se reducirá el número de solicitudes de servidor y ahorrar ancho de banda.

Sprites Imagen - Ejemplo simple

En lugar de utilizar tres imágenes diferentes, utilizamos esta sola imagen ("img_navsprites.gif"):

Con CSS, podemos mostrar sólo la parte de la imagen que necesitamos.

En el ejemplo siguiente, el CSS especifica qué parte de la "img_navsprites.gif" imagen para mostrar:
83
Página
Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[Link]{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

[Link]{
width:43px;
height:44px;
background:url(img_navsprites.gif) -91px 0;
}
</style>
</head>

Ejemplo explicó:

• <img class="home" src="img_trans.gif" /> - Sólo define una pequeña imagen transparente porque el
atributo src no puede estar vacío. La imagen que aparecerá será la imagen de fondo se especifica en CSS
• Ancho: 46px; altura: 44px; - Define la parte de la imagen que desea utilizar
• background: url (img_navsprites.gif) 0 0, - Define la imagen de fondo y su posición (izquierda 0px, top
0px)

Esta es la forma más fácil de usar sprites imagen, ahora queremos ampliar mediante el uso de enlaces y se
ciernen efectos.

84
Página
Sprites de imagen - Crear una lista de navegación

Queremos utilizar la imagen de sprite ("img_navsprites.gif") para crear una lista de navegación.

Vamos a utilizar una lista de HTML, ya que puede ser un enlace y también es compatible con una imagen de
fondo:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#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>

Ejemplo explicó:

• # Navlist {position: relative;} - posición se ajusta en relación a permitir el posicionamiento absoluto en su

interior
• # Navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margen y el relleno se
establece en 0, list-style se retira, y todos los elementos de la lista están posicionados absoluta
• # Navlist li, # navlist un {height: 44px; display: block;} - la altura de todas las imágenes son 44px

Ahora empieza a la posición y el estilo para cada parte específica:

• # Home {left: 0px; anchura: 46px;} - Posicionado todo el camino a la izquierda, y la anchura de la
imagen es 46px
• # Home {background: url (img_navsprites.gif) 0 0;} - Define la imagen de fondo y su posición (izquierda
0px, top 0px)
• # Prev {left: 63px; anchura: 43px;} - Posicionado 63px a la derecha (# casa 46px ancho + algo más de
espacio entre ítems) y el ancho es de 43px.
• # Prev {background: url ('img_navsprites.gif')-47px 0;} - Define la imagen de fondo 47px a la derecha (#
85

casa 46px ancho + divisor de línea de 1 píxel)

• # Próximo {left: 129px; anchura: 43px;} - 129px Situado a la derecha (inicio de la # anterior es 63px +
Página

# prev ancho 43px + extra espacio), y el ancho es de 43px.

• # Próximo {background: url ('img_navsprites.gif') no-repeat-91px 0;} - Define la imagen de fondo 91px a
la derecha (# casa 46px ancho + divisor de línea 1px + # prev ancho 43px + divisor de línea de 1 píxel)
Sprites de imagen - Efecto Hover

Ahora queremos añadir un efecto hover en nuestra lista de navegación.

Nuestra nueva imagen ("img_navsprites_hover.gif") contiene tres imágenes de navegación y las imágenes de tres
a utilizar para efectos hover:

Como se trata de una sola imagen, y no seis archivos separados, no habrá ningún retardo en la carga cuando
un usuario pasa sobre la imagen.

Sólo añadir tres líneas de código para agregar el efecto hover:

Ejemplo

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

Ejemplo explicó:

•
86

Dado que el elemento de la lista contiene un enlace, podemos usar el: hover pseudo-clase
• # La casa de un: hover {background: url transparente (img_navsprites_hover.gif) 0-45px;} - Para las tres
imágenes libración se especifica la posición del fondo mismo, sólo que más abajo 45px
Página
CSS Tipos de Medios

Tipos de papel le permiten especificar cómo los documentos se presentarán en diferentes

medios. El documento se puede mostrar de forma diferente en la pantalla, en el papel, con un
navegador aural, etc

Tipos de Medios

Algunas propiedades CSS sólo están diseñados para un medio de comunicación determinados. Por ejemplo, el
"voice-family" propiedad está diseñada para aplicaciones de usuario auditivas. Algunas otras propiedades se
pueden utilizar para diferentes tipos de medios. Por ejemplo, el "tamaño de fuente" propiedad se puede utilizar
tanto para la pantalla y los medios impresos, pero quizás con diferentes valores. Un documento que por lo general
tiene un mayor tamaño de letra en una pantalla que en papel, y sans-serif son más fáciles 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 medios de comunicación diferentes en la misma hoja
de estilo.

El estilo en el ejemplo a continuación le indica al navegador que muestre un tipo de letra Verdana 14 píxeles en la
pantalla. Pero si la página se imprime, será en un tipo de letra Times 10 [Link] que el font-weight se
establece en negrita, tanto en pantalla como en papel:

<html>
<head>
<style>
@media screen {
[Link] {font-family:verdana,sans-serif;font-size:14px;}
}

@media print {
[Link] {font-family:times,serif;font-size:10px;}
}

@media screen,print {
[Link] {font-weight:bold;}
}
</style>
</head>

Véalo usted mismo! Si está usando Mozilla / Firefox o IE5 + e imprimir esta página, usted verá que el párrafo
bajo "Tipos de soportes" en la pantalla de otra fuente, y tienen un tamaño de letra más pequeño que el resto del
texto.
87
Página
Diferentes tipos de medios

Nota: Los nombres de los tipos de medios no distinguen entre mayúsculas y minúsculas.

Tipo de soporte Descripción

todos Se utiliza para todos los dispositivos de tipo de medios de comunicación
auditivo Se utiliza para voz y sintetizadores de sonido
braille Se utiliza para dispositivos táctiles en Braille
relieve Se utiliza para impresoras braille paginados
handheld Se utiliza para pequeños dispositivos de mano o
imprimir Se utiliza para impresoras
proyección Usado para presentaciones como diapositivas proyectadas,
pantalla 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

erent Media Types

Note: The media type names are not case-sensitive.

Media Type Description

all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices

88
Página
CSS atributo selectores
Estilo elementos HTML con atributos específicos

Es posible estilo elementos HTML con atributos específicos, no sólo de clase e id.

Características del Selector

En el ejemplo de abajo estilos todos los elementos con un atributo title:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title]{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="W3Schools" href="[Link]
<hr />
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>

89
Página
Atributo y Valor Selector

En el ejemplo de abajo estilos todos los elementos con W3Schools title = "":

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[title=W3Schools]{
border:5px solid green;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<img title="W3Schools" src="w3schools_logo.gif" width="270" height="50" /><br />
<a title="W3Schools" href="[Link] <hr />
<h2>Will not apply to:</h2>
<p title="greeting">Hi!</p>
<a class="W3Schools" href="[Link]
</body>
</html>

Selector de atributo y valor - Varios Valores

En el ejemplo de abajo estilos todos los elementos con un atributo de título que contiene un valor
especificado. Esto funciona incluso si el atributo tiene valores separados por espacios:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[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>
90
Página
En el ejemplo de abajo estilos todos los elementos con un atributo lang que contiene un valor especificado. Esto
funciona incluso si el atributo tiene un guión (-) valores separados:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[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>

Formas de peluquería

Los selectores de atributos son particularmente útiles para labrar formas sin clase o ID:

Ejemplo

<!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;
91

display:block;
}
Página

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

Usted ha aprendido CSS, ¿y ahora qué?

CSS Resumen

Este tutorial te ha enseñado cómo crear hojas de estilo para controlar el estilo y el diseño de sitios web múltiples a
la vez.

Ha aprendido a utilizar CSS para agregar fondos, textos, añadir formato y bordes formato y especificar el relleno y
los márgenes de los elementos.

También ha aprendido cómo colocar un elemento, controlar la visibilidad y el tamaño de un elemento, establecer
la forma de un elemento, coloque un elemento detrás de otro, y para añadir efectos especiales a algunos
selectores, como enlaces.

Para obtener más información acerca de CSS, por favor, eche un vistazo a nuestros ejemplos de CSS y
nuestra referencia de CSS .

Ahora ya saben CSS, ¿qué sigue?

El siguiente paso es aprender JavaScript.

JavaScript

JavaScript puede hacer su sitio web más dinámica.

Un sitio web estático es agradable cuando lo que desea es mostrar el contenido plano, pero un sitio web dinámico
puede reaccionar ante los acontecimientos y permitir la interacción del usuario.

JavaScript es el lenguaje de programación más popular en Internet y funciona con todos los principales
navegadores.

Si desea obtener más información acerca de JavaScript, por favor visite nuestro tutorial JavaScript .
92
Página

También podría gustarte

Introducción a CSS: Estilos y Selectores
Aún no hay calificaciones
Introducción a CSS: Estilos y Selectores
6 páginas
Sintaxis CSS para Selectores de Clase
Aún no hay calificaciones
Sintaxis CSS para Selectores de Clase
70 páginas
CSS
Aún no hay calificaciones
CSS
14 páginas
Introducción a Hojas de Estilo CSS
Aún no hay calificaciones
Introducción a Hojas de Estilo CSS
4 páginas
Codes 2016 Capacitacion Web 04a1 - CSS
Aún no hay calificaciones
Codes 2016 Capacitacion Web 04a1 - CSS
21 páginas
Introducción a CSS para principiantes
Aún no hay calificaciones
Introducción a CSS para principiantes
33 páginas
Introducción a Hojas de Estilo CSS
Aún no hay calificaciones
Introducción a Hojas de Estilo CSS
18 páginas
Estilos en Microsoft Expression Web
Aún no hay calificaciones
Estilos en Microsoft Expression Web
33 páginas
Guía Completa sobre CSS en HTML
Aún no hay calificaciones
Guía Completa sobre CSS en HTML
102 páginas
Introducción a CSS para Páginas Web
Aún no hay calificaciones
Introducción a CSS para Páginas Web
93 páginas
CSS 1 2023
Aún no hay calificaciones
CSS 1 2023
25 páginas
Unidad 3
Aún no hay calificaciones
Unidad 3
74 páginas
Introducción a Estilos CSS en HTML
Aún no hay calificaciones
Introducción a Estilos CSS en HTML
11 páginas
TEMA#1 Introdución CSS3 2026 Parte1
Aún no hay calificaciones
TEMA#1 Introdución CSS3 2026 Parte1
4 páginas
Partes de una regla CSS en HTML
Aún no hay calificaciones
Partes de una regla CSS en HTML
15 páginas
Introducción a CSS: Hojas de Estilo
Aún no hay calificaciones
Introducción a CSS: Hojas de Estilo
42 páginas
Manual de CSS para Desarrollo Web
Aún no hay calificaciones
Manual de CSS para Desarrollo Web
26 páginas
Introducción a CSS para Desarrollo Web
Aún no hay calificaciones
Introducción a CSS para Desarrollo Web
50 páginas
Definición y uso de CSS en HTML
Aún no hay calificaciones
Definición y uso de CSS en HTML
6 páginas
Manual CSS para Principiantes
Aún no hay calificaciones
Manual CSS para Principiantes
24 páginas
0.teoria CSS3
Aún no hay calificaciones
0.teoria CSS3
17 páginas
Introducción a CSS para Diseño Web
Aún no hay calificaciones
Introducción a CSS para Diseño Web
30 páginas
Introducción a las hojas de estilo CSS
Aún no hay calificaciones
Introducción a las hojas de estilo CSS
38 páginas
Introducción a CSS en Programación
Aún no hay calificaciones
Introducción a CSS en Programación
17 páginas
Introducción a CSS: Estilos Web Efectivos
Aún no hay calificaciones
Introducción a CSS: Estilos Web Efectivos
7 páginas
Fundamentos y Aplicación de CSS
Aún no hay calificaciones
Fundamentos y Aplicación de CSS
9 páginas
Introducción a CSS para Diseño Web
Aún no hay calificaciones
Introducción a CSS para Diseño Web
11 páginas
Introducción a CSS: Hojas de Estilo
Aún no hay calificaciones
Introducción a CSS: Hojas de Estilo
35 páginas
Introduccion A Estilos Css
Aún no hay calificaciones
Introduccion A Estilos Css
18 páginas
Introducción a CSS y su uso
Aún no hay calificaciones
Introducción a CSS y su uso
4 páginas
Introducción a HTML y CSS para Web
Aún no hay calificaciones
Introducción a HTML y CSS para Web
16 páginas
Introducción a CSS: Hojas de Estilo
Aún no hay calificaciones
Introducción a CSS: Hojas de Estilo
4 páginas
Introducción a CSS: Hojas de Estilo
Aún no hay calificaciones
Introducción a CSS: Hojas de Estilo
42 páginas
Guía de CSS para Diseño Web Efectivo
Aún no hay calificaciones
Guía de CSS para Diseño Web Efectivo
20 páginas
Introducción a CSS3 y sus Funciones
100% (1)
Introducción a CSS3 y sus Funciones
100 páginas
Guía Completa de CSS para Principiantes
Aún no hay calificaciones
Guía Completa de CSS para Principiantes
14 páginas
Introducción a CSS y sus Selectores
Aún no hay calificaciones
Introducción a CSS y sus Selectores
71 páginas
CSS Básico para Mini Red Social
Aún no hay calificaciones
CSS Básico para Mini Red Social
46 páginas
Apunte Que Es Css
Aún no hay calificaciones
Apunte Que Es Css
8 páginas
Introducción a CSS y sus Estilos
Aún no hay calificaciones
Introducción a CSS y sus Estilos
7 páginas
Introducción a CSS y sus Módulos
Aún no hay calificaciones
Introducción a CSS y sus Módulos
35 páginas
Introducción a CSS para Principiantes
Aún no hay calificaciones
Introducción a CSS para Principiantes
217 páginas
Introducción a CSS y sus Selectores
Aún no hay calificaciones
Introducción a CSS y sus Selectores
26 páginas
Introducción a Hojas de Estilo CSS
Aún no hay calificaciones
Introducción a Hojas de Estilo CSS
25 páginas
CSS Introduccion
Aún no hay calificaciones
CSS Introduccion
25 páginas
Introducción a Hojas de Estilo CSS
Aún no hay calificaciones
Introducción a Hojas de Estilo CSS
16 páginas
Estructura y Beneficios de CSS
Aún no hay calificaciones
Estructura y Beneficios de CSS
21 páginas
Sintaxis Básica de CSS y Estilos
100% (1)
Sintaxis Básica de CSS y Estilos
4 páginas
Introducción a CSS para Maquetación Web
Aún no hay calificaciones
Introducción a CSS para Maquetación Web
43 páginas
UD1 FollasEstilo Básico
Aún no hay calificaciones
UD1 FollasEstilo Básico
23 páginas
Introducción a Hojas de Estilo CSS
Aún no hay calificaciones
Introducción a Hojas de Estilo CSS
38 páginas
Clase 2
Aún no hay calificaciones
Clase 2
55 páginas
Guía Completa sobre CSS y Estilos Web
Aún no hay calificaciones
Guía Completa sobre CSS y Estilos Web
82 páginas
Introducción a la Hoja de Estilos CSS
Aún no hay calificaciones
Introducción a la Hoja de Estilos CSS
5 páginas
Lenguaje CSS
Aún no hay calificaciones
Lenguaje CSS
27 páginas
Tema4 Parte4 V1py
Aún no hay calificaciones
Tema4 Parte4 V1py
14 páginas
Introducción a CSS para Diseño Web
Aún no hay calificaciones
Introducción a CSS para Diseño Web
6 páginas
07 Manual Basico Fotografia Movil XXXXXXXXX
Aún no hay calificaciones
07 Manual Basico Fotografia Movil XXXXXXXXX
11 páginas
10 Manual Organizacion Viajes
Aún no hay calificaciones
10 Manual Organizacion Viajes
11 páginas
Expansión de Base Espacial para Wild Space
Aún no hay calificaciones
Expansión de Base Espacial para Wild Space
4 páginas
07 Manual Basico Fotografia Movil
Aún no hay calificaciones
07 Manual Basico Fotografia Movil
11 páginas
Carcassonne Mini4 - MinasDeOro Reglas
Aún no hay calificaciones
Carcassonne Mini4 - MinasDeOro Reglas
2 páginas
Instrucciones para Carcassonne: Despachos
Aún no hay calificaciones
Instrucciones para Carcassonne: Despachos
2 páginas
Evaluación de Proyectos de Software
Aún no hay calificaciones
Evaluación de Proyectos de Software
3 páginas
Características de Frameworks JavaScript
Aún no hay calificaciones
Características de Frameworks JavaScript
13 páginas
Examen Parcial Programación II en Java
Aún no hay calificaciones
Examen Parcial Programación II en Java
9 páginas
Desarrollo de Entornos Web en JavaScript
100% (1)
Desarrollo de Entornos Web en JavaScript
312 páginas
Características y requisitos de PowerPoint
Aún no hay calificaciones
Características y requisitos de PowerPoint
6 páginas
Tipos de Malware y sus Efectos
Aún no hay calificaciones
Tipos de Malware y sus Efectos
4 páginas
Algoritmos de Ordenación y Búsqueda en C#
Aún no hay calificaciones
Algoritmos de Ordenación y Búsqueda en C#
11 páginas
Gestión de Nómina y Multimedia en EntreCOL+
Aún no hay calificaciones
Gestión de Nómina y Multimedia en EntreCOL+
9 páginas
Resumen de Principios de Ingeniería de Software
Aún no hay calificaciones
Resumen de Principios de Ingeniería de Software
3 páginas
Llamadas al Sistema en Linux
Aún no hay calificaciones
Llamadas al Sistema en Linux
10 páginas
Sistemas para Impulsar el Comercio Electrónico
Aún no hay calificaciones
Sistemas para Impulsar el Comercio Electrónico
2 páginas
Verificación y Validación en Testing QA
Aún no hay calificaciones
Verificación y Validación en Testing QA
9 páginas
Estructuras y tipos en C
Aún no hay calificaciones
Estructuras y tipos en C
14 páginas
Manejo de ArrayLists en C#
Aún no hay calificaciones
Manejo de ArrayLists en C#
4 páginas
Crear página web en HTML paso a paso
Aún no hay calificaciones
Crear página web en HTML paso a paso
1 página
Introducción a PROGA en Python
Aún no hay calificaciones
Introducción a PROGA en Python
10 páginas
Introducción a Gestores de Contenidos
Aún no hay calificaciones
Introducción a Gestores de Contenidos
7 páginas
UML y Patrones de Diseño en Software
Aún no hay calificaciones
UML y Patrones de Diseño en Software
6 páginas
Métodos de Operaciones Aritméticas en Java
Aún no hay calificaciones
Métodos de Operaciones Aritméticas en Java
4 páginas
Ciclos de Repetición en Java
Aún no hay calificaciones
Ciclos de Repetición en Java
22 páginas
Algoritmo de Vuelta Atrás en Problemas
Aún no hay calificaciones
Algoritmo de Vuelta Atrás en Problemas
4 páginas
2.clase 2
Aún no hay calificaciones
2.clase 2
37 páginas
Análisis de Sistema de Información XYZ
Aún no hay calificaciones
Análisis de Sistema de Información XYZ
4 páginas
Introducción a PDO en PHP 5
Aún no hay calificaciones
Introducción a PDO en PHP 5
26 páginas
Declaración de Valor Agregado Ecuatoriano
Aún no hay calificaciones
Declaración de Valor Agregado Ecuatoriano
5 páginas
Introducción a Visual Source Safe
Aún no hay calificaciones
Introducción a Visual Source Safe
29 páginas
Algoritmos de Ordenación y Búsqueda
Aún no hay calificaciones
Algoritmos de Ordenación y Búsqueda
28 páginas
Errores y Soluciones en C: Punteros y Arrays
Aún no hay calificaciones
Errores y Soluciones en C: Punteros y Arrays
7 páginas
50 Preguntas Clave sobre Java
Aún no hay calificaciones
50 Preguntas Clave sobre Java
12 páginas
Software y Licencias: Guía Completa
Aún no hay calificaciones
Software y Licencias: Guía Completa
2 páginas