Estilos globales
Los estilos globales del diseño SPS se definen en el Repositorio de estilos y se enumeran bajo el elemento Globales. Estos estilos se pasan a la vista Authentic y al documento HTML de salida como reglas CSS dentro del elemento /html/head/style.
En el Repositorio de estilos un estilo global es una regla CSS formada por un selector y propiedades CSS para el selector. Por tanto, el proceso de creación de estilos globales tiene dos fases:
•Añadir un estilo nuevo y declarar su selector CSS
•Definir propiedades CSS para el selector
Selectores compatibles
Estos son los selectores compatibles:
•Selector universal: escrito como *
•Selectores de tipo: nombres de elemento como h1
•Selectores de atributo: como [class=maindoc]
•Selectores de clase: por ejemplo .maindoc
•Selectores de Id.: por ejemplo #header
Añadir un estilo global
Siga estos pasos para añadir un estilo global al diseño SPS:
1.En la vista Diseño seleccione el componente Globales de la ventana Repositorio de estilos (imagen siguiente).
| 2. | Haga clic en el botón Añadir situado en la parte superior izquierda de la barra de herramientas (imagen anterior). El estilo global se inserta en el árbol Globales con un selector * (que selecciona todos los elementos HTML). El selector universal * es el selector predeterminado cuando se insertan estilos globales nuevos. |
| 3. | Para cambiar de selector, haga doble clic en él y edítelo. |
| 4. | Ahora debe establecer los valores de propiedad CSS para el selector. Esto se explica en detalle en el apartado Establecer valores de estilos. |
| 5. | Para añadir otro estilo global repita los pasos 1, 2, 3 y 4. El nuevo estilo global se añadirá al árbol Globales, debajo de los estilos globales añadidos previamente. |
| Nota: |
•Para insertar estilos globales antes de un estilo global del árbol Globales, haga clic en el botón Insertar de la barra de herramientas del Repositorio de estilos. Los botones Agregar e Insertar también están disponibles en el menú contextual que aparece al hacer clic con el botón derecho en un selector global.
•Para insertar un estilo global con un selector que sea un elemento HTML haga clic con el botón derecho en un elemento del árbol Globales y seleccione el comando Agregar selector | HTML | NombreElementoHTML.
Editar y eliminar estilos globales
Tanto el selector de estilo como sus propiedades se pueden editar en la ventana Repositorio de estilos.
•Para editar un selector haga doble clic en el nombre del selector, ponga el cursor en el campo de texto y escriba el nombre nuevo.
•Para aprender a definir y editar las propiedades de un estilo consulte el apartado Establecer valores de estilos. (Las propiedades de los estilos pueden verse de tres formas. Estas tres vistas se describen en el apartado Opciones de presentación de las definiciones.)
Para eliminar un estilo global, selecciónelo y haga clic en el botón Restaurar de la barra de herramientas del Repositorio de estilos.
Cambiar el orden de prioridad de los estilos globales
Los estilos globales que están asignados en la ventana Repositorio de estilos se crean como reglas CSS en el elemento /html/head/style. En el archivo HTML tendrían este aspecto:
<html>
<head>
<style>
<!--
h1 { color:blue;
font-size:16pt;
}
h2 { color:blue;
font-size:14pt;
}
.red { color:red;}
.green { color:green;}
.green { color:lime;}
-->
</style>
</head>
<body/>
</html>
El orden de los estilos globales en la vista Authentic y en el documento HTML equivale al orden de los estilos globales en el árbol Globales del Repositorio de estilos. El orden de los estilos globales en la vista Authentic y en el documento HTML es importante. Si dos selectores seleccionan el mismo nodo, tiene prioridad el selector que aparece más abajo en la lista de estilos globales. Por ejemplo, si en el documento HTML del ejemplo anterior hubiera un elemento <h1 class="green">, entonces 3 de los estilos globales apuntarían a este elemento: el estilo con el selector h1 y los dos selectores de clase .green. Se aplicará la propiedad color del selector .green con el color lime porque aparece después del selector .green con color green y, por tanto, tiene prioridad. Los selectores de clase siempre tienen prioridad sobre los selectores de nodo así que ambos selectores .green tendrán prioridad sobre el selector h1, independientemente de su posición en relación al selector h1. No obstante, el tamaño de fuente del estilo h1 se aplicará al elemento <h1> porque no hay ningún selector con mayor prioridad que apunte al elemento <h1> y que tenga una propiedad font-size.
Para cambiar el orden de prioridad de un estilo global selecciónelo y use los botones Subir y Bajar de la barra de herramientas del Repositorio de estilos. Al hacer clic en estos botones cambia la posición del estilo global en relación a los demás estilos globales del árbol Globales. Por ejemplo, si movemos el estilo global .green antes del estilo .red, la propiedad color del estilo .red tendrá prioridad sobre la del estilo .green.
Sin embargo, no olvide que los selectores de clase siempre tienen prioridad sobre los selectores de tipo. Por tanto, si cambiamos el orden por .red .green h1 h2, entonces h1 y h2 siguen siendo verde (green).