Escolar Documentos
Profissional Documentos
Cultura Documentos
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
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)
Estilo de fuente Sintxis: Posibles valores: font-style: valor normal | italic | oblique
Permite especificar si la letra se ver normal o en versalita. Versiones posteriores de CSS permiten otras variantes, como: condensed, expanded, small-caps numeral, ...
Posibles valores:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal
Tamao de fuente Sintxis: Posibles valores: font-size: tamao-absoluto | tamao-relativo | longitud | porcentaje
tamao-absoluto
o
xx-small
large | x-large |
xx-large
medium
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
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.
Color Color de fondo Imagen de fondo Repetir fondo Fondos aadidos Posicin del fondo Fondos
Valor por defecto: Depende del navegador. Normalmente negro Se aplica a: Ejemplo: Todos los elementos
H1 { color: blue } H2 { color: #000080 }
H3 { color: #0c0 }
Imagen de fondo Sintxis: Posibles valores: Valor por defecto: Se aplica a: Ejemplo: background-image: valor url | none ninguno
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
repeat-x repetir la imagen slo horizontalmente, mientras que repeat-y lo har verticalmente.
Posicin del fondo Sintxis: Posibles valores: background-position: valor [porcentaje | longitud | top | center | bottom | left | center | right
Se aplica a: Ejemplo:
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
Propiedades de texto
Word Spacing Letter Spacing Text Decoration Vertical Alignment Text Transformation Text Alignment Text Indentation Line Height
Posibles valores:
normal | longitud
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
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
Se aplica a: Ejemplo:
Alineacin vertical Sintxis: Posibles valores: vertical-align: valor baseline | sub | super | top | text-top | middle | bottom | text-bottom | porcentaje baseline
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
Alineacin de texto Sintxis: Posibles valores: text-align: valor left | right | center | justify
Interlineado Sintxis: Posibles valores: line-height: valor normal | nmero | longitud | porcentaje
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
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
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
No definidos
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.
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
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>
A:link
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.
Posibles valores:
Clear Sintxis: Posibles valores: clear: valor none | left | right | both
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
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
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
Ejemplo:
/* 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
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
Unidades
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)
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%))
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 */