Propiedad | Descripción | Valores | Ejemplo |
---|---|---|---|
Font | Establece todos los sub-atributos juntos en una sola linea. | Style Variant Weight Size Family | {font: Normal small-caps bold 12pt/14pt sans-serif} |
Font-Style | Establece el texto como letra cursiva. | Normal Italic oblique | {font-style: italic} |
Font-Variant | Establece las mayusculas u minusculas del mismo tamaño | Normal Small-caps | {font-style: Small-caps} |
Font-Weight | Establece el peso de la fuente, pero dependen de ella. | normal bold bolder lighther 100 a 900 | {font-weight: bold} |
Font-Size | Establece el tamañe texto. Absolutos, relativos (large o smaller) | Absoluto (px) Relativo (%) | {font-size: 24px} {font-size: 10%} |
Font-Family | Establece el tipo de fuente. | Nombre de la fuente o familia de fuente | {font-family: "Comic Sans MS","Sans-Serif","Verdana"} |
Line-Height | Establece la distancia entre líneas. | normal Absoluto (px) relativo (%) | {Line-Height: 24pt} |
Color | Establece el color del texto. | Nombre del color Transparent valores RGBA valor HSLA | {color: blue} |
Text-Decoration | Subraya o remarca el texto. | None Underline Overline line-through blink | {text-decoration: underline} |
Text-align | Establece la alineacion del texto. | Left Center Right justify | {text-align: justify} |
Text-Indent | Establece la indentación del texto en "largo fijo" o "porcentaje" | absoluto (px) relativo (%) | {text-indent: 5px} |
Text-Transform | Intercambia entre mayusculas y minisculas. | none capitalize uppercase lowecase | {text-transform: capitalize} |
Background | Establece todo slos atributos de fondo. color, image, repeat, attachment y position. | URL, nombre del color valor RGB | {background:#33CC00} {background: red} {background: URL(isla.gif) no-repeat} |
Border | Establece todas la propiedades de borde juntas. | width style color | {border: 3px solid red} |
Border-width | Establece el grosor del borde de las lineas. Recuerda que si es una caja puedes establecer 4 valores. Un solo valor establece los cuatro lados iguales. Si quieres diferencias inicia arriba y sentido horario o establecer solo uno especificandolo asi: Border-right-width: 3px. | Pixeles (px) thin medium thick | {border-width: 3px} |
Border-style | Establece el estilo de la linea. Recuerda que si es una caja puedes establecer 4 valores: superior (Top), derecho (right), inferior (bottom), izquierdo (left) o establecer uno solo Border-right-style: dotted | None Hidden Solid dotted dashed double groove ridge inset outset auto | {border-style: dotted} |
Border-color | Establece el color de la linea. Recuerda que si es una caja puedes establecer 4 valores. Un solo valor establece los cuatro lados iguales. Si quieres diferencias inicia arriba y sentido horario o establecer uno solo valor asi: Border-right-color: transparent | nombre del color valor RGB RGB() valor HSL | {border-color: #33CC00} |
Border-collapse | Establece si los borden estaran separados o juntos. | collapse separate | {border-collapse: collapse} |
Border-spacing | Establece el espacio entre bordes si estan esparados. | adsoluta (px) | {border-spacing: 3px} |
Margin | Establece todos los margenes en orden superio, derecho, abajo e izquierdo. Sentido horario. Un solo valor estable los 4 margenes iguales. | Puntos (pt) pixels (px) centímetros (cm) pulgadas (in) | {margin: 10px 20px 4px 20px} |
Margin-top | Establece el márgen superior de la pagina. | Puntos (pt) pixels (px) centímetros (cm) pulgadas (in) | {margin-top: 20px} |
Margin-right | Establece el márgen derecho de la pagina. | pixels (px) Puntos (pt) centímetros (cm) pulgadas (in) | {margin-right: 3cm} |
Margin-botton | Establece el márgen inferior de la pagina | pixels (px) Puntos (pt) centímetros (cm) pulgadas (in) | {margin-botton: 10pt} |
Margin-left | Establece el márgen izquierdo de la pagina | pixels (px) Puntos (pt) centímetros (cm) pulgadas (in) | {margin-left: 1in} |
Padding | Establece la separacion del contenido al borde. Un solo valor establece los cuatro lados iguales. Si quieres diferencias inicia arriba y sentido horario. | pixels (px) Puntos (pt) centímetros (cm) pulgadas (in) | {padding: 10px} |
width | Establece el ancho de la caja | auto "largo" "porcentaje" | {width: 100px} |
height | Establece el ancho de la caja | auto "largo" | {height: 100px} |
float | El elemento se mueve hacia a un lado y el texto se ajustará a su lado. La propiedad "display" es ignorada. | auto left right none | {floar: left} |
clear | Esta propiedad especifica si un elemento permite elementos flotantes a sus lados. | none left right both | {clear: both} |
vertical-align | Alineacion vertical del texto. | baseline middle sub super text-top text-bottom top bottom absoluto (px) porcentaje (%) | {clear: both} |