Éviter la navigation et aller au contenu

Cette page a été créée avec KompoZer

English translation   |   日本語訳

Guide d'utilisateur pour l'édition Web avec Nvu

4 Style et feuilles de style

4.1 Introduction au style

L'utilisation des styles est déjà bien établie dans le domaine de l'édition et de la publication. Dans la conception de page web, l'utilisation de styles prend un rôle davantage important et permet de contrôler presque tous les aspects de la présentation.

Les styles dans les documents HTML devraient se conformer aux exigences de la spécification du W3C. Celles-ci sont détaillées dans la spécification des ‘Cascading Style Sheets’ (CSS), niveau level 2.

Une introduction complète en français et plusieurs références utiles peuvent être consultées à http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade.

Un tutoriel en français sur le CSS en 14 parties sur Mozilla Developer Network est fortement recommandé à ceux désirant en savoir plus sur le CSS: https://developer.mozilla.org/fr/CSS/Premiers_pas

4.1.1 La puissance des feuilles de style

Les styles spécifient comment certains éléments vont apparaître sur l'écran, sur l'imprimé ou autrement. Ce guide se limite aux considérations du média visuel sur écran. Par ‘éléments’ nous entendons parties de la structure d'une page, typiquement les entêtes et paragraphes, mais aussi incluant plusieurs autres comme les tables, listes à puces, listes numérotées, etc. En fait, toutes ‘balises’ HTML peut être spécifiées mais le même style peut être appliqué à plusieurs.

Les feuilles de style peuvent typiquement définir de tels aspects de la présentation comme la police de caractères, sa taille, sa variante, sa couleur, sa couleur d'arrière-plan, si un élément doit être aligné à droite, au centre ou à gauche, s'il doit être espacé des autres, entouré par une bordure et, si c'est le cas, de quel type ou couleur. Les éléments peuvent avoir une position absolue en relation avec la page (ce qui permet aux éléments de se superposer). Les éléments comme les paragraphes, tables et images sont considérés comme existant dans des boîtes ou blocs et les dimensions de ces boîtes doivent être spécifiées.

Note Vous pouvez voir les contours de ces blocs en sélectionnant ‘Affichage - Mise en évidence des blocs’.

4.1.2 Classes

Autant qu'il peut permettre de spécifier le style des éléments, il est possible de définir des données de style et de les appliquer sélectivement à seulement quelques éléments. Ceci est fait avec les ‘classes’ – une ‘classe’ n'étant que des données de style qui peuvent être appliquées à un groupe d'éléments que vous choisissez.

Les ‘classes’ sont appliquées à des ‘Balises’ (une balise est un marqueur identifiant le début ou la fin d'un élément de la page). L'élément auquel cette classe est appliquée apparaît dans le format défini par la classe. D'autres éléments similaires sans application de classe apparaît dans le format par défaut i.e. soit le style par défaut du navigateur ou soit le style par défaut défini par l'usager pour l'élément correspondant.

4.1.3 Usage d'un style

4.1.3.1 Style en-ligne

Dans une page, les données de style peuvent être définies de 3 façons différentes. Ces 3 façons peuvent être combinées et appariées comme vous le souhaitez. La première, la plus facile et la plus crue, est de définir l'attribut style. Le style en-ligne est listé dans le code HTML (dans le mode d'Édition Source HTML) avec la balise à laquelle elle s'applique en utlisant la structure suivante:
style = "propriété: valeur;"

Note Ne vous inquiétez pas outre mesure: Nvu cache tout cela dans le code.

Si vous avez un autre item avec la même donnée de style, alors ce code doit alors être répété. Ceci cause une redondance inutile de code et entraîne un alourdissement du code. Cette façon de coder s'appelle ‘style en-ligne’. La plupart du temps, les usagers de Nvu n'ont pas à se préoccuper de cette méthode bien que Nvu va quelquefois l'utiliser à votre insu.

4.1.3.2 Feuille de style incorporée

NdT.: Feuille de style incorporée est aussi appelé feuille de style locale ou feuille de style interne.

La deuxième façon de définir une donnée de style est de l'incorporer dans une liste de définitions de style dans la section <head> d'une page. (Ces définitions sont appelées 'règles de style' ou juste 'règles')

Ces règles de style peuvent être de 2 types. Le premier type s'applique à tous les éléments d'un type particulier (par ex. p, h1, table); le second est une classe telle que discutée ci-haut.

Note Si vous examinez le code source HTML, vous allez voir une structure du genre <p class="MesBeauxPargs"> quand la classe "MesBeauxPargs" a été appliquée. Le code correspondant quand aucune classe ne s'applique est <p>. Si vous regardez la structure d'une feuille de style pour une classe, vous allez voir le nom de la classe précédé avec un point par ex. “.MesBeauxPargs” tandis qu'un style appliqué indistinctement va ressembler au code 'p'. Les données de style indistinctement appliquées doivent, bien sûr, indiquer le nom de l'élément auquel il s'applique tandis qu'une classe peut avoir n'importe quel nom que vous voulez bien lui donner. Pour aider la maintenance d'un site, il est utile et recommandé de donner un nom à une classe qui décrit sa fonction et NON décrivant l'apparence résultante.

4.1.3.3 Feuilles de style externes – Feuilles de style liées

Bien que la première des deux méthodes soit valide et ait ses usages, la troisième est la méthode spécifique recommandée parce qu'elle est économique, elle réutilise les mêmes données de style pour plusieurs pages et aide en conservant l'apparence à travers un site complet. Cette méthode utilise une feuille de style externe qui est ‘liée’ à la page ou à plusieurs pages (bien que dans chaque page, il faille inclure l'information de ce lien à cette page).

Une feuille de style externe contient la même liste des déclarations et règles qu'il faudrait alors inclure dans une liste d'une feuille de style incorporée tel qu'expliqué ci-haut. (C'est actuellement un simple fichier texte tel que vous pourriez en créer un avec un éditeur texte comme Windows Notepad.) Ce fichier est habituellement situé dans le même répertoire que la page à laquelle il est lié bien qu'il peut être n'importe où: une telle convention va aider les débutants dans la gestion de leur site. Le fichier de la feuille de style est un fichier texte qui utilise l'extension ‘css’. Comment une page sait qu'il faut utiliser une feuille de styles? Une ligne de code dont Nvu se chargera d'insérer dans la section <head> de votre page accomplira cela.

