Sintaxis y unidades CSS

  • Por
En este capítulo explicamos la sintaxis CSS, de hojas de estilo en cascada, con especial atención a las 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:

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.

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.

  • 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. Si deseas además afianzar estos conocimientos de una manera más práctica, te recomendamos ver el vídeo sobre CSS que habla de la sintaxis y unidades.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

cristian

25/7/2006
cual es la difenrencia de usar px, in, cm, pt? :s
alguno tiene mejor calidad o que?

salu2.

teresa

07/4/2009
diferencia
está claro que no tiene nada que ver una pulgada que un centímetro. Ambos son unidades de longitud, sí pero diferentes.<br />
<br />
Por ejemplo: 1 cm es aproximadamente 0,4 pulgadas

Carlos Guevara

09/10/2013
Excelente información
Muy buena la información. Muchas gracias

shairena

12/2/2014
Medidas
Gracias por el artículo, muy útil la información.