Atributos de las hojas de estilo

  • Por
Explicación y ejemplos de los distintos atributos de las CSS. Podrás encontrar la lista en una tabla para imprimirtela y trabajar fácilmente.
Tanto para practicar en tu aprendizaje como para trabajar con las CSS lo mejor es disponer de una tabla donde se vean los distintos atributos y valores de estilos que podemos aplicarle a las páginas web.

Aquí puedes ver la tabla de los atributos CSS más fundamentales para aplicar estilos a elementos básicos, que te vendrá perfectamente para comenzar con las CSS. Existen muchos otros atributos que aprenderás en capítulos sucesivos del Manual de CSS. Recuerda además que si quieres ver cómo se aplican muchos de estos estilos en páginas web puedes ver el vídeo tutorial sobre los atributos de las CSS.

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-family: 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, se puede ver una página de ejemplo
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.
Para ver otros ejemlos de Box pulsar aquí
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.
Para ver una página que utiliza float y clear pulsar aquí

La especificación de estilos CSS es muy amplia y seguro que se queda en el tintero algún atributo de estilo, pero creo que la inmensa mayoría están, y por supuesto la selección de los más importantes.

Actualizado: Efectivamente, los atributos que vemos en este texto han sido más bien pocos. Desde que se escribió este artículo han pasado años y se ha ido mejorando la especificación de CSS, con la evolución de Internet y del mundo del desarrollo de páginas web. De hecho, en estos momentos sería casi imposible concentrar en una página el listado completo de atributos con su explicación.

De todos modos, no te preocupes, porque a lo largo de este manual y de otros manuales de CSS y talleres que se han publicado en DesarrolloWeb.com aprenderás muchos otros atributos y sus diferentes valores.

Si deseas tener una hoja con todas las reglas de estilos para imprimir y tener a mano para tu referencia, te recomendamos acceder a algunas de las hojas resúmenes o de las chuletas de CSS.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Vegetable

04/11/2005
Un detalle, en la tabla al definir el atributo font-family en el ejemplo (3ª columna) se os ha escapado un font-size. Por si quereis corregirlo. Un saludo y gracias por el manual, estupendo!!!

Corregido

Muchas gracias

Covi

15/8/2007
Se os pasaron al menos:

font-strech:
font-size-adjust:
font-variant:
font-face:
letter-spaccing:
word-spacing...

Se pueden hacer birguerias para las fuentes en CSS, mucha gente no lo ha probado y recurren al antiguo marcado a través de imágenes para conseguir algo que pueden hacer con Hojas.

Ya con CSS3 pfff...

Un saludo.

el man

05/3/2009
todo esta muy bueno esto me es de mucha ayuda pero me gustaria que mostraran mas atributos de las hojas de estilo, gracias

prem_vilas_das

02/7/2009
Imposible descargar
Miguelito, será que uso el Opera que se me hace imposible descargar al manual CSS???? Voy a probar con iexplorer y te cuento...

prem_vilas_das

02/7/2009
DESCARGAS
Sólo pude hacer descargas de manual através de Internet Explorer, con Opera imposible.

dome

07/9/2009
mantener negrita y no negrita en un texto
que poner para que se mantenga el formato

Andrea Alejandra

01/10/2009
tabla
Hola les comento que al intentar ver e imprimir la tabla en firefox o safari me fue imposible, porque la ?ma columna (ejemplos) no se ve completa.
La ?a soluci?ue imprimirla desde el explorer.
GRacias por la informaci? seguir?prendiendo un poco m?

jmanuelp

03/3/2011
No puedo descomprimir los manuales
Hola,
Me he descargado los manuales de html y css con IE8, pero cuando intento descomprimirlos, el win.rar me dice que están mal.
Alguien sabe algo de esto
Gracias y un saludo

angelsanchezjr

06/8/2011
Estupendo el manual,
mas video tutoriales por favor, que me he devorado ya los 3 primeros
Gracias y enhorabuena!!!

AGATHA

11/9/2011
AYUDENME CON ESTO POR QUE TENGO UNA TAREA Y NO ENTIENDO
Bueno me dejaron una tarea que no entiendo ni papa que quiero que me ayuden mi tarea dice averiguar los atributos css y no se osea no entiendo por eso ayudeeeeeen!!!!!!!!!!!!!!!!!!!!!!!!!!!!

AnnIshimura47

11/11/2011
Ampliación
¿Podríais recomendar al menos libros qué comprar para poder conocer todo sobre este lenguaje?

Carlos TOwn

23/11/2012
Crítica constructiva
Menuda panda de friquis maricones que sois, por amor de dios, pegaros un tiro inutiles.
P.D.: Me ha encantado el trabajo, me ha servido de mucho seguid asi ;)

laika

26/6/2014
Las propiedades
Si desean tener la información de las propiedades aquí les dejo un enlace de la W3school de las propiedades de CSS.
http://www.w3schools.com/cssref/


Gracias Miguel por tan buenos vídeos.