Propiedades de las hojas de estilo

Propiedades de fuente Propiedades de color y fondo Propiedades de texto Propiedades de bloque Propiedades de clasificacin Unidades de medida

Propiedades de Fuente

Familia de fuente Estilo de fuente Variante de fuente Peso de fuente Tamao de fuente Fuente

Familia de fuente Sintxis: Posibles valores: font-family: nombre-familia | familia-genrica nombre-familia

Cualquier nombre de familia. Como no todos los ordenadores tendrn las familias instaladas, se pueden poner varias alternativas separadas por comas

familia-genrica

serif (P.ej., Times) sans-serif (P.ej., Arial or Helvetica) cursive (P.ej., Zapf-Chancery) fantasy (P.ej., Western) monospace (P.ej., Courier)

Valor por defecto: Se aplica a: Ejemplo:

La fuente por defecto

Todos los elementos

P { font-family: "New Century Schoolbook", Times, serif }

El tipo de fuente se puede cambiar tambin con la propiedad font .

Estilo de fuente Sintxis: Posibles valores: font-style: valor normal | italic | oblique

Valor por defecto: normal Se aplica a: Ejemplo: Todos los elementos

H1 { font-style: oblique } P { font-style: normal }

Variante de fuente Sintxis: Posibles valores: font-variant: valor normal | SMALL-CAPS

Valor por defecto: normal Se aplica a: Ejemplo: Todos los elementos

SPAN { font-variant: small-caps }

Permite especificar si la letra se ver normal o en versalita. Versiones posteriores de CSS permiten otras variantes, como: condensed, expanded, small-caps numeral, ...

Peso de fuente Sintxis: font-weight: valor

Posibles valores:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal

Valor por defecto: Se aplica a: Ejemplo:

Todos los elementos

H1 { font-weight: 800 } P { font-weight: normal }

Tamao de fuente Sintxis: Posibles valores: font-size: tamao-absoluto | tamao-relativo | longitud | porcentaje

tamao-absoluto
o
xx-small

| x-small | small | medium |

large | x-large |

xx-large

tamao-relativo o larger | smaller longitud porcentaje (en relacin al elemento anterior)

Valor por defecto: Se aplica a: Ejemplo:

medium

Todos los elementos

H1 P LI { font-size: large } { font-size: 12pt } { font-size: 90% }

STRONG { font-size: larger }

Fuente Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: font: valor font-style || font-variant || font-weight || font-size /line-height || font-family

Ninguno

Todos los elementos

P { font: italic bold 12pt/14pt Times, serif }

especifica un prrafo en negrita, cursiva, Times con un tamao de 12 puntos y un interlineado de 14 puntos. La propiedad font es una forma de abreviar propiedades de fuente y de interlineado.

Propiedades de color y fondo

Color Color de fondo Imagen de fondo Repetir fondo Fondos aadidos Posicin del fondo Fondos

Color Sintxis: color: color