Ce code ressemble à
<link rel="stylesheet" type="text/css" href="MaFeuilleDeStyle.css">

Attention C'est un des quelques endroits où Nvu 1.0 cafouille. Nvu insère une référence absolue plutôt qu'une référence relative à la page. Cela fonctionne tant et aussi longtemps que vos pages restent sur votre ordinateur mais, si vous les déplacez dans un autre répertoire ou si vous les téléchargez à votre serveur distant, vous aurez à éditer manuellement cette ligne de code. Voir la section 4.2.4.1

4.1.3.4 Feuilles de style en cascades

Vous pourriez vous demander ici – si vous avez une feuille de style externe, peut-être les définitions de style et le style en-ligne se contredisent? C'est ici qu'entre en jeu le phénomène de cascade. Votre navigateur devrait en premier lieu utiliser ses données de style par défaut. S'il se trouve une déclaration de style dans une feuille de style externe qui redéfinit ce style, alors c'est cette déclaration de style dans la feuille de style externe qui est utilisée. Puis, il y a les déclarations internes qui ont préséance sur les déclarations de feuilles de style externes: si des déclarations sont redéfinies, alors les déclarations de feuilles de style internes ont préséance. En dernier lieu se trouve les déclarations en-ligne qui ont le dernier mot sur les autres paliers de déclaration de style.

Comment se débrouiller/jouer avec tout ça? Et bien, par exemple, votre site utilise, disons, une feuille de style externe qui donne une apparence à toutes vos pages de votre site. Disons que vous avez une page à propos de mesures d'urgence et que vous décidiez que tous les paragraphes de cette page doivent être en rouge. Alors vous ajouteriez une déclaration de style interne pour cette page qui redéfinirait la balise ‘p’ pour être rouge mais aussi pour que votre page soit liée à votre feuille de style normale. Alors toutes vos déclarations de style normales sont appliquées à cette page de mesures d'urgence à l'exception de la couleur de texte de ces paragraphes qui serait en rouge; rien d'autre ne dévierait de vos déclarations de style de votre feuille de style externe.

Nvu va actuellement permettre de lier plusieurs feuilles de style externes à une page. La spécification CSS définit les règles de priorisation/préséance de ces feuilles de style advenant qu'une déclaration de style soit définie dans plus d'une feuille de style. Certains navigateurs ne respectent pas ces règles. Par conséquent, à la fois les navigateurs et le concepteur web deviennent confus. Donc, prenez garde si vous adoptez cette pratique.

Peut-être dans un effort pour vous assister, Nvu permet de désactiver les feuilles de style pendant l'essai de vos pages. Avec l'éditeur CSS ouvert, (voir plus loin) sélectionnez une feuille de style et cochez la case à cocher ‘Désactivée’.

4.2 Créer des styles

4.2.1 Feuilles de style incorporées

Les attributs stylistiques sont créés et édités avec l'éditeur intégré de feuilles de style appelé CaScadeS. CaScadeS a deux (2) modes de fonctionnement: ‘Mode Débutant’ et ‘Mode Expert’. Quand CaScadeS démarre, il s'ouvre dans le mode Expert; pour passer au mode Débutant, il suffit de décocher la case "Mode Expert". La différence est qu'en mode Débutant, on ne peut pas créer de feuilles de style externes.

Pour commencer à créer des feuilles de style:

  1. Ouvrir Outils > Éditeur CSS....
  2. Cliquez 'Feuille incorporée'
  3. Cliquez le bouton Règle.
  4. L'onglet Général s'ouvre et offre les options ‘style nommé’ ou ‘style appliqué à tous les éléments d'un type’ ou ‘style appliqué à tous les éléments correspondant au sélecteur ci-dessous’.

Pour styliser un élément par ex. un paragraphe:

  1. 5. Sélectionnez ‘Style appliqué à tous les éléments d'un type’
  2. 6. Dans la zone de texte, tapez “p” ou la balise de l'élément (sans les guillemets)
  3. 7. Cliquez le bouton ‘Créer la règle de style’.

Dans le panneau de gauche, vous devriez voir la structure montrant chaque balise telle que définie.

Pour définir comment vous voulez que les éléments apparaissent:

  1. Cliquez la balise pour chaque élément dans le panneau de gauche. L'onglet Général devrait montrer le ‘Sélecteur’ (à présent, la balise de l'élément) et toutes les ‘déclarations’ de style (initialement vide).
  2. Maintenant, sélectionnez tour à tour tels que requis les onglets ‘Texte’, ‘Fond’, ‘Bordures’, etc et spécifiez exactement comment vous désirez que chaque élément apparaisse. La prochaine section explicite certains détails sur la façon d'effectuer tout cela.
  3. Retournez à l'onglet Général pour voir toutes les déclarations que vous avez faites sur le Sélecteur.

Je ne vais pas examiner toutes les options mais seulement en mentionner quelques-unes.

D'abord, prenez note que vous n'êtes pas obligé de spécifier toutes les propriétés. Vous spécifiez autant ou aussi peu que vous le désirez. Sachez que le navigateur va utiliser ses valeurs par défaut si vous ne spécifiez pas toutes les propriétés. Les règles d'héritage que suivent les navigateurs sont relativement complexes (discuter en détails de cette question deborderait du cadre de ce guide) et certaines versions (en particulier les moins récentes) des navigateurs ne suivent pas toujours ou correctement ces règles. Une raison de plus pour toujours installer et utiliser la version la plus récente de votre navigateur.

Vous pouvez essayer de définir des règles pour l'élément ‘body’ et l'appliquer à tous les éléments. Dans la plupart (pas tous!) des cas, les règles spécifiées ainsi vont s'étendre aux autres noeuds descendants dans l'arborescence du document (On dit que les valeurs de ces propriétés sont ‘héritées’) à moins que vous le spécifiez explicitement par ailleurs. Généralement, cela fonctionne bien mais peut apporter quelques surprises.

