Atributos de las hojas de estilo

01/1/70 - 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, tenla a mano cuando utilices 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, 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.

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestra un comentario revisado

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba