054 011 15-4437-6034
skip to the main content area of this page
XML

Valid XHTML 1.0!

 

 

Buenos Aires, Argentina.

Ultima fecha de actualización, Agosto de 2001.

 

 

Anterior      Menú Principal      Siguiente

 

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/

  

Anterior      Menú Principal      Siguiente

 

 

Carlos Marcelo Santos.

Valid XHTML 1.0!