Nomenclature

Le CSS emploie une nomenclature sur mesure. Nvu l'utilise un peu puisque, sauf dans le mode d'Édition source, le code est caché de l'auteur. Les termes invoqués apparaissent dans ce Guide d'utilisateur. Ici, ils sont présentés avec quelques exemples. Les exemples montrent le code source qui devraient apparaître ou bien dans le bloc <head> de votre page (donc dans une feuille de style incorporée) ou dans une feuille de style liée (externe).

Exemple de règle simple:

p {font-family: Arial, sans-serif;}

Exemple de règle avec 2 déclarations:

p {font-family: Arial, sans-serif; font-size: medium;}

Exemple de règle avec 2 sélecteurs:

h1, h2 {color: #990000;}

Exemple de règle avec un sélecteur de classe:

.Attention {color: red;}

Exemple de sélecteur complexe *:

#menu li a:link {text-decoration: none;}

Code des couleurs:

Règles apparaissant à l'intérieur d'une boîte avec une bordure bleue

Les déclarations ont une bordure en tirets

Les sélecteurs ont une bordure rouge et une couleur de fond blanc

Les propriétés one une bordure verte et une couleur de fond blanc

Les valeurs ont une bordure fuchsia (magenta, rose) et une couleur de fond blanc

* Ce sélecteur sélectionne les items de liste dans le div menu qui ont des liens.

4.2.1.1 Onglet Texte

Police de caractères. Vous avez trois (3) façons de les spécifier

Dans le jargon technique, les ‘familles de polices de caractères’ sont aussi appelées des polices de caractères ou ‘fontes’. Le CSS y réfère en tant que famille de ‘polices de caractères’. Le terme typographique correct est en Anglais ‘Typeface’.

‘Non définie’ laisse tout au navigateur de l'usager.

‘Prédéfinie’ est un menu déroulant offrant un de trois (3) choix. Chaque choix a un ensemble de trois (3) polices de caractères qui ont fondamentalement des caractéristiques similaires. Ces choix sont:

Chaque ensemble a trois (3) entrées. Les deux (2) premières sont des polices de caractères alternatives semblables; la troisième est l'énoncé du type de police de caractère générique – le navigateur doit d'abord chercher la première police sur le système de l'usager et tenter de l'utiliser pour produire la page, et si cette police de caractères n'est pas installée, alors il cherche la seconde police indiquée qui sert d'alternative et, si elle aussi ne s'y trouve pas, alors le navigateur fait alors appel à la police de caractères générique qui est la dernière entrée de la déclaration de style. Donc, une police de caractères convenable devrait toujours être trouvée.

‘Une police de caractères personnalisée’ est une option à éviter ou alors à utiliser avec beaucoup de précaution. La liste offerte est construite à partir des polices de caractères installées sur votre ordinateur. Si vous en choisissez une qui n'est pas disponible sur l'ordinateur de votre visiteur, alors vous n'avez pas de contrôle sur la police de caractères qui va être utilisée dans le navigateur de l'usager.

D'un autre côté, si soigneusement utilisée, cette option est très flexible et vous pouvez construire votre propre ensemble de polices en utilisant le modèle provenant du sélecteur prédéfini.

Pour construire un ensemble de polices de caractères.

  1. Notez la structure des ensembles ‘prédéfinies’. Chacune des listes est construite avec un nom de police de caractères, puis une virgule et chaque ensemble se termine avec un type de police de caractères générique.
  2. Sélectionnez un type de police de caractères générique de la liste suivante: serif, sans-serif, cursive, fantasy, monospace.
  3. Sélectionnez les polices de caractères préférées correspondant à la police de caractères générique requis.
  4. Dans l'onglet Texte, sélectionnez le bouton radio ‘Personnaliser les polices utilisées’ et dans le menu déroulant, tapez le nom de votre police de caractères préférée suivi d'une virgule et puis terminez avec une police de caractères générique.

Note 1 Vous allez probablement désirer inclure une police de caractères disponible sur la plateforme Windows et une équivalent sur la plateforme Macintosh.

Note 2 Vous pouvez entrer autant de noms de polices de caractères que vous le voulez.

Note 3 Utiliser l'option ‘cursive’ ou l'option ‘fantasy’ n'est pas recommandé puisque le niveau de standardisation entre visiteurs rend les résultats très incertains.

Taille de police de caractères. Il y a trois (3) sections offrant différents types d'option. Le premier bloc est un recueil offrant diverses unités. Parce que l'affichage sur écran varie en taille et résolution et parce que les capacités visuelles ou les préférences de lecture des gens diffèrent, les navigateurs offrent des options d'affichage permettant à l'usager de modifier la taille du texte. Si cette option est désactivée, l'usager peut ne pas être en mesure de voir la page comme il ou elle le voudrait. Quelques-unes de ces options dans le premier groupe (par ex. px, pt, cm, in, mm, pc) peuvent être appliquées au média imprimé ou sont en taille fixe (unité absolue). Ceux-ci peuvent désactiver l'agrandissement du texte dans les navigateurs ou résulter en tailles imprévisibles. Vous pourrez probablement trouver le dernier ensemble de noms de style (commençant par Extra-petite) le plus satisfaisant ou alors utiliser le percentage ou l'échelle em. Comme vous sélectionnez et altérez la taille, vous pourrez voir le résultat directement dans votre page.

Taille absolue et relative.

Lorsque les tailles de polices de caractères sont définies pour le texte gisant directement dans l'élément <body>, les valeurs 1em, 100% et 'medium' donnent généralement des résultats identiques. Les tailles de polices de caractères sont héritées de façon que le texte dans les éléments qui sont eux-mêmes situés dans le <body> vont avoir la même taille de polices de caractères, à moins qu'ils ne soient spécifiés séparément. Les éléments peuvent néanmoins ne pas être directement dans le <body> mais plutôt dans d'autres éléments tel qu'un tableau ou une division de page (<div>). Quand un tableau ou un <div> a une taille de caractères définie, alors cette taille est hérité au texte dans ce tableau ou ce <div>. Par ex., si un <div> a une taille définie à 150% et un paragraphe à l'intérieur de ce <div> a une taille de caractères définie à 1em, alors le texte va actuellement être rendu à 1.5em à cause de l'héritage du <div>.

Note Une division de page est formé en utilisant l'élément <div> Voir la section 4.5

Un exemple de comment cela fonctionne est donné dans la figure !!à faire!! adjacente à droite. Le texte ??Text sits in table cells, which sit within a table which sits within a division. One of the tables and one of the cells has font size specified. Others do not.??

Pas toutes les tailles s'échelonnent de cette façon. Les tailles définies en pourcentage ou en em ou ex s'échelonnent et sont dites taille relative. Les tailles définies en utilisant using the xx-small system do not scale and are referred to as absolute sizes

Note Tous les caractères vont s'agrandir en utilisant la commande du navigateur pour augmenter la taille de la police sauf si les tailles sont définies en pixels (ou autre taille absolue). Dans ce cas, la réponse des navigateurs varie.

Note Pour éviter des résultats inattendus, les dévelopeurs web doivent préciser quelle taille de police est spécifiée pour quel sélecteur.

Couleur de police de caractères. Vous pouvez taper le nom de la couleur ou cliquer le bouton à droite. Si vous cliquez sur le bouton, la boîte ‘Couleur du texte’ s'ouvre et vous avez trois (3) options additionnelles. Vous pouvez spécifier les valeurs Teinte, Saturation et Luminosité ou les valeurs Rouge, Vert, Bleu (plage de 0 à 255). Alternativement, cliquez l'une des 70 cases de couleurs prédéfinies offertes.

Note Celles-ci sont appelées couleurs “web safe” parce qu'elles fonctionnent sur des écrans de capacité réduite. Actuellement, l'éventail complet des 216 couleurs “web safe” n'est pas fourni mais, en tout cas, les écrans modernes affichent normalement les couleurs en au moins 24-bit, donc il n'y a plus de justification pour cette limitation. (NdT. Les couleurs “web safe” étaient utiles à l'époque des années 1995-2000 lorsque beaucoup des écrans de l'époque n'étaient pas nécessairement capables de rendre plus que les 216 couleurs “web safe”.)

La prochaine option est de cliquer sur la zone rectangulaire de couleur arc-en-ciel. Peu importe la façon que vous choisissez, la couleur sélectionnée apparaît dans le carré de sélection. Des ajustements plus fins peuvent être faits en utilisant les valeurs Teinte Saturation Luminosité ou Rouge Vert Bleu. Une zone de texte identifiée valeur Hexa montre la couleur en tant que nombre hexadécimal. Actuellement vous auriez pu accomplir cela directement sans ouvrir la boîte ‘Couleur de texte’ quand vous fermez la boîte ’ vous allez voir la valeur hexa (précédée par un symbole dièse ‘#’) dans la boîte suivie avec un exemple de couleur sur le bouton.

Noms de couleurs. Vous pouvez passer outre cette note mais il existe une autre méthode! Vous avez peut-être observé, comme vous cliquez une des 70 couleurs, qu'habituellement dans la boîte identifiée ‘Nom’, le nom de la couleur apparaît. (Essayez black ou red pour vérifier.) La spécification CSS 2.1 reconnaît 17 couleurs et les noms de celles-ci peuvent entrez directement ici, ou, en fait, dans la zone de texte sans utiliser la boîte de sélection de couleur. Les noms valides sont “aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, et yellow”.

Autres options pour le texte

Ceux-ci apparaissent en-dessous de l'option de couleurs et s'explique bien d'eux-mêmes.

4.2.1.2 Onglet Fond

Couleur

Elle est sélectionnée de la même façon que pour la couleur du texte (de la police de caractères).

Image

Vous pouvez spécifier une image en tant qu'arrière-plan. Elle va apparaître derrière tout le reste. Sous ‘L'image défile avec la page’, si vous décochez ‘L'image défile avec la page’, alors vous obtenez une seule copie de l'image qui peut se positionner selon les boutons (Haut, Centrer, Bas, Gauche, Centrer, Droite) qui suivent. Si vous sélectionnez ‘L'image défile avec la page’, alors l'image se répète selon les directions que vous sélectionnez avec les cases à cocher.

Attention. L'option opacité utilise une propriété qui n'est pas incluse dans la spécification CSS 2.1; donc la propriété opacité est ou bien pas implantée ou alors elle est incorrectement implantée dans la plupart des navigateurs.

4.2.1.3 Onglet Bordure

Les items peuvent être bordurés et les options disponibles offrent beaucoup de flexibilité. Le style, l'épaisseur et la couleur peuvent être définis indépendamment pour chaque coté.

Attention: Pour que chaque coté ait une épaisseur, le style doit être spécifié.

4.2.1.4 Onglet Boîte

La structure de bloc dans laquelle la plupart des éléments sont situés a été déjà mentionnée (section 3.4.1). Les options de boîte contrôlent l'affichage dans ces éléments de bloc.

Pour ces boîtes qui requièrent qu'une dimension soit indiquée: d'abord entrez un nombre, puis sélectionnez l'unité dans le menu déroulant.

Marges Les marges contrôlent la distance entre la boîte de l'élément (c'est-à -dire là où une bordure devrait se situer) et ou bien une boîte avoisinante (en haut ou en bas) ou des boîtes adjacentes (à gauche et/ou à droite).

[D]

Note Les marges verticales se confondent, se superposent, se fusionnent. Par ex., si une entête a une marge de bas (margin-bottom) établie à 20px et que cette entête est suivie par un paragraphe qui a une marge de haut (margin-top) établie à 10px, alors la séparation entre les deux est controlée par la plus grande marge (soit 20px) et non par la somme (30 px).

Espacements (NdT. padding) Contrôle la distance entre le contenu de la boîte et sa bordure.

Largeur et Hauteur Permet une largeur (ou hauteur) spécifique d'être allouée à une boîte. Ceci peut être une largeur (ou hauteur) en valeur absolue ou un pourcentage de son bloc conteneur.

Flottante (NdT. Float) permet à des blocs d'être traités comme des images et d'être flottés à la droite ou à la gauche du bloc conteneur sur la même ligne. Les autres éléments peuvent alors s'écouler (NdT. wrap around) autour de ceux-ci.

Position, Décalages et index Z sont des paramètres relatifs à l'usage de calques. Ceux-ci ont été couverts dans la section 3.10.6

4.2.2 Styliser plusieurs éléments

Plutôt que de définir des styles pour un seul élément à la fois, il peut être plus facile de spécifier plusieurs éléments en même temps. Par ex., peut-être tous vos entêtes sont dans une même police de caractères (disons serif) et tous les autres dans une autre police (disons sans-serif). Vous pouvez alors spécifier h1, h2, h3, h4, h5 et h6 en tant que police de caractères serif avec une seule règle CSS en les listant toutes et en les séparant avec des virgules après avoir cliqué Règle et puis “Style appliqué à tous les éléments d'un type (entrez le type ci-dessous)”. Plus tard, vous pouvez spécifier, par ex., la taille de chaque entête individuellement dans des règles individuelles.

Note Si vous définissez plusieurs classes, vous devez précéder les classes d'un point sauf la première classe; par ex., NomClasse1, .NomClasse2

4.2.3 Nommer des classes

J'ai suggéré ci-haut que vous commenciez à appliquer des styles à tous les éléments d'un type spécifique. De telles définitions de style vont s'appliquer automatiquement peu importe où l'élément se trouve sur la page. Ceci procure une grande homogénéité (NdT. consistency) à l'intérieur d'un document mais peut-être aussi un soupçon de monotonie! Vous pouvez définir vos propres styles que vous pouvez appliquer sélectivement. Ces styles sont appelés/connus en tant que ‘Classes’.

Pour créer une classe

  1. Ouvrez l'éditeur CSS, et si nécessaire, créez une feuille de style tel que décrit à la section 4.2.1
  2. Cliquez sur la feuille de style pour la sélectionner. (Si il y a plus d'une feuille de style, cliquez sur celle dans laquelle vous voulez créer une classe.)
  3. Décidez du nom de cette classe.
    Note Les noms de classes peuvent contenir des lettres, nombres et le caractère "trait de soulignement" mais ne peuvent contenir d'espace blanc et ne doivent pas débuter avec un nombre. Les noms de classes sont sensibles à la casse.
  4. Cliquez sur Règle, gardez ‘Style nommé (entrez un nom de classe ci-dessous)’ sélectionné et entrez le nom de classe que vous avez choisi dans la zone de texte.
  5. Cliquez sur le bouton ‘Créer la règle de style’. Vous devriez voir le nom de votre classe apparaître dans le panneau de gauche; notez que ce nom est précédé par un point.

Maintenant procédez tel que dans la section 4.2.1Pour définir comment vous voulez les éléments ressemblent’. Dans un tel cas, vous pouvez observer l'effet de vos styles qui apparaissent immédiatement dans votre page (en supposant que vous avez une page qui utilisent les éléments correspondants). Maintenant, bien sûr, vous n'en avez aucun alors nous devons d'abord apprendre comment appliquer une classe à un élément.

D'abord entrez quelques détails sur votre nouvelle classe qui vont vous permettre de la reconnaître à l'écran lorsqu'elle sera appliquée. Par exemple, utilisez l'onglet bordures pour produire une bordure comme de style plein, 2px d'épaisseur et de couleur contrastante comme rouge.

4.2.3.1 Appliquer aux classes

Nvu procure deux (2) méthodes pour appliquer des classes. La méthode 1 est la plus simple; quelquefois, il est difficile de sélectionner l'item à utiliser pour cette méthode dans lequel cas la méthode 2 est préférable.

Appliquer une classe - Méthode 1

  1. Si nécessaire, fermez l'éditeur CSS.
  2. Sélectionnez l'item pour lequel vous voulez appliquer une classe. Pour un entête ou un paragraphe, simplement cliquez simplement dans le texte; pour appliquer une classe à une portion de texte, sélectionnez-la en la surlignant (en traînant/draguant le texte avec la souris).
  3. Utilisez le sélecteur de classe situé dans la barre de Mise en forme secondaire (comme sur la figure à droite): cliquez le menu déroulant et sélectionnez la classe désirée.
  4. Le résultat de l'application de la classe devrait être vue dans n'importe quel mode d'Édition visuel.

Note Bien que Nvu n'est pas un navigateur web, il réplique assez bien l'affichage d'un navigateur web. Toutefois, les données de style appliquées aux liens ne sont pas rendues correctement pour le moment.

Appliquer une classe - Méthode 2

Note Cette méthode ne peut être utilisé pour styliser un élément en-ligne comme une sélection de texte (utilisant un <span>).

  1. Si nécessaire, fermez l'éditeur CSS.
    • Passez au mode Passez au mode d'Édition 'Balises HTML'.
    • Cliquez sur l'icône jaune correspondant à l'élément pour lequel vous voulez créer une classe. Si l'élément ne devient pas sélectionné, tel qu'indiqué par le contour ou le surlignement sur l'écran, appuyez sur la touche Ctrl lorsque vous sélectionnez.
    ou
    • Passez au mode d'Édition Normal ou Aperçu.
    • Cliquez dans le bloc que vous désirez styliser et cliquez dans la barre d'état sur l'élément le plus à droite
  2. Maintenant, l'élément correspondant et, sur la barre d'état, la balise de l'élément, devrait être surligné.
  3. Faites un clique droit sur l'élément (dans la barre d'état) et sélectionnez ‘Classes’. Vous devriez voir apparaître une liste de toutes les classes disponibles. (Cette liste inclut les classes des feuilles de style incorporées et liées.) Toute classe qui s'applique déjà sur l'élément apparaît, marqué d'un crochet ✔, au haut de la liste au-dessus d'une ligne de séparation; les autres classes sont sous cette ligne de séparation.
  4. Pour ajouter une nouvelle classe, cliquez la classe; pour enlever une classe, cliquez sur la classe au-dessus de la ligne de séparation.

Note Les éléments peuvent avoir plusieurs classes qui s'appliquent à eux. Si vous faîtes cela, assurez-vous que les propriétés de classes ne se contredisent pas entre elles. La plupart de gens vont probablement préférer qu'une seule classe s'applique à la fois. Vous pourriez avoir besoin de vérifier que vous n'appliquez pas par inadvertance plus d'une à la fois.

4.2.3.2 Supprimer une classe

Une procédure semblable peut être utilisée pour retirer un élément d'une classe qui s'y applique. En utilisant la méthode de sélection d'un élément, simplement cliquez la classe avec le crochet ce qui dé-sélectionne la classe. En utilisant le menu déroulant de sélecteur de classe, sélectionnez la classe à nouveau, ce qui va l'annuler. Alternativement, après avoir sélectionné l'élément, faites un clique droit sur l'élément surligné sur la barre d'état et sélectionnez ‘Propriétés avancées. La classe sélectionnée va être listée; sélectionnez-la et cliquez ‘Supprimer’.

4.2.4 Feuilles de style liées (externes)

Il existe trois (3) façons de commencer à travailler avec des feuilles de style liées (externes).

4.2.4.1 Créer une feuille de style externe

Les feuilles de style externes sont créées presqu'exactement de la même façon que les feuilles de style incorporées.

Pour créer une feuille de style externe:

  1. Ouvrez l'éditeur CSS. (Outils > Éditeur CSS...).
  2. Assurez-vous que vous êtes en ‘Mode Expert’ et cliquez ‘Feuille incorporée’
  3. Tapez un nom dans le champ Titre et cliquez ‘Créer la feuille de style’.
  4. Cliquez ‘Exporter la feuille de style et utiliser la version exportée’
  5. Donnez-lui un nom de fichier avec l'extension "css" et sauvegardez-le, préférablement dans le même répertoire où se trouve votre page.

Maintenant cliquez sur ‘Règle’ et vous devriez vous trouver en terrain familier.

Quand nous créons des feuilles de styles incorporées, elles sont écrites dans notre page dans la section <head>. Maintenant, les données de style sont créées dans un fichier externe, un fichier à part. Si vous examinez le code dans le mode d'Édition ‘Source’, vous devriez voir une ligne de code réferrant au fichier externe et se liant à votre page.

Attention Malheureusement, en ce moment, Nvu fait un plat d'insérer le nom de fichier. Nvu met la référence (adresse) absolue du fichier telle qu'elle apparaît sur votre disque dur local. Lorsque vous téléchargez ou déplacez votre page, la feuille de style ne va pas être trouvé par Nvu. Vous allez devoir éditer manuellement dans le mode d'Édition Source HTML dans la ligne de code commençant avec <link rel="stylesheet" (remarquez que la ‘ligne’, qui peut s'étendre sur plusieurs lignes, finit avec type="text/css">) Supprimez tout le code semblable à file:///C:/Documents%20… et incluez la barre oblique / avant le nom du fichier. Le résultat devrait contenir un texte semblable à href="nomdefichier.css". Si votre feuille de style est dans un sous-répertoire, alors le texte devrait être semblable à href="sousrepertoire/nomdefichier.css".

4.2.4.2 Convertir une feuille de style interne en une feuille de style externe

Si vous avez déjà défini votre page pour utiliser une feuille de style interne, vous pouvez la transformer en une feuille de style externe et lier votre page à celle-ci.

  1. Ouvrez l'éditeur CSS. (Outils > Éditeur CSS...).
  2. Dans le panneau ‘Feuilles et règles’, cliquez sur la feuille de style.
  3. Dans l'onglet Général, cliquez sur ‘Exporter la feuille de style et utiliser la version exportée’ pour procéder.

4.2.4.3 Lier une feuille de style existante

Si vous avez une feuille de style que vous avez créée pour une autre page web ou que vous avez l'intention d'utiliser à travers votre site, vous pouvez lier votre page à cette feuille de style.

Pour lier à une feuille de style existante

  1. Ouvrez l'éditeur CSS. (Outils > Éditeur CSS...).
  2. Assurez-vous que vous êtes en ‘Mode Expert’ et cliquez le bouton ‘Feuille liée’
  3. Cliquez ‘Parcourir’ et choisissez l'emplacement de votre feuille de style que vous voulez utiliser.
  4. Cliquez 'Ouvrir' puis ‘Créer la feuille de style’. Vous devriez alors voir apparaître le nom de la feuille de style dans le panneau ‘Feuilles et règles’ à gauche.

Vous pouvez maintenant fermer l'éditeur CSS editor, ou, bien sûr, vous pouvez travailler sur la feuille de style de la façon habituelle.

Nota Bene Le même avertissement s'applique tel que dans la section 4.2.4.1

4.2.4.4 Enregistrer des feuilles de style

Une fois que vous avez lié et enregistré une feuille de style, si des changements surviennent plus tard, alors les changements vont apparaître dans votre document immédiatement et la feuille de style va être ré-enregistrée lors de la sauvegarde de la page HTML.

Attention Si la feuille de style est liée à plusieurs pages, toute autre page qui est ouverte dans Nvu au même moment ne sera pas rafraichie des changements; vous devez fermer la page et la réouvrir pour voir les changements s'appliquer.

4.2.5 Autres sélecteurs

4.2.5.1 Introduction

Les styles appliquées aux éléments (section 4.2.1) et les classes nommées (section 4.2.3) sont les deux (2) ‘sélecteurs’ principaux utilisés pour styliser une page. Un sélecteur doit être pensé comme un lien qui lie une définition de style (appelée une ‘déclaration’) à un item particulier sur une page.

Note Strictement parlant, le sélecteur de classe consiste en le nom de classe précédé par un point.

De plus, la spécification CSS 2.1 offre un large éventail de sélecteurs plus complexes qui, pour la plupart, débordent le cadre de ce Guide. Pour plus d'information à ce sujet, voyez la section 5 de la spécification CSS 2.1. (Voir l'appendice 2.) Il existe néanmoins quelques cas qui sont souvent utilisés sur les sites peu complexes et qui sont couverts dans les 2 prochaines sections.

