Introducción Al CSS

Introduccin al CSS
Conocimientos previos que debe poseer.

Antes de comenzar con este tutorial es recomendable que tenga conocimientos bsicos de HTML/XHTML. Si desea estudiar HTML, dirijase al tutorial de HTML.
Qu es CSS?
Las Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe como se va a presentar un documento en la pantalla o como se va a imprimir. CSS nos ayuda a separar el contenido de la presentacin. CSS nos permite controlar el estilo y el formato de mltiples pginas Web a la vez.
Por qu trabajar con Hojas de Estilo?

Las hojas de estilo nos ahorran mucho trabajo. Normalmente los estilos son guardados en un archivo externo con la extensin .css. Este archivo le permite hacer los cambios de apariencia y disposicin de los elementos en todas las pginas de su sitio Web, con tan solo editar un solo documento CSS.
Cmo se estructura CSS?

CSS funciona a base de reglas. Cada regla est compuesta por un selector y la declaracin. La declaracin a su vez esta compuesta por una propiedad y su valor. selector{propiedad:valor} Veamos un ejemplo donde el selector p indica que todos los elementos p del documento HTML sern afectados por la declaracin cuya propiedad es color y su valor es blue(azul). p{color:blue}
Si el valor tiene multiples palabras, agreguelo entre comillas. p{font-family:"Times New Roman"} Si desea especificar ms de una propiedad, deber separarlas con un punto y coma(;). h1{color:red; text-align:center} Para definir los estilos de forma ms clara y fcil de leer, puede describir cada propiedad en diferentes lneas. p { color:red; text-align:center; } Si desea definir una misma propiedad para varios selectores, solo debe agruparlos separandolos con una coma(,) p, h1, h2, h3 { color:blue; font-family:Arial; }
El selector class
Con el selector class se pueden definir diferentes estilos para un mismo elemento HTML. Por ejemplo el elemento <p> puede ser de color azul o de color rojo. p.azul {color:blue} p.rojo {color:red} Y as se vera en el documento HTML: <p class="azul"> Este texto es de color azul.
</p> <p class="rojo"> Este texto es de color rojo. </p>
El selector ID
HTML introduce el atributo id, el cual tiene un valor nico en todo el documento. Hacemos referencia a l anteponiendo el smbolo "#". #fondo_azul {background-color:blue} Y en HTML se vera asi: <p id="fondo_azul"> Este texto tiene un fondo azul. </p> <p> Este texto no tiene un fondo azul. </p>
Comentarios en CSS
Para agregar un comentario que ayude a ser ms legible el documento utilizamos "/* comentario */". p { text-align:right; /* texto alineado a la derecha */ color:blue; /* color de texto: azul */ font-family:Verdana; /* tipo de fuente:Verdana */ }
Cmo se usan los estilos?
Dnde se ubican los estilos?

Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma.
Hay 3 formas de insertar una hoja de estilos:
1. Entre lneas
Definimos el estilo directamente dentro del codigo HTML. Debemos usar esta forma cuando un nico estilo es aplicado a un solo elemento. Su uso est dado por el atributo style.
Cdigo <p style="color:red; margin-left:30px"> Este prrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo. </p> Resultado
Este prrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.
2. Hojas de estilo interna

