Hojas de Estilo CSS - Comentarios

Los comentarios dentro de las hojas de estilo comienzan con "/*" y terminan con "*/"; no pueden ser anidados (uno dentro de otro) y todo su contenido es ignorado.

Ejemplo:

H2  { color: yellow } /* Los subtítulos van en amarillo */
 

Los valores que reconoce cada propiedad en una hoja de estilo dependen del tipo de propiedad. A continuación veremos algunos valores típicos admitidos para entender mejor lo que viene a continuación.

El problema de especificar tipos de letra para ser usados en el World Wide Web es un verdadero dolor de cabeza. El motivo fundamental es que sus nombres varían de una plataforma a otra; y no es poco común encontrar que bajo una misma plataforma existan tipos que estén en una versión y no en otra, etc.

Una solución es que una empresa de computación ofrezca una serie de tipos de letra y espere que todo el mundo los instale en su computador, o los incorpore en sus productos y pretenda que sean estándares; pero en el mundo de la computación esto rara vez funciona bien y en ninguna parte son buenos los monopolios.

Bueno, pero ... ¿ qué solución hay ?. La solución es que cada vez que se especifica un tipo de letra, se indique una serie de alternativas: si en el computador de la persona que está leyendo la página no existe el primer tipo, se prueba con el siguiente, y así sucesivamente hasta llegar al último.

En caso de que el último tipo de letra tampoco sea reconocido, se utiliza el valor por omisión para el browser, que comunmente es Times (esta definición, del tipo de letra por omisión no aparece en ninguna parte en la especificación, lo que pasó fue que los primeros browser usaron este tipo y para mantener compatibilidad las siguientes generaciones de browser lo siguieron usando).

Por ejemplo:

P   { font-family: "Arial", "Helvetica", sans-serif }
 

Significa que a todos los párrafos se les asignará el tipo de letra Arial (este es un tipo de letra sin serif típico de MS Windows), en caso de no estar disponible en el sistema se utilizará Helvetica (existente bajo MacOS y X-Windows).

El último valor listado merece una explicación aparte: para evitar que el browser caiga en el tipo de letra por omisión, se utiliza como última alternativa uno de los siguientes tipos de letra genéricos:

sans-serif (sin adornos) serif (con adornos) cursive (manuscrito) fantasy (no está claro que tipo de letra sea) monospace (monoespaciado, o espacio constante)

Estos no son tipos de letra en sí, sino que son familias. Un browser decidirá al momento de la instalación cual será el tipo que usará para representar cada una de estas familias.