4.2.5.2 Styliser les liens

Les navigateurs visuels rendent les liens dans leur couleur par défaut et Nvu offre quelques options pour les styliser (voir la section 3.7.1.6). À travers l'utilisation de style, le contrôle complet de chaque état des liens est possible. Ceci est accompli à travers l'usage de sélecteurs appelés ‘pseudo-classes’ de liens.

Les pseudo-classes les plus importantes sont:

a:link pour tous les liens non encore visités
a:visited pour les liens qui ont été visités
a:hover pour un lien au-dessus duquel le curseur se trouve

Note Les procédures suivantes sont basées sur l'usage de feuilles de style incorporées. Des procédures similaires peuvent être utilisés avec des feuilles de style liées.

Pour créer des pseudo-classes pour liens

  1. Procédez comme si vous étiez en train de créer une classe (voir la section 4.2.3)
  2. À l'étape 4, sélectionnez ‘style appliqué à tous les éléments d'un type’ et, dans la zone de texte, entrez le sélecteur tel qu'indiqué ci-haut.
  3. À l'étape 5, le nom du sélecteur devrait apparaître tel qu'entré.

Il est maintenant possible de styliser ces options complètement, c'est-à-dire non seulement la couleur du texte et la décoration mais aussi la couleur de fond, la boîte et les autres caractéristiques.

