Aqu puedes ver la tabla de los atributos CSS ms fundamentales para aplicar estilos a elementos bsicos, que te vendr
perfectamente para comenzar con las CSS. Existen muchos otros atributos que aprenders en captulos sucesivos del Manual de CSS. Recuerda adems que si quieres ver cmo se aplican muchos de estos estilos en pginas web puedes ver el vdeo tutorial sobre los atributos de las CSS.
Nombre del atributo color Posibles valores FUENTES - FONT
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.
Ejemplos
font-size
xx-small | x-small | small | medium | large | font-size:12pt; x-large | xx-large font-size: x-large; Unidades de CSS serif | sans-serif | cursive | fantasy | monospace Todas las fuentes habituales
Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor exactitud.
font-family
font-family:arial,helvetica; font-family: fantasy;
Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema. Tambin se pueden definir con tipografas normales, como ocurra 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, itlica u oblcua. El estilo oblique es similar al italic.
PRRAFOS - TEXT line-height
normal y unidades CSS line-height: 12px; line-height: normal; El alto de una lnea,y por tanto, el espaciado entre lneas. Es una de esas caractersticas que no se podian mofificar utilizando HTML.
text-decoration text-align
none | [ underline || overline || line-through text-decoration: none; ] text-decoration: underline; text-align: right; text-align: center;
Para establecer la decoracin de un texto, es decir, si est subrayado, sobrerayado o tachado. left | right | center | justify
Sirve para indicar la alineacin 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 text-transform
Unidades CSS
text-indent: 10px; text-indent: 2in; text-transform: none; text-transform: capitalize;
Un atributo que sirve para hacer sangrado o mrgenes en las pginas. Muy til y novedosa. capitalize | uppercase | lowercase | none
Nos permite transformar el texto, haciendo que tenga la primera letra en maysculas de todas las palabrs, todo en maysculas o minsculas.
FONDO - BACKGROUND Backgroundcolor Backgroundimage
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 pgina. El nombre de la imagen con su camino relativo o absoluto background-image: url(mrmol.gif) ; background-image:
url(http://www.x.com/fondo.gif) Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina, se puede ver una
BOX - CAJA Margin-left Margin-right Margin-top Margin-bottom Padding-left
Unidades CSS margin-left: 1cm; margin-left: 0,5in; margin-right: 5%; margin-right: 1in; margin-top: 0px; margin-top: 10px; margin-bottom: 0pt; margin-top: 1px; padding-left: 0.5in; padding-left: 1px; Indicamos con este atributo el tamao del margen a la izquierda Unidades CSS
Se utiliza para definir el tamao del margen a la derecha Unidades CSS
Indicamos con este atributo el tamao del margen arriba de la pgina Unidades CSS
Con el se indica el tamao del margen en la parte de abajo de la pgina Unidades CSS
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 Padding-bottom Border-color
Unidades CSS
padding-top: 10pt; padding-top: 5px; padding-right: 0.5cm; padding-right: 1pt; border-color: red; border-color: #ffccff;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este. Unidades CSS
Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y el contenido de este. color RGB y nombre de color
Para indicar el color del borde del elemento de la pgina 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 float clear
Unidades CSS
border-width: 10px; border-width: 0.5in; float: right;
El tamao del borde del elemento al que lo aplicamos. none | left | 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. 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.
La especificacin de estilos CSS es muy amplia y seguro que se queda en el tintero algn atributo de estilo, pero creo que la inmensa mayora estn, y por supuesto la seleccin de los ms importantes.
