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-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 ||
||
||
||
||
||
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. ||
||
||
||
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.