Las hojas de estilo interna deben usarse cuando una pgina tiene un estilo nico. Las definimos con la etiqueta <style> en la cabecera del documento entre las etiquetas <head> y </head>
Cdigo <head> <style type="text/css"> body {background-color:#008080} p {color:white} </style> </head>
<body> <p> Este texto es de color blanco y el color de fondo de la pagina es #008080. </p> </body> Resultado
Este texto es de color blanco y el color de fondo de la pagina es #008080.
En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de estilo. Entre las etiquetas style definimos al selector body con un color de fondo azul y al selector p de color blanco.
3. Hojas de estilo externas

Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias pginas. Con realizar los cambios en un solo archivo, podemos cambiar el aspecto de todo el sitio web. Las hojas de estilo deben llevar la terminacin .css. As se vera por ejemplo, un archivo CSS externo que llamaremos "fuentes.css":
p { font-family:Arial; font-size:12px; font-weight:normal; }
Nota: el cdigo, en los archivos de hojas de estilos externos, comienzan directamente con el selector. Cada pgina del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento.
<head> <link rel="stylesheet" type="text/css" href="fuentes.css"> </head> rel="stylesheet" nos indica que la relacin es una hoja de estilo. type="text/css" nos dice que el tipo es texto y css. href="fuentes.css" es el nombre del documento que contiene el cdigo css.
CSS Fondo
El fondo con CSS

Las propiedades de fondo en CSS, nos permiten controlar el color de fondo de un elemento, una imagen de fondo, su ubicacin, cuantas veces se repite, etc. Por ejemplo, si quisieramos un fondo de color rojo:
Cdigo <html> <head> <style type="text/css"> body{background:red} </style> </head> <body> <p>El fondo es de color rojo.</p> </body> </html> Resultado
El fondo es de color rojo
En caso que optemos por una imagen como fondo de nuestra pgina esta sera una solucin:
Cdigo <html> <head> <style type="text/css"> body{background-image:url('fondo3.jpg')}
</style> </head> <body> <p>Ejemplo de una imagen de fondo</p> </body> </html> Resultado
Ejemplo de una imagen de fondo
Qu pasa si la imagen es ms pequea que el tamao del fondo?

Si la imagen que elegimos de fondo es ms chica que este, esta se repetir tantas veces como sea necesario hasta cubrir todo el fondo. Por ejemplo para una imagen como esta
Cdigo <html> <head> <style type="text/css"> body{background-image:url('fondo4.jpg')} </style> </head> <body> <p>La imagen se repite hasta cubrir todo el fondo</p> </body> </html> Resultado
este sera el resultado:
La imagen se repite hasta cubrir todo el fondo
Propiedades del fondo

Propiedad Descripcin Valores Detalles Ej.
background-color Propiedades individuales relacionadas con el fondo. background-image background-repeat background-attachment background-position background-color background-image Color de fondo. Imagen de fondo. color transparent URL none repeat background-repeat Repeticin de la repeat-x imagen de repeat-y fondo. no-repeat background-attachment Desplazamiento scroll de la imagen de fixed fondo. % longitud background-position Posicin de la imagen de fondo. left center right top bottom
Color de fondo Imagen de fondo Repeticin del fondo Acoplamiento del fondo Posicin del fondo Color Transparente Direccin URL Nada Repite Repite horizontalmente Repite verticalmente No se repite Desplaza Fija Porcentaje Longitud Izquierda Centro Derecha Superior Inferior
background
CSS Textos
Los textos con CSS

Las propiedades de los textos nos permiten controlar la apariencia de los mismos. Podemos cambiar el color, alinearlo, decorarlo, controlar los espacios entre palabras y mucho ms.
Texto en color
En este ejemplo se define que el elemento "p" sea de color azul y que tenga una separacin entre palabras de 10 pxeles.
Cdigo <p style="color:blue; word-spacing:10px"> Este prrafo es de color azul y tiene una separacin de 10 pixels entre palabra y palabra. </p> Resultado
Este prrafo es de color azul y tiene una separacin de 10 pixels entre palabra y palabra.
Sangra
La propiedad "text-indent" nos permite dejar sangra dentro del texto.
Cdigo <html> <head> <style type="text/css"> p{text-indent: 1cm} </style> </head> <body> <p>La primer palabra del texto comienza a un centmetro del borde.</p> </body> </html> Resultado
La primer palabra del texto comienza a un centmetro del borde.
Enlace sin subrayar

La propiedad "text-decoration" nos permite, entre otras cosas, eliminar el subrayado en un enlace como podemos observar en este ejemplo.
Cdigo <html> <head> <style type="text/css"> a{text-decoration: none} </style> </head> <body> <p>Este <a href="">enlace</a> no est subrayado.</p> </body> </html> Resultado
Este enlace no est subrayado.
Texto centrado
La propiedad "text-align" nos permite ubicar el texto a la derecha, izquierda o en el centro. En este ejemplo, vamos a utilizar tambin la propiedad "letter-spacing" que define el espacio que dejar entre letras.
Cdigo <html> <head> <style type="text/css"> p{text-align: center; letter-spacing: 4px} </style> </head> <body> <p>Texto centrado<br> y con un espaciado de 4px entre letras.</p> </body> </html> Resultado
Texto centrado y con un espaciado de 4px entre letras.
Propiedades de los textos

Propiedad text-indent Descripcin Desplazamiento de la primera lnea del texto. Valores longitud % left text-align Alineamiento del texto. right center justify none underline text-decoration Efectos de subrayado, tachado, parpadeo. overline line-through blink capitalize Detalles Longitud Porcentaje Izquierda Derecha Centro Justificar Sin efectos Subrayado Lnea por encima Tachado Parpadeo Convierte en mayscula el primer carcter de cada palabra Convierte en mayscula todas las letras del elemento Convierte en minscula todas las letras del elemento Neutraliza el valor heredado color distancia x distancia y desenfoque Normal Longitud Normal Longitud Normal Preformateado Los cambios de lnea solo ocurren con el elemento br Ej.
text-transform
Transformaciones del texto a maysculas/minsculas.
uppercase
lowercase none color text-shadow Aplica el efecto de sombreado al texto de acuerdo a los valores dados. No funciona en IE 5, 6 y 7 ni en Firefox Espacio entre caracteres. Espacio entre palabras. x length y length blur letter-spacing word-spacing white-space normal longitud normal
longitud Comportamiento de los espacios dentro de los normal pre elementos. nowrap pre-wrap
color direction
Color del primer plano. Sentido direccional de la escritura.
pre-line color ltr rtl normal
Color Izquierda a derecha Derecha a izquierda Normal Abre un nivel adicional de incrustacin con respecto al algoritmo bidireccional Si el elemento es a nivel de lnea o es un elemento a nivel de bloque, crea una sustitucin
embed unicode-bidi Sentido direccional de la escritura.
bidi-override
as fuentes con CSS

Las propiedades de las fuentes nos permiten controlar la apariencia de las mismas. Podemos cambiar el color, el tipo de fuente, la intensidad, el tamao, etc.
Tipo de fuentes
Para definir el tipo de fuente usamos la propiedad "font-family". Es recomendable usar un tipo de fuente comn, que todos los navegadores reconozcan (ej.:Arial, Verdana, Helvetica, sans serif, etc.).
Cdigo <html> <head> <style type="text/css"> p{font-family: sans-serif} </style> </head> <body> <p>Tipo de fuente : sans-serif.</p> </body> </html> Resultado
Tipo de fuente : sans-serif.
Intensidad de las fuentes

Una caracterstica muy til es el control de la intensidad de las fuentes. Para ello utilizamos la propiedad "font-weight".
Cdigo <html> <head> <style type="text/css"> p{font-weight: bold} </style> </head> <body> <p>Intensidad de la fuente : bold(negrita).</p> </body> </html> Resultado
Intensidad de la fuente : bold(negrita).
Tamao de las fuentes

Controlar el tamao de las fuentes suele ser de mucha utilidad. La propiedad encargada de eso es "font-size". Este ejemplo es muy ilustrativo.
Cdigo <html> <body> <p style="font-size:xx-small">Tamao:xx-small</p> <p style="font-size:x-small">Tamao:x-small</p> <p style="font-size:small">Tamao:small</p> <p style="font-size:medium">Tamao:medium</p> <p style="font-size:large">Tamao:large</p> <p style="font-size:x-large">Tamao:x-large</p> <p style="font-size:xx-large">Tamao:xx-large</p> <p style="font-size:larger">Tamao:larger</p>
<p style="font-size:smaller">Tamao:smaller</p> </body> </html> Resultado
Tamao:xx-small
Tamao:x-small
Tamao:small
Tamao:medium
Tamao:large
Tamao:x-large
Tamao:xx-large
Tamao:larger
Tamao:smaller
Propiedades de las fuentes

Propiedad Descripcin Valores font-style font-variant font-weight font-family caption Atajo para establecer el resto de propiedades sobre las fuentes a la vez. icon menu message-box small-caption status-bar font-family Familias de fuentes. nombre-familia familia-genrica normal font-style Estilo de la fuente. italic oblique font-variant Convierte las minsculas a maysculas normal pero mantienen un tamao inferior a small-caps las maysculas. normal bold bolder lighter 100 200 font-weight Intensidad de la fuente. 300 400 500 600 700 800 900 Detalles Estilo de fuente Variante de fuente Peso de la fuente Familia de fuetes Fuente a utilizar en los botones, mens desplegables, etc. cono Fuente de los mens desplegables Fuente de las caja de mensajes Pequea leyenda Fuentes de la barra de estado Nombre de la familia de fuentes Familia genrica Estilo normal Itlica Oblicua Normal Maysculas pequeas Normal Negrita Negrita mas fuerte Suave Valor 100 Valor 200 Valor 300 Valor 400 Valor 500 Valor 600 Valor 700 Valor 800 Valor 900 Ej.
font-size/line height Tamao de la fuente
font
xx-small x-small small medium large font-size Tamao de la fuente. x-large xx-large larger smaller tamao % Especifica un valor de relacin para un none elemento que preserve la altura de la letra "x" de la fuente elegida en nmero primera instancia en la fuente sustituida. normal wider narrower font-strech Flexibilidad de la fuente. Expande o comprime horizontalmente la fuente. ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded
XX-Pequea X-Pequea Pequea Mediana Grande X-Grande XX-Grande Mxima Mnima Tamao Porcentaje No preserva la altura de la fuente nmero normal expande al siguiente valor comprime al siguiente valor ultra comprimido extra comprimido comprimido semi comprimido semi expandido expandido extra expandido ultra expandido
font-size-adjust
Bordes con CSS
Los bordes nos sirven para decorar algunos elementos con lneas de diferentes espesores, colores y formas.
Un ejemplo de bordes, podra ser esta tabla a la cual le aplicamos diferentes propiedades para hacerla ms atractiva
Cdigo <html> <head> <style type="text/css"> table{border:blue double} td{border:green dotted thin} </style> </head> <body> <table> <tr> <td>Esta tabla</td> <td>tiene los bordes</td> </tr> <tr> <td>decorados con</td> <td>diferentes propiedades</td> </tr> </table> </body> </html> Resultado Esta tabla tiene los bordes decorados con diferentes propiedades
Tabla de las propiedades de los bordes

Propiedad border Descripcin Valores Define ancho, color y estilo general para los 4 thin bordes. medium thick border-top: define ancho, color y estilo para longitud el borde superior color border-right: define ancho, color y estilo transparent para el borde derecho none border-bottom: define ancho, color y estilo hidden para el borde inferior dotted dashed border-left: define ancho, color y estilo para solid el borde izquierdo double Detalles Fino Mediano Grueso Longitud Color Transparente Nada Oculto Punteado Lnea de rayas Solido Doble Ej.
groove ridge inset outset Ancho general de los 4 bordes. border-top-width: ancho del borde superior. border-right-width: ancho del borde derecho. border-bottom-width: ancho del borde inferior. border-left-width: ancho del borde izquierdo. Color general de los 4 bordes. border-top-color:color del borde superior border-color border-right-color:color del borde derecho border-bottom-color:color del borde inferior border-left-color:color del borde izquierdo none Estilo general de los 4 bordes. border-top-style:estilo del borde superior border-style border-right-style:estilo del borde derecho hidden dotted dashed solid double transparent longitud thin medium thick
Sombreado En relieve Insercin Resalte Fino Mediano Grueso
border-width
Longitud
color
Color
Transparente
Nada Oculto Punteado Lnea de rayas Solido Doble Sombreado En relieve Insercin Resalte
border-bottom-style:estilo del borde inferior groove ridge border-left-style:estilo del borde izquierdo inset outset
Contornos con CSS

Los contornos son lneas que se encuentran alrededor del elemento, por afuera del borde, con el fn de hacerlo resaltar. Podemos especificar el estilo, el ancho y el color de los contornos con la propiedad "outline".
Un ejemplo de estilos
Cdigo <html> <head> <style type="text/css"> p{outline-style: dotted} </style> </head> <body> <p>Este texto tiene una lnea de puntos alrededor.</p> </body> </html> Resultado
Este texto tiene una lnea de puntos alrededor.
Nota: los contornos no funcionan en el navegador Internet Explorer.
Un ejemplo de ancho y color

Cdigo <html> <head> <style type="text/css"> p{ outline-style: solid; outline-width: thick; outline-color: #FF0000 } </style> </head> <body> <p>Este texto tiene un contorno grueso de color rojo.</p> </body> </html> Resultado
Este texto tiene un contorno grueso de color rojo.
Nota: para que se visualice el ancho(outline-width) es necesario definir el estilo solido(outline-style: solid) de lo contrario no se visualizar.
Tabla de las propiedades de las lneas exteriores

Propiedad outline Descripcin Propiedades individuales de los contornos. No funciona en IE 5, 6 y 7 Ancho del contorno. No funciona en IE 5, 6 y 7 Valores outline-color outline-style outline-width thin medium thick longitud none hidden dotted dashed outline-style Estilo del contorno. No funciona en IE 5, 6 y 7 solid double groove ridge inset outset outline-color Color del contorno. No funciona en IE 5, 6 y 7 color invert Detalles Color de la lnea Estilo de la lnea Ancho de la lnea Fino Medio Grueso Longitud Nada Oculta Punteada Lneas de rayas Solida Doble Ranurada Loma Bajo relieve En relieve Color Color inverso al color de fondo Ej.
outline-width
CSS Mrgenes
Mrgenes con CSS
El margen es un espacio invisible alrededor del elemento, que le permite al mismo mantener distancia de otros elementos. Las propiedades de los mrgenes(margin en ingls) nos permiten definir el ancho de los mismos.
Cdigo <html> <head> <style type="text/css"> h4{margin:30px; border:thin solid} </style> </head> <body> <p>Texto, texto, texto, texto, texto, texto, texto.</p> <h4>Texto separado 30 pxeles del texto.</h4> <p>Texto, texto, texto, texto, texto, texto, texto.</p> </body> </html> Resultado
Texto, texto, texto, texto, texto, texto, texto.
Texto separado 30 pxeles del texto.

Tabla de las propiedades de los mrgenes

Propiedad margin Descripcin Ancho para varios mrgenes individuales. margin-top: Define el ancho del margen superior. Valores longitud % auto Detalles Longitud Porcentaje Automtico Ej.
margin-right: Define el ancho del margen derecho. margin-bottom: Define el ancho del
CSS Relleno
Relleno con CSS
El relleno se comporta exactamente igual que los mrgenes con la excepcin que deja el espacio blanco entre el elemento y los bordes, o en caso que no posea bordes, con el margen. Las propiedades del relleno(padding en ingls) nos permiten definir el ancho de los mismos.
Cdigo <html> <head> <style type="text/css"> h4{padding:30px; border:thin solid} </style> </head> <body> <p>Texto, texto, texto, texto, texto, texto, texto.</p> <h4>Texto separado 30 pxeles del los bordes.</h4> <p>Texto, texto, texto, texto, texto, texto, texto.</p> </body>
</html> Resultado
Texto separado 30 pxeles del los bordes.

Tabla de las propiedades del relleno

Propiedad Descripcin Tamaos para varios rellenos individuales. padding-top: ancho del relleno superior. padding padding-right: ancho del relleno derecho. padding-bottom: ancho del relleno inferior. padding-left: ancho del relleno derecho. Valores longitud Detalles Longitud Ej.
Porcentaje
CSS Listas
Listas con CSS

Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen, nmero o letra de los diferentes Items y la posicin de la misma.
Listas ordenadas
Cdigo
<html> <head> <style type="text/css"> ol{list-style-type:upper-roman} </style> </head> <body> <p>Lista ordenada con nmeros romanos</p> <ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> </body> </html> Resultado
Lista ordenada con nmeros romanos

1. 2. 3. HTML CSS JavaScript
Listas desordenadas
Cdigo <html> <head> <style type="text/css"> ul{list-style-type:square} </style> </head> <body> <p>Lista sealada con cuadrados</p> <ul> <li>ASP</li> <li>PHP</li> <li>ADO</li> </ul> </body> </html> Resultado
Lista sealada con cuadrados

ASP
PHP ADO
Uso de una imagen

Tambin podemos incluir un pequeo smbolo de nuestra creacin en lugar de los smbolos estndard del lenguaje.
Cdigo <html> <head> <style type="text/css"> ul{list-style-image: url('punto.gif')} </style> </head> <body> <p>Lista sealada con un grfico</p> <ul> <li>XML</li> <li>VBScript</li> <li>AJAX</li> </ul> </body> </html> Resultado
Lista sealada con un grfico

XML VBScript AJAX
Tabla de las propiedades de las listas

Propiedad list-style list-style-type Valores list-style-type Permite establecer el estilo de la lista, list-style-position la imagen y/o la posicin. list-style-image Estilo aplicable a los marcadores disc visuales de las listas. circle square Descripcin Detalles Tipos de listas Posicin de la lista Imagen de la lista Disco Crculo Cuadrado Ej.
list-style-image list-style-position
Nro.decimal Nro.decimal comenzando de 0 decimal-leading-zero No funciona en IE 5, 6y7 Nro.romano lower-roman minscula Nro.romano upper-roman mayscula Letra griega minscula lower-greek No funciona en IE 5, 6y7 Letra latina minscula lower-latin No funciona en IE 5, 6y7 Letra latina mayscula upper-latin No funciona en IE 5, 6y7 Letra armenia armenian No funciona en IE 5, 6y7 Letra gregoriana georgian No funciona en IE 5, 6y7 Letra alfabeto en lower-alpha minscula Letra alfabeto en upper-alpha mayscula none Nada Imagen aplicable a los elementos de las URL URL none Nada listas. Posicin dentro de la lista de los inside Dentro outside Fuera elementos marcadores de las listas.
decimal
CSS Tablas
Tablas con CSS

Las propiedades de las tablas nos permiten definir los distintos elementos que componen una tabla:
La ubicacin del ttulo con respecto a la tabla. Celdas de tamao fijo o ajustable. Espaciado entre celdas.
Ubicacin del ttulo

La propiedad "caption-side" nos permite ubicar el ttulo de la tabla por encima o por debajo de la misma.
Cdigo <html> <head> <style type="text/css"> caption{caption-side: bottom} </style> </head> <body> <table border="1"> <caption>Precio de los lacteos</caption> <tr> <th>Producto</th> <th>Precio</th> </tr> <tr> <td>Manteca</td> <td>4.00</td> </tr> <tr> <td>Leche</td> <td>1.50</td> </tr> </table> </body> </html> Resultado Precio de los lcteos Producto Manteca Leche Precio 4.00 1.50
Nota: Internet Explorer ubica el ttulo siempre por encima de la tabla.
Formato de las celdas

La propiedad "table-layout" define si las celdas, filas o columnas, van a tener el tamao fijo que estipulemos (fixed) o se adecuarn al contenido sin importar la medida que hayamos establecido (auto).
Cdigo <html> <head> <style type="text/css"> table.auto{table-layout: auto} table.fija{table-layout: fixed} </style> </head> <body> <table border="1" class="auto" width="100%"> <caption>Tabla con tamao automtico</caption> <tr> <td width="20%">111111111111111111111111111111111</td> <td width="40%">22222222222222</td> <td width="40%">333333</td> </tr> </table> <table border="1" class="fija" width="100%"> <caption>Tabla con tamao fijo</caption> <tr> <td width="20%">111111111111111111111111111111111</td> <td width="40%">22222222222222</td> <td width="40%">333333</td> </tr> </table> </body> </html> Resultado Tabla con tamao automtico 11111111111111111111111 22222222222 333333
Tabla con tamao fijo 11111111111111111111111 22222222222 333333
Espaciado entre celdas

La propiedad "border-spacing" nos permite dejar espacio libre entre celdas.
Cdigo <html> <head> <style type="text/css"> table{border-spacing: 20px} </style> </head> <body> <table border="1"> <tr> <th>Producto</th> <th>Precio</th> </tr> <tr> <td>Tomates</td> <td>1.20</td> </tr> <tr> <td>Cebollas</td> <td>0.80</td> </tr> </table> </body> </html> Resultado Producto Precio Tomates 1.20 Cebollas 0.80
Propiedades de las tablas

Propiedad Descripcin top caption-side Posicin del ttulo respecto de la tabla. bottom auto Control del algoritmo usado para el formato de las celdas, filas y columnas. fixed Seleccin del modelo de los bordes. Espaciado entre los bordes de celdas adyacentes. collapse separate longitud Valores Detalles Ej. Superior No funciona en IE 5, 6y7 Inferior No funciona en IE 5, 6y7 Automtico Fijo Plegado Separado Longitud No funciona en IE 5, 6y7
table-layout border-collapse
border-spacing
show empty-cells Visibilidad de los bordes de celdas sin contenido. hide
Muestra No funciona en IE 5, 6y7 Oculta No funciona en IE 5, 6y7
CSS Dimensiones
Dimensiones con CSS

Las propiedades de las dimensiones nos permiten definir al ancho y la altura de los elementos, como as tambin controlar el espacio en blanco que dejamos entre lneas.
Ancho
La propiedad "width" define el ancho del elemento.
Cdigo <html> <head> <style type="text/css"> .ancho{ width: 200px; border: 1px solid #00FFFF; padding: 5px } </style> </head> <body> <p class="ancho">Prrafo con un ancho de 200 pixels.</p> </body> </html> Resultado
Prrafo con un ancho de 200 pixels.
Altura
La propiedad "height" define la altura del elemento.
Cdigo <html> <head> <style type="text/css"> .altura{ height: 100px; border: 1px solid #00FFFF; padding: 5px } </style> </head> <body> <p class="altura">Prrafo definido con una altura de 100 px.</p> </body> </html> Resultado
Prrafo definido con una altura de 100 px.
Separacin entre lneas

La propiedad "line-height" define la distancia que dejaremos entre lneas de un texto.
Cdigo <html> <head> <style type="text/css"> .separa{ line-height: 40px; width: 150px border: 1px solid #00FFFF; padding: 5px } </style> </head> <body> <p class="separa">Prrafo con una separacin
entre lneas de 40 px.</p> </body> </html> Resultado
Prrafo con una separacin entre lneas de 40 px.
Propiedades de las dimensiones

Propiedad width min-width max-width Ancho. Ancho mnimo. Ancho mximo. Descripcin Valores longitud % auto longitud % longitud % none longitud % auto longitud % longitud % none normal nmero longitud % Detalles Longitud Porcentaje Automtico Longitud Porcentaje Longitud Porcentaje Sin mximo Longitud Porcentaje Automtico Longitud Porcentaje Longitud Porcentaje Sin mximo Normal Nmero Longitud Porcentaje Ej.
height min-height max-height
Altura. Alto mnimo. Alto mximo.
line-height
Altura entre las bases del texto.
CSS Efectos visuales
Efectos visuales con CSS
Los efectos visuales se utilizan entre otras cosas para definir la visibilidad de los elementos y tambin para establecer el comportamiento del contenedor de los mismos.
La propiedad overflow
Overflow nos permite controlar el comportamiento de una caja en caso que su contenido la desborde.
Cdigo p{ background-color: #FFFFD9; width: 100px; height: 100 px; overflow: scroll } <p>Utilice overflow para controlar la disposicin de los elementos dentro de la caja.</p> Resultado
Utilice overflow para controlar la disposicin de los elementos dentro de la caja.
En este ejemplo, definimos el tamao de la caja en 100x100 pxeles y le agregamos una barra de desplazamiento. Nota: el valor por defecto de la propiedad overflow es "visible".
La propiedad clip
Usamos clip cuando queremos recortar una imagen a una medida determinada. Los valores de rect son en este orden (superior derecha inferior izquierda)
Cdigo img { position:absolute; clip:rect (0px 50px 100px 0px) } <img border="0" src="foto3.jpg" width="100px" height="150px">
Resultado
Imagen completa
En el ejemplo, el tamao real de la imagen es de 100x150 pxeles y con la propiedad clip la cortamos a la medida deseada.
La propiedad display
Con display se puede definir el comportamiento del elemento.
Cdigo p{ display:inline } <p>En este ejemplo</p> <p>la propiedad display une dos prrafos en una misma lnea.</p> Resultado
En este ejemplo
la propiedad display une dos prrafos en una misma lnea.
La propiedad visibility
Define si un elemento ser visible o invisible.
Cdigo h3.se_ve{visibility:visible} h3.no_se_ve{visibility:hidden} <h3 class="se_ve">Este texto es visible.</h3> <h3 class="no_se_ve">Este texto es invisible.</h3> Resultado
Este texto es visible. Este texto es invisible.
En este caso tenemos un texto visible y otro invisible.
Propiedades de los efectos visuales

Propiedad Descripcin Valores visible Detalles Visible Oculto Barra de desplazamiento Automtico Longitud superior Longitud derecha Longitud inferior Longitud izquierda Automtico Se muestra en la misma lnea. Se muestra tal cual es. Convierte diferentes elementos en tems de una lista Palabra insertada Ej.
overflow
Comportamiento del contenido hidden si se desborda en la caja. scroll auto Especifica la regin visible del elemento. rect
clip
display
auto Comportamiento del contenedor. inline block list-item run-in
inline-block table inline-table none visible visibility Visibilidad de las cajas. hidden collapse
No funciona en IE 5, 6 y 7 - Firefox Lmite del bloque Est incompleto para IE 5, 6 y 7 - No funciona en Firefox Tabla No funciona en IE 5, 6 y 7 Lmite de la tabla No funciona en IE 5, 6 y 7 No se visualiza Visible Oculto Ventana desplegable No funciona en IE 5, 6 y 7 - Firefox
CSS Ubicacin
La propiedad position
Esta propiedad nos permite posicionar un elemento dentro de la pgina. Por lo general va acompaado de las propiedades: top, right, bottom y left. Sus posibles valores son:
static (esttico) siempre tiene la ubicacin que la pgina da por defecto. relative (relativa) mueve el elemento ralativamente de su posicin normal. absolute (absoluta) posiciona al elemento con coordinadas relativas al bloque que lo contiene. fixed (fija) posiciona al elemento con coordinadas relativas a la ventana del navegador.
La propiedad float
Float define donde ubicar un texto o una imagen dentro de otro elemento. Solo puede ubicarlo a la derecha o a la izquierda del elemento.
Cdigo <html> <head> <style type="text/css">
img {float: right} </style> </head> <body> <p> <img src="v.gif" /> En este ejemplo podemos observar como la imagen se sita a la derecha del texto. A pesar de la extensin del mismo, este rodear a la imagen, tanto por el costado como por debajo de la misma. Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.</p> </body> </html> Resultado
En este ejemplo podemos observar como la imagen se sita a la derecha del texto. A pesar de la extensin del mismo, este rodear a la imagen, tanto por el costado como por debajo de la misma. Texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto, texto.
La propiedad clear
Esta propiedad no permite ubicar a los lados de una foto o texto, ningn otro elemento flotante.
Cdigo <html> <head> <style type="text/css"> img { float: left; clear: both; } </style> </head> <body> <img src="v.gif" /> <img src="v.gif" /> </body> </html>
Resultado
La propiedad vertical-align
Esta propiedad se usa para alinear verticalmente los elementos.
Cdigo <table border="1" with="100%"> <tr> <td>Texto<br>texto<br>texto<br>texto<br>texto<br> texto<br>texto<br></td> <td style="vertical-align:bottom"><img src="v.gif" /> </tr> </table> Resultado Texto texto texto texto texto texto texto
Nota: en este ejemplo alineamos verticalmente el grfico en la parte inferior(bottom) de la tabla.
Propiedades de la ubicacin
Propiedad position top right bottom left float Descripcin Esquema de posicionamiento. Valores static relative absolute fixed longitud % auto left Detalles Esttica Relativa Absoluta Fija Longitud Porcentaje Automtico Izquierda Ej.
Desplazamiento de la caja(respecto al lmite superior, derecho, inferior o izquierdo del contenedor). Posicionamiento flotante.
clear
vertical-align
z-index
right none none left Control de cajas adyacentes a los float. right both baseline sub super top text-top Alineacin vertical del texto. middle bottom text-bottom longitud % entero con signo Solapamiento de niveles de capas. auto
Derecha Nada Nada Izquierda Derecha Ambas Lnea de referencia Por debajo Super Por encima Texto superior Medio Inferior Texto inferior Longitud Porcentaje Entero con signo Automtico
CSS Contenido Generado
Contenido generado con CSS

Los efectos visuales se utilizan entre otras cosas para definir la visibilidad de los elementos y tambin para establecer el comportamiento del contenedor de los elementos.
Propiedades de los Contenidos Generados

Propiedad content Descripcin Valores Agregador de contenido para los pseudo normal elementos ":after y :before". none texto url counter attr(x) open-quote close-quote no-open-quote no-close-quote Detalles Normal Nada Texto URL Contador Apertura de comillas Cierre de comillas Sin apertura de comillas Sin cierre de Ej.
quotes counter-reset
Especifica las marcas para indicar las citas. Inicializa un contador.
counter-increment
Incrementa un contador.
texto none identificador entero none identificador entero none
comillas Texto Nada Identificador entero Nada Identificador entero Nada
CSS Pseudo Clases
Qu son las pseudo clases?

Las pseudo clases se usan junto con el selector para agregarle a este algn efecto especial.
Sintaxis de las pseudo clases

La sintaxis est compuesta por 4 elementos:
selector:pseudo-clase {propiedad:valor} a:link {color:#00FF00}
El elemento <a> y las pseudo clases

Si por ejemplo desea que los enlaces se vean de algn color determinado antes de ser visitados y de un color distinto despus de visitarlos, este sera el codigo a utilizar.
Cdigo <head> <style type="text/css"> a:link {color:#FF0000} /* Color rojo - enlace no visitado */ a:visited {color:#00FF00} /* Color verde - enlace visitado */ </style> </head>
<body> <a href="fin.html">Si presiona el enlace cambiar al color verde</a>. </body> Resultado Si presiona el enlace cambiar al color verde
Propiedades de las pseudo clases

Propiedad :link :visited :active :hover :focus :lang :first-child Descripcin Ej. Enlaces no visitados. Enlaces visitados. Cuando es activado(tiempo entre que se pulsa un botn sobre l y se suelta). Cuando se posiciona el cursor sobre l pero no se activa. Cuando tiene el foco posicionado sobre l. Especifica el lenguaje usado en el elemento. Cuando es el primer hijo de un elemento padre.
CSS Pseudo Elementos
Pseudo Elementos con CSS

Los Pseudo Elementos nos permiten agregar alguna propiedad a un selector. Su sintaxis es muy simple.
selector:pseudo-elemento {propiedad:valor}
CSS cuenta con un total de 4 pseudo elementos.

:first-line (primera lnea) :first-letter (primera letra) :before (antes) :after (despus)
Pseudo Elemento - :first-line
Nos permite agregar alguna propiedad especial a la primera lnea de un texto.

Cdigo p:first-line {text-decoration: underline; color: #FF0000} <p>Este tutorial explica sobre los pseudo elementos en CSS, los tipos que hay y algunos de sus usos. </p> Resultado
Este tutorial explica sobre los pseudo elementos en CSS, los tipos que hay y algunos de sus usos. Solo la primera lnea del prrafo es la que se ver afectada por el pseudo elemento.
:first-line permite solo las siguientes propiedades:

background clear color font letter-spacing line-height text-decoration text-transform vertical-align word-spacing
Pseudo Elemento - :first-letter.

Es usado para agregar una propiedad especial a la primera letra de un texto.
Cdigo p:first-letter {font-style: italic; font-size: xx-large} <p>El pseudo elemento :first-letter.......</p> Resultado
El pseudo elemento :first-letter.......
Observe que el primer carcter del texto es el nico afectado por el pseudo elemento.
:first-letter permite solo las siguientes propiedades:
background border clear color float font
line-height margin padding text-decoration text-transform vertical-align
Pseudo Elemento - :before

Usamos :before cuando queremos poner algn contenido antes que un elemento.
Cdigo p:before {content: url(logo.gif)} <p> Virtualnauta es un sitio dedicado a tutoriales Web.</p> Resultado
Virtualnauta es un sitio dedicado a tutoriales Web.
Nota: debemos usar la propiedad content para agregar los contenidos deseados. En este ejemplo, incorporamos el logo de Virtualnauta antes del texto.
Pseudo Elemento - :after

Al igual que :before , :after es usado para ingresar contenidos pero en este caso despus del elemento.
Cdigo p:after {content: url(logo.gif)} <p>Virtualnauta es un sitio dedicado a tutoriales Web </p> Resultado
Virtualnauta es un sitio dedicado a tutoriales Web
Nota: debemos usar la propiedad content para agregar los contenidos deseados. En el ejemplo podemos observar que el logo aparece despus del prrafo.
Uso de varios pseudo-elementos juntos

Podemos usar varios pseudo elementos para un mismo selector.
Cdigo p:first-line {color: #006699} p:first-letter {font-size: xx-large} <p>Virtualnauta es un sitio dedicado a tutoriales Web. En este tutorial mostramos los diferentes usos de los pseudo elementos.</p> Resultado
Virtualnauta es un sitio dedicado a tutoriales Web. En este tutorial mostramos los diferentes usos de los pseudo elementos.
En este ejemplo, observamos que tanto la primera lnea del texto como la primera letra de la lnea han sido afectadas por los pseudo elementos.
Combinacin de Pseudo Elementos con clases

Los pseudo elementos pueden ser combinados con clases, como en este ejemplo.
Cdigo h2.logo:before {content: url(http://www.virtualnauta.com/graficos/v.gif) } <h2 class="logo">irtualnauta</h2> Resultado
irtualnauta
En este ejemplo, utilizamos la clase "logo" para sealar en que ttulo vamos a anteponer el logo de Virtualnauta.
Propiedades de los pseudo elementos

Propiedad :first-line :first-letter :before :after Descripcin Primera lnea de un texto. Primera letra de un texto. Inserta un contenido antes del elemento. No funciona en IE Inserta un contenido despus del elemento. No funciona en IE Ej.
CSS Tipos de Medios
Tipos de medios con CSS

Los tipos de medios nos especifican cmo debe ser presentado un documento en diferentes medios: en la pantalla, en papel, con un sintetizador de voz, con un dispositivo braille, etc.
Especificaciones de los tipos de medios

Hay dos maneras de especificar las hojas de estilos dependientes de los medios: 1) Desde una hoja de estilo con las reglas: @import o @media
@import url("archivo_de_voz.css") aural; @media print { /* la hoja de estilo para impresin va aqu */ }
2) Especificando el medio de destino dentro del lenguaje del documento:
<html> <head> <title>Vnculo a un medio</title> <link rel="stylesheet" type="text/css" media="print, handheld" href="archivo.css"> </head> <body> <p>Texto, texto, texto</p> </body> </html>
Tipos de medios reconocidos

Tipos all braille embossed handheld print projection screen speech tty tv Descripcin Todos los dispositivos. Dispositivos tctiles braille. Impresoras braille. Dispositivos de mano(pantallas pequeas, ancho de banda reducidos, etc.). Para documentos paginados y mostrados en vista de impresin. Dispositivos de proyeccin de presentaciones. Pantallas a color de equipos informticos. Para sintetizadores de voz. Dispositivos de visualizacin con capacidades limitadas. Televisores.
Gua de Referencia de CSS
Referencias de CSS
Cada tem del men lo vincula a su respectiva Gua de referencia.
Bordes Contenido Generado Dimensiones Efectos Visuales Fondo Fuentes Contornos Listas Mrgenes Ubicacin Relleno Tablas Texto Pseudo-Clases Pseudo-Elementos
Bordes
Propiedad border Descripcin Ancho, color y estilo para los 4 bordes. Valores thin medium thick longitud color transparent none hidden dotted dashed solid double groove ridge inset outset
border-top border-right border-bottom border-left
Ancho, color y estilo para los bordes superior, derecho, inferior, izquierdo.
border-width border-top-width border-right-width border-bottom-width border-left-width border-color border-top-color border-right-color border-bottom-color border-left-color border-style
Ancho de los 4 bordes.
thin medium Ancho del borde superior, derecho, inferior, izquierdo. thick longitud Color de los 4 bordes. color Color del borde superior, derecho, inferior, izquierdo. transparent Estilo de los 4 bordes. none hidden dotted dashed solid Estilo del borde superior, derecho, inferior, izquierdo. double groove ridge inset outset
border-top-style border-right-style border-bottom-style border-left-style
Contenido Generado
Propiedad content Descripcin Agregador de contenido para los pseudo elementos Valores normal
":after y :before".
quotes counter-reset counter-increment
Especificalas marcas para indicar las citas. Inicializa un contador. Incrementa un contador.
none texto URL contador attr(x) open-quote close-quote no-open-quote no-close-quote texto none identificador entero none identificador entero none
Dimensiones
Propiedad width min-width max-width Valores longitud Ancho. % auto longitud Ancho mnimo. % longitud Ancho mximo. % none longitud Alto. % auto longitud Alto mnimo. % longitud Alto mximo. % none normal nmero Altura entre las bases del texto. longitud % Descripcin
height min-height max-height
line-height
Efectos Visuales
Propiedad overflow Descripcin Comportamiento del contenido si se desborda en la caja. Valores visible hidden
clip
Especifica la regin visible del elemento.
display
Comportamiento del contenedor.
visibility
Visibilidad de las cajas.
scroll auto rect(long.superior, long.derecha, long.inferior, long.izquierda) auto inline block list-item run-in inline-block table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption none visible hidden collapse
Fondo
Propiedad Valores background-color background-image Propiedades individuales relacionadas con el fondo. background-repeat background-attachment background-position color Color de fondo. transparent URL Imagen de fondo. none repeat repeat-x Repeticin de la imagen de fondo. repeat-y no -repeat scroll Desplazamiento de la imagen de fondo. fixed Posicin de la imagen de fondo. % longitud Descripcin
background
background-color background-image
background-repeat
background-attachment background-position
left center right top bottom
Fuentes
Propiedad Valores font-style font-variant font-weight font-size font-family Atajo para establecer el resto de propiedades sobre las line height fuentes a la vez. caption icon menu message-box small-caption status-bar nombre-familia Familias de fuentes. familia-genrica normal Estilo de la fuente. italic oblique Convierte las minsculas a maysculas pero normal mantienen un tamao inferior a las maysculas. small-caps normal bold bolder lighter 100 200 Intensidad de la fuente. 300 400 500 600 700 800 900 Tamao de la fuente. xx-small x-small small medium large x-large Descripcin
font
font-family font-style font-variant
font-weight
font-size
xx-large larger smaller longitud %
Contornos
Propiedad outline Valores outline-color Propiedades individuales del contorno. outline-style outline-width thin medium Ancho del contorno. thick longitud none hidden dotted dashed solid Estilo del contorno. double groove ridge inset outset color Color del contorno. invert Descripcin
outline-width
outline-style
outline-color
Listas
Propiedad list-style list-style-type Valores list-style-type Permite establecer el estilo de la lista, la imagen y/o la list-style-position posicin. list-style-image Estilo aplicable a los marcadores visuales de las listas. disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-latin upper-latin Descripcin
list-style-image list-style-position
Imagen aplicable a los elementos de las listas. Posicin dentro de la lista de los elementos marcadores de las listas.
armenian georgian lower-alpha upper-alpha none URL none inside outside
Mrgenes
Propiedad margin margin-top margin-right margin-bottom margin-left Descripcin Ancho para varios mrgenes individuales. longitud % auto longitud % auto Valores
Tamao del margen superior, derecho, inferior e izquierdo.
Ubicacin
Propiedad position top right bottom left float Descripcin Esquema de posicionamiento. static relative absolute fixed Valores
longitud Desplazamiento de la caja(respecto al lmite superior, % derecho, inferior o izquierdo del contenedor). auto Posicionamiento flotante. left right none none left right both baseline sub super top text-top middle
clear vertical-align
Control de cajas adyacentes a los float. Alineacin vertical del texto.
z-index
Solapamiento de niveles de capas.
bottom text-bottom longitud % entero con signo auto
Relleno
Propiedad padding padding-top padding-right padding-bottom padding-left Descripcin Tamaos para varios rellenos individuales. Ancho del relleno superior, derecho, inferior e izquierdo. longitud % longitud % Valores
Tablas
Propiedad caption-side table-layout border-collapse border-spacing empty-cells Descripcin Posicin del ttulo respecto de la tabla. Control del algoritmo usado para el formato de las celdas, filas y columnas. Seleccin del modelo de los bordes. Espaciado entre los bordes de celdas adyacentes. Visibilidad de los bordes de celdas sin contenido. top bottom auto fixed collapse separate longitud show hide Valores
Texto
Propiedad text-indent Descripcin Desplazamiento de la primera lnea del texto. Valores longitud % left right center justify none underline overline line-through
text-align text-decoration
Alineamiento del texto. Efectos de subrayado, tachado, parpadeo.
text-transform
letter-spacing word-spacing
white-space
color direction unicode-bidi
blink capitalize uppercase Transformaciones del texto a maysculas/minsculas. lowercase none normal Espacio entre caracteres. longitud normal Espacio entre palabras. longitud normal pre Comportamiento de los espacios dentro de los nowrap elementos. pre-wrap pre-line Color del primer plano. color ltr Sentido direccional de la escritura. rtl normal Sentido direccional de la escritura. embed bidi-override
Pseudo Clases
Propiedad :link :visited :active :hover :focus :lang :first-child Descripcin Enlaces no visitados. Enlaces visitados. Cuando es activado(tiempo entre que se pulsa un botn sobre l y se suelta). Cuando se posiciona el cursor sobre l pero no se activa. Cuando tiene el foco posicionado sobre l. Especifica el lenguaje usado en el elemento. Cuando es el primer hijo de un elemento padre.
Pseudo Elementos
Propiedad :first-line :first-letter :before :after Descripcin Primera lnea de un texto. Pimera letra de un texto. Inserta un contenido antes del elemento. Inserta un contenido despus del elemento.
CSS Colores
RGB
La paleta de colores RGB(Red-Green-Blue, en espaol: Rojo-Verde-Azul) est representada por tres pares hexadecimales segn el siguiente formato: #RRGGBB Los valores, para cada uno de los pares, van desde 00(0 decimal) a FF(255 decimal). Cuanto mayor sea el valor del par, tanto mayor ser la intensidad de color de ese par. La escala cromtica de intensidad de color es:
mnima (nulo = 00) media (mediano = 80) mxima (saturado = FF)
Tabla simplificadora de colores

Primarios aditivos saturados (absolutos)
Nombre Rojo Verde Azul Blanco Valor hexadecimal #FF0000 #00FF00 #0000FF #FFFFFF Descripcin
Primarios sustractivos nulos (absolutos)

Nombre Cyan Magenta Amarillo Negro Valor hexadecimal #00FFFF #FF00FF #FFFF00 #000000 Descripcin
Secundarios y terciarios (medianos)

Nombre Valor hexadecimal Descripcin
Gris Rosa Violeta Celeste Marrn Naranja Lavanda Turquesa Oro viejo
#808080 #FF8080 #800080 #80FFFF #800000 #FF8000 #8000FF #00FF80 #BBBB20
Los colores estndard

El consorcio W3C (World Wide Web Consortium) tiene una lista de 16 colores que pueden ser validados con el validador de HTML.
Nombre Cyan Gray Navy Silver Black Green Olive Teal Blue Lime Purple White Fuchsia Maroon Red Yellow Valor hexadecimal #00FFFF #808080 #000080 #C0C0C0 #000000 #008000 #808000 #008080 #0000FF #00FF00 #800080 #FFFFFF #FF00FF #800000 #FF0000 #FFFF00 Descripcin
Nombre de los colores en CSS

La tabla de colores
La tabla de colores nos ayudar, a la hora de tener que elegir los colores de nuestro sitio. En cada lnea figuran el nombre del color, el color en cdigo hexadecimal, el color en cdigo decimal y un ejemplo del color. Esta lista de colores es soportada por la gran mayora de navegadores.
Como usar la tabla

Esta tabla le permite ver las diferentes combinaciones de colores entre texto y color de fondo. Al apretar el botn ubicado en cada lnea, el fondo de la tabla cambiar al color de dicha lnea. Nombre del color IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson Red FireBrick DarkRed Pink LightPink HotPink DeepPink MediumVioletRed PaleVioletRed LightSalmon Coral Tomato OrangeRed DarkOrange Orange Gold Yellow LightYellow LemonChiffon Color Hexadecimal #CD5C5C #F08080 #FA8072 #E9967A #FFA07A #DC143C #FF0000 #B22222 #8B0000 #FFC0CB #FFB6C1 #FF69B4 #FF1493 #C71585 #DB7093 #FFA07A #FF7F50 #FF6347 #FF4500 #FF8C00 #FFA500 #FFD700 #FFFF00 #FFFFE0 #FFFACD
Color RGB 205,92,92 240,128,128 250,128,114 233,150,122 255,160,122 220,20,60 255,0,0 178,34,34 139,0,0 255,192,203 255,182,193 255,105,180 255,20,147 199,21,133 219,112,147 255,160,122 255,127,80 255,99,71 255,69,0 255,140,0 255,165,0 255,215,0 255,255,0 255,255,224 255,250,205
Color
LightGoldenrodYellow PapayaWhip Moccasin PeachPuff PaleGoldenrod Khaki DarkKhaki Lavender Thistle Plum Violet Orchid Fuchsia Magenta MediumOrchid MediumPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple Indigo SlateBlue DarkSlateBlue GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen MediumSeaGreen SeaGreen ForestGreen Green DarkGreen YellowGreen OliveDrab Olive DarkOliveGreen
#FAFAD2 #FFEFD5 #FFE4B5 #FFDAB9 #EEE8AA #F0E68C #BDB76B #E6E6FA #D8BFD8 #DDA0DD #EE82EE #DA70D6 #FF00FF #FF00FF #BA55D3 #9370DB #8A2BE2 #9400D3 #9932CC #8B008B #800080 #4B0082 #6A5ACD #483D8B #ADFF2F #7FFF00 #7CFC00 #00FF00 #32CD32 #98FB98 #90EE90 #00FA9A #00FF7F #3CB371 #2E8B57 #228B22 #008000 #006400 #9ACD32 #6B8E23 #808000 #556B2F
250,250,210 255,239,213 255,228,181 255,218,185 238,232,170 240,230,140 189,183,107 230,230,250 216,191,216 221,160,221 238,130,238 218,112,214 255,0,255 255,0,255 186,85,211 147,112,219 138,43,226 148,0,211 153,50,204 139,0,139 128,0,128 75,0,130 106,90,205 72,61,139 173,255,47 127,255,0 124,252,0 0,255,0 50,205,50 152,251,152 144,238,144 0,250,154 0,255,127 60,179,113 46,139,87 34,139,34 0,128,0 0,100,00 154,205,50 107,142,35 128,128,0
MediumAquamarine DarkSeaGreen LightSeaGreen DarkCyan Teal Aqua Cyan LightCyan PaleTurquoise Aquamarine Turquoise MediumTurquoise DarkTurquoise CadetBlue SteelBlue LightSteelBlue PowderBlue LightBlue SkyBlue LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue MediumSlateBlue RoyalBlue Blue MediumBlue DarkBlue Navy MidnightBlue Cornsilk BlanchedAlmond Bisque NavajoWhite Wheat BurlyWood Tan RosyBrown SandyBrown Goldenrod DarkGoldenrod Peru
#66CDAA #8FBC8F #20B2AA #008B8B #008080 #00FFFF #00FFFF #E0FFFF #AFEEEE #7FFFD4 #40E0D0 #48D1CC #00CED1 #5F9EA0 #4682B4 #B0C4DE #B0E0E6 #ADD8E6 #87CEEB #87CEFA #00BFFF #1E90FF #6495ED #7B68EE #4169E1 #0000FF #0000CD #00008B #000080 #191970 #FFF8DC #FFEBCD #FFE4C4 #FFDEAD #F5DEB3 #DEB887 #D2B48C #BC8F8F #F4A460 #DAA520 #B8860B #CD853F
102,205,170 143,188,143 32,178,170 0,139,139 0,128,128 0,255,255 0,255,255 224,255,255 175,238,238 127,255,212 64,224,208 72,209,204 0,206,209 95,158,160 70,130,180 176,196,222 176,224,230 173,216,230 135,206,235 135,206,250 0,191,255 30,144,255 100,149,237 123,104,238 65,105,225 0,0,255 0,0,205 0,0,139 0,0,128 25,25,112 255,248,220 255,235,205 255,228,196 255,222,173 245,222,179 222,184,135 210,180,140 188,143,143 244,164,96 218,165,32 184,134,11 205,133,63
Chocolate SaddleBrown Sienna Brown Maroon White Snow Honeydew MintCream Azure AliceBlue GhostWhite WhiteSmoke Seashell Beige OldLace FloralWhite Ivory AntiqueWhite Linen LavenderBlush MistyRose Gainsboro LightGrey Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black
#D2691E #8B4513 #A0522D #A52A2A #800000 #FFFFFF #FFFAFA #F0FFF0 #F5FFFA #F0FFFF #F0F8FF #F8F8FF #F5F5F5 #FFF5EE #F5F5DC #FDF5E6 #FFFAF0 #FFFFF0 #FAEBD7 #FAF0E6 #FFF0F5 #FFE4E1 #DCDCDC #D3D3D3 #C0C0C0 #A9A9A9 #808080 #696969 #778899 #708090 #2F4F4F #000000
210,105,30 139,69,19 160,82,45 165,42,42 128,0,0 255,255,255 255,250,250 240,255,240 245,255,250 240,255,255 240,248,255 248,248,255 245,245,245 255,245,238 245,245,220 253,245,230 255,250,240 255,255,240 250,235,215 250,240,230 255,240,245 255,228,225 220,220,220 211,211,211 192,192,192 169,169,169 128,128,128 105,105,105 119,136,153 112,128,144 47,79,79 0,0,0

Introducción Al CSS

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introducción Al CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Introduccin al CSS

Conocimientos previos que debe poseer.

Por qu trabajar con Hojas de Estilo?

Cmo se estructura CSS?

</p> <p class="rojo"> Este texto es de color rojo. </p>

Cmo se usan los estilos?

Dnde se ubican los estilos?

Hay 3 formas de insertar una hoja de estilos:

Este prrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.

2. Hojas de estilo interna

Este texto es de color blanco y el color de fondo de la pagina es #008080.

3. Hojas de estilo externas

El fondo con CSS

El fondo es de color rojo

Ejemplo de una imagen de fondo

Qu pasa si la imagen es ms pequea que el tamao del fondo?

este sera el resultado:

La imagen se repite hasta cubrir todo el fondo

Propiedades del fondo

Los textos con CSS

La primer palabra del texto comienza a un centmetro del borde.

Enlace sin subrayar

Este enlace no est subrayado.

Texto centrado y con un espaciado de 4px entre letras.

Propiedades de los textos

Transformaciones del texto a maysculas/minsculas.

Color del primer plano. Sentido direccional de la escritura.

pre-line color ltr rtl normal

embed unicode-bidi Sentido direccional de la escritura.

as fuentes con CSS

Tipo de fuente : sans-serif.

Intensidad de las fuentes

Intensidad de la fuente : bold(negrita).

Tamao de las fuentes

<p style="font-size:smaller">Tamao:smaller</p> </body> </html> Resultado

Propiedades de las fuentes

font-size/line height Tamao de la fuente

Bordes con CSS

Tabla de las propiedades de los bordes

Sombreado En relieve Insercin Resalte Fino Mediano Grueso

Contornos con CSS

Este texto tiene una lnea de puntos alrededor.

Nota: los contornos no funcionan en el navegador Internet Explorer.

Un ejemplo de ancho y color

Este texto tiene un contorno grueso de color rojo.

Tabla de las propiedades de las lneas exteriores

Mrgenes con CSS

Texto, texto, texto, texto, texto, texto, texto.

Texto separado 30 pxeles del texto.

Tabla de las propiedades de los mrgenes

Relleno con CSS

Texto, texto, texto, texto, texto, texto, texto.

Texto separado 30 pxeles del los bordes.

Tabla de las propiedades del relleno

Listas con CSS

Lista ordenada con nmeros romanos

Lista sealada con cuadrados

Uso de una imagen

Lista sealada con un grfico

Tabla de las propiedades de las listas

Tablas con CSS

Ubicacin del ttulo

Nota: Internet Explorer ubica el ttulo siempre por encima de la tabla.