Valor por defecto: Depende del navegador. Normalmente negro Se aplica a: Ejemplo: Todos los elementos
H1 { color: blue } H2 { color: #000080 }

H3 { color: #0c0 }

Para evitar problemas conviene definirlo junto con el background.

Color de fondo Sintxis: Posibles valores: background-color: valor color | transparent

Valor por defecto: transparent Se aplica a: Ejemplo: Todos los elementos

BODY { background-color: white } H1 { background-color: #000080 }

Imagen de fondo Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: background-image: valor url | none ninguno

Todos los elementos

BODY { background-image: url(/images/foo.gif) } P { background-image: url(http://www.htmlhelp.com/bg.png) }

Cuando se define una imagen de fondo conviene definir tambin un background color similar para que si se desactiva la carga de imgenes el texto siga pudindose leer.

Repetir fondo Sintxis: Posibles valores: background-repeat: valor repeat | repeat-x | repeat-y | no-repeat

Valor por defecto: repeat Se aplica a: Ejemplo: Todos los elementos

BODY { background: white url(candybar.gif); background-repeat: repeat-x }

repeat-x repetir la imagen slo horizontalmente, mientras que repeat-y lo har verticalmente.

Background Attachment Sintxis: Posibles valores: background-attachment: valor scroll | fixed

Valor por defecto: scroll Se aplica a: Ejemplo: Todos los elementos

BODY { background: white url(candybar.gif); background-attachment: fixed }

Posicin del fondo Sintxis: Posibles valores: background-position: valor [porcentaje | longitud | top | center | bottom | left | center | right

Valor por defecto: 0% 0%

Se aplica a: Ejemplo:

Bloques y IMG, INPUT, TEXTAREA, SELECT, OBJECT

Fondo Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: background: valor <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> No definido

Todos los elementos

BODY { background: white url(http://www.htmlhelp.com/foo.gif) } TABLE right } { background: #0c0 url(leaves.jpg) no-repeat bottom

Propiedades de texto

Word Spacing Letter Spacing Text Decoration Vertical Alignment Text Transformation Text Alignment Text Indentation Line Height

Word Spacing Sintxis: word-spacing: valor

Posibles valores:

normal | longitud

Valor por defecto: normal Se aplica a: Ejemplo: Todos los elementos

P EM { word-spacing: 0.4em }

P.note { word-spacing: -0.2em }

Permite cambiar la cantidad de separacin que habr entre las palabras. Se permiten valores negativos.

Espaciado entre letras Sintxis: Posibles valores: letter-spacing: valor normal | longitud

Valor por defecto: normal Se aplica a: Ejemplo: Todos los elementos

H1 { letter-spacing: 0.1em }

P.note { letter-spacing: -0.1em }

Permite definir el espacio entre las letras (interletraje o kerning). Se permiten valores negativos

Decoracin de texto Sintxis: Posibles valores: text-decoration: valor none || underline || overline || line-through || blink

Valor por defecto: none

Se aplica a: Ejemplo:

Todos los elementos

A:link, A:visited, A:active { text-decoration: none }

Alineacin vertical Sintxis: Posibles valores: vertical-align: valor baseline | sub | super | top | text-top | middle | bottom | text-bottom | porcentaje baseline

Valor por defecto: Se aplica a: Ejemplo:

Elementos de lnea (EM, A, IMG)

IMG.middle { vertical-align: middle } IMG .exponent { vertical-align: 50% } { vertical-align: super }

Permite especificar como se alinearan los elementos con respecto a la lnea base del texto.

Transformaciones del texto Sintxis: Posibles valores: text-transform: valor none | capitalize | UPPERCASE | lowercase

Valor por defecto: none Se aplica a: Ejemplo: Todos los elementos

H1 { text-transform: uppercase } H2 { text-transform: capitalize }

Alineacin de texto Sintxis: Posibles valores: text-align: valor left | right | center | justify

Valor por defecto: Determinado por el navegador Se aplica a: Ejemplo: Bloques

H1 { text-align: center }

P.newspaper { text-align: justify }

Sangrados Sintxis: Posibles valores: text-indent: valor longitud | porcentaje

Valor por defecto: 0 Se aplica a: Ejemplo: Bloques

P { text-indent: 5em }

Interlineado Sintxis: Posibles valores: line-height: valor normal | nmero | longitud | porcentaje

Valor por defecto: normal Se aplica a: Todos los elementos

Ejemplo:

Doble espacio
P { line-height: 200% }

Propiedades de bloques

Mrgenes Separaciones (Padding) Anchura de los bordes Border Color Border Style Bordes Anchura Altura Alineacin Clear

Mrgenes Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: margin-top, margin-right, margin-top, margin-bottom, margin: valor longitud | porcentaje | auto

Todos los elementos

BODY { margin-top: 0 } BODY { margin: 5em } 5em */ P { margin: 2em 4em } inferior de 2em, 4em */ DIV { margin: 1em 2em 3em 4em } /* margen superior de 1em, derecho de 2em, inferior de 3em, e izquierdo de 4em */ /* todos los mrgenes de /* margen superior e e izquierdo y derecho de

La propiedad margin permite definir todos los margenes de una sola vez si se desean uniformes, o poner 4 valores separados por espacios que corresponderan a los mrgenes superior, derecho, inferior e izquierdo, respectivamente.

Separaciones Sintxis: Posibles valores: padding-top, padding-right, padding-bottom, padding-left, padding: valor [ longitud | porcentaje

Valor por defecto: 0 Se aplica a: Ejemplo: Todos los elementos

BLOCKQUOTE { padding: 2em 4em 5em }

La propiedad padding permite definir el espacio que habr entre un elemento y su margen de una sola vez si se desean uniformes, o poner 4 valores separados por espacios que corresponderan a los espaciados superior, derecho, inferior e izquierdo, respectivamente.

Grosor de los bordes Sintxis: border-top-width, border-right-width, border-bottom-width, border-left-width, border-width: valor thin | medium | thick | longitud

Posibles valores: Valor por defecto: Se aplica a:

No definidos

Todos los elementos

La propiedad border-width permite definir el grosor de los bordes de una sola vez si se desean uniformes, o poner 4 valores separados por espacios que corresponderan al grosor de los bordes superior, derecho, inferior e izquierdo, respectivamente.

Color del borde Sintxis: Posibles valores: border-color: valor color

Valor por defecto: El valor de la propiedad color Se aplica a: Todos los elementos

Estilo de los bordes Sintxis: Posibles valores: border-style: valor none | dotted | dashed | solid | double | groove | ridge | inset | outset Valor por defecto: Se aplica a: none

Todos los elementos

Se puede dar un slo valor o 4. En este caso ltimo caso corresponderan a los lados superior, derecho, inferior e izquierdo, respectivamente.

Bordes Sintxis: Posibles valores: boder-top, border-right, border-bottom, border-left, border: valor <border-width> || <border-style> || <color>

Valor por defecto: No definido Se aplica a: Ejemplo: Todos los elementos

H2 { border: groove 3em }

A:link

{ border: solid blue }

A:visited { border: thin dotted #800080 } A:active { border: thick double red }

La propiedad border permite difinir de una sola vez varias caractersticas de los bordes. Si se quiere slo especificar los de un border habr que usar el respectivo.

Anchura Sintxis: Posibles valores: width: valor longitud | porcentaje | auto

Valor por defecto: auto Se aplica a: Ejemplo: Elementos de bloque

INPUT.button { width: 10em }

Altura Sintxis: Posibles valores: height: valor longitud | auto

Valor por defecto: auto Se aplica a: Ejemplo: Elementos de bloque

IMG.foo { width: 40px; height: 40px }

Alineacin Sintxis: float: valor

Posibles valores:

left | right | none

Valor por defecto: none Se aplica a: Todos los elementos

Esta propiedad permite hacer que el texto contornee el bloque.

Clear Sintxis: Posibles valores: clear: valor none | left | right | both

Valor por defecto: none Se aplica a: Todos los elementos

Permite especificar donde se puede o no hacer flotar elementos. La zona especificada NO tendr elementos, se quedar vaca.

Propiedades de clasificacin

Display Whitespace List Style Type List Style Image List Style Position List Style

Display Sintxis: Posibles valores: display: valor block | inline | list-item | none

Valor por defecto: block Se aplica a: Ejemplo: Todos los elementos No

Permite determinar como se ha de visualizar un elemento en la pgina. Da lugar a que el elemento aparezca en un nuevo cuadro, saltando de lnea (block), en la misma lnea (inline) o saltando y con un topo de lista (list-item).

Espacios en blanco Sintxis: Posibles valores: white-space: valor normal | pre | nowrap

Valor por defecto: normal Se aplica a: Elementos de bloque

Determina la forma en que se tratar el espacio en blanco de una pgina. El valor normal hace que slo se vea un espacio entre palabras, pre muestra los espacios tal como estn estn escritos, y nowrap no permite retorno automtico dentro de una etiqueta <BR>

Estilos de lista Sintxis: Posibles valores: Valor por defecto: Se aplica a: list-style-type: valor disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none disc

Elementos con el valor list-item en display value

Ejemplo:

LI.square UL.plain OL etc. */ OL OL etc. */

{ list-style-type: square } { list-style-type: none } { list-style-type: upper-alpha } { list-style-type: decimal }

/* A B C D E /* 1 2 3 4 5

Estilos de imgenes en las listas Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: list-style-image: valor <url> | none none

Elementos con el valor list-item en display value

UL.check { list-style-image: url(/LImarkers/checkmark.gif) } UL LI.x { list-style-image: url(x.png) }

Posicin de estilos de lista Sintxis: Posibles valores: list-style-position: valor inside | outside

Valor por defecto: outside Se aplica a: Ejemplo: Elementos con el valor list-item en display value
Outside rendering: * List item 1 second line of list item Inside rendering: * List item 1 second line of list item

Estilos de lista Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: list-style: valor <list-style-type> || <list-style-position> || <url> No definido

Elementos con el valor list-item en display value

LI.square UL.plain UL.check circle } OL OL OL { list-style: square inside } { list-style: none } { list-style: url(/LI-markers/checkmark.gif) { list-style: upper-alpha } { list-style: lower-roman inside }

Unidades

Unidades de Longitud Unidades de Porcentaje Unidades de Color URLs

Unidades de Longitud

El formato de una valor de longitud es un signo opcional + o -, seguido por un nmero y una unidad de medida sin espacios; P.ej., 1.3 em no es vlido, pero 1.3em s es vlido. Tipos de unidades relativas:

em (ems, la altura de la fuente, normalmente la altura de las maysculas) ex (la mitad de la altura de la fuente, normalmente la altura de la letra "x") px (pixels, relativos a la resolucin del lienzo)

Tipos de unidades absolutas:

in (pulgadas; 1in=2.54cm) cm (centimetros; 1cm=10mm) mm (milimetros) pt (puntos; 1pt=1/72in) pc (picas; 1pc=12pt)

Unidades de porcentaje

Un valor de porcentaje est formado por un signo opcional + o -, seguido por un nmero y % sin espacios; P.ej., 3%.

Unidades de color

Un valor de color es un nombre de color o una descripcin numrica RGB. Los 16 nombres de color de la paleta VGA de Windows, son: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Los valores numricos RGB se pueden dar de 4 maneras:

#rrggbb (P.ej., #00cc00) #rgb (P.ej., #0c0) rgb(x,x,x) donde x es un nmero entero entre 0 y 255 inclusive (P.ej., rgb(0,204,0)) rgb(y%,y%,y%) where y es un nmero entre 0.0 y 100.0 inclusive (P.ej., rgb(0%,80%,0%))

Los ejemplos anteriores especifican todos el mismo color.

URLs

Los valores de URL tienen la sintxis url(nombre), en donde nombre es la URL. La URL puede estar escrita, opcionalmente, entre comillas sencillas (') o dobles ("). Parntesis, comas, espacios, comillas sencillas o dobles que queramos que sean escritas literalmente dentro de la URL debern ser precedidas de una contrabarra. Ejemplos:
BODY { background: url(stripe.gif) } BODY { background: url(http://www.htmlhelp.com/stripe.gif) } BODY { background: url( stripe.gif ) } BODY { background: url("stripe.gif") } BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */