<HTML> <HEAD> <TITLE>Ejemplo</TITLE> </HEAD> <STYLE TYPE="text/css"> <!-- B { font-size: 12pt; color: green } /* Defino H1 y H2 simultaneamente */ H1, H2 { margin-left: 15pt; color: red } --> </STYLE> <BODY> </BODY> </HTML>
<STYLE TYPE="text/css" SRC="estilo.css"> </STYLE> <LINK REL=stylesheet TYPE="text/css" HREF="estilo.css">
<STYLE TYPE="text/css"> H1.rojo { color: red } </STYLE> <H1 CLASS="rojo">Ejemplo</H1>
<STYLE TYPE="text/css"> all.verde { color: green } </STYLE> <H1 CLASS="verde">Ejemplo</H1>
<STYLE TYPE="text/css"> H1.verde { font-style: normal; color: green } #cursiva { font-style: italic } </STYLE> <H1 ID="cursiva">Ejemplo</H1> <H1 CLASS="verde" ID="cursiva">Ejemplo</H1>
<STYLE TYPE="text/css"> UL B { color: yellow; font-style: italic } DIV P.rojo { color: red } </STYLE>
<P STYLE="color: yellow; font-style: italic">
<SPAN STYLE="color: yellow; font-style: italic"> una palabras </SPAN>
<DIV STYLE="color: yellow; font-style: italic"> varios parrafos, listas, etc. </DIV>
A:link {color: yellow} A:visited {color: blue}
Atributo | Descripción | Ejemplos |
---|---|---|
font-size | Tamaño del texto en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje sobre el valor por defecto (%). | {font-size: 12pt} {font-size: 5cm} |
font-family | Nombre de la fuente (times, garamond, arial, helvetica, etc.) o nombre de una familia de fuentes (serif, sans serif, cursive, fantasy, monospace). | {font-family: courier} {font-family: Arial, Helvetica, sans-serif} {font-family: "Courier New"} |
font-weight | Espesor de la fuente. Valores: extra-light, light, demi-light, medium, demi-bold, bold, extra-bold, bolder, lighter, normal o un numero entre 100 y 900 |
{font-weight: bold} |
font-style | Estilo de la fuente. Valores: normal o italic |
{font-style: italic} |
font | La fuente como concatenación de: font-weight, font-style, font-size, font-height, font-family. | {font: bold italic 12pt/20pt Times, serif} |
line-height | Distancia entre la base de las líneas de texto. En puntos (pt), pulgadas (in), centímetros (cm), pixels (px), porcentaje (%) del valor por defecto, o normal |
{line-height: 24pt} {line-height: 150%} |
margin margin-left margin-right margin-top margin-bottom |
Márgen en puntos (pt), pulgadas (in), centímetros (cm), pixels (px), porcentaje (%) o auto. | {margin: 1in} {margin: 1in 2cm 5pt 1cm} {margin-left: 1in} {margin-right: -15pt} {margin-top: 10%} {margin-bottom: 1cm} |
padding padding-left padding-right padding-top padding-bottom |
Márgen en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%). | {padding: 1in} {padding-left: 2cm} |
border-top-width border-bottom-width border-left-width border-right-width border-width |
Tamaño del borde, en puntos (pt), pulgadas (in), centímetros (cm) o pixels (px). | {border-left-width: 1in} {border-width: 2cm} |
border-style | Estilo del borde. Valores: none, solid, double, inset, outset, groove o ridge. |
{border-style: inset} |
border-color | Color del borde. Valores: nombre del color o valor RGB |
{border-color: blue} |
text-decoration | Decoración del texto. Valores: none, underline, blink, italic y line-through |
{text-decoration: underline} |
text-align | Justificación del texto. Valores: left, center, right, justify. |
{text-align: right} |
text-indent | Indentación primera línea de los párrafos en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%). | {text-indent: 0.5in} |
text-transform | Como mostrar la primera letra del texto. Valores: none, capitalize, uppercase, lowercase |
{text-transform: capitalize} |
width | Ancho en puntos (pt), pulgadas (in), centímetros (cm), pixels (px), porcentaje (%) o auto. | {width: 2cm} |
float | Alineamiento. Valores: left, right, none. |
{float: left} |
clear | Desactivación de alineamiento. Valores: none, left, right, both |
{clear: both} |
color | Color de primer plano del texto. Valores: nombre del color o valor RGB |
{color: blue} {color: #aa5500} |
background | Imagen o el color del fondo. Valores: URL(url), nombre del color o valor RGB. |
{background: #33CC00} {background: URL(lib/nubes.jpg)} |
background-color | Color del fondo. Valores: nombre del color o valor RGB. |
{background-color: #33CC00} |
background-image | Imagen del fondo. Valores: URL(url). |
{background-image: URL(lib/nubes.jpg)} |
display | Tipo de elemento. Valores: block, inline, list-item, none. Nota: Los elementos de bloque no responden como inline. |
{display: inline} |
list-style-type | Estilo de los elementos de tipo list-item. Valores: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. |
{list-style-type: circle} |
white-space | Ignorar espacios en blanco y retornos de carro consecutivos. Valores: normal, pre. |
{white-space: pre} |