Modificar el diseño del blog: Propiedades y valores

Las propiedades y valores corresponden al CSS de la plantilla.

Para entender un poco más, es necesario leer la entrada anterior.

CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML.

Todas las propiedades necesitan un valor.

En CSS, las declaraciones son así: "propiedad : valor" y están separadas por un punto y coma.

propiedad : valor;
propiedad : valor;

No es necesario que estén en otra línea, pueden estar en una misma línea.

propiedad : valor; propiedad : valor;

Las propiedades y valores son lo que le dan un estilo visual a una estructura.

Puede ser aplicado a un elemento, el cual establecerá el estilo visual de dicho elemento.

En este caso va todo encerrado entre los signos { y }.

Ejemplo:

p {
Propiedad:Valor;
Propiedad:Valor;
}

O puede ser aplicado directo en la estructura con el atributo style:

En este caso va después de style= encerrado entre " y " o ' y '.

Ejemplo:

style="Propiedad:Valor;Propiedad:Valor;"

Las propiedades más utilizadas en una estructura son:

Border, margin, padding, width, height, font, background y color.

Sobre border, margin y padding, pueden leer algo en una entrada anterior, acá:

Algo mas sobre border pueden ir viendo acá:

Mas adelante voy a hacer una entrada mas detallada sobre border.

Propiedades con su valor aceptado en CSS:

Márgenes

Propiedad	Descripción	Valores
margin	Ancho para varios márgenes individuales.	longitud % auto
margin-top margin-right margin-bottom margin-left	Tamaño del margen superior, derecho, inferior e izquierdo.	longitud % auto

Relleno

Propiedad	Descripción	Valores
padding	Tamaños para varios rellenos individuales.	longitud %
padding-top padding-right padding-bottom padding-left	Ancho del relleno superior, derecho, inferior e izquierdo.	longitud %

Dimensiones

Propiedad	Descripción	Valores
width	Ancho.	longitud % auto
min-width	Ancho mínimo.	longitud %
max-width	Ancho máximo.	longitud % none
height	Alto.	longitud % auto
min-height	Alto mínimo.	longitud %
max-height	Alto máximo.	longitud % none
line-height	Altura entre las bases del texto.	normal número longitud %

Fuentes

Propiedad	Descripción	Valores
font	Atajo para establecer el resto de propiedades sobre las fuentes a la vez.	font-style font-variant font-weight font-size font-family line height caption icon menu message-box small-caption status-bar
font-family	Familias de fuentes.	nombre-familia familia-genérica
font-style	Estilo de la fuente.	normal italic oblique
font-variant	Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas.	normal small-caps
font-weight	Intensidad de la fuente.	normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size	Tamaño de la fuente.	xx-small x-small small medium large x-large xx-large larger smaller longitud %

Fondo

Propiedad	Descripción	Valores
background	Propiedades individuales relacionadas con el fondo.	background-color background-image background-repeat background-attachment background-position
background-color	Color de fondo.	color transparent
background-image	Imagen de fondo.	URL none
background-repeat	Repetición de la imagen de fondo.	repeat repeat-x repeat-y no -repeat
background-attachment	Desplazamiento de la imagen de fondo.	scroll fixed
background-position	Posición de la imagen de fondo.	% longitud left center right top bottom

La propiedad color

Esta propiedad establece el color con el que se muestra el texto contenido en un elemento. El color de la letra no puede ser transparente, ya que se debe indicar explícitamente un color.

color:valor

Un valor de color es una palabra clave o una especificación numérica RGB

Las 16 palabras clave se toman de la paleta Windows VGA: celeste, negro, azul, fucsia, gris, verde, verde claro, marrón, azul marino, olivo, morado, rojo, plata, turquesa, blanco, y amarillo.

Los colores RGB se dan en una de cuatro maneras:

#rrggbb (por ej., #00cc00)
#rgb (por ej., #0c0)
rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204.0))
rgb(y%,y%,y%) donde y es un número entre 0.0 y 100.0 inclusive (por ej., rgb(0%,80%,0%))

La mas utilizada es la primera: RGB hexadecimal(#rrggbb)

Pueden ver los distintos colores RGB hexadecimal en esta: tabla de colores.

Las unidades de longitud en CSS

Longitud relativas:

PT (puntos): Valor en puntos.
PX (píxel): Significa pixeles y es un punto de la pantalla.
EM (M): Es una medida tipográfica que equivale al ancho de la letra eme.
% (porcentaje): Si un padre tiene como tamaño de fuente 20px y el hijo posee un tamaño de 50%, este tendrá un tamaño final de 10px.

Se recomienda usar pixeles (px).

Recuerda que no hay que dejar espacios entre el valor de longitud y la unidad de medida.

Ejemplos:

Esto esta mal:

propiedad: 12 px

Esto esta bien:

propiedad: 12px

Leer la siguiente entrada: Tabla de equivalencias css

Si queremos aprender a modificar el diseño del blog, no nos queda otra que leer mucho y hacer distintas pruebas.

En la Web hay muchos manuales sobre HTML y CSS.

O en este blog.