Les feuilles de style CSS permettent de contrôler finement l'application de styles à du texte, de positionner des blocs, elles sont assez puissante pour vous permettre par exemple de modifier dynamiquement l'apparence d'un mot lors de son survol par le curseur de la souris.

Vous pouvez incorporer une feuille de style en fonction d'une condition, par exemple uniquement pour une compilation pdf

12
Help&Web vous permet d'utiliser de tels styles dans les objets textes enrichis, liens, tableaux, bloc et paragraphe et cela au travers de leur propriété Css

Vous pourrez aussi les utiliser dans vos composants car ils disposent de propriétés de type css

Attention ces styles ne sont répercutés entièrement que pour des aides html et htmlhelp (chm), en hlp seules les propriétés de fonte, couleurs (Color, Background-Color), image en fond (Background-image), largeur (Width) et hauteur (Height) sont disponibles.

En PDF en plus des propriétés disponibles en hlp vous avez aussi accès aux marges, padding et bordures.

Top, Left sont disponibles si vous basculez Position sur absolute pour les blocs (type paragraphe, DIV) ou sur relative pour du texte.

5

Editeur Help&Web

Help&Web dispose d'un éditeur qui vous facilitera la création et la maintenance de vos feuilles de styles, vous y accédez depuis l'onglet Style

Vous pouvez faire en sorte qu'une feuille de style ne soit utilisée que par Internet Explorer, par exemple pour corriger ses bugs CSS , pour cela il vous suffira de renseigner le champ "Spécifique à internet explorer".

Fig. 70 Une feuille de style css uniquement pour IE

Votre feuille sera alors incluse entre des commentaires conditionnels qui ne sont exploités que par IE.

Par défaut vous avez lt IE 8 qui chargera la feuille pour toutes les versions IE < 8, lt IE 7 pour les versions < 7 et lt IE 6 pour les versions < 6 mais vous pouvez utiliser l'ensemble des commandes disponibles, laissez ce champ vide pour ne pas utiliser cette fonctionnalité.

lt inférieur à
lte inférieur ou égal à
gt supérieur à
gte supérieur ou égal à



Vous pouvez aussi choisir d'utiliser un éditeur spécialisé, pour cela indiquez le en allant sur l'onglet Help&Web - Configuer puis Outils

Parmi les outils gratuits signalons TopStyle Lite

Editeur de feuilles de style css
Editeur de feuilles de style css

Commandes

Les modifications dans votre feuilles ne sont enregistrées que si vous quittez l'éditeur en cliquant le bouton Valider, vous pourrez toute fois revenir sur une version antérieure en allant dans l'Historique.

Le bouton Annuler permet de revenir sur les modifications en cours.

Section vous permet d'organiser vos styles de façon logique pour mieux vous y retrouver, en mode source vous les définissez comme suit /* -- Nom de la section -- */, vous pouvez déplacer vos styles par simple glisser-déposer.<>

Fig. 71 Sections css

Ajouter un style et le dialogue suivant s'affiche

Fig. 72 Création d'un style css

Le champ Classe/Identifiant vous servira à donner un nom à votre style, c'est le seul qui soit reconnu dans vos aides HLP et pdf.

Le champ Tag permet de restreindre l'application du style à un type de balise HTML précise (par exemple un lien balise <a...>)

A droite de Tag vous avez une liste déroulante contenant . et #

Une classe CSS peut s'appliquer à plusieurs éléments (attribut class en xhtml) alors qu'un identifiant est unique dans une page (attibut id en xhtml)

Dans un composant Help&Web la propriété name correspond à un identifiant #, alors que les propriétés css référence une classe css

6

En utilisant à la fois Tag et Classe vous faites en sorte que le style ne s'applique qu'aux balises dont la propriété class correspond à votre Classe.

En cliquant deux fois sur votre style vous pouvez le modifier directement, vous devez valider le changement en pressant Entrée, pressez Échap ou sélectionnez un autre élément pour quitter l'édition.

Fig. 73 Modification du nom d'un style

Un double clic sur un style vous donne accès au mode source.

Pressez Entrée pour dupliquer la règle sélectionnée, ses paramètres seront vides

Pressez CTRL+Entrée pour dupliquer la règle et ses paramètres

Pressez Suppr pour supprimer une règle et ses paramètres

Pressez CTRL+Suppr pour juste effacer les paramètres de la règle

