|
Nombre del
atributo |
Posibles
valores |
Ejemplos |
|
FUENTES -
FONT |
| color |
valor
RGB o nombre de color |
color:
#009900;
color: red; |
| Sirve para indicar
el color del texto. Lo admiten casi todas
las etiqetas de HTML. No todos los nombres
de colores son admitidos en el estandar,
es aconsejable entonces utilizar el valor
RGB. |
| font-size
|
xx-small
| x-small | small | medium | large |
x-large | xx-large
Unidades de CSS |
font-size:12pt;
font-size: x-large; |
| Sirve para indicar
el tamaño de las fuentes de manera
más rígida y con mayor exactitud. |
| font-family |
serif
| sans-serif | cursive | fantasy | monospace
Todas las fuentes habituales |
font-family:arial,helvetica;
font-size: fantasy; |
Con este atributo
indicamos la familia de tipografia del
texto. Los primeros valores son genéricos,
es decir, los exploradores las comprenden
y utilizan las fuentes que el usuario
tenga en su sistema.
También se pueden definir con tipografías
normales, como ocurría en html.
Si el nombre de una fuente tiene espacios
se utilizan comillas para que se entienda
bien. |
| font-weight
|
normal
| bold | bolder | lighter | 100 | 200
| 300 | 400 | 500 | 600 | 700 | 800
| 900 |
font-weight:bold;
font-weight: 200; |
Sirve para definir
la anchura de los caracteres, o dicho
de otra manera, para poner negrillas con
total libertad.
Normal y 400 son el mismo valor, así
como bold y 700. |
| font-style |
normal
| italic | oblique |
font-style:normal;
font-style: italic; |
| Es el estilo
de la fuente, que puede ser normal, itálica
u oblícua. El estilo oblique es
similar al italic. |
|
PÁRRAFOS
- TEXT |
| line-height |
normal y unidades
CSS |
line-height: 12px;
line-height: normal; |
| El alto de una
línea,y por tanto, el espaciado
entre líneas. Es una de esas características
que no se podian mofificar utilizando
HTML. |
| text-decoration |
none | [ underline
|| overline || line-through ] |
text-decoration:
none;
text-decoration: underline; |
| Para establecer
la decoración de un texto, es decir,
si está subrayado, sobrerayado
o tachado. |
| text-align
|
left | right |
center | justify |
text-align: right;
text-align: center; |
| Sirve para indicar
la alineación del texto. Es interesante
destacar que las hojas de estilo permiten
el justificado de texto, aunque recuerda
que no tiene por que funcionar en todos
los sistemas. |
| text-indent
|
Unidades CSS |
text-indent: 10px;
text-indent: 2in; |
| Un atributo
que sirve para hacer sangrado o márgenes
en las páginas. Muy útil
y novedosa. |
| text-transform
|
capitalize | uppercase
| lowercase | none |
text-transform:
none;
text-transform: capitalize; |
| Nos permite
transformar el texto, haciendo que tenga
la primera letra en mayúsculas
de todas las palabrs, todo en mayúsculas
o minúsculas. |
| FONDO
- BACKGROUND |
Background-color
|
Un color, con su
nombre o su valor RGB |
background-color:
green;
background-color: #000055; |
| Sirve para indicar
el color de fondo de un elemento de la
página. |
Background-image
|
El nombre de la
imagen con su camino relativo o absoluto |
background-image:url(mármol.gif)
;
background-image: url(http://www.x.com/fondo.gif)
|
| Colocamos con
este atributo una imagen de fondo en cualquier
elemento de la página |
| BOX
- CAJA |
| Margin-left
|
Unidades CSS |
margin-left: 1cm;
margin-left: 0,5in; |
| Indicamos con
este atributo el tamaño del margen
a la izquierda |
| Margin-right
|
Unidades CSS |
margin-right: 5%;
margin-right: 1in; |
| Se utiliza para
definir el tamaño del margen a
la derecha |
| Margin-top
|
Unidades
CSS |
margin-top:
0px;
margin-top: 10px; |
| Indicamos con
este atributo el tamaño del margen
arriba de la página |
| Margin-bottom
|
Unidades CSS |
margin-bottom:
0pt;
margin-top: 1px; |
| Con el se indica
el tamaño del margen en la parte
de abajo de la página |
| Padding-left
|
Unidades CSS |
padding-left: 0.5in;
padding-left: 1px; |
Indica el espacio
insertado, por la izquierda, entre el
borde del elemento-continente y el contenido
de este. Es parecido a el atributo cellpadding
de las tablas.
El espacio insertado tiene el mismo fondo
que el fondo del elemento-continente. |
| Padding-right |
Unidades CSS |
padding-right:
0.5cm;
padding-right: 1pt; |
Indica el espacio
insertado, en este caso por la derecha,
entre el borde del elemento-continente
y el contenido de este. Es parecido a
el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo
que el fondo del elemento-continente.
|
| Padding-top
|
Unidades CSS |
padding-top: 10pt;
padding-top: 5px; |
| Indica el espacio
insertado, por arriba, entre el borde
del elemento-continente y el contenido
de este. |
| Padding-bottom
|
Unidades CSS |
padding-right:
0.5cm;
padding-right: 1pt; |
| Indica el espacio
insertado, en este caso por abajo, entre
el borde del elemento-continente y el
contenido de este. |
| Border-color
|
color RGB y nombre
de color |
border-color: red;
border-color: #ffccff; |
| Para indicar
el color del borde del elemento de la
página al que se lo aplicamos.
Se puede poner colores por separado con
los atributos border-top-color, border-right-color,
border-bottom-color, border-left-color. |
| Border-style
|
none | dotted |
solid | double | groove | ridge | inset
| outset |
border-style: solid;
border-style: double; |
| El estilo del
borde, los valores significan: none=ningun
borde, dotted=punteado (no parece funcionar),
solid=solido, double=doble borde, y desde
groove hasta outset son bordes con varios
efectos 3D. |
| border-width
|
Unidades
CSS |
border-width:
10px;
border-width: 0.5in; |
| El tamaño
del borde del elemento al que lo aplicamos. |
| float
|
none | left | right
|
float: right; |
| Sirve para alinear
un elemento a la izquierda o la derecha
haciendo que el texto se agrupe alrededor
de dicho elemento. Igual que el atributo
align en imagenes en sus valores right
y left. |
|
clear |
none | right | left
|
clear: right; |
| Si este elemento
tiene a su altura imagenes u otros elementos
alineados a la derecha o la izquierda,
con el atributo clear hacemos que se coloque
en un lugar donde ya no tenga esos elementos
a el lado que indiquemos. |
