Buenos Aires, Argentina.
Ultima fecha de actualización, Agosto de 2001.
CSS:
Esta es la primera de las dos tecnologías existentes para dar presentación a un documento XML que vamos a ver.
El mecanismo de las CSS fue pensado primeramente para ser usado con HTML, pero se adapta de la misma forma para aplicarse a XML. Las reglas de hoja de estilo pueden colocarse dentro de documentos XML y HTML también puede almacenarse en un archivo de extensión .css, esto último es lo más recomendable.
Un único tipo de elemento puede tener múltiples reglas de estilo aplicadas, así se forman jerarquías de reglas y en las CSS descansa la responsabilidad de asignar prioridades a las reglas, de aquí el término cascada.
Selectores:
La aplicación de las reglas de estilo está determinada por los selectores, que son construcciones CSS que identifican parte de un documento HTML o XML. Existen tres tipos de selectores:
 |
Tipo de elemento |
|
Clase de atributo |
|
ID de atributo |
Selector de Tipo de Elemento:
Un selector identifica un determinado tipo y le aplica un estilo o un conjunto de estilos. Por ejemplo, alguien podría querer establecer un conjunto de estilos para aplicar a todos los elementos p de un documento HTML, expresado en CSS, sería:
p {
display: block;
margin-bottom: 10 px;
font-family: Times;
font-size: 12 pt;
}
en este caso, todos los párrafos delimitados por el elemento p en el documento HTML se verán con un margen de 10 pixels, en una fuente Times de 12 puntos. Así se delimita un párrafo con el elemento p en HTML:
<p>Este es el horrible párrafo</p>
Selector de Clase de Atributo:
El selector de clase de atributo permite aplicar estilo a un atributo. Las CSS usan el selector de atributos para buscar, elementos que específicamente contengan un atributo llamado class y evalúan su valor para aplicar el conjunto de estilos o no:
p.particular {
display: block;
margin-bottom: 10 px;
color: blue:
font-family: Arial;
font-size: 12 pt;
font-style: italic;
}
en HTML se ve de esta forma:
<p class="particular">Este es el horrible párrafo</p>
Selector de ID de atributo:
El selector de ID de atributo agrega más flexibilidad a las CSS, con ellos se establece una regla de estilos que se aplica a cualquier elemento independientemente de su tipo. En sintaxis CSS:
#soyazul {
color: blue;
font-family: Arial;
}
El numeral (#) indica que es un selector de ID de atributo. Análogamente con los selectores de clase de atributo, salvo que el nombre del atributo ahora es id, un ejemplo aclarará las cosas:
<h2 id="soyazul">Estoy cianótico</p>
Algunas Propiedades de Estilo:
Estas son las propiedades de estilo más comunes:
|
display |
|
width |
|
heigth |
|
border |
|
border-width |
|
border-color |
|
border-style |
|
border-left |
|
border-right |
|
border-top |
|
border-bottom |
|
margin |
|
margin-left |
|
margin-right |
|
margin-top |
|
margin-bottom |
|
background-color |
|
color |
|
text-align |
|
text-indent |
|
font-family |
|
font-size |
|
font-style |
|
font-weight |
Propiedad display:
La propiedad display puede tener cuatro valores posibles:
|
block: El elemento aparece en un cuadro. |
|
list-item: El elemento aparece en un cuadro con viñeta. |
|
inline: El elemento aparece en un cuadro con recuadro. |
|
none: El elemento no aparece. |
Propiedades width y heigth:
Las propiedades width y heigth determinan el ancho y el alto de un elemento y pueden definirse en las siguientes unidades:
|
in: pulgadas. |
|
cm: centímetros. |
|
mm: milímetros. |
|
px: pixels. |
|
pi: picas. |
|
em: ems. |
|
en: ens. |
Propiedades border:
Las propiedades border definen los bordes de un elemento, si los cuatro lados son iguales, sólo se usa la propiedad border, sino se especifica con las propiedades border-top, border-left, border-right y border-bottom.
border: 4px double black;
Propiedades margin:
Las propiedades margin son análogas a las propiedades border, pero definen los márgenes.
margin-bottom: 10 px
Propiedades color y background-color:
Las propiedades color y background-color se utilizan para darle color al texto y fondo de un elemento respectivamente.
color: yellow;
background-color: blue;
o bien con valores hexadecimales o expresiones RGB:
color: #999999;
background-color: rgb(0, 0, 255);
Propiedades text-align y text-indent:
Las propiedades text-align y text-indent se usan para establecer la alineación y sangrado de un elemento:
text-align: center
text-indent: 12 px
Propiedades font:
Las propiedades font definen el font a utilizar:
font-family: Helvetica;
font-size: 20pt;
font-style: italic;
font-weight: bold;
Definición de la CSS:
Al momento de crear una CSS hay que decidir si esta va a ser:
|
Hojas de estilo externas. |
|
Hojas de estilo de nivel de documento. |
Siempre es preferible utilizar hojas de estilo externas, por dos razones, separar sintaxis diferentes y separar contenido de presentación.
La CSS se define de la siguiente forma:
<?xml-stylesheet type="text/css" href="agenda.css"?>
Existe un vocabulario XML llamado XMLNews orientado a marcar noticias, veamos un ejemplo y su correspondiente CSS:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="News.css"?>
<nitf>
<head>
<title>Zambomba quedo detenido</title>
</head>
<body>
<body.head>
<hedline>
<hl1>Zambomba quedo detenido </hl1>
</hedline>
<byline>
<bytag>por Franco Estroncio</bytag>
</byline>
<dateline>
<location>Buenos Aires, Argentina</location>
<story.date>17 de mayo del 2001</story.date>
<dateline>
</body.head>
<body.content>
<p>
.
.
.
</p>
<p>
.
.
.
</p>
<p>
.
.
.
</p>
<p>
.
.
.
</p>
<body.content>
</body>
<\nitf>
La correspondiente CSS, es la que sigue:
hedline {
display: block;
width: 400 px;
border-bottom: 5px double black;
text-align: right;
color: olive;
font-family: Times, serif;
font-size: 36pt;
}
byline {
display: inline;
width: 200px;
text-align: left;
color: black;
font-family: Times, serif;
font-size: 14pt;
}
dateline {
display: inline;
width: 200px;
text-align: left;
color: black;
font-family: Times, serif;
font-size: 11pt;
font-style: italic;
}
p {
display: block;
width: 400px;
color: black;
font-family: Times, serif;
font-size: 21pt;
}
title {
display: none;
}
Aquí tenemos un link que nos muestra como se ve este documento en tu browser de Internet: News.xml y su correspondiente .css News.css aplicada.
Referencias:
Podemos ver todo sobre el nivel uno de la especificación en http://www.w3.org/TR/REC-CSS1 y el nivel dos en http://www.w3.org/TR/REC-CSS2/
Carlos Marcelo Santos.