Estilos CSS: referencia

Estilos CSS

Los estilos CSS son una forma de separar el contenido de la página web de su formato. Es decir por un lado nos preocupamos de dar contenido a la página y por otro de definir como se deberá ver.

Es una idea magnífica que nos permite, por ejemplo, cambiar el estilo de diseño de todo un sitio web sin necesidad de reeditar todas sus páginas: solo modificaríamos el archivo donde se describe el formato de las páginas, como esquemas de color, imágenes de fondo, etc.

Pero no todo es perfecto: los navegadores Explorer y Netscape no entienden los estilos exactamente igual por lo que es conveniente probar las cosas en ambos para asegurarnos que todo se verá como nosotros queremos.

Aqui te muestro una referencia de los atributos del estandard CSS2 más usados en la creación de páginas web. Se podría ahondar más pero esta selección es suficiente para comenzar a conocer el uso de las reglas de estilo. Con el actual estándar, CSS3, ahondamos un poco más.

Los estilos CSS son una poderosa herramienta para lograr un diseño accesible y facilitan el mantenimiento de las páginas web.

Propiedades de caja

Cuando hablabamos del formato en las páginas html diferenciamos entre elementos de bloque y elementos en linea, Los bloques son elementos como el <p> (párrafo) o las <div> (capas) que incluyen un salto de linea antes y después de su contenido. Los estilos en linea no rompen el flujo del texto. Las etiquetas <br> y <hr> son excepciones, no tienen contenido y provocan saltos de linea.

Si consideramos un elemento como una caja (sea tipo bloque o en linea) esta puede tener márgenes interiores como un relleno vacío (padding), márgenes exteriores, dimensiones o bordes (CSS3 amplia las opciones para los bordes)

Así que de entrada veamos que propiedades nos ofrece CSS para dar formato a bloques y elmentos en linea, algunas tendrán más sentido en los bloques:

Propiedad Significado Valores
margin-top, margin-right, margin-bottom, margin-left, margin: top right bottom left Márgenes del elemento. margin se utilizan para cambiar todos estos atributos a la vez. tamaño, porcentaje o auto. Por defecto es cero.
padding-top, padding-right, padding-bottom, padding-left,<br/> padding: top right bottom left Distancia entre el borde y el contenido del elemento. Se puede definir en forma abreviada con padding tamaño, porcentaje o auto. Por defecto es cero.
border-top-width, border-right-width, border-bottom-width, border-left-width, border-width: top right bottom left Anchura del borde de un elemento. numérico
border-style Tipo de borde de un elemento. none, ruged, solid, 3D,... por defecto ninguno (none).
border-color Color del borde de un elemento. Código o nombre de color
width, height Ancho y alto del elemento. tamaño, porcentaje o auto, automático por defecto.
float Justificación del contenido de un elemento. left, right o none, por defecto ninguna.
clear Permiso para que otro elemento se pueda colocar a su izquierda o derecha. left, right, both o none, por defecto ninguno.

Los bloques puedes verlos como un contenedor dentro del cual puede incluirse cualquier elemento web.

Los elementos en linea son como partes individuales e la página, puede ser una letra o puede er un enlace.

Propiedades de tipo de letra

Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las siguientes:

Propiedad Descripción Posibles valores
font-family Tipo de letra (que puede ser genérico) que vamos a usar. lista de tipos, ya sean genéricos o no, separados por comas.
font-size Tamaño del tipo de letra. xx-small, x-small, small, medium, large, x-large, xx-large, tamaño relativo o tamaño absoluto. Por defecto medium.
font-weight Grosor del tipo de letra (negrita). normal, bold, bolder, lighter o 100-900 (donde 900 es la negrita más gruesa). Por defecto normal.
font-style Estilo del tipo de letra (cursiva). normal, italic, italic small-caps, oblique, oblique small-caps o small-caps. Por defecto normal.

Recordemos lo dicho al hablar del tipo de letras: no todos tus tipos tienen que estar en los ordenadores de tus visitantes o tienes que adjuntarlos en la página.

Los tipos de letras más seguros son los estandrad que vienen con los sistemas operativos las serif como Times New Roman y las sans serif como Arial

Propiedades de formato del texto

Nuestro siguiente objetivo van a ser las propiedades de formato del texto que cualquier procesador de textos nos permite cambiar.

Propiedad Descripción Posibles valores
line-height Interlineado. número o porcentaje.
text-decoration Efectos variados sobre el texto. none, underline (subrayado), overline (como subrayado, pero por encima), line-through (tachado) o blink (parpadeante); por defecto ninguno.
vertical-align Posición vertical del texto. baseline (normal), sub (subíndice), super (superíndice), top, text-top, middle, bottom, text-bottom o un porcentaje. Por defecto baseline
text-transform Transforma el texto a mayúsculas o minúsculas. capitalize (pone la primera letra en mayúsculas), uppercase (convierte todo a mayúsculas), lowecase (a minúsculas) o none, por defecto no hace nada.
text-align Justificación del texto. left, right, center o justify
text-indent Tabulación con que aparece la primera línea del texto. tamaño o porcentaje, por defecto cero.
Las propiedades como margin, padding, border pueden definirse de manera abreviada. Margin y paddign se definirian como margin o padding seguido de cuatro valores para : top, right, bottom, left. Mientras que border se definiría como border: grosor estilo color (el orden no importa).

Se aplcian al texto contenideo dentro del elmento donde se aplique.

Text-align puede actuar sobre otros elementos que no son texto cuando se encuentran dentro de un bloque, coom una imagen dentro de un div

Propiedades de color y fondo

También es posible cambiar el color o la imagen de fondo de cualqueir elemento.

Propiedad Descripción Posibles valores
color Color del texto. un color (en el formato habitual).
background-color Color de fondo. código o nombre del color
background-image Imagen que se usa para el fondo url de la imagen
background-repeat Si la imagen se debe repetir como patrón o no repeat, repeat-X, repeat-y, no-repeat
background-position Posición de la imagen combinaciones de top, right, left, bottom, middle o un par de valore numéricos: X, Y (si se omite uno se toma 50%)
background-attachment Si ha de permanecer fija o moverse cuano se haga scroll fixed (fija), scroll (se desplaza)

Las direcciones URL (para la imagen de fondo por ejemplo) se expresan del siguiente modo:

background: url(fondobonito.gif) repeat;
Los colores que uses en la página debe teer contraste suficiente par afacilitar la lectura

Otros

Otras propiedades que pueden definirse mediante las hojas de estilo CSS

Propiedad Descripción Posibles valores
display Define la forma de mostrar el elemento: bloque, en linea, lista. inline, block, list y none (que oculta el elemento)
list-style Estilo de un elemento de una lista, pudiendo incluir un gráfico al comienzo del mismo. disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none o la dirección de un gráfico
white-space Como usar los espacios, normal (espacios seguidos los une en uno solo) o como etiqueta <pre> (respeta todos los espacios). normal y pre

 

Estas dos páginas sirven como introducción a los estilos en HTML. Se puede escribir mucho más sobre ellos, pero eso lo dejo para el tutor de CSS3 que es el estandard actualmente en vigor (emepzó en 2011). Pero con esto que te pongo aquí puedes practicar bastante.

El sistema de reglas de estilo permite seleccionar prácticamente cualquier elemento de una página y darle el aspecto que se desee.