Qué Es CSS PDF

Qu es CSS?
CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe cmo se va a presentar un documento en la pantalla.
CSS nos permite posicionar el contenido, disear tablas, definir caractersticas 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. 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 CSS La estructura de CSS CSS funciona a base de reglas. Cada regla est compuesta por un selector y la declaracin. La declaracin a su vez est compuesta por una propiedad y su valor. La declaracin debe estar definida entre llaves({...}) Sintaxis 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.
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, 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 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. El valor del selector class debe ir antepuesto por un punto (.) Sintaxis p.azul {color:blue} p.rojo {color:red} Ejemplo Cdigo <head> <style type="text/css"> p.azul {color:blue} Resultado p.rojo {color:red} </style> </head> <body> <p class="azul">Este texto es de color azul</p> <p class="rojo">Este texto es de color rojo</p> </body> Este texto es de color azul Este 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. Cdigo <head> <style type="text/css"> .azul {color:blue} .rojo {color:red} </style> </head> Resultado Este ttulo es de color rojo Este texto es de color azul
Y este texto es de color rojo <body> <h3 class="rojo">Este ttulo es de color rojo</h3> <p class="azul">Este texto es de color azul</p> <p class="rojo">Y este texto es de color rojo</p> </body>
El selector ID El 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. Cdigo <head> Resultado Ttulo centrado
<style type="text/css"> #centrado {text-align:center} h3#subrayado {text-decoration:underline} </style> </head> <body> <h3 id="centrado">Ttulo centrado</h3> <h3 id="subrayado">Ttulo subrayado</h3> <p id="centrado">Texto centrado</p> <p id="subrayado">El selector id no afecta al elemento p ya que el mismo no ha sido definido como texto subrayado</p> </body>
Ttulo subrayado Texto centrado El selector id no afecta al elemento p ya que el mismo no ha sido definido como texto subrayado
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 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 lneas 2. Dentro de la seccin Head 3. Hojas de estilo externas 1. Entre lneas Definimos el estilo directamente dentro del cdigo HTML.
Sintaxis <selector style="propiedad: valor;propiedad: valor;"> 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. 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. Dentro de la seccin Head Las hojas de estilo interna deben usarse cuando una pgina tiene un estilo nico. Sintaxis <head> <style type="text/css"> selector 1 {propiedad: valor;} selector 2 {propiedad: valor;} </style> </head> <body> <etiqueta 1>Escriba un prrafo aqui</etiqueta 1> <etiqueta 2>Texto, texto, texto</etiqueta 2> </body> La etiqueta <style type="text/css"> en la cabecera del documento entre las etiquetas <head> y </head> 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. Cdigo <head> <style type="text/css"> body color:#008080} p {color:white} </style> Resultado
{background- Este texto es de color blanco y el color de fondo de la pgina es #008080.
</head> <body> <p> Este texto es de color blanco y el color de fondo de la pgina es #008080. </p> </body>
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 #008080 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. Los archivos de hojas de estilo deben llevar la terminacin .css. Sintaxis Contenido del archivo de los estilos selector { propiedad:valor; /* No olvidar el (;) al final de cada valor */ propiedad:valor; propiedad:valor; } Sintaxis Esta es la forma de llamar al archivo ".css" desde un documento HTML <head> <link rel="stylesheet" type="text/css" href="/archivo.css"> </head> Cada pgina del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> 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 CSS p { font-family:Arial; font-size:12px; font-weight:bold; } As se vera el documento HTML que llama al archivo "estilos.css". Cdigo HTML <head> <link rel="stylesheet" type="text/css" href="/estilos.css"> </head> <body> <p>Caractersticas de este texto: Arial, de 12 pixels, bold</p> </body> Resultado Caractersticas de este texto: Arial, de 12 pixels, bold
CSS Background - Fondo El fondo con CSS Las 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 backgrounds La propiedad background es la forma comprimida en la cual podemos definir todos los valores de los fondo de una sola vez. Sintaxis Establecer diferentes caractersticas del fondo a la vez. <head> <style="type:text/css"> selector {background: valor 1 valor 2} </style> </head> Nota: debemos dejar un espacio en blanco entre los valores Los posibles valores para definir los fondos color | transparent | URL | none | repeat | repeat-x | repeat-y | no-repeat | no-repeat | fixed | % | longitud | left | center | right | top | bottom Ejemplo Vamos a aplicar un fondo rojo al elemento h2 de esta pgina. Cdigo <head> <style type="text/css"> h2{background:red} </style> </head> <body> <h2>El fondo del ttulo es rojo.</h2> </body> Resultado El fondo del ttulo es rojo.
Aplicar color al fondo La propiedad background-color especifica el color de fondo del elemento. Sintaxis Establecer el color de fondo. <head> <style="type:text/css"> etiqueta HTML {background-color: valor}
</style> </head> Los posibles valores para definir los colores del fondo color | transparent Ejemplo Vamos a aplicar un color de fondo a la pgina. Cdigo <head> <style type="text/css"> body{background-color:orange} </style> </head> <body> <p>El fondo de la pgina es naranja.</p> </body> Resultado El fondo de la pgina es naranja.
Decorar el fondo con una imagen La propiedad background-image inserta una imagen como fondo del elemento. Sintaxis Insertar una imagen de fondo. <head> <style="type:text/css"> etiqueta HTML {background-image: url("nombre-de-la-imagen")} </style> </head> Los posibles valores para la insercin de imgenes de fondo url | none Ejemplo Vamos a usar una imagen de fondo en nuestra pgina. Cdigo <head> <style type="text/css"> Resultado Ejemplo de una imagen de fondo
body{background-image:url("fondo3.jpg")} </style> </head> <body> <p>Ejemplo de una imagen de fondo</p> </body>
Imagen ms pequea que el tamao del fondo Si 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. Sintaxis Repetir una imagen de fondo. <head> <style="type:text/css"> etiqueta HTML { background-image: url('/nombre-de-la-imagen'); background-repeat: valor; } </style> </head> Los posibles valores para la repeticin de una imagen en el fondo repeat | repeat-x | repeat-y | no-repeat Ejemplo Cdigo <head> <style type="text/css"> body { background-image:url("images/fondo.png"); background-repeat:repeat; } </style> </head> <body> Resultado Repeticin de una imagen de fondo
<h4>Repeticin de una imagen de fondo</h4> </body>
Imagen de fondo esttica o dinmica La 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. Sintaxis Imagen de fondo esttica o dinmica. <head> <style="type:text/css"> etiqueta HTML { background-image: url('/nombre-de-la-imagen'); background-attachment: valor; } </style> </head> Los posibles valores para esta propiedad fixed | scroll Elije el lugar exacto para ubicar la imagen de fondo La propiedad background-position nos permite ubicar una imagen en un lugar especfico dentro del fondo. Sintaxis <head> <style="type:text/css"> etiqueta HTML { background-image: url('/nombre-de-la-imagen');
background-position: valor; } </style> </head> Los posibles valores para la ubicacin exacta de la imagen en el fondo % | coordinadas x-y | left | center | right | top | bottom Ejemplo Vamos a usar una imagen y la ubicaremos en alguna coordenada dentro del fondo. Cdigo <head> <style type="text/css"> body background-image: url("images/fondo.jpg"); background-repeat: no-repeat; background-position: 60px 100px; } </style> </head> <body> <p>Imagen en y=100px</p> </body> {
Resultado Imagen en y=100px las coordenadas x=60px
las
coordenadas
x=60px
Propiedades del fondo Propiedad Descripcin
Valores background-color background-image
Detalles Color de fondo Imagen de fondo Repeticin del fondo Acoplamiento fondo del
background
Propiedades individuales relacionadas fondo.
background-repeat con el backgroundattachment
background-position Posicin del fondo color background-color Color de fondo. transparent Transparente Color
URL background-image Imagen de fondo. none repeat Repeticin de imagen de fondo. la repeat-x repeat-y no-repeat backgroundattachment Desplazamiento de la imagen de fondo. scroll fixed % longitud left background-position Posicin de la imagen center de fondo. right top bottom
Direccin URL Nada Repite Repite horizontalmente Repite verticalmente No se repite Desplaza Fija Porcentaje Longitud Izquierda Centro Derecha Superior Inferior
background-repeat
CSS Textos Los textos con CSS Las propiedades de los textos nos permiten controlar la apariencia de los mismos. Entre los ajustes que podemos aplicar a los textos, tenemos: 1. 2. 3. 4. 5. 6. 7. La sangra El alineado La decoracin Espacio entre letras Espacio entre palabras Maysculas y minsculas Espacios en blando
Sangra de los textos - text-indent La propiedad text-indent se utiliza para generar sangra en la primera lnea de un texto.
Sintaxis <head> <style="type:text/css"> selector {text-indent: valor} </style> </head> Los posibles valores para definir la sangra longitud | % Ejemplo Vamos a ver como se comporta un texto con sangra. Cdigo <head> <style type="text/css"> p{text-indent:2cm} </style> </head> <body> <p>En la primera lnea de este prrafo observamos una sangra de 2 centmetros de distancia del borde.</p> </body> Resultado En la primera lnea de este prrafo observamos una sangra de 2 centmetros de distancia del borde.
Alineado de los textos - text-align La propiedad text-align se utiliza para alinear un texto a la derecha, izquierda o centro del bloque que lo contiene. Sintaxis <head> <style="type:text/css"> selector {text-align: valor} </style> </head> Los posibles valores para alinear los textos left | right | center | justify Ejemplo Alineamos un texto a la derecha y otro en el centro.
Cdigo <head> <style type="text/css"> p.der{text-align:right} p.cen{text-align:center} </style> </head> <body> <p class="der">Texto a la derecha</p> <p class="cen">Texto en el centro</p> </body> La decoracin de los textos - text-decoration La propiedad text-decoration se utiliza para subrayar, tachar, remarcar con una lnea superior o parpadear un texto. Sintaxis <head> <style="type:text/css"> selector {text-decoration: valor} </style> </head> Los posibles valores para decorar los textos none | underline | overline | line-through | blink Ejemplo Definimos un texto parpadeante y un enlace sin subrayar. Cdigo <head> <style type="text/css"> p.parpadeo{text-decoratio:blink} a.sin_linea{text-decoration:none} </style> </head> <body> <p class="parpadeo">Texto parpadeando</p> <a class="sin_linea" href="/www.google.com"> Ir a google</a> </body> Resultado Texto parpadeando Resultado Texto a la derecha Texto en el centro
Separacin entre letras - letter-spacing La propiedad letter-spacing se utiliza para definir la distancia que queremos dejar entre letra y letra de un mismo texto. Sintaxis <head> <style="type:text/css"> selector {letter-spacing: valor} </style> </head> Los posibles valores para esta propiedad normal | distancia Ejemplo Vamos definir una distancia entre letras de 5 pxeles. Cdigo <head> <style type="text/css"> p{letter-spacing:5px} </style> </head> <body> <p>La distancia entre letras es de 5 pxeles</p> </body> Separacin entre palabras - word-spacing La propiedad word-spacing se utiliza para definir la distancia que queremos dejar entre palabras. Sintaxis <head> <style="type:text/css"> selector {word-spacing: valor} </style> </head> Los posibles valores para esta propiedad normal | distancia Resultado La distancia entre letras es de 5 pxeles
Ejemplo Vamos definir una distancia entre palabras de 2 centmetros. Cdigo <head> <style type="text/css"> p{word-spacing:2cm} </style> </head> <body> <p>La distancia centmetros</p> </body> Resultado La distancia entre palabras es de 2 centmetros palabras es de 2
entre
Transformar los textos a maysculas o minsculas - text-transform La propiedad text-transform se utiliza para convertir un texto a maysculas o minsculas. Sintaxis <head> <style="type:text/css"> selector {text-transform: valor} </style> </head> Los posibles valores para convertir los textos capitalize | uppercase | lowercase | none Ejemplo Vamos definir la primera letra de cada palabra en maysculas. Cdigo <head> <style type="text/css"> p{text-transform:capitalize} </style> </head> <body> <p>La primera letra de cada palabra se a convertido a maysculas</p> </body> Resultado La primera letra de cada palabra se a convertido a maysculas
Espacios en blanco - white-space La propiedad white-space se utiliza para manipular el comportamiento de los espacios en blanco dentro de cada elemento. Sintaxis <head> <style="type:text/css"> selector {white-space: valor} </style> </head> Los posibles valores para esta propiedad normal | pre | nowrap | pre-wrap | pre-line Ejemplo Vamos ver el comportamiento de los espacios en blanco dentro de un texto. Cdigo <head> <style type="text/css"> p.pre{white-space:pre-wrap} p.normal{white-space:normal} </style> </head>
Resultado
<body> Dejo varios espacios en blanco entre palabra y palabra. <p class="pre">Dejo varios espacios en Aca tambin dejo varios espacios en blanco entre palabra blanco entre palabra y palabra.</p> y palabra pero los comprime a uno solo. <p class="normal">Aca tambin dejo varios espacios en blanco entre palabra y palabra pero los comprime a uno solo.</p> </body>
Propiedades de los textos Propiedad Descripcin text-indent Desplazamiento de la primera lnea del texto.
Valores longitud %
Detalles Longitud Porcentaje
left right text-align Alineamiento del texto. center justify none underline text-decoration Efectos de subrayado, overline tachado, parpadeo. line-through blink
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 heredado Normal Longitud Normal Longitud Normal Preformateado Los cambios de lnea solo ocurren con el elemento br el valor
capitalize
uppercase text-transform Transformaciones del texto a maysculas/minsculas. lowercase
none normal letter-spacing Espacio entre caracteres. longitud normal word-spacing Espacio entre palabras. longitud normal pre Comportamiento espacios dentro elementos. de de los los nowrap
white-space
pre-wrap pre-line
direction
Sentido direccional de la escritura.
ltr rtl normal
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
CSS Fonts - Fuentes Las fuentes Las 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. 2. 3. 4. 5. 6. La familia La intensidad El estilo El tamao La variante La definicin general
Familia de fuentes - font-family 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.). Sintaxis <head> <style="type:text/css"> selector {font-family: familia de fuente, familia de fuente genrico} </style> </head> Nota: debemos utilizar comas entre los valores. Los posibles valores para definir las familias de fuentes Las ms comunes | arial | Verdana | Helvetica | "Times New Roman" | Courier | Univers
Los posibles valores para definir las familias de fuentes genrico serif | sans-serif | cursive | fantasy | monospace Ejemplo Vamos a definir una familia para una fuente. Cdigo <head> <style type="text/css"> p{font-family:"Times </style> </head> New Roman", serif} Resultado La familia de esta fuente es Times New Roman.
<body> <p>La familia de esta fuente es Times New Roman.</p> </body>
Intensidad de las fuentes - font-weight Una caracterstica muy til es el control de la intensidad de las fuentes. Para ello utilizamos la propiedad font-weight. Sintaxis <head> <style="type:text/css"> selector {font-weight: valor} </style> </head> Los posibles valores para definir los fondos normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Ejemplo Vamos a aplicar intensidad a las fuentes del elemento h2 de esta pgina. Cdigo <head> <style h2{font-weight:lighter} </style> </head> <body> type="text/css"> Resultado La intensidad de este texto es lighter.
<h2>La intensidad de este texto es lighter.</h2> </body> Estilo de las fuentes - font-style La propiedad font-style nos sirve para definir un estilo normal, oblicuo o italic. Sintaxis <head> <style="type:text/css"> selector {font-style: valor1} </style> </head> Los posibles valores para definir los estilos normal | italic | oblique Ejemplo Vamos a definir el estilo del elemento h3 de este ejemplo. Cdigo <head> <style type="text/css"> h3{font-style:oblique} </style> </head> <body> <h3>El estilo de este ttulo es oblique.</h3> </body> Resultado El estilo de este ttulo es oblique.
Tamao de las fuentes - font-size Controlar el tamao de las fuentes suele ser de mucha utilidad. La propiedad encargada de eso es font-size. Sintaxis <head> <style="type:text/css"> selector {font-size: valor} </style> </head> Los posibles valores para definir el tamao de las fuentes
xx-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. Cdigo <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> Tamao:large <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> Tamao:x-large Tamao:xx-large Tamao:larger Tamao:smaller Resultado Tamao:xx-small Tamao:x-small Tamao:small Tamao:medium
Variante de las fuentes - font-variant Una variacin que se le puede dar a las fuentes es el de usar pequeas maysculas, para eso usamos de la propiedad font-variant. Sintaxis <head> <style="type:text/css"> selector {font-variant: valor} </style> </head> Los posibles valores para definir las variantes de las fuentes normal | small-caps Ejemplo Vamos a variar las fuentes de este ttulo h2. Cdigo <head> Resultado EL TEXTO ESTA ESCRITO EN MINSCULA.
<style type="text/css"> h2{font-variant:small-caps} </style> </head> <body> <h2>El texto esta escrito en minscula.</h2> </body>
La propiedad de las fuentes - font La 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 <head> <style="type:text/css"> selector {font: valor1 valor2 valor n} </style> </head> Nota: debemos dejar un espacio en blanco entre los valores. Los posibles valores para definir las fuentes Todos los valores de font-family | font-style | font-variant | font-weight | font-size | caption | icon | menu | message-box| small-caption | status-bar Ejemplo Vamos a definir un tipo de fuente para p. Cdigo <head> <style type="text/css"> p{font:large </style> </head> Palatino bold italic} Resultado El tipo de fuente es Palatino large bold en italic.
<body> <p>El tipo de fuente es Palatino large bold en italic.</p> </body>
Propiedades de las fuentes Propiedad Descripcin
Valores font-style font-variant font-weight font-size font-family
Detalles Estilo de fuente Variante de fuente Peso de la fuente Tamao fuente de la
Familia de fuentes Fuente a utilizar en los botones, mens desplegables, etc. cono Fuente de mens desplegables los
font
Atajo para establecer el resto de propiedades sobre las fuentes a la vez.
caption
icon
menu
message-box small-caption status-bar
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
nombre-familia font-family Familias de fuentes. familia-genrica normal font-style Estilo de la fuente. italic oblique normal Convierte las minsculas a maysculas pero mantienen un tamao inferior a las maysculas. small-caps normal font-weight Intensidad de la fuente. bold
font-variant
bolder lighter 100 200 300 400 500 600 700 800 900 xx-small x-small small medium large font-size Tamao de la fuente. x-large xx-large larger smaller tamao % CSS Contornos Contornos con CSS
Negrita fuerte Suave Valor 100 Valor 200 Valor 300 Valor 400 Valor 500 Valor 600 Valor 700 Valor 800 Valor 900 XX-Pequea X-Pequea Pequea Mediana Grande X-Grande XX-Grande Mxima Mnima Tamao Porcentaje
mas
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 rectangulares
Un 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 contornos La propiedad outline-width especifica el espesor del contorno. Esta propiedad se puede aplicar a todos los elementos. Sintaxis <head> <style="type:text/css"> selector {outline-width: valor} </style> </head> Los posibles valores para definir el espesor de los contornos thin | medium | thick | tamao (px, pc, pt, mm, cm, in) Ejemplo Vamos a aplicar un espesor determinado para el contorno de un botn. Cdigo <head> <style type="text/css"> button { outline-width: 3px; outline-style: solid; } </style> </head> <body> <button>Enviar</button> </body> Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style Resultado
El estilo de los contornos La propiedad outline-style especifica el estilo del contorno. Esta propiedad se puede aplicar a todos los elementos.
Sintaxis <head> <style="type:text/css"> selector {outline-style: valor} </style> </head> Los posibles valores para definir el estilo de los contornos none | dotted | dashed | solid | double | groove | ridge | inset | outset Ejemplo Vamos a aplicar un estilo determinado para el contorno de un botn. Cdigo <head> <style type="text/css"> button { outline-style: dotted; } </style> </head> <body> <button>Enviar</button> </body>
Resultado
El color de los contornos La propiedad outline-color especifica el color del contorno. Esta propiedad se puede aplicar a todos los elementos. Sintaxis <head> <style="type:text/css"> selector {outline-color: valor} </style> </head> Los posibles valores para definir el estilo de los contornos color | invert
Ejemplo Vamos a definir un color determinado para el contorno de un texto. Cdigo <head> <style type="text/css"> p { outline-color: blue; Resultado outline-style: solid; } </style> </head> <body> <p>Texto rodeado de un contorno de color azul</p> </body> Nota: para poder visualizar el contorno, debemos usar valores de la propiedad outline-style Texto rodeado de un contorno de color azul
La propiedad general de los contornos La propiedad outline especifica todas las propiedades de los contornos de una sola vez. Sintaxis <head> <style="type:text/css"> selector {outline: valor-1 valor-2 valor-n} </style> </head> Los posibles valores para la propiedad outline thin | medium | thick | tamao (px, pc, pt, mm, cm, in) | none | dotted | dashed | solid | double | groove | ridge | inset | outset | color | invert Ejemplo Vamos a aplicar todos los valores al contorno de un botn. Cdigo <head> <style type="text/css"> Resultado
button{outline: </style> </head>
groove
red
thick}
<body> <button>Enviar</button> </body>
Propiedad
Descripcin
Valores
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 Acanalado En relieve Recuadro Resalte Color Color inverso al color de fondo
outline
outline-color Propiedades individuales de los contornos. outline-style No funciona en IE 5, 6 y 7 outline-width thin
outline-width
Ancho del contorno. No funciona en IE 5, 6 y 7
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 color
outline-color
Color del contorno. No funciona en IE 5, 6 y 7
invert
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.
El tipo de estilo de las listas La propiedad list-style-type especifica el formato Esta propiedad se aplica a todo elemento con "display: list-item". Sintaxis selector {list-style-type: valor} Los posibles valores para definir el estilo de las listas disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lowergreek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none Ejemplo Vamos a aplicar un estilo a una lista. Cdigo <head> <style type="text/css"> ol{list-style-type: lower-latin} Resultado </style> </head> 1. HTML <body> 2. CSS <ol> 3. JavaScript <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol> </body> visual de la lista.
Listas con imgenes La 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". Sintaxis selector {list-style-image: valor} Los posibles valores para definir las imgenes de las listas
URL | none Ejemplo Vamos a aplicar una imagen a una lista. Cdigo <head> <style type="text/css"> ul{list-style-image: url("punto.gif")} Resultado </style> </head> XML VBScript <body> AJAX <ul> <li>XML</li> <li>VBScript</li> <li>AJAX</li> </ul> </body>
La posicin de la marca en la lista La 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". Sintaxis selector {list-style-position: valor} Los posibles valores para definir la posicin de los marcadores inside | outside Ejemplo Vamos a ubicar los marcadores en diferentes posiciones. Cdigo <head> <style type="text/css"> ul.dentro{list-style-position: inside} ul.fuera{list-style-position: outside} </style> </head> <body> Resultado