Note Le sélecteur a:hover doit être placé après les règles a:link et a:visited sinon les règles de cascade vont faire que la règle a:hover va être cachée, neutralisée.

L'éditeur CSS CaScadeS entre les déclarations et règles de style dans l'ordre où elles sont éditées. Cet ordre peut être modifiée en sélectionnant un item et en cliquant les boutons ‘Monter’ ou ‘Descendre’.

Attention dans Nvu 1.0, le bouton 'Descendre' est désactivé.

Note Ces déclarations de styles vont maintenant s'appliquées aux liens automatiquement. Elles n'ont pas à être manuellement appliquées comme le sont les classes.

4.2.5.3 Styliser les contrôles de formulaire

Définir des formulaires pour apparaître tels que requis peut exiger que des déclarations de style soient définies pour des contrôles spécifiques. Ceux-ci sont définis exactement comme décrits pour les liens; il suffit simplement de définir des styles pour les sélecteurs requis. Quelques-uns des principaux sont listés dans le tableau suivant:

Contrôle Élément Sélecteur
Bouton de soumission Input input[type="submit"]
Bouton de réinitialisation Input input[type="reset"]
Zone de texte Input input[type="text"]
Zone de texte multi-ligne textarea textarea
Étiquette label label
Groupe de contrôles fieldset fieldset
Légende de groupe de contrôles legend legend

