Autor: F. Javier García Castellano
Web: http://decsai.ugr.es/~fjgc, Mail: fjgc@decsai.ugr.es
(C) GeNeura Team
Web: http://geneura.ugr.es, Mail: tutti@geneura.ugr.es
| CSS 1 Para XML
Autor: F. Javier García Castellano Web: http://decsai.ugr.es/~fjgc, Mail: fjgc@decsai.ugr.es |
(C) GeNeura Team Web: http://geneura.ugr.es, Mail: tutti@geneura.ugr.es |
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 solo 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.
EJERCICIO 2:
Averigua cual es la opción por defecto de la propiedad display en el navegador y prueba la herencia con el fichero del primer ejemplo.
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.
EJERCICIO 3:
Comprobar si en nuestro navegador está implementada esta propiedad.
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 }
EJERCICIO 4:
Realiza pruebas en tu fichero para comprobar que todas las opciones funcionan.
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.
EJERCICIO 5:
Realiza en el fichero css de ejemplo las modificaciones necesarias para que aparezca la imagen de fondo sin repetirse en diferentes posiciones del navegador.
EJERCICIO 6:
Realiza las mismas pruebas pero asignando un color de fondo.
Este conjunto de propiedades resumen la apariencia del texto.
En este grupo hay 8 propiedades:
EJERCICIO 7:
Formatear el fichero XML de ejemplo para que aparezcan dos etiquetas con un tamaño de letra diferente.
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.
EJERCICIO 8:
Formatear el fichero XML de ejemplo para que aparezca todo en un cuadrado de color con bordes 4 pixels .