Volver al índice

* Estilos CSS: propiedades

Declaraciones CSS

Cualquier declaración de estilo CSS se compone de tres elementos: el selector, la propiedad y el valor. El listado de propiedades va entre paréntesis { } , entre cada propiedad y su valor hay dos puntos : , y cada una de ellas se separa por un punto y coma ;

selector {
propiedad: valor;
propiedad: valor;
}

Los selectores pueden ser de tres tipos:

a) Una etiqueta HTML. En este caso utilizamos como selector directamente el nombre de la etiqueta. Por ejemplo:

body {
propiedad: valor;
propiedad: valor;
}

b) Referidos a un identificador único (en el HTML tendremos id="nombre"). En este caso el nombre que le hemos dado al identificador va precedido de una almohadilla #

#nombre {
propiedad: valor;
propiedad: valor;
}

c) Referidos a una clase (en el HTML tendremos class="nombre"). En este caso el nombre que le hemos dado a la clase va precedido de un punto .

.nombre {
propiedad: valor;
propiedad: valor;
}

La diferencia entre un identificador único (id) y una clase (class) es simplemente que un id sólo lo podemos utilizar una vez en cada página, mientras que un class lo podemos utilizar tantas veces como queramos.

Propiedades básicas de CSS

Propiedad Ejemplo Qué es

width :
height:

width : 250px;
height: 250px;

ancho
alto

margin-top :
margin-right:
margin-bottom :
margin-left :

margin-top : 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left :

margen superior
margen derecho
margen inferior
margen izquierdo

padding-top :
padding-right:
padding-bottom :
padding-left :

padding-top : 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left : 10px;

margen interior superior
margen interior derecho
margen interior inferior
margen interior izquierdo

background-color :
background-image:
background-repeat:
background-position:

background-color : #CCCCCC;
background-image: url(img/fons.gif);
background-repeat: repeat-x;
background-position: bottom right

color de fondo
imatge de fondo
si se repite la imagen de fondo
la posición de la imagen

font-family :
font-size :
font-weight :
color :
line-height :
text-align:

font-family : verdana, sans-serif;
font-size : 12px;
font-weight :bold;
color : #000000;
line-height : 18px;
text-align: center;

tipografía
medida de la tipografía
grueso de la tipografía
color de la tipografía
interlineado
alineación del texto

border-width:
border-color:
border-style:

border-top-width:
border-top-color:
border-top-style:
(right/bottom/left)

border-width: 1px;
border-color: #333333;
border-style: solid;

border-top-width: 1px;
border-top-color: #333333;
border-top-style: solid;
(right/bottom/left)

grueso del borde (4 iguales)
color del borde (4 iguales)
estilo del borde (4 iguales)

grueso del borde superior
color del borde superior
estilo del borde superior
(dreta/baix/esquerra)
list-style-type:
list-style-position:
list-style-image:		 list-style-type: circle;
list-style-position: inside;
list-style-image: url(puntet.gif)		 tipo de marcador en listado
posición del marcador en listado
imagen de marcador en listado

Un listado más extenso con todas las propiedades CSS lo podéis encontrar en:
http://www.w3schools.com/css/css_reference.asp

 

Pseudoclases

Un caso especial es el de los enlaces. Podemos definir el estilo de cada uno de sus estados a través de pseudoclases.

a:link (estado normal)
a:visited (para marcar que ya hemos visitado la página de destino)
a:hover (cuando pasamos el cursor por encima del enlace, el "rollover")
a:active (en el momento que estamos haciendo clic sobre el enlace, el "mousedown")
 
Comentarios

En la hoja de estilos podemos insertar comentarios de la siguiente forma:

/* texto del comentario */