4.2.5.4 Styliser des éléments uniques avec l'attribut id

Les ids (ou Idenficateurs Uniques) n'ont pas été mentionnés jusqu'à maintenant et je ne vais pas les expliquer complètement. Ils peuvent être utilisés à plusieurs fins bien que le support dans Nvu soit pour le moment limité.

Puisque l'attribut id est unique à chaque élément d'un document, il peut n'être utilisé qu'une fois seulement dans une page web.

Un div marquant une portion particulière d'une page est un exemple idéal, typique d'usage; on assigne à son attribut id un nom significatif. Souvent, l'attribut id d'un élément div (qui désigne une section particulière d'une page) est spécifié comme, par exemple, la table des matières, un menu ou une section quelconque d'une page. Il est utile dans de tels cas de donner à l'attribut id un nom qui indique la fonction.

Pour créer un style basé sur un élément unique avec son attribut id

  1. Sélectionnez un nom pour le id. Ceci doit suivre les mêmes règles que pour une classe. Voir la section 4.2.3.
  2. Procédez comme si vous créez une feuille de style et stylisiez un élément (voir la section 4.2.1).
  3. À l'étape 6, entrez le nom du id précédé d'un signe dièse par ex. #nom_du_id.

Pour appliquer un style basé sur un id, il est nécessaire d'éditer le fichier dans le mode d'Édition Source. Éditez la balise de départ pour inclure le id dans le format suivant:
id="introduction" par exemple pour <div id="introduction">.

Pour appliquer un style basé sur un id

Bien qu'en principe, les ids sont similaires aux classes, il n'est pas possible dans Nvu d'utiliser le sélecteur de classes mais la méthode reste néanmoins facile.

  1. Si nécessaire, fermez l'éditeur CSS.
  2. Cliquez dans le div que vous voulez styliser.
  3. Sur la barre d'état, cliquez sur la balise <div>. S'il y en a plus d'un, sélectionnez celui qui est le plus à droite. La balise div et son contenu devraient être surlignés, en vidéo inversé.
  4. Sans bouger le curseur, faites un clique droit et sélectionnez "ID".
  5. Cliquez le id qui s'affiche dans la mini-boîte qui apparaît.

4.3 Enlever des règles CSS ou des feuilles de style

L'éditeur CSS vous permet de supprimer des règles CSS de la même façon que vous pouvez en ajouter.

Dans le panneau ‘Feuilles et règles’, sélectionnez la règle que vous voulez supprimer et cliquez ‘Supprimer’.

De la même façon, vous pouvez supprimer une feuille de style. Sélectionnez la feuille de style et cliquez ‘Supprimer’. Si vous sélectionnez une feuille de style interne, elle est complètement effacée du fichier.

Attention cette suppression n'est pas réversible en utilisant ‘Annuler’.

Si vous enlevez une feuille de style externe, le lien sur la page est enlevé mais le fichier externe existe toujours et demeure intact.

4.4 Héritage

Une page web possède une structure hiérarchique par ex. le texte dans une cellule de tableau existe dans un ‘Tableau’. Vous pouvez entrevoir en partie cette structure dans le mode d'édition ‘Balises HTML’.

L'héritage signifie que les propriétés de style définies à un haut niveau dans la structure du document (par ex. au niveau du ‘Body’) vont s'appliquer aux niveaux plus bas à moins que les propriétés soient explicitement re-spécifiées. Alors, une police de caractères définie pour l'élément ‘Tableau’ va être appliqué à tout dans le tableau mais si vous avez inclus un paragraphe dans le tableau et si vous avez défini une police de caractères différente pour l'élément ‘p’, alors c'est cette dernière police de caractères qui s'appliquera à ce ‘p’. La section 4.2.1.1 offre une démonstration de cet effet.

L'héritage est un moyen puissant et utile puisqu'il permet aux propriétés d'être définies une seule fois dans une feuille de style plutôt que d'avoir à les déclarer à répétition pour chaque élément pour lequel vous voulez utiliser cette propriété.

Vous aurez à consulter le tableau détaillé des propriétés de la spécification CSS 2.1 pour connaître les propriétés qui sont hérités et celles qui ne sont pas héritables; la règle générale est d'assumer que toutes les propriétés sont héritées sauf des propriétés comme l'arrière-plan, les bordures, les marges, l'espacement interne (ou intra-élément), les dimensions (largeur, hauteur) et le positionnement.

4.5 L'élément <div>

L'élément <div> a été mentionné seulement en passant jusqu'à maintenant. Un div signifie une division de la page. Un div définit une section de la page qui regroupe plusieurs éléments ensemble. On peut alors appliquer au div un traitement spécial par ex. lui appliquer un groupe de déclarations de style. Le reste de cette section n'a pas pour but d'expliquer de façon complète de ce qu'est un div ou comment l'utiliser mais plutôt d'expliquer comment le créer et peupler (NdT. populate) un div en utilisant Nvu. D'autres aspects des divs sont tout probablement au-delà de l'intérêt des débutants.

4.5.1 Créer un <div>

Pour créer div

  1. Placez le curseur là ou le div va être créé.
    Note N'essayez pas de créer un div en tant que dernier item d'une page à moins que vous n'avez pas besoin d'ajouter des items après celui-ci.
    Note Il peut être plus facile de voir comment les choses se déroulent si vous utilisez le mode d'Édition Balises HTML avec Affichage > Mise en évidence des blocs sélectionné.
  2. Cliquez sur le premier menu déroulant de la barre de Mise en forme.
  3. Sélectionnez le dernier élément au bas de la liste - Conteneur générique (div).
  4. Le div est créé et est formaté comme corps de texte.

Il est maintenant possible d'insérer tout item désiré dans le div par ex. Texte ou images. Le texte peut alors être sélectionné et formaté en tant que paragraphes, etc. Si requis, les divs peuvent être insérés de façon telle qu'un ensemble de divs imbriqués est produit.

Quelquefois, lorsqu'on tente de peupler un div avec des éléments, il se peut que les éléments soient inaccessibles, disparaissent derrière les autres. Pour éviter de telles difficultés, il faut éviter d'insérer des éléments vides; alors insérez ou bien, par exemple, un paragraphe à la fois ou entrez un texte bidon pour la forme dans l'espace de tels éléments.

Pour appliquer une classe à un div

Procédez de la façon normale (voir la section 4.2.3.1). Le sélecteur de classe peut être utilisé pour appliquer une classe à un div mais cette classe ne sera nécessairement affichée dans le sélecteur. La méthode préférée à utiliser est via la balise surlignée sur la barre d'état qui peut être utilisée pour ajouter ou retirer des classes.

Pour inspecter ou changer une classe

Utiliser la barre d'état pour accéder à la classe.

Les éléments à l'intérieur d'un div peuvent avoir des styles appliquées différents.

Pour enlever un div

Cliquez à quelquepart hors du div. Voilà pourquoi un div ne devrait jamais être le dernier item dans la page car il devient alors impossible de quitter le div sauf si on clique sur un élément plus haut dans la page.

4.5.2 Styliser un <div>

Un div est un élément utile pour appliquer un ensemble de déclarations de style dans une section définie d'une page. Bien sûr, un ensemble de classes pourrait être concue et appliquée aux éléments dans cette section mais ce serait laborieux et gonflerait le code. Une façon plus simple est de définir un ensemble de déclarations de style pour des éléments dans un <div> et de les identifier d'une façon telle que ces déclarations ne s'appliquent qu'aux éléments de ce <div>. Cela est fait en utilisant un sélecteur approprié. Supposons qu'un <div> a la classe “NomClasse” Exemples de sélecteurs appropriés sont:

div.NomClasse p
div.NomDeClasse td
div.NomDeClasse a:visited

Supposons qu'un div a la classe ‘MenuNavigation’. Exemples de sélecteurs appropriés sont:

Ou lorsqu'on utilise des ids:

#menu p
#contents li

Ceux-ci peuvent être établis de la même façon que pour les pseudo-classes voir la section 4.2.5.2.

4.5.3 Créer un calque en utilisant un <div>

Dans la section 3.10.3, nous avons noté que les ‘Calques’ sont contenus dans des ‘divs’. En fait, un Calque est simplement un div qui a une position et optionnellement un z-index, style attaché. Quand Nvu crée un calque, il le fait en attachant un style en-ligne à un div.

Il est également possible de créer un calque en définissant une classe appropriée et en l'attachant par déclaration à ce div.

Quand un calque est créé de cette façon, Nvu le construit (NdT. depicts) comme un calque normal et l'affiche avec une boîte bordurée avec des poignées de positionnement et de redimensionnement. Visuellement, ce calque ainsi créé manuellement est indistinguable de tout autre calque créé automatiquement par Nvu.

De tels calques peuvent, bien sûr, être précisément positionnés et ne sont pas sujets aux aléas du draguage manuel.

Attention Si un calque, créé en utilisant une classe, est subséquemment dragué/traîné ou redimensionné, Nvu l'attache alors à un style en-ligne. Tout style ainsi ajoutée va sur-définir/supplanter la stylisation définie dans une classe.

| ^ Début de la page |

Plan détaillé du site | Index des sujets | Droits d'auteur | Limitation de responsabilité

HTML 4.01 valide!   Code CSS valide!   Niveau A de conformité, W3C-WAI Directives pour l'Accessibilité aux contenu Web 1.0

Dernière mise à jour: 28 mars 2023