Manual Css Completo

MANUAL CSS COMPLETO.FUENTE: http://www.virtualnauta.com/css-homeRECOPILACIN: LUIS ALBERTO SNCHEZ MENA

CSS BSICOQu es CSS?CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe como se va a presentar un documento en la pantalla, en un dispositivo de sonido,como se va a imprimir, en un dispositivo braille, aparatos moviles, etc. CSS nos permite posicionar el contenido, disear tablas, definir caratersticas para sitios en diferentes idiomas y propiedades relacionadas con la comunicacin del usuario.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.Conocimientos previos que debes poseer.Antes de comenzar con este tutorial es recomendable tener conocimientos bsicos de HTML/XHTML.

Si deseas estudiar HTML, dirjete al tutorial de HTML.Por qu trabajar con Hojas de Estilo?Las hojas de estilo nos ahorran mucho trabajo. La manera correcta de trabajar es separando el contenido de cada pgina, del diseo de la misma. 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.La sintaxis de CSSComenzamos con la sintaxis bsica de CSS y como agregar un comentario.La estructura de CSSCSS 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. La declaracin debe estar definida entre llaves({...})Sintaxisselector{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.p{color:blue}

Si el valor est compuesto por varias palabras, debemos definirlo entre comillas.p{font-family:"Times New Roman"}

Si deseas especificar ms de una propiedad, debers separarlas con un punto y coma(;).h1{color:red; text-align:center}

Para definir los estilos de forma ms clara y fcil de leer, puedes describir cada propiedad en diferentes lneas.p{color:red;text-align:center;}

Si deseas definir una misma propiedad para varios selectores, solo debe agruparlos separndolos con una coma(,)p, h1, h2, h3 {color:blue;font-family:Arial;}

El selector classCon 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. El valor del selector class debe ir antepuesto por un punto (.)Sintaxisp.azul {color:blue}p.rojo {color:red}

Ejemplo

Y as se vera en el documento HTML.

< style type="text/css">p.azul {color:blue}p.rojo {color:red}< /style>< /head>

< body>Este texto es de color azulEste texto es de color rojo< /body> ResultadoEste texto es de color azulEste texto es de color rojo

Con el selector class tambin podemos definir diferentes estilos para cualquier elemento HTML.Por ejemplo definimos un class rojo y uno azul.Sintaxis.azul {color:blue}.rojo {color:red}

Ejemplo

Por ejemplo definimos un class rojo y lo utilizamos en dos ocasiones.

< style type="text/css">.azul {color:blue}.rojo {color:red}< /style>< /head>

< body>Este ttulo es de color rojoEste texto es de color azulY este texto es de color rojo< /body> ResultadoEste ttulo es de color rojoEste texto es de color azulY este texto es de color rojo

El selector IDEl selector id se utiliza para definir un atributo el cual tiene un valor nico en todo el documento. Hacemos referencia a l anteponiendo el smbolo "#".Sintaxis#centrado {text-align:center} /* afecta a cualquier elemento que lo use */h3#subrayado {text-decoration:underline} /* afecta solo al elemento h3 */Ejemplo

Definimos un id general y uno para un selector en particular.

< style type="text/css">#centrado {text-align:center}h3#subrayado {text-decoration:underline}< /style>< /head>

< body>Ttulo centradoTtulo subrayadoTexto centradoEl selector id no afecta al elemento p ya que el mismo no ha sido definido como texto subrayado< /body> ResultadoTtulo centradoTtulo subrayadoTexto centradoEl selector id no afecta al elemento p ya que el mismo no ha sido definido como texto subrayado

Comentarios en CSSPara 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 debemos utilizar CSS y cmo funciona en cada lugar?Dnde usar 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 lneas2. Dentro de la seccin Head3. Hojas de estilo externas1. Entre lneasDefinimos el estilo directamente dentro del cdigo HTML.Sintaxis

Debemos usar esta forma cuando un nico estilo es aplicado a un solo elemento.Su uso est dado por el atributo style.Ejemplo

Vamos a aplicar un estilo "solo" al elemento p de esta lnea.

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

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

2. Dentro de la seccin HeadLas hojas de estilo interna deben usarse cuando una pgina tiene un estilo nico.Sintaxis

selector 1 {propiedad: valor;}selector 2 {propiedad: valor;}

Bla, bla, blaTexto, texto, texto

La etiqueta en la cabecera del documento entre las etiquetas y se usa para definir los estilos correspondientes a esta pgina solamente.Ejemplo

Vamos a aplicar estilos a aquellos elementos definidos en la seccin Head solo de "esta" hoja.

body {background-color:#008080}p {color:white}

Este texto es de color blancoy el color de fondode la pgina es #008080.

ResultadoEste texto es de color blanco y el color de fondo de la pgina es #008080.

En este ejemplo se muestra que la etiqueta con su atributo type define una hoja de estilo.

Entre las etiquetas style definimos al selector body con un color de fondo #008080 y al selector p de color blanco.

3. Hojas de estilo externasEsta 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.Los archivos de hojas de estilo deben llevar la terminacin .css.SintaxisContenido del archivo de los estilosselector{propiedad:valor; /* No olvidar el (;) al final de cada valor */propiedad:valor; propiedad:valor; }SintaxisEsta es la forma de llamar al archivo ".css" desde un documento HTML

Cada pgina del sitio debe vincularse con la hoja de estilos usando la etiqueta ubicada en la cabecera del documento. 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.Ejemplo

As se vera por ejemplo, un archivo CSS externo que llamaremos "estilos.css".Nota: el cdigo, en los archivos de hojas de estilos externos, comienza directamente con el selector.

Cdigo CSSp{font-family:Arial;font-size:12px;font-weight:bold;}

As se vera el documento HTML que llama al archivo "estilos.css".

Cdigo HTML

Caractersticas de este texto: Arial, de 12 pixels, bold

ResultadoCaractersticas de este texto: Arial, de 12 pixels, bold

CSS Background - FondoDecora el fondo de pantalla de tu sitio con colores o imgenes.

El fondo con CSSLas propiedades de fondo(en ingls background) en CSS, nos permiten controlar el color de fondo de un elemento. Colocar una imagen de fondo, la ubicacin de la misma en la pantalla (centrada, a la izquierda, en alguna coordenada de x-y, etc.) y la cantidad de veces que la misma se repetir. En trminos del modelo de cajas la propiedad background afecta tanto al fondo del elemento, al relleno del mismo (padding) y a los bordes (border).Las propiedades de background se aplican a todos los elementos

La propiedad de los fondos o backgroundsLa propiedad background es la forma comprimida en la cual podemos definir todos los valores de los fondo de una sola vez.SintaxisEstablecer diferentes caractersticas del fondo a la ves.

selector {background: valor 1 valor 2} Nota: debemos dejar un espacio en blanco entre los valoresLos posibles valores para definir los fondoscolor | transparent | URL | none | repeat | repeat-x | repeat-y | no-repeat | no-repeat | fixed | % | longitud | left | center | right | top | bottomEjemplo

Vamos a aplicar un fondo rojo al elemento h2 de esta pgina.

h2{background:red}

El fondo del ttulo es rojo. ResultadoEl fondo del ttulo es rojo.

Aplicar color al fondoLa propiedad background-color especifica el color de fondo del elemento.SintaxisEstablecer el color de fondo.

etiqueta HTML {background-color: valor} Los posibles valores para definir los colores del fondocolor | transparentEjemplo

Vamos a aplicar un color de fondo a la pgina.

body{background-color:orange}

El fondo de la pgina es naranja. ResultadoEl fondo de la pgina es naranja.

Decorar el fondo con una imagenLa propiedad background-image inserta una imagen como fondo del elemento.SintaxisInsertar una imagen de fondo.

etiqueta HTML {background-image: url("nombre-de-la-imagen")} Los posibles valores para la insercin de imgenes de fondourl | noneEjemplo

Vamos a usar una imagen de fondo en nuestra pgina.

body{background-image:url("fondo3.jpg")}

Ejemplo de una imagen de fondo ResultadoEjemplo de una imagen de fondo

Imagen ms pequea que el tamao del fondoSi la imagen que elegimos de fondo es ms pequea que este, podemos repetir la imagen horizontalmente o verticalmente hasta cubrir todo el fondo. Para ello utilizamos la propiedad background-repeat.SintaxisRepetir una imagen de fondo.

etiqueta HTML { background-image: url('/nombre-de-la-imagen'); background-repeat: valor; } Los posibles valores para la repeticin de una imagen en el fondorepeat | repeat-x | repeat-y | no-repeatEjemplo

Vamos a usar esta imagen de fondo en nuestro ejemplo.

body {background-image:url("images/fondo.png");background-repeat:repeat;}

Repeticin de una imagen de fondo ResultadoRepeticin de una imagen de fondo

Imagen de fondo esttica o dinmicaLa propiedad background-attachment nos permite fijar o liberar una imagen de fondo, es decir que al movernos por la pgina con la barra de desplazamiento, la imagen de fondo quede anclada en el lugar o se desplaze con la misma.SintaxisImagen de fondo esttica o dinmica.

etiqueta HTML { background-image: url('/nombre-de-la-imagen'); background-attachment: valor;} Los posibles valores para esta propiedadfixed | scroll

Elije el lugar exacto para ubicar la imagen de fondoLa propiedad background-position nos permite ubicar una imagen en un lugar especfico dentro del fondo.Sintaxis

etiqueta HTML { background-image: url('/nombre-de-la-imagen'); background-position: valor; } Los posibles valores para la ubicacin exacta de la imagen en el fondo% | coordinadas x-y | left | center | right | top | bottomEjemplo

Vamos a usar una imagen y la ubicaremos en alguna coordenada dentro del fondo.

body {background-image: url("images/fondo.jpg");background-repeat: no-repeat;background-position: 60px 100px;}

Imagen en las coordenadas x=60px y=100px ResultadoImagen en las coordenadas x=60px y=100px

Propiedades del fondoPropiedadDescripcinValoresDetallesEj.

backgroundPropiedades individuales relacionadas con el fondo.background-colorColor de fondo

background-imageImagen de fondo

background-repeatRepeticin del fondo

background-attachmentAcoplamiento del fondo

background-positionPosicin del fondo

background-colorColor de fondo.colorColor

transparentTransparente

background-imageImagen de fondo.URLDireccin URL

noneNada

background-repeatRepeticin de la imagen de fondo.repeatRepite

repeat-xRepite horizontalmente

repeat-yRepite verticalmente

no-repeatNo se repite

background-attachmentDesplazamiento de la imagen de fondo.scrollDesplaza

fixedFija

background-positionPosicin de la imagen de fondo.%Porcentaje

longitudLongitud

leftIzquierda

centerCentro

rightDerecha

topSuperior

bottomInferior

CSS TextosTransforma, decora y alnea los textos de tu sitio para hacerlos ms claros para la lectura.

Los textos con CSSLas propiedades de los textos nos permiten controlar la apariencia de los mismos. Entre los ajustes que podemos aplicar a los textos, tenemos:1. La sangra2. El alineado3. La decoracin4. Espacio entre letras5. Espacio entre palabras6. Maysculas y minsculas7. Espacios en blando

Sangra de los textos - text-indentLa propiedad text-indent se utiliza para generar sangra en la primera lnea de un texto.Sintaxis

selector {text-indent: valor}

Los posibles valores para definir la sangralongitud | % Ejemplo

Vamos a ver como se comporta un texto con sangra.

< style type="text/css">p{text-indent:2cm}< /style>< /head>

< body>En la primera lnea de este prrafo observamos una sangra de 2 centmetros de distancia del borde.< /body>ResultadoEn la primera lnea de este prrafo observamos una sangra de 2 centmetros de distancia del borde.

Alineado de los textos - text-alignLa propiedad text-align se utiliza para alinear un texto a la derecha, izquierda o centro del bloque que lo contiene.Sintaxis

selector {text-align: valor} Los posibles valores para alinear los textosleft | right | center | justifyEjemplo

Alineamos un texto a la derecha y otro en el centro.

< style type="text/css">p.der{text-align:right}p.cen{text-align:center}< /style>< /head>

< body>Texto a la derechaTexto en el centro< /body> ResultadoTexto a la derechaTexto en el centro

La decoracin de los textos - text-decorationLa propiedad text-decoration se utiliza para subrayar, tachar, remarcar con una lnea superior o parpadear un texto.Sintaxis

selector {text-decoration: valor} Los posibles valores para decorar los textosnone | underline | overline | line-through | blinkEjemplo

Definimos un texto parpadeante y un enlace sin subrayar.

< style type="text/css">p.parpadeo{text-decoratio:blink}a.sin_linea{text-decoration:none}< /style>< /head>

< body>Texto parpadeando

Ir a la home de Virtualnauta< /body> ResultadoTexto parpadeandoIr a la home de Virtualnauta

Separacin entre letras - letter-spacingLa propiedad letter-spacing se utiliza para definir la distancia que queremos dejar entre letra y letra de un mismo texto.Sintaxis

selector {letter-spacing: valor} Los posibles valores para esta propiedadnormal | distanciaEjemplo

Vamos definir una distancia entre letras de 5 pxeles.

< style type="text/css">p{letter-spacing:5px}< /style>< /head>

< body>La distancia entre letras es de 5 pxeles< /body> ResultadoLa distancia entre letras es de 5 pxeles

Separacin entre palabras - word-spacingLa propiedad word-spacing se utiliza para definir la distancia que queremos dejar entre palabras.Sintaxis

selector {word-spacing: valor} Los posibles valores para esta propiedadnormal | distanciaEjemplo

Vamos definir una distancia entre palabras de 2 centmetros.

< style type="text/css">p{word-spacing:2cm}< /style>< /head>

< body>La distancia entre palabras es de 2 centmetros< /body> ResultadoLa distancia entre palabras es de 2 centmetros

Transformar los textos a maysculas o minsculas - text-transformLa propiedad text-transform se utiliza para convertir un texto a maysculas o minsculas.Sintaxis

selector {text-transform: valor} Los posibles valores para convertir los textoscapitalize | uppercase | lowercase | noneEjemplo

Vamos definir la primera letra de cada palabra en maysculas.

< style type="text/css">p{text-transform:capitalize}< /style>< /head>

< body>La primera letra de cada palabra se a convertidoa maysculas< /body> ResultadoLa primera letra de cada palabra se a convertido a maysculas

Espacios en blanco - white-spaceLa propiedad white-space se utiliza para manipular el comportamiento de los espacios en blanco dentro de cada elemento.Sintaxis

selector {white-space: valor} Los posibles valores para esta propiedadnormal | pre | nowrap | pre-wrap | pre-lineEjemplo

Vamos ver el comportamiento de los espacios en blanco dentro de un texto.

< style type="text/css">p.pre{white-space:pre-wrap}p.normal{white-space:normal}< /style>< /head>

< body>Dejo varios espacios enblanco entre palabra y palabra.Aca tambindejo variosespacios enblanco entrepalabra ypalabra perolos comprimeauno solo.< /body> ResultadoDejo varios espacios en blanco entre palabra y palabra.Aca tambin dejo varios espacios en blanco entre palabra y palabra pero los comprime a uno solo.

Propiedades de los textosPropiedadDescripcinValoresDetallesEj.

text-indentDesplazamiento de la primera lnea del texto.longitudLongitud

%Porcentaje

text-alignAlineamiento del texto.leftIzquierda

rightDerecha

centerCentro

justifyJustificar

text-decorationEfectos de subrayado, tachado, parpadeo.noneSin efectos

underlineSubrayado

overlineLnea por encima

line-throughTachado

blinkParpadeo

text-transformTransformaciones del texto a maysculas/minsculas.capitalizeConvierte en mayscula el primer carcter de cada palabra

uppercaseConvierte en mayscula todas las letras del elemento

lowercaseConvierte en minscula todas las letras del elemento

noneNeutraliza el valor heredado

letter-spacingEspacio entre caracteres.normalNormal

longitudLongitud

word-spacingEspacio entre palabras.normalNormal

longitudLongitud

white-spaceComportamiento de los espacios dentro de los elementos.normalNormal

prePreformateado

nowrapLos cambios de lnea solo ocurren con el elemento br

pre-wrap

pre-line

directionSentido direccional de la escritura.ltrIzquierda a derecha

rtlDerecha a izquierda

unicode-bidiSentido direccional de la escritura.normalNormal

embedAbre un nivel adicional de incrustacin con respecto al algoritmo bidireccional

bidi-overrideSi el elemento es a nivel de lnea o es un elemento a nivel de bloque, crea una sustitucin

CSS Fonts - FuentesElige la familia, el estilo, el peso y el tamao de las fuentes de tu sitio.

Las fuentesLas propiedades de las fuentes nos permiten controlar la apariencia de las mismas. Posiblemente la definicin de las fuentes sea el uso ms comn de CSS. Entre los ajustes que podemos aplicar a las fuentes, tenemos:1. La familia2. La intensidad3. El estilo4. El tamao5. La variante6. La definicin general

Familia de fuentes - font-familyPara 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.).Sintaxis selector {font-family: familia de fuente, familia de fuente genrico} Nota: debemos utilizar comas entre los valores.Los posibles valores para definir las familias de fuentesLas ms comunes | arial | Verdana | Helvetica | "Times New Roman" | Courier | UniversLos posibles valores para definir las familias de fuentes genricoserif | sans-serif | cursive | fantasy | monospaceEjemplo

Vamos a definir una familia para una fuente.

< style type="text/css">p{font-family:"Times New Roman", serif}< /style>< /head>

< body>La familia de esta fuente es Times New Roman.< /body> ResultadoLa familia de esta fuente es Times New Roman.

Intensidad de las fuentes - font-weightUna caracterstica muy til es el control de la intensidad de las fuentes. Para ello utilizamos la propiedad font-weight.Sintaxis

selector {font-weight: valor} Los posibles valores para definir los fondosnormal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900Ejemplo

Vamos a aplicar intensidad a las fuentes del elemento h2 de esta pgina.

< style type="text/css">h2{font-weight:lighter}< /style>< /head>

< body>La intensidad de este texto es lighter.< /body> ResultadoLa intensidad de este texto es lighter.

Estilo de las fuentes - font-styleLa propiedad font-style nos sirve para definir un estilo normal, oblicuo o italic.Sintaxis

selector {font-style: valor1} Los posibles valores para definir los estilosnormal | italic | obliqueEjemplo

Vamos a definir el estilo del elemento h3 de este ejemplo.

< style type="text/css">h3{font-style:oblique}< /style>< /head>

< body>El estilo de este ttulo es oblique.< /body> ResultadoEl estilo de este ttulo es oblique.

Tamao de las fuentes - font-sizeControlar el tamao de las fuentes suele ser de mucha utilidad. La propiedad encargada de eso es font-size.Sintaxis

selector {font-size: valor} Los posibles valores para definir el tamao de las fuentesxx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | tamao | %Ejemplo

Vamos a ver como se comporta cada uno de los valores de la propiedad font-size.

Tamao:xx-smallTamao:x-smallTamao:smallTamao:mediumTamao:largeTamao:x-largeTamao:xx-largeTamao:largerTamao:smaller ResultadoTamao:xx-smallTamao:x-smallTamao:smallTamao:mediumTamao:largeTamao:x-largeTamao:xx-largeTamao:largerTamao:smaller

Variante de las fuentes - font-variantUna variacin que se le puede dar a las fuentes es el de usar pequeas maysculas, para eso usamos de la propiedad font-variant.Sintaxis

selector {font-variant: valor} Los posibles valores para definir las variantes de las fuentesnormal | small-capsEjemplo

Vamos a variar las fuentes de este ttulo h2.

< style type="text/css">h2{font-variant:small-caps}< /style>< /head>

< body>El texto esta escrito en minscula.< /body> ResultadoEl texto esta escrito en minscula.

La propiedad de las fuentes - fontLa propiedad font es la forma comprimida en la cual podemos definir todos los valores de las fuentes de una sola vez. Esta propiedad se aplica a todos los elementos.Sintaxis

selector {font: valor1 valor2 valor n} Nota: debemos dejar un espacio en blanco entre los valores.Los posibles valores para definir las fuentesTodos los valores de font-family | font-style | font-variant | font-weight | font-size | caption | icon | menu | message-box| small-caption | status-barEjemplo

Vamos a definir un tipo de fuente para p.

< style type="text/css">p{font:large Palatino bold italic}< /style>< /head>

< body>El tipo de fuente es Palatino large bold en italic.< /body> ResultadoEl tipo de fuente es Palatino large bold en italic.

Propiedades de las fuentesPropiedadDescripcinValoresDetallesEj.

fontAtajo para establecer el resto de propiedades sobre las fuentes a la vez.font-styleEstilo de fuente

font-variantVariante de fuente

font-weightPeso de la fuente

font-sizeTamao de la fuente

font-familyFamilia de fuentes

captionFuente a utilizar en los botones, mens desplegables, etc.

iconcono

menuFuente de los mens desplegables

message-boxFuente de las caja de mensajes

small-captionPequea leyenda

status-barFuentes de la barra de estado

font-familyFamilias de fuentes.nombre-familiaNombre de la familia de fuentes

familia-genricaFamilia genrica

font-styleEstilo de la fuente.normalEstilo normal

italicItlica

obliqueOblicua

font-variantConvierte las minsculas a maysculas pero mantienen un tamao inferior a las maysculas.normalNormal

small-capsMaysculas pequeas

font-weightIntensidad de la fuente.normalNormal

boldNegrita

bolderNegrita mas fuerte

lighterSuave

100Valor 100

200Valor 200

300Valor 300

400Valor 400

500Valor 500

600Valor 600

700Valor 700

800Valor 800

900Valor 900

font-sizeTamao de la fuente.xx-smallXX-Pequea

x-smallX-Pequea

smallPequea

mediumMediana

largeGrande

x-largeX-Grande

xx-largeXX-Grande

largerMxima

smallerMnima

tamaoTamao

%Porcentaje

CSS ContornosAgrega un contorno a los textos para resaltarlos, decora botones y formularios.

Contornos con CSS

Los contornos o outlines son lneas que se encuentran alrededor de objetos visuales tales como botones, formularios activos o mapeado de imgenes. Los contornos se diferencian de los bordes en: Los contornos no ocupan espacio Los contornos no necesariamente son rectangularesUn contorno definido con la propiedad outline es dibujado "fuera" de la caja y siempre se encuentra por encima del elemento y no afecta a las cajas anexas a este.

El espesor de los contornosLa propiedad outline-width especifica el espesor del contorno. Esta propiedad se puede aplicar a todos los elementos.Sintaxis

selector {outline-width: valor} Los posibles valores para definir el espesor de los contornosthin | medium | thick | tamao (px, pc, pt, mm, cm, in)Ejemplo

Vamos a aplicar un espesor determinado para el contorno de un botn.

button {outline-width: 3px;outline-style: solid;}

< body>Enviar< /body> ResultadoEnviar

Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style

El estilo de los contornosLa propiedad outline-style especifica el estilo del contorno. Esta propiedad se puede aplicar a todos los elementos.Sintaxis selector {outline-style: valor} Los posibles valores para definir el estilo de los contornosnone | dotted | dashed | solid | double | groove | ridge | inset | outsetEjemplo

Vamos a aplicar un estilo determinado para el contorno de un botn.

< style type="text/css">button{outline-style: dotted;}< /style>< /head>

El color de los contornosLa propiedad outline-color especifica el color del contorno. Esta propiedad se puede aplicar a todos los elementos.Sintaxis selector {outline-color: valor} Los posibles valores para definir el estilo de los contornoscolor | invertEjemplo

Vamos a definir un color determinado para el contorno de un texto.

< style type="text/css">p{outline-color: blue;outline-style: solid;}< /style>

< body>Texto rodeado de un contorno de color azul< /body> ResultadoTexto rodeado de un contorno de color azul

Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style

La propiedad general de los contornosLa propiedad outline especifica todas las propiedades de los contornos de una sola vez.Sintaxis selector {outline: valor-1 valor-2 valor-n} Los posibles valores para la propiedad outlinethin | medium | thick | tamao (px, pc, pt, mm, cm, in) | none | dotted | dashed | solid | double | groove | ridge | inset | outset | color | invertEjemplo

Vamos a aplicar todos los valores al contorno de un botn.

< style type="text/css">button{outline: groove red thick}< /style>

PropiedadDescripcinValoresDetallesEj.

outlinePropiedades individuales de los contornos.No funciona en IE 5, 6 y 7outline-colorColor de la lnea

outline-styleEstilo de la lnea

outline-widthAncho de la lnea

outline-widthAncho del contorno.No funciona en IE 5, 6 y 7thinFino

mediumMedio

thickGrueso

longitudLongitud

outline-styleEstilo del contorno.No funciona en IE 5, 6 y 7noneNada

hiddenOculta

dottedPunteada

dashedLneas de rayas

solidSolida

doubleDoble

grooveAcanalado

ridgeEn relieve

insetRecuadro

outsetResalte

outline-colorColor del contorno.No funciona en IE 5, 6 y 7colorColor

invertColor inverso al color de fondo

CSS ListasDefine que aspecto le quieres dar a las listas de tu sitio: numerado, con letras, nmeros romanos, un pequeo grfico, etc.

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.

El tipo de estilo de las listasLa propiedad list-style-type especifica el formato visual de la lista. Esta propiedad se aplica a todo elemento con "display: list-item".Sintaxisselector {list-style-type: valor} Los posibles valores para definir el estilo de las listasdisc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | noneEjemplo

Vamos a aplicar un estilo a una lista.

< style type="text/css">ol{list-style-type: lower-latin}

< /head>

< body>

JavaScript

Resultado1. HTML2. CSS3. JavaScript

Listas con imgenesLa propiedad list-style-image define la imagen que va a ser usada como marca de cada tem. Esta propiedad se aplica a todo elemento con "display: list-item".Sintaxisselector {list-style-image: valor} Los posibles valores para definir las imgenes de las listasURL | noneEjemplo

Vamos a aplicar una imagen a una lista.

< style type="text/css">ul{list-style-image: url("punto.gif")}

< /head>

< body>

VBScript

Resultado XML VBScript AJAX

La posicin de la marca en la listaLa propiedad list-style-position especifica la posicin del marcador de los tems con respecto a la caja de la lista.Esta propiedad se aplica a todo elemento con "display: list-item".Sintaxisselector {list-style-position: valor} Los posibles valores para definir la posicin de los marcadoresinside | outsideEjemplo

Vamos a ubicar los marcadores en diferentes posiciones.

< style type="text/css">ul.dentro{list-style-position: inside}ul.fuera{list-style-position: outside}

< /head>

< body>

Primer elemento de la lista

Segundo elemento de la lista

Tercer elemento de la lista

Primer elemento de la lista

Segundo elemento de la lista

Tercer elemento de la lista

< /body> Resultado Primer elemento de la lista Segundo elemento de la lista Tercer elemento de la lista

Primer elemento de la lista Segundo elemento de la lista Tercer elemento de la lista

Todas las propiedades de las listasLa propiedad list-style se usa para definir todos los valores de las listas a la vez.Sintaxisselector {list-style: valor1 valor2 valor-n } Los posibles valores para definir las imgenes de las listasdisc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | URL | none | inside | outsideEjemplo

Vamos a aplicar diferentes propiedades a una lista.

< style type="text/css">ul{list-style: square inside}

< /head>

< body>

VBScript

Resultado XML VBScript AJAX

Tabla de las propiedades de las listasPropiedadDescripcinValoresDetallesEj.

list-stylePermite establecer el estilo de la lista, la imagen y/o la posicin.list-style-typeTipos de listas

list-style-positionPosicin de la lista

list-style-imageImagen de la lista

list-style-typeEstilo aplicable a los marcadores visuales de las listas.discDisco

circleCrculo

squareCuadrado

decimalNro.decimal

decimal-leading-zeroNro.decimal comenzando de 0No funciona en IE 5, 6 y 7

lower-romanNro.romano minscula

upper-romanNro.romano mayscula

lower-greekLetra griega minsculaNo funciona en IE 5, 6 y 7

lower-latinLetra latina minsculaNo funciona en IE 5, 6 y 7

upper-latinLetra latina maysculaNo funciona en IE 5, 6 y 7

armenianLetra armeniaNo funciona en IE 5, 6 y 7

georgianLetra gregorianaNo funciona en IE 5, 6 y 7

lower-alphaLetra alfabeto en minscula

upper-alphaLetra alfabeto en mayscula

noneNada

list-style-imageImagen aplicable a los elementos de las listas.URLURL

noneNada

list-style-positionPosicin dentro de la lista de los elementos marcadores de las listas.insideDentro

outsideFuera

Tablas CSSAprenda como definir el tamao de las tablas, espacio entre celdas, o la ubicacin del ttulo con CSS.

Tablas con CSSLas propiedades de las tablas nos permiten definir el comportamiento, el diseo y la ubicacin de los elementos que componen cada tabla. Los temas que estudiaremos:1. La ubicacin del ttulo2. El formato de las tablas3. El modelo de los bordes4. El espacio entre celdas5. El comportamiento de las celdas vacas

Ubicacin del ttuloLa propiedad caption-side nos permite ubicar el ttulo de la tabla por encima o por debajo de la misma. La alineacin horizontal del mismo se puede establecer con la propiedad text-align.Sintaxisselector {caption-side: valor} Los posibles valores para definir la ubicacin del ttulotop | bottom | inheritEjemplo

Vamos a ubicar el ttulo de la tabla por debajo de la misma.

caption{caption-side: bottom}

< /head>

< body>< table border="1">Precio de los lcteos

ProductoPrecio

Manteca4.00

Leche1.50

< /table>< /body> ResultadoPrecio de los lcteos

ProductoPrecio

Manteca4.00

Leche1.50

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

Formato de las tablasLa propiedad table-layout se usa para disear las filas, columnas o celdas de una tabla. Entre las posibilidades de diseo podemos definir si las mismas van a tener el tamao fijo que estipulemos (fixed) o se adecuarn al contenido sin importar la medida que hayamos establecido (auto).Sintaxisselector {table-layout: valor} Los posibles valores para definir el formato de las tablasauto | fixed | inheritEjemplo

Vamos a comparar las 2 propiedades de una tabla.

table.auto{table-layout: auto}table.fija{table-layout: fixed}

< /head>

< body>

< caption>Tabla con formato automtico

11111111111111111111111111111122222222222233333

< caption>Tabla con formato fijo

11111111111111111111111111111122222222222233333

< /body> Resultado

Tabla con tamao automtico

1111111111111111111111122222222222333333

Tabla con tamao fijo

1111111111111111111111122222222222333333

Modelo de los bordesLa propiedad border-collapse nos permite seleccionar la apariencia de los bordes de cada celda de la tabla. Existen 2 modelos diferentes de bordes: separados y continuos.Sintaxisselector {border-collapse: valor} Los posibles valores para los diferentes modelos de bordescollapse | separate | inheritEjemplo

Vamos a comparar los dos modelos de bordes.

table.plegado{border-collapse: collapse}table.separado{border-collapse: separate}

< /head>

< body>

< caption>Tabla con los bordes plegados

NombreEdad

Luis23

< caption>Tabla con los bordes separados

NombreEdad

Roberto19

< /body> ResultadoTabla con los bordes plegados

NombreEdad

Luis23

Tabla con los bordes separados

NombreEdad

Roberto19

Espacio entre celdasLa propiedad border-spacing especifica la separacin entre celdas adyacentes. Si especificamos un solo valor, este acta sobre toda la tabla. Si especificamos 2 valores el primero define la separacin horizontal y el segundo la vertical.Sintaxisselector {border-spacing: valor} Los posibles valores para definir la separacin entre celdasdistancia(horizontal) distancia(vertical) | inheritEjemplo

Vamos a definir la separacin de las celdas.

table{border-spacing: 10px 20px; border-collapse: separate}

< /head>

< body>

Marca del automobilModelo

FordMustang

ToyotaCorolla

< /body> Resultado

Marca del automobilModelo

FordMustang

ToyotaCorolla

Comportamiento de las celdas vacasLa propiedad empty-cells nos permite controlar la visualizacin de los bordes y fondos de una celda vaca.Sintaxisselector {empty-cells: valor} Los posibles valores para controlar las celdas vacasshow | hide | inheritEjemplo

Vamos a comparar el comportamiento de los dos valores.

td.muestra{empty-cells: show}td.oculta{empty-cells: hide}

< /head>

< body>< table style="border-collapse: separate; border solid 1px">

NombreEdadEstado civil

Carlos

casado

Julieta27

< /table>< /body> ResultadoNombreEdadEstado civil

Carloscasado

Julieta27

Propiedades de las tablasPropiedadDescripcinValoresDetallesEj.

caption-sidePosicin del ttulo respecto de la tabla.topSuperiorNo funciona en IE 5, 6 y 7

bottomInferiorNo funciona en IE 5, 6 y 7

table-layoutControl del algoritmo usado para el formato de las celdas, filas y columnas.autoAutomtico

fixedFijo

border-collapseSeleccin del modelo de los bordes.collapsePlegado

separateSeparado

border-spacingEspaciado entre los bordes de celdas adyacentes.longitudLongitudNo funciona en IE 5, 6 y 7

empty-cellsVisibilidad de los bordes de celdas sin contenido.showMuestraNo funciona en IE 5, 6 y 7

hideOcultaNo funciona en IE 5, 6 y 7

CSS RellenoDeja un espacio entre el elemento y los bordes del mismo.

Relleno con CSSEl 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 nos permiten definir el ancho de los mismos.

El relleno - paddingLa propiedad padding se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo. Esta propiedad define el ancho para los cuatro lados de la caja.Sintaxis

selector {padding: valor}

Los posibles valores para definir los anchos de paddinglongitud | % Ejemplo

Vamos a ver como se comporta un texto con un relleno de 10% alrededor.

< style type="text/css">p.relleno{padding:10%}< /style>< /head>

< body>En este ejemplo podemos observar que el rellenose aleja de los borde un 10% en base al tamao de lacaja que lo contiene.Al no haber definido los bordes olos margenes, el ancho del relleno es la distanciadefinida.< /body> ResultadoEn este ejemplo podemos observar que el rellenose aleja de los borde un 10% en base al tamao de la caja que lo contiene. Al no haber definido los bordes o los margenes, el ancho del relleno es la distancia definida.

El relleno de cada lado - padding-top, padding-right, padding-bottom, padding-leftLas propiedades padding-top, padding-right, padding-bottom, padding-left se utilizan para definir los anchos de los rellenos de cada uno de los bordes por separado.Puedes definir los 4 lados o solo aquellos que necesites.Sintaxis

selector {padding-top: valorpadding-right: valorpadding-bottom: valorpadding-left: valor}

Los posibles valores para definir los anchos de paddinglongitud | % Ejemplo

Vamos a definir el ancho de cada lado por separado.

< style type="text/css">p{padding-top:30pxpadding-right:10pxpadding-bottom:20pxpadding-left:50%}< /style>< /head>

< body>Este texto tiene definido un ancho distinto para cadalado del elemento.< /body> ResultadoEste texto tiene definido un ancho distinto para cada lado del elemento.

Tabla de las propiedades de padding (relleno)PropiedadDescripcinValoresDetallesEj.

paddingTamaos para varios padding individuales.

padding-top: ancho del padding superior.

padding-right: ancho del padding derecho.

padding-bottom: ancho del padding inferior.

padding-left: ancho del padding derecho.longitudLongitud

%Porcentaje

Bordes CSSUsa color, estilo y espesor en los bordes de todos los elementos.

Bordes con CSSLos bordes nos sirven para decorar todos los elementos con lneas de diferentes espesores, colores y formas. Esta propiedad se aplica al rea de bordes de la caja.

La propiedad de los bordesLa propiedad border especifica el espesor, color y estilo de los bordes. Es la forma abreviada para definir los bordes y puede comprender en ella todas las propiedades de los bordes juntas.Sintaxisselector {border: valor-1 valor-2 valor-n} Nota: debemos dejar un espacio en blanco entre los valoresLos posibles valores para definir los espesores de los bordesthin | medium | thick | tamao (px, pc, pt, mm, cm, in) | nombre del color(ingls) | #xxxxxx | transparent | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetEjemplo

Vamos a decorar los bordes de una tabla.

table{border: blue double medium}td{border: green dotted medium}

Esta tablatiene los bordes

decorados condiferentes propiedades

ResultadoEsta tablatiene los bordes

decorados condiferentes propiedades

Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style

Espesor de los bordesLa propiedad border-width especifica el espesor del bordeSintaxisEstablecer el mismo espesor para todos los bordes del selector.selector {border-width: valor}Establecer el espesor de cada borde del selector por separado.selector {border-top-width: valor;border-right-width: valor;border-bottom-width: valor;border-left-width: valor;}Nota: no olvides poner (;) al final de cada lneaLos posibles valores para definir los espesores de los bordesthin fino | medium medio | thick grueso | tamao (px, pc, pt, mm, cm, in)Ejemplo

Vamos a aplicar un espesor a un borde sobre un texto.

p { border-width: 5px;border-style: solid; }

Texto con un borde de 5 pixels ResultadoTexto con un borde de 5 pixels

Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style

Color de los bordesLa propiedad border-color especifica el color del bordeSintaxisEstablecer el color de todos los bordes a la ves.selector {border-color: valor}Establecer el color de cada borde por separado.selector {border-top-color: valor;border-right-color: valor;border-bottom-color: valor;border-left-color: valor;}Los posibles valores para colorear los bordesnombre del color(ingls) | #xxxxxx | transparentEjemplo

Vamos a aplicar un color a un borde sobre un ttulo.

h2{border-color: red;border-style: solid;}

Ttulo con un borde rojo ResultadoTtulo con un borde rojo

Nota: para poder visualizar el borde debemos usar la propiedad border-style

Estilo de los bordesLa propiedad border-style especifica el estilo del bordeSintaxisEstablecer el estilo de todos los bordes a la ves.selector {border-style: valor}Establecer el estylo de cada borde por separado.selector {border-top-style: valor;border-right-style: valor;border-bottom-style: valor;border-left-style: valor;}Los posibles valores para dar estilo a los bordesnone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetEjemplo

Vamos a aplicar un estilo a cada uno de los bordes de una lista.

h3{border-top-style: dotted;border-right-style: double;border-bottom-style: dashed;border-left-style: groove;}

Diferentes estilos de bordes ResultadoDiferentes estilos de bordes

Tabla de las propiedades de los bordesPropiedadDescripcinValoresDetallesEj.

borderDefine ancho, color y estilo general para los 4 bordes.

border-top: define ancho, color y estilo para el borde superior

border-right: define ancho, color y estilo para el borde derecho

border-bottom: define ancho, color y estilo para el borde inferior

border-left: define ancho, color y estilo para el borde izquierdothinFino

mediumMediano

thickGrueso

longitudLongitud

colorColor

noneNada

hiddenOculto

dottedPunteado

dashedLnea de rayas

solidSolido

doubleDoble

grooveAcanalado

ridgeEn relieve

insetRecuadro

outsetResalte

border-widthAncho 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.thinFino

mediumMediano

thickGrueso

longitudLongitud

border-colorColor general de los 4 bordes.

border-top-color:color del borde superior

border-right-color:color del borde derecho

border-bottom-color:color del borde inferior

border-left-color:color del borde izquierdocolorColor

border-styleEstilo general de los 4 bordes.

border-top-style:estilo del borde superior

border-right-style:estilo del borde derecho

border-bottom-style:estilo del borde inferior

border-left-style:estilo del borde izquierdononeNada

hiddenOculto

dottedPunteado

dashedLnea de rayas

solidSolido

doubleDoble

grooveAcanalado

ridgeEn relieve

insetRecuadro

outsetResalte

CSS MrgenesMantn distancia entre elementos utilizando mrgenes alrededor de los mismos.

Mrgenes con CSSEl margen es un espacio invisible alrededor del elemento, que le permite al mismo mantener distancia de otros elementos.

Las propiedades de los margenes margin nos permiten definir el ancho de los mismos.

El margen - marginLa propiedad margin se utiliza para definir el ancho del espacio que se encuentra entre el borde de un elemento y el elemento cercano a el.

Esta propiedad define el ancho del margen para los cuatro lados de la caja.Sintaxis

selector {margin: valor} Los posibles valores para definir el ancho de los mrgeneslongitud | % | autoEjemplo

Vamos a ver como se comporta un texto con un margen de 30px alrededor.

< style type="text/css">p.margen{margin:30px}< /style>< /head>

< body>En este ejemplo podemos observar que el margenaleja al elemento de los borde 30 pixels en base altamao de la caja que lo contiene.< /body> ResultadoEn este ejemplo podemos observar que el margenaleja al elemento de los borde 30 pixels en base al tamao de lacaja que lo contiene.

Los mrgenes de un elemento por separado margin-top, margin-right, margin-bottom, margin-leftLas propiedades margin-top, margin-right, margin-bottom, margin-left se utilizan para definir el ancho de los mrgenes de cada uno de los lados del elemento por separado.Puedes definir los 4 lados o solo aquellos que necesites.Sintaxis

selector {margin-top: valormargin-right: valormargin-bottom: valormargin-left: valor}

Los posibles valores para definir los anchos de marginlongitud | % | autoEjemplo

Vamos a definir el ancho de cada lado por separado.

< style type="text/css">p{margin-top:5%margin-right:30pxmargin-bottom:20pxmargin-left:50%}< /style>< /head>

< body>Este texto tiene definido un ancho de margen distinto para cadalado del elemento.< /body> ResultadoEste texto tiene definido un ancho de margendistinto para cada lado del elemento.

Tabla de las propiedades de los mrgenesPropiedadDescripcinValoresDetallesEj.

marginAncho para varios mrgenes individuales.

margin-top: Define el ancho del margen superior.

margin-right: Define el ancho del margen derecho.

margin-bottom: Define el ancho del margen inferior.

margin-left: Define el ancho del margen izquierdo.longitudLongitud

%Porcentaje

autoAutomtico

AVANZADO

Documents

Manual Css Completo