Depuis la Source de votre feuille, lorsque vous pressez la touche / une liste de suggestions s'affiche avec l'ensemble des propriétés css disponibles, en double cliquant sur un style vous ouvrez directement son éditeur de propriétés.

Fig. 74 Suggestion propriétés css

Help&Web vous permet d'utiliser des variables dans vos feuilles de styles.

Vous pouvez Importer le contenu d'une autre feuille de style ou piocher dans la Bibliothèque que vous pourrez enrichir.

Aperçu css

Par défaut l'aperçu css est en mode rubrique, il affiche alors la page active de votre aide, vous pouvez cliquer dessus pour sélectionner directement un élément à modifier.

Fig. 75 Aperçu en mode rubrique

En cliquant sur la barre titre de l'aperçu vous basculez dans le mode règle où vous ne voyez que l'élément que vous êtes entrain d'éditer.

Fig. 76 Aperçu en mode règle

Pour que l'aperçu css de votre rubrique soit à jour vous devez avoir basculé en Aperçu Html avant d'ouvrir l'éditeur de style d'Help&Web.

1

Contraste des couleurs

L'éditeur de couleurs est muni d'un indicateur pour déterminer si les combinaisons de couleurs du premier plan et de l'arrière-plan offrent un contraste suffisant lorsqu'elles sont vues par quelqu'un qui a des difficultés pour voir les couleurs, ou lorsqu'elles sont visualisées sur un écran noir et blanc.

L'algorythme utilisé est celui décrit par le w3c

Fig. 77 Test du contraste des couleurs css

Dégradé de couleurs

L'éditeur de couleurs est aussi muni d'un assistant pour générer un dégradé, il est activé lorsque vous entrez une couleur de fond, Background-Color.

Par défaut le dégradé est calculé est fonction de celle-ci mais vous pouvez librement choisir vos couleurs de départ et d'arrivée, ainsi que le sens du dégradé.

Fig. 78 Appliquer un dégradé de couleurs à une règle css

Changement au survol de la souris

Le champ Pseudo-Classe permet de sélectionner tous les éléments qui partagent une caractéristique sans être du même type.La pseudo clasee :hover permet de faire référence à l'élément au-dessus duquel se trouve le pointeur de la souris.

Cela vous permet donc de faire changer l'apparence d'un lien suivant que la souris le survole où pas.

Pour réaliser cet effet sous help&web commencez par créer un style pour votre lien, renseignez donc simplement le champ Classe


Puis définissez son apparence.

.monlien {Font-Family:Verdana, Arial, Helvetica, sans-serif; Font-Size:14pt; Color:#D36777; Text-Decoration:none}

ensuite recréez un nouveau style en utilisant la même classe mais cette fois sélectionnez la pseudo-classe :hover


Et changez les caractéristiques visuelle

.monlien:hover {Color:#FF8000; Text-Decoration:underline overline}

les styles héritent des propriétés déjà définies donc .monlien:hover va conserver les même fonte et taille que .monlien par contre la couleur a été redéfini et il sera encadré sur ses bords haut et bas d'une ligne

ce qui nous donne :

Fig. 79 lien normal puis lien au survol du curseur de la souris

Cet exemple ne sera fonctionnel que dans les formats html et HtmlHelp où les styles css donnent toute leur puissance.

les liens de cette aide htmlhelp sont définis comme suit :

a {Color:#C16120; Text-Decoration:none}
a:hover {Color:#FAF7CB;Background-Color:#DA8025}

Règle pour éléments imbriquées

Vous pouvez faire en sorte de définir une règle pour un élément si celui-ci est à l'intérieur d'un autre, par exemple redéfinir le style d'une balise placé dans un élément ayant une classe Titre2

Vous allez choisir le . dans la liste déroulante puis insérer Titre2 span dans le champ Classe/Identifiant (il y a un espace entre Titre2 et span)

Documentation

Ces quelques explications sommaires devraient vous suffire mais pour exploiter le potentiel css au maximum je vous encourage vivement à parcourir internet où vous trouverez tout sur les css, le bouton Informations de l'éditeur CSS d'Help&Web vous donne un accès à quelques une de ces sources.

Documentation CSS
Documentation CSS

Vous pouvez enrichir cette liste en éditant le fichier documentation.txt qui se trouve dans le répertoire system.hew\css, chaque ligne correspondant à une source décrite sous la forme titre=adresse

Sommaire