Primer elemento de la lista Segundo elemento de la lista Tercer elemento de la lista
Primer elemento de la lista
<ul class="dentro"> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> <ul class="fuera"> <li>Primer elemento de la lista</li> <li>Segundo elemento de la lista</li> <li>Tercer elemento de la lista</li> </ul> </body>
Segundo elemento de la lista Tercer elemento de la lista
Todas las propiedades de las listas La propiedad list-style se usa para definir todos los valores de las listas a la vez. Sintaxis selector {list-style: valor1 valor2 valor-n } Los posibles valores para definir las imgenes de las listas disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lowergreek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | URL | none | inside | outside Ejemplo Vamos a aplicar diferentes propiedades a una lista. Cdigo <head> <style type="text/css"> ul{list-style: square inside} Resultado </style> </head> XML <body> VBScript <ul> AJAX <li>XML</li> <li>VBScript</li> <li>AJAX</li> </ul> </body>
Tabla de las propiedades de las listas Propiedad Descripcin
Valores
Detalles
list-style-type list-style
Tipos de listas
Permite establecer el estilo de la list-style-position Posicin de la lista lista, la imagen y/o la posicin. list-style-image disc circle square decimal Imagen de la lista Disco Crculo Cuadrado Nro.decimal
Nro.decimal decimal-leading- comenzando de 0 No funciona en IE zero 5, 6 y 7 lower-roman Nro.romano minscula Nro.romano mayscula Letra griega minscula No funciona en IE 5, 6 y 7 Letra latina minscula No funciona en IE 5, 6 y 7 Letra latina mayscula No funciona en IE 5, 6 y 7 Letra armenia No funciona en IE 5, 6 y 7 Letra gregoriana No funciona en IE 5, 6 y 7 Letra alfabeto en minscula Letra alfabeto en
upper-roman
lower-greek list-style-type Estilo aplicable a los marcadores visuales de las listas. lower-latin
upper-latin
armenian
georgian
lower-alpha upper-alpha
mayscula none list-style-image Imagen aplicable a los elementos de las listas. URL none Nada URL Nada Dentro
Posicin dentro de la lista de los inside list-style-position elementos marcadores de las listas.
Tablas CSS Tablas con CSS Las 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. 2. 3. 4. 5. La ubicacin del ttulo El formato de las tablas El modelo de los bordes El espacio entre celdas El comportamiento de las celdas vacas
Ubicacin del ttulo La 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. Sintaxis selector {caption-side: valor} Los posibles valores para definir la ubicacin del ttulo top | bottom | inherit Ejemplo Vamos a ubicar el ttulo de la tabla por debajo de la misma. Cdigo <head> <style type="text/css"> caption{caption-side: bottom} </style> Manteca 4.00 Resultado Precio de los lcteos Producto Precio
</head> <body> <table border="1"> <caption>Precio de los lcteos</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>
Leche
1.50
Nota: Internet Explorer ubica el ttulo siempre por encima de la tabla.
Formato de las tablas La 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). Sintaxis selector {table-layout: valor} Los posibles valores para definir el formato de las tablas auto | fixed | inherit Ejemplo Vamos a comparar las 2 propiedades de una tabla. Cdigo <head> <style type="text/css"> table.auto{table-layout: auto} table.fija{table-layout: fixed} </style> Tabla con tamao automtico 1111111111111111111 222222222 33333 1111 22 3 Resultado
</head> <body> Tabla con tamao fijo <table class="auto" style="border: solid; width: 100%"> 1111111111111111111 222222222 33333 <caption>Tabla con formato 1111 22 3 automtico</caption> <tr> <td width="10%">111111111111111111111111111 111</td> <td width="40%">222222222222</td> <td width="50%">33333</td> </tr> </table> <table class="fija" style="border: solid; width: 100%"> <caption>Tabla con formato fijo</caption> <tr> <td width="10%">111111111111111111111111111 111</td> <td width="40%">222222222222</td> <td width="50%">33333</td> </tr> </table> </body>
Modelo de los bordes La 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. Sintaxis selector {border-collapse: valor} Los posibles valores para los diferentes modelos de bordes collapse | separate | inherit Ejemplo Vamos a comparar los dos modelos de bordes. Cdigo Resultado
<head> <style type="text/css"> table.plegado{border-collapse: collapse} table.separado{border-collapse: separate} </style> </head>
Tabla con los bordes plegados Nombre Luis Edad 23
Tabla con los bordes separados Edad 19
<body> Nombre <table class="plegado" style="border:solid 1px"> <caption>Tabla con los bordes plegados</caption> Roberto <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Luis</td> <td>23</td> </tr> </table> <table class="separado" style="border:solid 1px"> <caption>Tabla con los bordes separados</caption> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Roberto</td> <td>19</td> </tr> </table> </body>
Espacio entre celdas La 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. Sintaxis selector {border-spacing: valor} Los posibles valores para definir la separacin entre celdas distancia(horizontal) distancia(vertical) | inherit
Ejemplo Vamos a definir la separacin de las celdas. Cdigo <head> <style type="text/css"> table{border-spacing: 10px 20px; border-collapse: separate} </style> </head> <body> <table style="border: solid 1px"> <tr> <th>Marca del automobil</th> <th>Modelo</th> </tr> <tr> <td>Ford</td> <td>Mustang</td> </tr> <tr> <td>Toyota</td> <td>Corolla</td> </tr> </table> </body> Resultado
Marca del automobil Modelo Ford Toyota Mustang Corolla
Comportamiento de las celdas vacas La propiedad empty-cells nos permite controlar la visualizacin de los bordes y fondos de una celda vaca. Sintaxis selector {empty-cells: valor} Los posibles valores para controlar las celdas vacas show | hide | inherit Ejemplo Vamos a comparar el comportamiento de los dos valores. Cdigo <head> <style type="text/css"> Resultado Nombre Edad Estado civil
td.muestra{empty-cells: show} td.oculta{empty-cells: hide} </style> </head> <body> <table style="border-collapse: separate; border solid 1px"> <tr> <th>Nombre</th> <th>Edad</th> <th>Estado civil</th> </tr> <tr> <td>Carlos</td> <td class="oculta"></td> <td>casado</td> </tr> <tr> <td>Julieta</td> <td>27</td> <td class="muestra"></td> </tr> </table> </body>
Carlos Julieta 27
casado
Propiedades de las tablas Propiedad Descripcin
Valores
Detalles Superior No funciona en IE 5, 6 y 7 Inferior No funciona en IE 5, 6 y 7 Automtico Fijo Plegado Separado Longitud No funciona en IE
top caption-side Posicin del ttulo respecto de la tabla. bottom
table-layout
Control del algoritmo usado para auto el formato de las celdas, filas y fixed columnas. Seleccin del modelo de los bordes. collapse separate
border-collapse
border-spacing
Espaciado entre los bordes de longitud celdas adyacentes.
5, 6 y 7 Muestra No funciona en IE 5, 6 y 7 Oculta No funciona en IE 5, 6 y 7
show empty-cells Visibilidad de los bordes de celdas sin contenido. hide
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 nos permiten definir el ancho de los mismos. El relleno - padding La 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 <head> <style="type:text/css"> selector {padding: valor} </style> </head> Los posibles valores para definir los anchos de padding longitud | %
Ejemplo Vamos a ver como se comporta un texto con un relleno de 10% alrededor. Cdigo <head> <style type="text/css"> p.relleno{padding:10%} </style> </head> <body> <p>En este ejemplo podemos observar que el relleno se 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.</p> </body>
Resultado En este ejemplo podemos observar que el relleno se 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-left Las 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 <head> <style="type:text/css"> selector { padding-top: valor padding-right: valor padding-bottom: valor padding-left: valor } </style> </head> Los posibles valores para definir los anchos de padding longitud | %
Ejemplo Vamos a definir el ancho de cada lado por separado. Cdigo <head> <style type="text/css"> p{ padding-top:30px padding-right:10px padding-bottom:20px padding-left:50% } </style> </head> <body> <p>Este texto tiene definido un ancho distinto para cada lado del elemento.</p> </body>
Resultado Este texto tiene definido un ancho distinto para cada lado del elemento.
Tabla de las propiedades de padding (relleno) Propiedad Descripcin
Valores
Detalles Longitud
Tamaos para varios padding individuales. longitud padding-top: ancho del padding superior. padding padding-right: ancho del padding derecho. padding-bottom: inferior. ancho del padding %
Porcentaje
padding-left: ancho del padding derecho.
Bordes CSS Bordes con CSS Los 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 bordes La 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. Sintaxis selector {border: valor-1 valor-2 valor-n} Nota: debemos dejar un espacio en blanco entre los valores Los posibles valores para definir los espesores de los bordes thin | medium | thick | tamao (px, pc, pt, mm, cm, in) | nombre del color(ingls) | #xxxxxx | transparent | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset Ejemplo Vamos a decorar los bordes de una tabla. Cdigo <head> <style type="text/css"> table{border: blue double medium} td{border: green dotted medium} </style> Resultado </head> <body> <table> <tr> <td>Esta tabla</td> <td>tiene los bordes</td> </tr> <tr> <td>decorados con</td> <td>diferentes propiedades</td> Esta tabla tiene los bordes
decorados con diferentes propiedades
</tr> </table> </body> Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style
Espesor de los bordes La propiedad border-width especifica el espesor del borde Sintaxis Establecer 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 lnea Los posibles valores para definir los espesores de los bordes thin fino | medium medio | thick grueso | tamao (px, pc, pt, mm, cm, in) Ejemplo Vamos a aplicar un espesor a un borde sobre un texto. Cdigo <head> <style type="text/css"> Resultado p { border-width: 5px; border-style: solid; } </style> </head> Texto con un borde de 5 pixels
<body> <p>Texto con un borde de 5 pixels</p> </body> Nota: para poder visualizar el borde debemos usar valores de la propiedad border-style
Color de los bordes La propiedad border-color especifica el color del borde Sintaxis Establecer el color de todos los bordes a la vez. 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 bordes nombre del color(ingls) | #xxxxxx | transparent Ejemplo Vamos a aplicar un color a un borde sobre un ttulo. Cdigo <head> <style type="text/css"> h2{ border-color: red; border-style: solid; } </style> </head> Resultado Ttulo con un borde rojo
<body> <h2>Ttulo </body>
con
un
borde
rojo</h2>
Nota: para poder visualizar el borde debemos usar la propiedad border-style
Estilo de los bordes La propiedad border-style especifica el estilo del borde Sintaxis Establecer el estilo de todos los bordes a la vez. 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 bordes none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset Ejemplo Vamos a aplicar un estilo a cada uno de los bordes de una lista. Cdigo <head> <style type="text/css"> h3{ border-top-style: dotted; border-right-style: double; border-bottom-style: dashed; border-left-style: groove; } Resultado Diferentes estilos de bordes
</style> </head> <body> <h3>Diferentes estilos de bordes</h3> </body>
Tabla de las propiedades de los bordes Propiedad Descripcin
Valores thin medium thick longitud
Detalles Fino Mediano Grueso Longitud Color Transparente Nada Oculto Punteado Lnea de rayas Solido Doble Acanalado En relieve Recuadro Resalte Fino Mediano Grueso Longitud
Define ancho, color y estilo general color para los 4 bordes. transparent border-top: define ancho, color y estilo para el borde superior none border border-right: define ancho, color y estilo para el borde derecho hidden dotted
border-bottom: define ancho, color y dashed estilo para el borde inferior solid border-left: define ancho, color y estilo para el borde izquierdo double groove ridge inset outset Ancho general de los 4 bordes. thin border-top-width: ancho del borde medium superior. thick border-right-width: ancho del borde derecho. longitud border-bottom-width: ancho del
border-width
borde
inferior.
border-left-width: ancho del borde izquierdo. Color general de los 4 del bordes. color borde Color
border-top-color:color superior border-right-color:color derecho
del
borde transparent Transparente
border-color
border-bottom-color:color del borde inferior border-left-color:color izquierdo del borde
none Estilo general de los 4 del bordes. borde hidden dotted dashed del borde solid
Nada Oculto Punteado Lnea de rayas Solido Doble Acanalado En relieve Recuadro Resalte
border-top-style:estilo superior border-right-style:estilo derecho
border-style
double border-bottom-style:estilo del borde groove inferior border-left-style:estilo izquierdo del borde ridge inset outset

