Styles Globaux
Les styles globaux sont définis pour le design SPS entier dans le Référentiel de Styleet recensés dans le Référentiel de style sous l’en-tête global. Ils sont passés à Authentic View et au document de sortie HTML comme règles CSS. Dans le document HTML, ces règles CSS sont écrites à l’intérieur de l’élément /html/head/style.
Dans le Référentiel de Style, un style global est une seule règle CSS consistant en un sélecteur et des propriétés CSS pour ce sélecteur. Créer un style global, pour cette raison, consiste en deux parties :
•Ajouter un nouveau style et déclarer le sélecteur CSS pour celui-ci
•Définir les propriétés CSS pour le sélecteur
Sélecteurs pris en charge
Les sélecteurs suivants sont pris en charge :
•Sélecteur universel : écrit comme *
•Sélecteurs de type : noms d’élément, tel que h1
•Sélecteurs d’attribut : par exemple, [class=maindoc]
•Sélecteurs de classe : par exemple, .maindoc
•Sélecteurs ID : par exemple, #header
Ajouter un style global
Pour ajouter un style global au design SPS, suivez les étapes suivantes :
1.Dans l’Aperçu de design, sélectionnez un item Global dans la fenêtre du Référentiel de Style (capture d’écran ci-dessous).
| 2. | Cliquez sur la touche Ajouter en haut à gauche de la barre d’outils du Référentiel de Style (voir la capture d’écran ci-dessus). Un style global est inséré dans l’arborescence global avec un sélecteur * (qui sélectionne tous les éléments HTML) ; le sélecteur universel est le sélecteur par défaut pour chaque style global nouvellement inséré. |
| 3. | Pour changer le sélecteur du sélecteur universel par défaut, double-cliquez sur le sélecteur et éditez-le. |
| 4. | Désormais, définissez les valeurs de la propriété CSS pour le sélecteur. Suivez à cette fin les explications dans la section, Définir les valeurs de style. |
| 5. | Pour ajouter un autre style global, répétez les étapes 1 à 4. Le nouveau style global sera ajouté à l’arborescence globale, en dessous de tous les styles globaux ajoutés précédemment ajoutées. |
Note :
•Les styles globaux peuvent aussi être insérés avant un style global sélectionné dans l’arborescence global en cliquant sur la touche Insérer dans la fenêtre du Référentiel de style. Les touches Ajouter et Insérer sont aussi disponibles via le menu contextuel qui apparaît quand vous cliquez avec la touche de droite sur un sélecteur global.
•Un style global avec un sélecteur qui est un élément HTML peut être inséré en cliquant avec la touche de droite sur l’élément dans l’arborescence global, puis en sélectionnant Ajouter Sélecteur | HTML | HTMLElementName.
Éditer et supprimer les styles globaux
Les deux sélecteurs de style ainsi que leurs propriétés peuvent être édités dans la fenêtre du Référentiel de style.
•Pour éditer un sélecteur, double-cliquez sur le nom du sélecteur, puis placez le curseur dans le champ de texte et éditez.
•Pour information sur la définition et l’édition des valeurs de la propriété de style, voir Définir les valeurs de style. (Les propriétés de style peuvent être affichées de trois manières possibles. Ces manières et la façon dont vous pouvez basculer entre elles sont décrites dans Opinions des définitions.
Pour supprimer un style global, sélectionnez le style et cliquez sur la touche Réinitialiser dans la barre d’outils du Référentiel de Style.
Modifier la préséance des styles globaux
Les styles globaux qui sont assignés dans la fenêtre du Référentiel de style sont placés comme règles CSS dans l’élément /html/head/style. Dans le fichier HTML, ils auraient l’aspect suivant :
<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>
L’ordre dans lequel les styles globaux sont recensés dans Authentic View et le document HTML correspond à l’ordre dans lequel ils sont recensés dans l’arborescence global du Référentiel de style. L’ordre dans Authentic View et le document HTML ont une signification. Si deux sélecteurs sélectionnent le même nœud, alors le sélecteur qui apparaît plus bas dans la liste des styles globaux a préséance. Par exemple, dans le document HTML ayant une liste partielle donnée ci-dessus, s’il existait un élément <h1 class="green">, alors trois styles globaux correspondent à cet élément : celui avec le sélecteur h1 et les deux sélecteurs de classe .green. La propriété de couleur du sélecteur .green avec la couleur lime s#appliquera car elle apparaît après le sélecteur .green avec la couleur green et a une préséance élevée pour cette raison. (Les sélecteurs de classe ont toujours une préséance plus élevée que les nœuds de sélecteurs, donc les deux sélecteurs .green auront une préséance plus élevée que le sélecteur h1 indépendamment de leurs positions respectives pertinentes au sélecteur h1.) La taille de la police du style h1, s’appliquera, toutefois, à l’élément <h1> car il n’existe aucun sélecteur avec une préséance plus élevée qui correspond à l’élément <h1> et a une propriété font-size.
Pour changer la préséance du style global, sélectionnez ce style et utilisez les touches Déplacer vers le haut et Déplacer vers le bas dans la barre d’outils du Référentiel de Style pour repositionner ce style global par rapport aux autres styles dans l’arborescence. Par exemple, si le style global .green était déplacé vers une position avant le le style .red style, alors la propriété de couleur du style .red aurait préséance sur celle du style .green.
Notez, toutefois, que les sélecteurs de classe ont préséance sur des sélecteurs de type. Donc, si l’ordre du sélecteur était modifié à .red .green h1 h2, alors h1 et h2 serait toujours vert.