Un bloque de declaraciones, comienza con una llave izquierda ({) y termina con la llave derecha (}) correspondiente. En medio de ellas debe haber una lista de cero o más declaraciones separadas por punto y coma (;).
Por ejemplo, se pueden definir los selectores H1,H2, H3, etc. tal y como se muestra a continuación:
H1, H2 {color: green }
H3 {color: red }
Aquí se presenta un ejemplo más complejo:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
De este modo, las siguientes reglas:
H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }
son equivalentes a:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}
Como hemos visto en el ejemplo inicial, cuando varios selectores comparten las mismas declaraciones, pueden agruparse en una lista separada por comas.
En este ejemplo, condensamos tres reglas con idénticas declaraciones en una sola. Así,
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
es equivalente a:
H1, H2, H3 { font-family: sans-serif }
Las hojas de estilos permiten incluir Comentarios. Los comentarios comienzan con los caracteres «/*» y terminan con los caracteres «*/». Pueden aparecer en cualquier lugar entre los comandos y su contenido no tiene ninguna influencia en el procesamiento.
Vamos a ver la estructura de una hoja de estilos con un ejemplo de un pequeño documento HTML:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
HTML>
HEAD>
TITLE>La página de Bach/TITLE>
/HEAD>
BODY>
H1>La página de Bach/H1>
P>Johann Sebastian Bach fue un prolífico compositor.
/BODY>
/HTML>
Para establecer el color azul para el texto de los elementos H1, se puede escribir la siguiente regla CSS:
H1 { color: blue }
Una regla CSS consta de dos partes principales: un selecto (‘H1’) y una declaración (‘color: blue’).
La declaración tiene dos partes: una propiedad (‘color’) y un valor (‘blue’).
La especificación HTML 4.0 define de qué manera las reglas de las hojas de estilo pueden especificarse para los documentos HTML: ya sea dentro del documento HTML o a través de una hoja de estilo externa. Para poner la hoja de estilo dentro del documento, use el elemento STYLE:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
HTML>
HEAD>
TITLE>La página de Bach/TITLE>
STYLE type="text/css">
H1 { color: blue }
/STYLE>
/HEAD>
BODY>
H1>La página de Bach/H1>
P>Johann Sebastian Bach fue un prolífico compositor.
/BODY>
/HTML>
Para una mayor flexibilidad, recomendamos que los autores especifiquen hojas de estilo externas; ellas pueden cambiarse sin modificar el documento fuente HTML y pueden compartirse entre varios documentos. Para vincular una hoja de estilo externa puede usar el elemento LINK dentro de la zona HEAD del documento HTML de la forma:
HEAD>
TITLE>La página de Bach/TITLE>
LINK rel="stylesheet" href="bach.css" type="text/css">
/HEAD>
El elemento LINK especifica:
- el tipo de vínculo: a una hoja de estilo («stylesheet»).
- la ubicación de la hoja de estilo a través del atributo «href».
- el tipo de hoja de estilo que se vincula: «text/css».
CSS puede usarse con cualquier formato de documento estructurado, por ejemplo con aplicaciones XML (eXtensible Markup Language).
Este es un simple fragmento en XML:
ARTICULO>
TITULO>Federico el Grande se encuentra con Bach/TITULO>
AUTOR>Johann Nikolaus Forkel/AUTOR>
PARRAFO>
Una tarde, justo cuando preparaba su INSTRUMENTO>flauta/INSTRUMENTO>
y sus músicos estaban dispuestos, un oficial le alcanzó una lista
de los forasteros que habían arribado.
/PARRAFO>
/ARTICULO>
Para que este fragmento sea visualizado a modo de un documento, debemos declarar primero cuáles son los elementos a nivel de línea (es decir, que no dan lugar a saltos de líneas) y cuáles son a nivel de bloque (es decir, que producen saltos de línea).
INSTRUMENTO {display: inline}
ARTICULO, TITULO, AUTOR, PARRAFO { display: block }
La primera regla declara que INSTRUMENTO será a nivel de línea y la segunda regla, con su lista de selectores separados por comas, declara que todos los demás elementos serán a nivel de bloque.
Una de las ideas de vincular una hoja de estilo a un documento XML es emplear una instrucción de procesamiento:
?XML:stylesheet type="text/css" href="bach.css"?>
ARTICULO>
TITULO>Federico el Grande se encuentra con Bach/TITULO>
AUTOR>Johann Nikolaus Forkel/AUTHR>
PARRAFO>
Una tarde, justo cuando preparaba su INSTRUMENTO>flauta/INSTRUMENTO>
y sus músicos estaban dispuestos, un oficial le alcanzó una lista
de los forasteros que habían arribado.
/PARRAFO>
/ARTICULO>
Una aplicación del usuario visual dará este formato al ejemplo anterior:
Observe que la palabra «flauta» permanece dentro del párrafo debido a que es el contenido del elemento a nivel de línea INSTRUMENTO.
Pero aún el texto no tiene el formato que se podría esperar. Por ejemplo, el tamaño de la fuente del título debería ser mayor que la del resto del texto y quizás se prefiera mostrar el nombre del autor en itálica:
INSTRUMENTO { display: inline }
ARTICULO, TITULO, AUTOR, PARRAFO { display: block }
TITULO { font-size: 1.3em }
AUTOR { font-style: italic }
ARTICULO, TITULO, AUTOR, PARRAFO { margin: 0.5em }
Una aplicación del usuario visual dará este formato al ejemplo anterior:
Las hojas de estilos permiten personalizar las etiquetas y estructuras HTML, pudiendo personalizar los márgenes, rellenos, colores, bordes, fondos, cursores, fuentes, tamaños, alineación, etc. de tablas, listas, bloques, párrafos, etc.
Algunos ejemplos son:
COLOR: Esta propiedad describe el color del primer plano del contenido de texto de un elemento. Existen distintas maneras de especificar rojo:
EM { color: red } /* nombre de color predefinido */
EM { color: rgb(255,0,0) } /* RGB rango 0-255 */
FONDO: Esta propiedad determina la imagen de fondo de un elemento. Cuando ponen una imagen de fondo, los autores deben también especificar un color de fondo que será usado cuando la imagen no esté disponible. Cuando la imagen está disponible, es procesada encima del color de fondo. (Así, el color es visible a través de las zonas transparentes de la imagen.)
Los valores para esta propiedad son una URI , para especificar la imagen, o ‘none’, cuando no se utiliza ninguna imagen.
BODY { background-image: url("mármol.gif") }
P { background-image: none }
BODY {
background: red url("pendiente.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
BORDES, RELLENOS Y MÁRGENES: Podemos definir y modificar los parámetros de los márgenes, rellenos y bordes de un bloque, para ello utilizaremos los descriptores margin, padding y border, como se puede apreciar en este ejemplo:
STYLE type="text/css">
UL {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No se especifica border */
}
LI {
color: black; /* el color del texto es negro */
background: gray; /* Contenido, padding será gris */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px para padding right */
list-style: none /* sin viñeta antes de un ítem */
/* Ningún borde definido */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* pone el ancho de border para todos los lados */
border-color: black;
}
/STYLE>
TABLAS: Se pueden personalizar en formatear los distintos elementos de la tabla (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH y TD), por ejemplo:
TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }
Los valores que se pueden incluir en las declaraciones de los selectores son del tipo:
1- Enteros y números reales: Un entero> consiste en uno o más dígitos de «0» a «9». Un número> puede ser un entero> o puede ser cero o más dígitos seguidos por un punto (.) seguido por uno o más dígitos. Ambos, enteros y números reales, pueden estar precedidos por un «-» o «+» para indicar su signo.
2- Medidas: Las medidas se refieren a las dimensiones horizontales y verticales.
Las unidades relativas son:
- em: el tamaño («font-size») de la fuente relevante
- ex: la ‘altura de la x’ de la fuente relevante
- px: pixeles, relacionado con los dispositivos visuales
H1 { margin: 0.5em } /* em */
H1 { margin: 1ex } /* ex */
P { font-size: 12px } /* px */
La unidades de son útiles solamente cuando la propiedades físicas del medio de salida son conocidas. Las unidades absolutas son:
- in: inches — 1 inch (pulgada) es igual a 2.54 centímetros.
- cm: centímetros
- mm: milímetros
- pt: puntos — los puntos usados por CSS2 equivalen a un 1/72 de pulgada.
- pc: picas — 1 pica es igual a 12 puntos.
H1 { margin: 0.5in } /* inches (pulgadas) */
H2 { line-height: 3cm } /* centímetros */
H3 { word-spacing: 4mm } /* milímetros */
H4 { font-size: 12pt } /* puntos */
H4 { font-size: 1pc } /* picas */
3- Porcentajes: El formato de un valor en porcentaje (denotado por en esta especificación) es un signo opcional (‘+’ o ‘-‘, siendo ‘+’ el predeterminado) seguido inmediatamente por un número seguido inmediatamente por ‘%’. Ej:
P { line-height: 120% } /* 120% de 'font-size' */
4- URL + URN = URI: Ej: BODY { background: url("http://www.bg.com/pinkish.gif") }
5- Contadores: Para referirse al valor de un contador, se usa la notación ‘counter(identificador>)’ o ‘counter(identificador>, estilo-de-lista>)’.
P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}
6- Colores: Un color> es o una palabra clave o una especificación numérica RGB.
Las lista de los nombres de las palabras clave es: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow. Estos 16 colores son definidos en HTML 4.0. Además de estas palabras clave de colores, los usuarios pueden especificar palabras clave que corresponden a los colores usados por ciertos objetos en el entorno del usuario.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
El modelo de color RGB es usado en la especificación numérica del color. Todos estos ejemplos especifican el mismo color:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* rango de enteros 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* rango flotante 0.0% - 100.0% */
Más medidas y valores aplicables en hojas de estilos son: Ángulos, Tiempos, Cadena y Frecuencias.
Por último, destacar los denominados: Pseudo-Elementos, que permiten personaliza o realizar ciertas acciones cuando se produce algún proceso determinada, algunos de ellos son.
- before y after:
Los pseudo-elementos ‘:before’ y ‘:after’ pueden ser usados para insertar un contenido generado antes o después del contenido del elemento.
H1:before {content: counter(chapno, upper-roman) ". "}
Cuando los pseudo-elementos :first-letter y :first-line son combinados con :before y :after, se aplican a la primera letra o línea del elemento que incluye el texto insertado.
P.special:before {content: "Especial! "}
P.special:first-letter {color: #ffd800}
Esto procesará la «E» de «Especial!» en un amarillo oro.
Por ejemplo, la siguiente regla inserta la cadena «Nota: » antes del contenido de cada elemento P cuyo atributo «class» tenga el valor «nota»:
P.nota:before { content: «Nota: » }
Por ejemplo, las siguientes reglas insertan comillas de apertura antes de cada elemento Q. El color de la comillas será rojo, pero la fuente será la misma que la del resto del elemento Q:
Q:before {
content: open-quote;
color: red
Se han desarrollado varios ejemplos de aplicación de hojas de estilos en formularios HTML, en estos ejemplos mostraremos las ventajas y los resultados finales de la utilización de CSS, presentando un formulario sin aplicar estilos ni formato, otro con formato aplicado directamente mediante etiquetas HTML y por último tres ejemplos aplicando diferentes hojas de estilos. Destacar que las hojas utilizadas son «sencillas», pudiendo añadir estilos para las tablas utilizadas, sonidos, etc.
El archivo default.htm presenta un pequeño menú, la primera opción muestra un formulario (formulario_sin_estilos.htm) sin hojas de estilo ni formato, tal y como se muestra en la imagen:
La segunda opción muestra el mismo formulario (formulario_sin_estilos1.htm) sin hojas de estilo, pero formateado mediante la etiqueta FONT de HTML, lo que permite presentar un formulario más agradable al usuario, como se muestra en la imagen, pero el trabajo de programación y de mantenimiento se incrementan con esta opción, sobre todo si se aplica este sistema a todo un sitio web completo.
La tercera opción muestra el mismo formulario (formulario_con_estilos1.htm) que tiene vinculada una hoja de estilos (estilos1.css), se puede ver que el código se simplifica con respecto al ejemplo anterior, el resultado que se presenta es agradable para el usuario y este sistema permite mejorar el mantenimiento de un sitio web completo, por ejemplo si queremos cambiar el tipo de fuente o el color del fondo de todos los archivos de nuestro sitio web, sólo cambiaremos el estilo correspondiente y se aplicará a todas las páginas que lo utilice, esto no sucedía en el ejemplo anterior, debiendo modificar los parámetros de la etiqueta FONT de todas las páginas.
La cuarta opción muestra el mismo formulario (formulario_con_estilos2.htm) que tiene vinculada otra hoja de estilos (estilos2.css), se puede ver el resultado en la siguiente imagen:
La quinta opción muestra el mismo formulario (formulario_con_estilos3.htm) que tiene vinculada otra hoja de estilos más elaborada (estilos3.css), se puede ver el resultado en la siguiente imagen:
El contenido de la hoja de estilos (estilos3.css) que se aplica en el último formulario, es el siguiente:
body {
BACKGROUND: #F8F88F fixed;
scrollbar-face-color:#ffffff;
scrollbar-arrow-color:#999999;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color:#eeeeee;
scrollbar-highlight-color:#999999;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-Color:#Ffffff;
color:#333333;
}
.textosmall {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #222222;
}
.texto {
font-family: Verdana, Helvetica, Arial,sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
font-weight: normal;
text-align:justify
}
.texto:first-letter {
font-size: 200%;
font-style: italic;
font-weight: bold;
float: left
}
.texto2 {
font-family: Verdana, Helvetica, Arial,sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
font-weight: bold;
text-align:justify
}
.marco {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #A9A7A4;
border-right-color: #A9A7A4;
border-top-color: #E9E8E1;
border-left-color: #E9E8E1;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #333333;
text-decoration: none;
font-family: Verdana, Helvetica, Arial;
width:250;
}
.marco2 {
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
background-color: #eeeeee;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #A9A7A4;
border-right-color: #A9A7A4;
border-top-color: #E9E8E1;
border-left-color: #E9E8E1;
color: #333333;
text-decoration: none;
font-family: Verdana, Helvetica, Arial;
width: 250px;
}
textarea {
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
background-color: #eeeeee;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-bottom-color: #A9A7A4;
border-right-color: #A9A7A4;
border-top-color: #E9E8E1;
border-left-color: #E9E8E1;
color: #333333;
text-decoration: none;
font-family: Verdana, Helvetica, Arial;
width: 565px;
}
.titulo {
FONT-WEIGHT: bold;
FONT-SIZE: 16pt;
COLOR: #ffffff;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-VARIANT: normal;
FILTER: shadow( direction = 135,color = #888888);
PADDING-BOTTOM: 2px;
}
a {
FONT-WEIGHT: bold; FONT-SIZE: 11px;
COLOR: #999999; FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif;
TEXT-DECORATION: underline
}
a:link {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #999999;
FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif;
TEXT-DECORATION: underline
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
FONT-WEIGHT: bold;
color: #000000;
text-decoration: none;
cursor:hand;
}
a:hover {
FONT-WEIGHT: bold; FONT-SIZE: 11px;
COLOR: #333333;
FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif;
TEXT-DECORATION: underline
}
.admin {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #eeeeee;
height: 22px;
border: 1px solid #000000;
color: #333333;
vertical-align: top;
FONT-WEIGHT: bold;
width:200;
cursor:hand;
}
p {
font-family: Verdana, Helvetica, Arial,sans-serif;
font-size: 11px;
color: #333333;
text-decoration: none;
font-weight: normal;
text-align:justify
}
Os podéis descargar los archivos del ejemplo para ver los resultados finales en vuestro equipo.