Qué Es CSS PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Qué Es CSS PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Qu es CSS?

{background- Este texto es de color blanco y el color de fondo de la pgina es #008080.

body{background-image:url("fondo3.jpg")} </style> </head> <body> <p>Ejemplo de una imagen de fondo</p> </body>

<h4>Repeticin de una imagen de fondo</h4> </body>

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

Propiedades del fondo Propiedad Descripcin

Valores background-color background-image

Propiedades individuales relacionadas fondo.

background-repeat con el backgroundattachment

Detalles Longitud Porcentaje

uppercase text-transform Transformaciones del texto a maysculas/minsculas. lowercase

Sentido direccional de la escritura.

ltr rtl normal

embed unicode-bidi Sentido direccional de la escritura. bidi-override

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

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

Propiedades de las fuentes Propiedad Descripcin

Valores font-style font-variant font-weight font-size font-family

Detalles Estilo de fuente Variante de fuente Peso de la fuente Tamao fuente de la

Atajo para establecer el resto de propiedades sobre las fuentes a la vez.

message-box small-caption status-bar

Los contornos no ocupan espacio Los contornos no necesariamente son rectangulares

button{outline: </style> </head>

<body> <button>Enviar</button> </body>

outline-color Propiedades individuales de los contornos. outline-style No funciona en IE 5, 6 y 7 outline-width thin

Ancho del contorno. No funciona en IE 5, 6 y 7

medium thick longitud none hidden dotted dashed

Estilo del contorno. No funciona en IE 5, 6 y 7

solid double groove ridge inset outset color

Color del contorno. No funciona en IE 5, 6 y 7

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

Tabla de las propiedades de las listas Propiedad Descripcin

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

<head> <style type="text/css"> table.plegado{border-collapse: collapse} table.separado{border-collapse: separate} </style> </head>

Tabla con los bordes plegados Nombre Luis Edad 23

Tabla con los bordes separados Edad 19

Marca del automobil Modelo Ford Toyota Mustang Corolla

Propiedades de las tablas Propiedad Descripcin

top caption-side Posicin del ttulo respecto de la tabla. bottom

Espaciado entre los bordes de longitud celdas adyacentes.

5, 6 y 7 Muestra No funciona en IE 5, 6 y 7 Oculta No funciona en IE 5, 6 y 7

show empty-cells Visibilidad de los bordes de celdas sin contenido. hide

Tabla de las propiedades de padding (relleno) Propiedad Descripcin

padding-left: ancho del padding derecho.

Esta propiedad se aplica al rea de bordes de la caja.

decorados con diferentes propiedades

<body> <h2>Ttulo </body>

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

</style> </head> <body> <h3>Diferentes estilos de bordes</h3> </body>

Tabla de las propiedades de los bordes Propiedad Descripcin

Valores thin medium thick longitud

border-top-color:color superior border-right-color:color derecho

borde transparent Transparente

border-bottom-color:color del borde inferior border-left-color:color izquierdo del borde

border-top-style:estilo superior border-right-style:estilo derecho

Das könnte Ihnen auch gefallen