• Propiedades de fuente
• Propiedades de color y fondo
• Propiedades de texto
• Propiedades de bloque
• Propiedades de clasificación
• Unidades de medida

Propiedades de Fuente

• Familia de fuente
• Estilo de fuente
• Variante de fuente
• Peso de fuente
• Tamaño de fuente
• Fuente

Familia de fuente

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

El tipo de fuente se puede cambiar también con la propiedad font .

Estilo de fuente

H1 { font-style: oblique }

P  { font-style: normal }

Variante de fuente

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

H1 { font-weight: 800 }

P  { font-weight: normal }

Tamaño de fuente

H1     { font-size: large }

P      { font-size: 12pt }

LI     { font-size: 90% }

STRONG { font-size: larger }

Fuente

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

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 añadidos
• Posición del fondo
• Fondos

Color

H1 { color: blue }

H2 { color: #000080 }

H3 { color: #0c0 }

Para evitar problemas conviene definirlo junto con el background.

Color de fondo

BODY { background-color: white }

H1   { background-color: #000080 }

Imagen de fondo

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 también un background color similar para que si se desactiva la carga de imágenes el texto siga pudiéndose leer.

Repetir fondo

BODY { background: white url(candybar.gif);

       background-repeat: repeat-x }

repeat-x repetirá la imagen sólo horizontalmente, mientras que repeat-y lo hará verticalmente.

Background Attachment

BODY { background: white url(candybar.gif);

       background-attachment: fixed }

Posición del fondo

Fondo

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }

TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

Propiedades de texto

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

Word Spacing

P EM   { word-spacing: 0.4em }

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

Permite cambiar la cantidad de separación que habrá entre las palabras. Se permiten valores negativos.

Espaciado entre letras

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

Decoración de texto

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

Alineación vertical

IMG.middle { vertical-align: middle }

IMG        { vertical-align: 50% }

.exponent  { vertical-align: super }

Permite especificar como se alinearan los elementos con respecto a la línea base del texto.

Transformaciones del texto

H1 { text-transform: uppercase }

H2 { text-transform: capitalize }

Alineación de texto

H1          { text-align: center }

P.newspaper { text-align: justify }

Sangrados

P { text-indent: 5em }

Interlineado

P { line-height: 200% }

Propiedades de bloques

• Márgenes
• Separaciones (Padding)
• Anchura de los bordes
• Border Color
• Border Style
• Bordes
• Anchura
• Altura
• Alineación
• Clear

Márgenes

BODY { margin-top: 0 }

BODY { margin: 5em }             /* todos los márgenes de 5em */

P    { margin: 2em 4em }         /* margen superior e inferior de 2em,
                                  e izquierdo y derecho de 4em */

DIV  { margin: 1em 2em 3em 4em } /* margen superior de 1em, derecho de 2em,
                                   inferior de 3em, e izquierdo de 4em */

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 márgenes superior, derecho, inferior e izquierdo, respectivamente.

Separaciones

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

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

Estilo de los bordes

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

Bordes

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 características de los bordes. Si se quiere sólo especificar los de un border habrá que usar el respectivo.

Anchura

INPUT.button { width: 10em }

Altura

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

Alineación

Esta propiedad permite hacer que el texto contornee el bloque.

Clear

Permite especificar donde se puede o no hacer flotar elementos. La zona especificada NO tendrá elementos, se quedará vacía.

Propiedades de clasificación

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

Display

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

Espacios en blanco

Determina la forma en que se tratará el espacio en blanco de una página. El valor normal hace que sólo se vea un espacio entre palabras, pre muestra los espacios tal como estén estén escritos, y nowrap no permite retorno automático dentro de una etiqueta <BR>

Estilos de lista

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */

Estilos de imágenes en las listas

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

UL LI.x  { list-style-image: url(x.png) }

Posición de estilos de lista

Outside rendering:

 * List item 1
   second line of list item

Inside rendering:

   * List item 1
   second line of list item

Estilos de lista

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { 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 número y una unidad de medida sin espacios; P.ej., 1.3 em no es válido, pero 1.3em sí es válido.

Tipos de unidades relativas:

• em (ems, la altura de la fuente, normalmente la altura de las mayúsculas)
• ex (la mitad de la altura de la fuente, normalmente la altura de la letra "x")
• px (pixels, relativos a la resolución 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 número y % sin espacios; P.ej., 3%.

Unidades de color

Un valor de color es un nombre de color o una descripción numérica 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 numéricos RGB se pueden dar de 4 maneras:

• #rrggbb (P.ej., #00cc00)
• #rgb (P.ej., #0c0)
• rgb(x,x,x) donde x es un número entero entre 0 y 255 inclusive (P.ej., rgb(0,204,0))
• rgb(y%,y%,y%) where y es un número 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 sintáxis url(nombre), en donde nombre es la URL. La URL puede estar escrita, opcionalmente, entre comillas sencillas (') o dobles (").

Paréntesis, comas, espacios, comillas sencillas o dobles que queramos que sean escritas literalmente dentro de la URL deberán 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 */