CSS, Cascading Style Sheets, hojas de estilo en cascada, es un lenguaje sencillo para la aplicación de estilos a un elemento XML. Es decir, podremos ver nuestros documentos XML en el navegador como si de una página HTML se tratase, aunque ésto sólo funcionará en browsers XML (IE, Mozilla, Konqueror, Amaya, etc.).
CSS tiene dos versiones denominadas CSS1 y CSS2 aparecidas en 1996 y 1998 respectivamente. CSS1 fue introducida para html, pero se puede usar (y con menos restricciones) en XML. CSS2 sirven tanto para HTML como para XML, pero es en el XML donde alcanzan la potencia que tiene. Nos encontraremos que muchas características de los estándares no funcionan o funcionan en un navegador y no en otro, pero ese no es problema del estándar,sino que no todos los navegadores están preparados.
Para un mismo documento XML se pueden tener varias CSS y así estar formateado de diferentes formas, según nuestros propósitos o del posible uso que se le vaya a dar al documento. Las CSS se espresa mediante una serie de reglas que guardaremos en un fichero de texto. Cada regla contiene el nombre del elemento al que se aplica y el estilo definido.
Ejemplo fichero XML (ejemplo0.xml):
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo0.css" type="text/css"?>
<ejemplo> Hola mundo ! </ejemplo>
Ejemplo fichero CSS (ejemplo0.css):
ejemplo {display: block; color: blue}
Las principales diferencias son:
Como en este tutorial nos vamos a centrar en las hojas de estilo en cascada para XML, quien quiera conocer las hojas de estilo en cascada para HTML puede encontrar en http://geneura.ugr.es/~gustavo/css un tutorial muy bueno de CSS para HTML.
Para poder visualizar un documento XML es necesario especificar qué formato se debe utilizar. Para este propósito se utiliza la instrucción xml-stylesheet
Ejemplo:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo0.css" type="text/css"?>
De este modo el fichero de estilos se incluye en el documento XML. La instrucción posee dos atributos.
Un fichero CSS contiene una serie de reglas de estilo o, también llamadas, unidades css. Dichas unidades css se componen de un selector(normalmente el nombre de una etiqueta de nuestro documento XML) y una lista o cadena de estilos. Dicha lista consta de un conjunto de pares de elementos separados por el caracter ; donde cada par, está formado por el nombre de una propiedad y un valor, separándose con el caracter :
Sintaxis:
Selector {propiedad:valor; propiedad:valor; ... propiedad:valor}
El selector más utilizado es simplemente el nombre de la etiqueta a la que se refiere la regla.
Ejemplo:
ejemplo {display: block; color: blue}
La agrupación de elementos se realiza mediante una lista de los nombres de las reglas separadas por comas. A esta práctica se le denomina Agrupación de selectores.
Ejemplo documento xml con agrupación de selectores:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo1.css" type="text/css"?>
<TEXTOS>
<POEMA>
<VERSO> La princesa está triste... ¿qué tendrá la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
<CITA> Algunos gallos creen que el sol sale sólo para ellos
</CITA>
</TEXTOS>
Ejemplo documento CSS con agrupación de selectores:
POEMA,CITA {display: block; color: blue}
Existe un tipo de elementos especiales denominados pseudo-elementos que hacen referencia a dos elementos especiales que algunas veces necesitan estilos específicos como son los elementos first-letter y first-line. La forma de referenciarlos es : ELEMENTO:pseudo-elemento Lista_de_Estilos
Ejemplo documento css con pseudo-elementos:
POEMA {display: block; color: blue}
CITA {display: block; color: red}
CITA:first-letter {color: green}
Para los casos en que el mismo elemento necesite formatearse de diferente forma, se utiliza CLASS. La forma de utilizar CLASS es la siguiente. En el fichero CSS se especifica la regla general de formateo y la regla para los elementos especiales y en el fichero XML se identifican esos elementos con el atributo CLASS.
Ejemplo de documento XML,usando CLASS:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo3.css" type="text/css"?>
<POEMA>
<VERSO CLASS="PRIMERO" > La princesa está triste... ¿qué tendrá la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el color.</VERSO>
<VERSO CLASS="PRIMERO" >... </VERSO>
</POEMA>
Ejemplo de documento CSS, usando CLASS:
POEMA { display: block }
VERSO.PRIMERO{ color: blue }
VERSO{ display: block; color: black}
Nota: Esta opción no está disponible todavía en el navegador Mozilla, aunque sí funciona en el IE5. Esa práctica no está muy recomendada puesto que siempre es posible evitarla utilizando una etiqueta distinta para estos elementos.
En otras ocasiones es posible que se desee seleccionar un único elemento para asignarle un estilo especial, en este caso es posible seleccionarlo mediante el atributo ID. Para este caso la forma de utilizar el ID es la siguiente
Ejemplo de documento XML,usando ID:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo4.css" type="text/css"?>
<POEMA>
<VERSO ID="PRIMERO" > La princesa está triste... ¿qué tendrá la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de documento CSS, usando ID:
POEMA { display: block }
VERSO#PRIMERO{ color: blue }
VERSO{ display: block; color: black}
Nota: Esta opción no está disponible todavía en el navegador Mozilla, aunque sí funciona en el IE5. Esa práctica no está muy recomendada puesto que siempre es posible evitarla utilizando una etiqueta distinta para estos elementos.
La última forma de seleccionar un elemento es mediante contexto. Es decir se desea aplicar estilo a algunos elementos dependiendo del contexto en el que se encuentren, para esta práctica se procede:
Ejemplo de XML, usando contexto:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo5.css" type="text/css"?>
<POEMA>
<PRIMERO>
<VERSO> La princesa está triste... ¿qué tendrá la princesa?</VERSO>
</PRIMERO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de CSS, usando contexto:
POEMA {display:block;}
VERSO {color: black}
PRIMERO {display:block}
PRIMERO VERSO {color: blue}
En casos muy raros, es posible que el usuario desee aplicar un estilo concreto, una sóla vez a un elemento sin modificar el fichero con extensión css, para esto se utiliza el atributo STYLE. El atributo STYLE posee mayor precedencia que el estilo definido en el fichero css.
Ejemplo de XML, usando STYLE:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo6.css" type="text/css"?>
<POEMA>
<VERSO STYLE="color:blue"> La princesa está triste... ¿qué tendrá la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de CSS, usando STYLE:
POEMA {display:block;}
VERSO {color: red}
Nota: Esta opción no está disponible todavía en el navegador Mozilla, aunque sí funciona en el IE5. Esa práctica no está muy recomendada puesto que siempre es posible evitarla utilizando una etiqueta distinta para estos elementos.
No es necesario que todas las reglas especifiquen que estilo utilizar puesto que los elementos específicos heredan por defecto el estilo de los elementos más generales que los incluyen.
Ejemplo de XML, usando herencia:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo7.css" type="text/css"?>
<POEMA>
<VERSO> La <NOMBRE>princesa</NOMBRE> está triste... ¿qué tendrá la princesa?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de CSS, usando herencia:
POEMA {display: block }
VERSO {display: block; font-size: 20pt; font-family: sans-serif}
NOMBRE {font-style: italic; font-family: Helvetica }
En el ejemplo, el elemento NOMBRE hereda el tamaño de letra y redefine aquello que le interesa como la familia de fuente que utilizar. Hay que tener cuidado con utilizar especificaciones muy concretas para un elemento general puesto que eso puede provocar que los elementos hijos tengan que redefinir todas las opciones. Otro problema es que si se utiliza familias de fuente diferentes, es posible que los tamaños salgan muy dispares, para evitar este problema se suelen utilizan medidas de fuente relativas, o porcentajes que veremos más adelante.
A un mismo fichero es posible adjuntar más de un fichero de estilos, y esto puede provocar que un mismo elemento posea varias reglas de estilo asignadas y contradictorias entre si, por lo que se determina un orden de aplicación de estas reglas denominado estilos en cascada.
Existen varias formas de asignar un fichero de estilo:
La primera forma está clara. Respecto a la segunda debe incluirse en la primera línea del fichero css y el formato es el siguiente: @import url(direccion relativa o absoluta);
Ejemplo de CSS, usando import:
@import url("subs.css");
VERSO { color: blue }
El orden de importación de los ficheros de estilos es el orden de las declaraciones, y las referencias circulares no están permitidas.
El orden en el que se aplican las reglas es muy sencillo. Generalmente si existen más de una regla para un mismo elemento, se aplica la regla más específica. Por ejemplo: En una regla con un atributo ID y CLASS tendría preferencia la aplicación del ID primero y despues de la clase y en su defecto la regla del elemento general y sino las reglas que rigen el elemento padre y si no existen las reglas generales de estilo del navegador.
Nota:El orden en cascada puede a veces llevar a confusión.
Los comentarios en las hojas de estilo son similares a los comentarios de C. /*... */.
Ejemplo de CSS con comentarios:
POEMA{display:block;} /* Estilos generales para un poema*/
VERSO{color: black; } /* Estilos específicos para el verso*/
Los valores de las propiedades pueden ser de cuatro tipos:
La longitud se utiliza para propiedades que expresan tamaño y se pueden utilizar tres tipos de longitud:
Ejemplo de CSS con longitudes absolutas:
POEMA{ font-size: 1in } /* Ejemplo de in */
VERSO{ margin: 1.5cm } /* Ejemplo de cm */
CITA { margin: 1000mm } /* Ejemplo de mm */
Ejemplo de CSS con longitudes relativas:
POEMA{ font-size: 12px } /* Ejemplo de px */
VERSO{ margin: 0.5em } /* Ejemplo de em */
CITA { margin: 1ex } /* Ejemplo de ex */
Ejemplo de CSS con porcentajes:
POEMA{ font-size: 120% } /* Ejemplo de % */
Este valor se puede aplicar a las propiedades que indican la imagen del fondo, y las imagenes de una lista, background-image, list-style-image y list-style. El formato para especificar una URL es mediante la funcion url(). Como argumento recibe una dirección relativa o absoluta que puede o no ir con comillas simples o dobles.
Ejemplo de XML:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo8.css" type="text/css"?>
<POEMA>
<VERSO> La <NOMBRE>princesa</NOMBRE> está triste... ¿qué tendrá la <NOMBRE>princesa</NOMBRE>?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de CSS usando url:
POEMA {display: block; background-image: url(fondo-azul.jpg) }
VERSO {display: block; font-size: 20pt; font-family: sans-serif}
NOMBRE {font-style: italic; font-family: Helvetica }
Los caracteres especiales como los espacios, comas, etc.; deben ser escapados con la siguiente tabla:
| Espacio | %20 |
| , | %2C |
| ' | %27 |
| " | %22 |
| ( | %2B |
| ) | %2C |
| ~ | %7E |
Existen muchas propiedades cuyo valor es un color y para indicar un color, CSS define cuatro formas diferentes, por nombre, por componentes hexadecimales, por componentes enteras y por porcentajes.
| aqua | black | blue | fuchsia |
| gray | green | lime | maroon |
| navy | olive | purple | red |
| silver | teal | white | yellow |
Ejemplo de XML:
<?xml version="1.0" encoding="UTF-7"?>
<?xml-stylesheet href="ejemplo9.css" type="text/css"?>
<POEMA>
<VERSO> La <NOMBRE>princesa</NOMBRE> está triste... ¿qué tendrá la <NOMBRE>princesa</NOMBRE>?</VERSO>
<VERSO> Los suspiros se escapan de su boca de fresa,</VERSO>
<VERSO> que ha perdido la risa, que ha perdido el color.</VERSO>
<VERSO>... </VERSO>
</POEMA>
Ejemplo de CSS usando colores:
POEMA {display: block; background-image: url(fondo-azul.jpg) }
VERSO {display: block; font-size: 20pt; font-family: sans-serif; color:rgb(10,50,40)}
NOMBRE {font-style: italic; font-family: Helvetica; color:#33CCAA }
Estos son los valores más variables de los cuatro y serán introducidas detenidamente cuando se hable de cada una de las propiedades.
La propiedad display determina como va a ser mostrado un elemento, qué espacio le va a ser asignado para su aparición en pantalla.
Existen cuatro posibles valores para esta propiedad: block, inline, list-item y none.
Nota: La opción list-item no está soportada por ningún navegador actualmente.
Esta propiedad indica si los espacios, tabuladores o retornos de carro del fichero fuente son significativos o no. Los valores que puede tomar son normal, nowrap y pre.
Existen cinco propiedades para los tipos de letra que son:
Con palabras clave:
Todas estas medidas son relativas a la fuente activa en la página.
Otra forma de expresar tamaño con palabras clave de forma relativa es teniendo en cuenta el tamaño de fuente del padre, esto se puede hacer expresando el tamaño mediante un porcentaje o mediante larger o smaller
Existe una propiedad que engloba todas las propiedades relacionadas con la fuente denominada font. Esta propiedad toma como valor una lista de valores separados por espacios cuyo orden debe ser: estilo, variante y ancho de fuente que deben aparecer al principio en cualquier orden y además cualquiera de ellos puede ser omitido. El siguiente elemento debe ser el tamaño que no puede ser omitido y justo despues y de forma opcional puede aparecer el caracter / y el ancho de la línea de escritura. El último valor es la familia de la fuente y es un valor que no se puede omitir.
Ejemplos de CSS para expresar características de una fuente.
POEMA {font: bold x-large Helvetica, sans-serif }
POEMA {font: italic smaller serif }
POEMA {font: italic 14pt/100pt serif }
Esta propiedad se puede expresar mediante una palabra clave, números decimales, porcentajes o un número hexadecimal. Esta propiedad es heredada por los elementos hijos.
Esta propiedad expresa el color del fondo y puede tomar valores de color o valores de la dirección de una imagen y engloba a varias propiedades individuales.
Si esta propiedad se aplica al elemento principal, la imagen se toma como la propiedad background del elemento BODY de HTML. en cualquier otro caso se aplica sólo al espacio del elemento.
Ejemplos de cada una de las anteriores son:.
POEMA {background-image: url(fondo-azul.jpg);
background-repeat:no-repeat;
background-position: bottom}
POEMA {background-image: url(fondo-azul.jpg);
background-repeat:no-repeat;
background-position: 25% 50%}
POEMA {background-image: url(fondo-azul.jpg);
background-repeat:no-repeat;
background-position: 1cm 3cm}
POEMA {background-image: url(fondo-azul.jpg);
background-repeat:no-repeat;
background-position: top right}
Al igual que con las propiedades de las fuentes la propiedad background engloba las 5 anteriores. El valor de esta propiedad es una lista de elementos separados por espacios en el orden background-image, background-color, background-repeat, background-attachment y background-position.
Este conjunto de propiedades resumen la apariencia del texto.
En este grupo hay 8 propiedades:
Este conjunto de propiedades permite especificar las propiedades de ancho, alto, margenes, bordes de los espacios para mostrar los elementos.
En este grupo se incluyen:
La consecuencia de estas propiedades depende de si el elemento es de bloque o es un elemento in-line.
La forma de especificar un borde es por ejemplo:
VERSO {display: block; border-style: dotted dashed solid double } /* -> top, left, bottom, right*/
VERSO {display: block; border-style: dotted dashed solid } /* -> top, dashed(left, right), bottom*/
VERSO {display: block; border-style: dotted dashed } /* ->dotted(top, bottom), dashed (left, right)*/
VERSO {display: block; border-style: dotted } /* -> dotted (top, left, bottom, right)*/
Las propiedades de los bordes se agrupan tambien como:
Cada una de las cuatro primeras puede admitir valores de ancho, estilo y color para cada uno de los bordes.
La ultima propiedad border admite valores de ancho, estilo y color para los cuatro bordes.
Todas admiten un valor de longitud. Y se agrupan las cuatro como padding.
La especificación de CSS2 fue publicada en W3C en 1998 tanto para HTML como para XML, aunque es con XML donde toma la potencia real que tiene.
CSS2 incorpora herramientas para los desarrolladores WEB y para los diseñadores y no sólo añade funcionabilidad sino que también redefine algunas de las ya especificadas en CSS1. Estas nuevas características permiten al usuario selecionar y formatear elementos de forma precisa.
Se han añadido pseudoClases, y pseudoElementos que permiten dar formato a objetos seleccionados, objetos apuntados, etc. Se han añadido los tipos de medios. Esta nueva característica permite crear formatos diferentes dependiendo del tipo de médio que se vaya a utilizar para mostrarlo, video, TV, impresoras, etc. Se añade la base para manejar otros lenguajes como el Chino y el Árabe.
Utilizando CSS2 se pueden seleccionar elementos basandose en un patron. El navegador busca ese patrón y despues aplica las reglas especificadas para él.
En la siguiente tabla se resumen todos los selectores y su forma de trabajar.
| Patrón | Significado | |
|---|---|---|
| * | Selector universal. | |
| E | Selector de elementos del tipo E. | |
| E F | Selector del elemento del tipo F descendiente de un elemento del tipo E. | |
| E > F | Selectiona cualquier elemento F hijo del elemento E. | |
| E:first-child | Selecciona todos los elementos E que son el primer hijo del elemento padre de que se trate. | |
| E:active | Selecciona todos los elementos E que están seleccionados. | |
| E:hover | Seleciona los elementos E apuntados por el ratón. | |
| E:lang(c) | Selecciona los elementos E que están diseñados para utilizar el lenguaje c utilizando el atributo xml:lang. | |
| E + F | Selecciona todos los elementos F cuyo inmediato hermano es un elemento E. | |
| E[atributo] | Selecciona todos los elementos E con el atributo especificado. | |
| E[atributo="mi_valor"] | Selecciona todos los elementos E con el atributo especificado e inicializado a mi_valor. | |
| E[atributo~="mi_valor"] | Selecciona todos los elementos E con el atributo inicializado a una lista de valores entre el que se incluye mi_valor | |
| E[lang|="codigo"] | Selector de todos los elementos E con codigo asignado al atributo lang. | |
| E#mi_ID | Selecciona cualquier elemento E con el atributo ID igual a mi_ID. |
Por ejemplo:
*:before{content:"_________"}
Muestra una raya delante de cada elemento.
POEMA * VERSO
Este selector representa todos los versos que son nietos de un poema. Con el selector
ESTROFA > VERSO
Se seleccionan los versos que son hijos directos de una estrofa.
Todo esto se puede combinar realizando por ejemplo la siguiente seleccion:
POEMA ESTROFA > VERSO:first-letter
Selecciona la primera letra de todos los versos dentro de una estrofa y a su vez hijas de un poema.
Por ejemplo:
ESTROFA + NOTAS
Selecciona el elemento NOTAS que existe justo detras de un elemento ESTROFA.
Por ejemplo:
ESTROFA[NUMERO="2"]
Selecciona el elemento ESTROFA que tiene el valor 2 en el atributo NUMERO.
Por ejemplo:
@import url(poesia.css)
Pero a diferencia de CSS1 se debe especificar para qué tipo de médio está hecho el fichero de estilo:
@import url(poesia.css) screen;
Este ejemplo inluirá el fichero poesia.css para mostrar en pantalla nuestro fichero XML. En el caso de que existieran reglas que se solapan en CSS2 tiene mayor importancia la regla del fichero de estilos asignado al fichero XML frente a los ficheros importados.
@media print{ POESIA{font-size: 20pt; font-family: Times, serif}}
Indica que cuando el texto sea impreso, se utilizará una fuente de tamaño 20pt y una letra Times o serif en su defecto.
Tambien se pueden especificar reglas comunes:
@media print,screen{ POESIA{font-size: 20pt; font-family: Times, serif}}
Que indica que para la impresora y para la pantalla una POESIA se mostrará con las mismas características.
Los diferentes tipos de medios son:
No todos los tipos de medios están soportados todavía pero lo estarán.
El tipo de cada medio determina las propiedades que cada uno puede manejar puesto que algunas propiedades solo se pueden aplicar a dispositivos paginados por ejemplo.
Cada declaración lleva una información detallada acerca de la fuente. Estas declaraciones se denominan descriptores de fuente y se pueden clasificar en tres tipos:
Cada regla font-face se aplica a un sólo tipo de fuente por lo que si en el fichero CSS utiliza más de una será necesario especificar una regla font-face para cada tipo de fuente.
@font-face {font-family: "Comic Sans"; src: url(http://metalab.unc.edu/xml/fonts/comicsans)}
Cada fichero CSS puede tener una sóla regla @charset que debe aparecer en la primera línea del documento. El conjunto de caracteres asignado debe ser un nombre válido por ejemplo:
@charset "ISO-8859-1"
Esta regla asigna el conjunto de caracteres del latín al fichero.
ESTROFA:after {content: "________"}
En este ejemplo se indica que despues de cada estrofa, se debe colocar "________". Si en vez de un texto se desea indicar algún símbolo se pueden utilizar estas dos opciones:
AUTOR:lang(es) {direction:"rtl"}
Esta regla cambia la dirección de los elementos escritos en español.
@page:right {margin: 3cm}
@page:left {margin: 5cm}
@page:first {margin: 7cm}
Se indican mediante @page y se aplican a una página no a un elemento individual de XML. CSS2 asume que las páginas son rectángulares. Las propiedades disponibles son:
Por ejemplo:
@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
POEMA {page: narrow}
ESTROFA {page: rotated}
CSS2 añade nuevas formas de la propiedad display que son:
Por ejemplo:
POESIA {display: table}
ESTROFA{display:table-row}
VERSO{display:table-cell}
Este ejemplo alinea todos los versos en celdas. El resultado es una tabla de tres columnas, puesto que en cada estrofa existen tres versos.
Estas dos propiedades permiten fijar el tamaño de la caja que contiene a cada elemento. El tamaño por defecto de una caja de un elemento se calcula según su contenido, pero este calculo se puede modificar mediante seis propiedades:
Cuando el tamaño de la caja asignado es menor que el necesario, entonces esta propiedad permite especificar qué hacer con la parte no visible. Las posibilidades son:
Indica qué porción del texto debe mostrarse cuando existe un overflow. la forma de indicarlo es mediante la función rect(top, bottom, left, right).
Ejemplo de utilización:
VERSO {height: 80px; width: 150px; overflow:auto; clip: rect(5px,5px,5px,5px) }
Nota: Esta propiedad sólo funciona en el IExplorer 5.0.
La visibilidad de un elemento puede ser visible, hidden, collapse ( Lo mismo que hidden en algunos elementos pero es diferente en tablas por ejemplo ), y inherit.
Se trata de la propiedad que especifica el cursor del ratón cuando el elemento es apuntado por éste. Los posibles valores son:
Nota: Esta propiedad sólo funciona en el IExplorer 5.0.
CSS2 Añade una nueva forma de asignar colores y es utilizando los mismos colores que el entorno esté utilizando. Algunas de las posibilidades son:
| Color | Descripción |
| ActiveBorder | Borde de una ventana activa |
| Background | Color de fondo del escritorio |
| ButtonHighlight | Boton seleccionado |
| ButtonShadow | Sombra de los botones |
| ButtonText | Color del texto de los botones |
| Highlight | Elementos seleccionados |
| HighlightText | Texto seleccionado |
| InactiveBorder | Borde inactivo |
| InactiveCaption | Color de un título inactivo |
| InactiveCaptionText | Color del texto de un título inactivo |
| InfoBackground | Color de fondo de la ayuda |
| InfoText | Color del texto de la ayuda |
| Menu | Menu |
| MenuText | Texto del menú |
| Scrollbar | Barra de scroll |
| ThreeDDarkShadow | Sombra oscura en 3D |
| ThreeDFace | Cara principal en 3D |
| ThreeDHighlight | Cara de iluminación en 3D |
| ThreeDLightShadow | Sombra clara 3D |
| ThreeDShadow | Sombra 3D |
| Window | Ventana |
| WindowFrame | Frame de la ventana |
| WindowText | Texto de la ventana |
CSS2 aporta una serie de propiedades nuevas para las fuentes que son:
Nota: Esta propiedad no funciona en Mozilla.
Especifica el color y tamaño de la sombra de un texto. El formato es: text-shadow: color distancia-h-texto, distancia-v-texto
VERSO {text-shadow: red -5pt -5pt}
Nota: No está disponible en Mozilla.
Especifica el desplazamiento del texto respecto a la base de la línea. Puede tomar los valores baseline, sub, super, top, middle, bottom, text-top y text-bottom.
CSS2 añade opciones que nos permiten situar una caja en un aposición concreta, dentro de otra caja o en una ventana.
Para ello se utilizan las propiedades de posicionamiento y las propiedades outline.
La diferencia entre este tipo de línea y un borde es que el borde se añade al ancho de la caja mientras que una línea de este tipo no.
Nota: No está disponible en Mozilla.
Este conjunto de propiedades manejan la posición de una caja. El nombre de la propiedad es position y los valores que puede tomar son:
Por GeNeura Team.
http://geneura.ugr.es
Usuarios que han visto este tema también han visto...
- Centrar imágenes con CSS
- Barra de desplazamiento a la izquierda con CSS
- Cómo cambiar la apariencia de un botón en CSS
- Opacity en CSS
- Cómo quitar subrayado de los enlaces
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.