Sintaxis y unidades CSS

Tal como se vió en los ejemplos de los artículos anteriores del Manual de CSS, la sintaxis es bastante sencilla y repetitiva.

Básicamente se trata de colocar selectores de elementos (por ahora sólo hemos visto cómo seleccionar etiquetas, para asignarles estilos, pero más adelante conoceremos otros selectores), seguidos de los valores o atributos de estilo que queramos aplicar a dichos elementos.

A lo largo del manual aprenderemos más sobre la sintaxis de CSS, así como los distintos atributos disponibles para definir el formato o forma con la que se deben mostrar los contenidos. No obstante, quiero dar en este momento unas reglas básicas que debemos saber sobre la sintaxis de CSS, que nos servirán para entender mejor nuestros ejemplos e ir avanzando en el conocimiento de las hojas de estilo en cascada.

Veamos entonces estas reglas básicas sobre la sintaxis CSS:

• Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma.

  Ejemplo:
  font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de la lista de atributos es opcional)
  
  

• Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves.

  Ejemplo:
  H1{text-align: center; color:black}
  
  

• Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla en el siguiente capítulo. Muchos estos valores son unidades de medida (Unidades CSS), por ejemplo, el valor del tamaño de un margen o el tamaño de la fuente. Las unidades de medida CSS se pueden clasificar en dos grupos, las relativas y las absolutas. Más la posibilidad de expresar valores en porcentaje.

  Relativas: Se llaman así porque son unidades relativas al medio o soporte sobre el que se está viendo la página web, que dependiendo de cada usuario puede ser distinto, puesto que existen muchos dispositivos que pueden acceder a la web, como ordenadores o teléfonos móviles. En principio las unidades relativas son más aconsejables, porque se ajustarán mejor al medio con el que el usuario está accediendo a nuestra web. Son las siguientes:

  Fuente actual:	em la unidad em es relativa a la fuente actual con la que se está trabajando por defecto en el sistema del usuario. Por ejemplo si un visitante tiene configurada la fuente por defecto en 12 puntos, 1em será igual a 12 puntos y 2em será igual a 24 puntos.
  Altura de la letra "x":	ex 1ex será igual a la altura de la letra x, según la fuente actual del usuario. La altura de la letra x generalmente es la mitad de la de la fuente normal.
  Píxeles:	px Un pixel es un punto en la pantalla del dispositivo. Dependiendo de la resolución de la pantalla, un píxel puede ser mayor o menor.

  Absolutas: Las unidades absolutas son medidas fijas, que deberían verse igual en todos los dispositivos. Como los centímetros, que son una convención de medida internacional. Pese a que en principio pueden parece más útiles, puesto que se verían en todos los sistemas igual, tienen el problema de adaptarse menos a las distintas particularidades de los dispositivos que pueden acceder a una web y restan accesibilidad a nuestro web. Puede que en tu ordenador 1 centímetro sea una medida razonable, pero en un móvil puede ser un espacio exageradamente grande, puesto que la pantalla es mucho menor. Se aconseja utilizar, por tanto, medidas relativas.

  Puntos	pt Un punto es 1/72 pulgadas
  Pulgadas	in
  Centímetros	cm
  Milímetros	mm
  Picas	pc Una pica son 12 puntos.

  Porcentaje: el porcentaje se utiliza para definir una unidad en función de la que esté definida en un momento dado. Imaginemos que estamos trabajando en 12pt y definimos una unidad como 150%. Esto sería igual al 150% de los 12pt actuales, que equivale a 18pt.

  Porcentaje

  % Por ejemplo 120% es el 120 por cien de la unidad que estuviera anteriormente.

  
  
• Los colores se expresan con valores RGB, igual que los que conocemos para los colores HTML. Con la salvedad que un color se puede especificar también con tres números hexadecimales, en lugar de 6, como era obligatorio en HTML. Por ejemplo #fff equivaldría a #ffffff, o #123 sería #112233. Además, los colores se pueden especificar también en valores RGB decimales, con la notación rgb(r,g,b), siendo los valores de r, g, b números entre 0 y 255, por ejemplo rgb(100,0,255). Otra notación posible es rgb(r%,g%,b%), siendo cada uno de los r%,g%, b% un valor entre 0 y 100, por ejemplo rgb(100%,50%,0%), que sería todo de rojo, la mitad de verde y cero de azul.
• Otro tipo de valores que se pueden utilizar en las hojas de estilo en cascada son las URL, que sirven para especificar rutas hacia elementos como imágenes a colocar en fondos de elementos. Las URL en CSS se especifican con la notación url(valor), siendo valor la URL a la que queremos dirigirnos, que puede ser absoluta o relativa. Si es relativa, el navegador la interpreta desde el documento CSS donde estamos, si es que es un archivo CSS, o desde el documento HTML donde estamos, si es que los estilos los estamos colocando directamente en el archivo HTML. a URL se puede indicar con comillas dobles, simples o sin comillas. Por ejemplo:
  url(http://www.desarrolloweb.com/images/miimagen.gif)
  url("../images/otraimagen.jpg")

Hasta aquí, he explicado todo lo que debes saber por ahora con respecto a la sintaxis CSS y las unidades de medida CSS disponibles. Ha sido todo un poco teórico, pero en el siguiente capítulo podrás encontrar una lista de los atributos de las hojas de estilo en cascada, que te ayudarán a realizar ejercicios más prácticos.