Los colores se indican mediante un código RGB, (ejemplo: #FFEE09) o bien mediante uno de los nombres de color estandarizados:

• aqua: Agua
• black: Negro
• blue: Azul
• fuchsia: Fucsia
• gray: Gris
• green: Verde
• lime: Lima
• maroon: Marrón
• navy: Azul marino
• olive: Verde oliva
• purple: Púrpura
• red: Rojo
• silver: Plateado
• teal: Verde azulado
• white: Blanco
• yellow: Amarillo

También existe la posibilidad de usar códigos RGB abreviados, que sólo tienen tres "cifras". Por ejemplo, se escribe: #F0A en vez de #F000A0, #E9A en lugar de #E090A0, etc.

Los códigos RGB abreviados permiten escribir sólo 256 colores, pero eso es suficiente para la mayoría de los sistemas; esto es muy usual en hojas de estilo puesto que es difícil reconocer muchos matices en el texto, por lo que no tiene sentido ser tan específico en el color.

Las longitudes se indican con un número, seguido de un sufijo. Se pueden expresar en términos absolutos:

• 24mm: 24 milímetros
• 2cm: 2 centímetros
• 1.2in: 1,2 pulgadas
• 12pt: 12 puntos de impresión
• 3pc: 3 picas
• 105px: 105 pixeles

o bien en términos relativos al tamaño del tipo de letra actual:

• 2em: 2 veces el ancho de una letra "m"
• 3ex: 3 veces el ancho de una letra "x"

Si no se especifica un sufijo, se subentiende que se está hablando de uno de los 6 tamaños definidos en el HTML.

Los URL se indican usando la palabra reservada "url", seguida de un paréntesis, luego el contenido del URL y luego un paréntesis de cierre. Veamos algunos ejemplos:

url(http://www.myhost.com/)
 url(imagen.gif)
 url(icn/globo.gif)
 

A continuación veremos la lista de propiedades que soporta CSS1. Información acerca de la evolución de CSS se encuentra disponible en el W3Consortium.

La sintaxis con que se explica este lenguaje es un conocimiento importante, pues las especificaciones en el World Wide Web se proveen en este formato o en algún formato similar. Si bien puede parecer un poco engorroso o difícil no lo es tanto; después de un tiempo uno se puede dar cuenta de que no hay ninguna otra forma más clara de explicar la sintaxis de un lenguaje.

• <x>: x no debe ser tomado en forma literal
• x y z: x va primero, después y, después z, en ese orden (yuxtaposición)
• x | y: x o bien y (se excluyen entre sí)
• x || y: x o y o ambos a la vez (no se excluyen entre sí)
• [ x y ]: los corchetes se usan para agrupar en caso de haber ambiguedad
• x ?: x puede aparecer cero o una vez
• x*: x puede aparecer cero o una o más veces
• x+: x puede aparecer una o más veces
• x {1, 4}: x puede aparecer a lo menos una y a lo más cuatro veces

La yuxtaposición tiene preferencia por sobre la doble barra vertical, y la doble barra tiene preferencia sobre la barra simple.

Por ejemplo:

a b | c || d e

es equivalente a:

[ a b ] | [ c || [ d e ] ]
 

El valor por omisión para cada propiedad es mostrado en negrita, o aparece en forma separada.

Las propiedades se heredan (en cascada) a menos que se indique lo contrario. Los valores se refieren a cualquier selector que pueda adquirir la propiedad especificada, a menos que se indique lo contrario.

Indica el tamaño de la letra. Los valores porcentuales son en relación al tamaño del elemento del cual heredan.

Por ejemplo, si los párrafos fueron especificados con tamaño 10pt, entonces las siguientes dos líneas significan lo mismo:

BLOCKQUOTE { font-size: 120% } BLOCKQUOTE { font-size: 12pt }

Los valores larger y smaller aumentan o disminuyen el tamaño de la letra de manera relativa.

Indica el tipo de letra, tal como fue explicado anteriormente. Se recomienda que los tipos de letra sean encerrados entre comillas, a excepción del último.

Los valores bolder y lighter se dan en relación a la opacidad actual, y lo incrementan o decrementan (respectivamente) en dos unidades.

Indica un cambio en las características de la letra. Los valores son italic (cursiva - o inclinada hacia adelante), oblique (oblicua - o inclinada hacia atrás) o small-caps (se coloca todo el texto como si estuviera en mayúsculas, y las letras que son verdaderamente mayúsculas se colocan más grandes).

Adicionalmente, se puede usar "italic small-caps" o bien "oblique small-caps" (sin incluir las comillas).

Indican la altura de la línea de texto. Los valores porcentuales se refieren al tamaño de letra en curso.

Comando genérico de cambio de tipo de letra, que soporta todos los anteriores al mismo tiempo, en una notación más compacta. Ejemplo:

Distancia que separa a las palabras del texto; usualmente es asignada en forma automática de manera bastante adecuada.

Distancia que separa a dos letras en el texto; usualmente es asignada en forma automática de manera bastante adecuada.

Define el tratamiento que se le dará al espacio en blanco dentro del elemento. Lo normal es que más de un espacio en blanco es tratado como un sólo espacio. Si se usa el valor pre, entonces los múltiples espacios en blanco producirán un espaciamiento mayor.

El valor nowrap, indica que los espacios en blanco serán considerados como un caracter más formando parte de una palabra, por lo que las palabras no serán cortadas.

Indica adornos o cualidades extra de la letra. Esta propiedad no es heredada. Los valores permitidos son underline (subrayado), overline (línea por encima del texto), line-throught (tachado) y blink (parpadeo),

Permite cambiar el texto al cual se refiere, poniendo la primera letra en mayúscula, todo en mayúsculas o todo en minúsculas, respectivamente.

Indica la posición del selector, en cuanto a alineamiento vertical, con respecto a los límites del texto y los límites de la línea de texto.

Se aplica sólo a los elementos de tipo bloque. El valor justify indica que se insertarán espacios extra entre las letras para que las líneas de texto ocupen todo el ancho permitido para su bloque.

Indica la sangría en los elementos de bloque. Su valor por omisión es cero, y los valores porcentuales se refieren a la sangría del elemento padre.

En este item, debemos hacer algunas aclaraciones previas, para definir la nomenclatura que usamos en las hojas de estilo, en lo concerniente a la diferencia entre padding, margin y border.

El padding es un espacio que forma parte del elemento, y separa la parte imprimible del selector (lo que llamamos, su contenido), de su borde. El borde corresponde al borde visible que separa al espacio de padding del márgen. El márgen es espacio que está fuera del elemento, y cuya apariencia no es controlable por él.

Indica el márgen izquierdo (respectivamente: derecho, superior e inferior) del selector.

Indica todos los márgenes a la vez, en el mismo orden del ítem anterior.

Indica el padding izquierdo (respectivamente: derecho, superior e inferior) del selector.

Indica todos los espacios de padding a la vez, en el mismo orden del ítem anterior.

Indica propiedades para el borde izquierdo (respectivamente: derecho, superior e inferior) del selector.

El ancho del borde puede ser una unidad estándard de longitud, o bien una de las siguientes palabras reservadas: thin (pequeño), medium (mediano), thick (grueso).

El estilo del borde puede ser none (ninguno) o alguna de las siguientes palabras reservadas: dotted (puntos), dashed (rayas), solid (línea continua) o double (doble línea continua). También se provee de estilos de borde en 3 dimensiones: groove (borde en bajo relieve), ridge (borde en sobre relieve), inset (todo el elemento en bajo relieve) y outset (todo el elemento en sobre relieve).

Indica propiedades globales para el borde del elemento, con la misma sintaxis anterior.

Indica el ancho (respectivamente: la altura) del elemento. Esta propiedad se aplica a selectores de tipo bloque, o a los que son reemplazados por otros elementos (i.e.: imágenes).

Los valores porcentuales se refieren a las dimensiones del elemento del cual hereden propiedades.

Si una de las dos dimensiones es fijada, y la otra está en auto, las proporciones se mantienen.

Por omisión, los elementos de tipo bloque y las imágenes son mostradas en el lugar del texto donde aparecen. Si uno indica float: left, el elemento aparecerá en el costado izquierdo de su elemento padre (el elemento en el cual se encuentra), y el texto fluirá alrededor de ella. Lo mismo ocurre si float : right.

Esta declaración - como un efecto colateral - transforma cualquier elemento en un elemento de tipo bloque.

Permite decidir si el elemento en cuestión admitirá imágenes flotantes, o requiere de espacio en blanco al lado izquierdo o derecho o en ambos costados.

Indica el color de todos los elementos, a menos que subsecuentes reglas asocien color explícito a algunos elementos. Los colores se indican de acuerdo a lo que se definió anteriormente.

Indica propiedades genéricas para el fondo de un elemento, o sea, la superficie en la cual se muestra el contenido (ej.: texto).

El fondo puede ser :

transparente P { background : transparent } de un sólo color BODY { background: red } de dos colores mezclados en degradación H1 { background : yellow / green } formado por una imágen BODY { background: url( nubes.gif ) 50% repeat fixed }

Se puede especificar conjuntamente un fondo con color (colores) y una imágen; en ese caso, los colores se usarán para llenar las regiones transparentes de la imágen o mientras la imágen está siendo cargada.

Esta propiedad no se hereda, sino que como todos los elementos tienen por omisión fondo transparente, se puede "ver" el fondo del elemento "padre" a través del fondo del elemento "hijo".

Usando dos colores se pueden lograr interesantes efectos; la dirección de la mezcla se indica hacia donde se fusionará el primer color con el segundo, y puede tomar alguno de los valores siguientes es: N, S, E, W, NW, NE, SW y SE. El valor por omisión es S (sur).

Cuando se usa una imágen para rellenar el fondo, se pueden especificar dos propiedades adicionales.

1.El tipo de repetición determina cómo se repetirá la imágen: repeat-x (repetir horizontalmente), repeat-y (repetir verticalmente), no-repeat (no repetir) y repeat (repetir horizontal y verticalmente), que es el valor por omisión.

2.La posición especifica su localización inicial a lo ancho y a lo alto del elemento, en porcentaje (si se pone un solo valor, este se refiere a ambas dimensiones a la vez). Adicionalmente, se provee de las abreviaturas left, center y right para indicar posición horizontal de 0%, 50% y 100% respectivamente, y top, middle y bottom para indicar posición vertical de 0%, 50% y 100%.

Finalmente, el scrolling indica si el fondo permanecerá fijo al fondo de la ventana (valor fixed), o se moverá junto con el elemento al cual se está aplicando (valor scrolling).

Esta propiedad indica una transformación en el tipo de elemento al cual se refiere. Es asignada por el mismo lenguaje HTML, y no debería ser cambiada salvo situaciones especiales.

El valor block indica que el elemento produce un quiebre de linea antes y después. El valor inline indica que el elemento es reemplazado por otro elemento al momento de mostrarlo (por ejemplo, imágenes). El valor list-item indica que se trata de un ítem de lista.

El valor none indica que el elemento no será mostrado, ni los elementos que estén dentro de él ni la caja alrededor.

Por ejemplo:

IMG { display: none }
 

Esta propiedad puede ser aplicada a cualquier elemento que tenga propiedad display igual a list-item, de acuerdo a lo especificado por el usuario o por el mismo estándard HTML (el elemento LI corresponde a esta última clasificación).

Ejemplo:

UL UL { list-style: circle }
 

Indica que los ítems de lista no numerada, de segundo nivel, serán marcados con un círculo.