XHTML ET CSS

Ce qu’il faut comprendre avant de s’attaquer aux feuilles de styles CSS

• L’objectif de l’utilisation des feuilles de styles est de différencier la mise en forme (feuilles de styles CSS) du contenu (XHTML).

Le XHTML

• Le rôle XHTML est de fournir des informations concernant l’architecture interne du document au navigateur.

• Nvu traduira en code XHTML le texte que nous taperons dans son interface graphique (onglet "Normal") Nous pourrons voir le code créé en cliquant sur l’onglet "source".

La feuille de styles CSS

• Elle décrit la présentation de la page (mise en page)
  • Par exemple, type de police et couleur pour les titres ou pour les paragraphes, taille et couleur des bordures de cadres.
• La feuille de styles pourra être produite dans un éditeur de texte spécialisé ou par une interface paramétrable (il en existe une dans NVU)

 Préparation méthodique

Quels dossiers devez vous créer avant de mettre en place une feuille de styles ?

• Dans le dossier réservé à la création de votre site, créez un nouveau dossier, nommez le "styles"
• Vous devez aussi créer, s’il n’existe pas, un répertoire "image", de même niveau que le répertoire "styles"
• Donc, au minimum, dans le répertoire contenant votre site web, vous devriez voir :
  • images
  • styles

 Créer une feuille de styles

Ce que vous devez savoir faire pour créer une feuille de styles sous NVU

La démarche est sensiblement la même pour Kompozer

Introduction

La création de la feuille de style externe avec NVU se fera en deux étapes

• Création d’une feuille de style interne
• Création de la feuille de style externe par export de la feuille de style interne

Comment créer la feuille de styles interne et l’exporter

Votre document doit avoir été enregistré avant création de la feuille de styles.

• Outils / Editeur CSS
• Feuille incorporée
  • Liste des médias = screen
    • Soit screen, soit all
  • Titre = testcss1
• Créer la feuille de styles
• Exporter la feuille de styles et utiliser la version exportée
  • Enregistrer dans = styles
    • Le sous dossier que vous avez créé précédement
  • Nom du fichier = testcss1.css
    • Ou le nom que vous avez choisi pour votre veuille de style (auquel vous ajoutez l’extension .css

 Tester la feuille de styles

Définir une classe

• Cliquer sur règle
  • Vous allez donc créer une nouvelle règle
• Cocher "Style appliqué à tous les éléments correspondant au sélecteur ci-dessous
• Tapez .vertgrassouligne
  • Tapez le point avant le mot vertgrassouligne
• Créer la règle de style
• Recharger

Paramétrer la classe crée

• Dans la colone de gauche, cliquez sur la classe que vous venez de créer (.vertgrassouligne)
• Cliquez sur l’onglet texte
• Cliquez sur le bouton à droite du champ couleur
  • Rectangle gris, après avoir cliqué dessus, vous voyez apparaître l’ensemble des couleurs que vous pouvez utiliser
• Choisissez votre couleur et cliquez sur Ok
  • Si vous connaissez le code hexadécimal de la couleur à utiliser, vous pouvez le taper directement dans le champ "couleur"
  • Exemple : #009900
• Epaisseur de la police = gras
• Souligné = coché
• Fermer

Testez la classe que vous venez de créer

• Tapez une ligne de texte
• Sélectionnez un mot
• Appliquez la classe .vertgrassouligne
  • Sur la gauche, vous avez deux champs, pour repérer celui des classes, si vous voyez affiché "corps de texte", c’est le champ qui est juste au dessous. Si vous pointez dessus sans cliquer, son nom apparait "Appliquer une classe à la sélection"
  • Cliquer sur le triangle noir, à droite du champs pour voir la liste de vos classes, cliquez ensuite sur .vertgrassouligne pour l’appliquer
• Résultat : la mise en forme .vertgrassouligne est appliquée au texte sélectionné

 Appliquer le style à d’autres pages

Dans une seconde page Web

• Outils / Editeur CSS
• Feuille liée
• Parcourir
  • Cliquez sur votre feuille de style
• Liste des média = screen
• Créer la feuille de style
• Recharger
• Fermer

Appliquez votre style comme précédement

• Sélectionnez du texte
• Appliquez lui la classe .vertgrassouligne

 Efficacité des feuilles de styles

Ce que vous devez savoir pour comprendre l’efficacité des feuilles de style

Introduction

• Imaginez que votre site comporte 40 pages fonctionnant sur le principe des feuilles de style
• Vous souhaitez maintenant que dans toutes vos pages, le style .vertgrassouligne ne soit plus vert, mais rouge

Modifiez votre feuille de style

• Outils / Editeur CSS
• Dans la partie gauche de la boite de dialogue, sélectionnez votre classe .vertgrassouligne (après avoir cliqué sur le + ; si votre classe n’apparaît pas, cliquez sur "recharger"
• Police / Couleur / Cliquez sur un Rouge
  • Exemple en Hexadécimal : #CC0000
• Fermer

Résultat

• Sur l’ensemble de vos page, les textes auxquels étaient affectés la classe .vertgrassouligne sont maintenant rouges

Tester un exemple en réel

• Sur le site mammouthland, vous trouverez un exemple efficace de l’utilisation des feuilles de style CSS.
  • Tout en haut, à droite "’Choisir un habillage"