logo_gauche Bric à Brac informatique  logo_Droite

Les Feuilles de styles

Le panneau Feuilles de Styles  proposé par BlueGriffon est un outil précieux permettant de créer ou contrôler le contenu d'une feuille de styles interne ou  externe liée à un document HTML


RAPPELS des conventions CSS pour annoncer  l'affichage d'une feuille de styles dans un page HTML 

Les feuilles de styles sont annoncées dans la  partie <head> et </head> du document

Il y a deux sortes de feuilles de style.

La feuille de styles interne. Elle ne s'applique qu'au document. L'affichage se présente dans la partie <head> ... </head> du document comme suit :

<style type="text/css">

Entre les 2 balises  -> tous les styles créés sont affichés pour le document 
</style>


La feuille de styles externe. Elle est contenue dans un document séparé. Dans l'exemple ci-dessous, elle est identifiée sous le nom d'un fichier d'extension *.css  avec  le chemin de  son emplacement (et cela toujours dans la partie <head> ... </head> du document.


Exemple  de code inséré dans la partie <head> ... </head> :

<link href="nom_de_la_feuille_styles.css" rel="stylesheet" style type="text/css">
  • nom_de_la_feuille_de_style est le nom donné à la feuille de style externe
  • La balise <link> avertit le navigateur qu'il doit chercher un document situé à l'extérieur de la page HTML.
  • L'attribut rel="stylesheet" précise que le document en question est une feuille de style externe.
  • L'attribut type="text/css" spécifie le type de feuille de style.
  • L'attribut href="URL" indique l'URL (Uniform Resource Locator) de la feuille de style, c'est-à-dire son emplacement sur le Web, son adresse en quelque sorte.

Notes :

La création d'une feuille de styles externe permet de réutiliser la même feuille de styles dans plusieurs documents.

Une feuille de styles utilise le langage CSS

Un document peut avoir une feuille de style externe et une feuille de style interne. L'interne a priorité sur l'externe.

Détails pour le fonctionnement panneau Feuilles de styles dans BlueGriffon 1.7.2
(il y a quelques améliorations dans la version 1.8 ... description à venir)

Pour afficher le panneau Feuilles de styles, il faut activer la commande : Panneaux, Feuilles de Styles

LEGENDE

1 : un clic sur la croix ferme la boite de dialogue.

2 : un clic sur la punaise insère le panneau dans la fenêtre principale sous forme d'onglet

3 : un clic sur cette icône permet l'alignement de tous les panneaux affichés

4 : un clic sur le + affiche la boite de dialogue Propriétés de la Feuille de Styles

5 : un clic sur le - sur le nom d'une feuille de styles sélectionnée, supprime celle-ci

6 : un clic sur l'outil "roue"  donne la possibilité de modifier une feuille de style sélectionnée au préalable en affichant la boite de dialogue Propriétés de la Feuille de Styles (cliquer sur Edition), soit tous les styles contenus dans la feuille de styles (cliquer sur Code, et Sauver les modifications)

7 : un clic sur cette icône permet d'avoir un choix d'affichage de 4 titres de colonnes possibles dans la fenêtre de la Feuille de styles. Par défaut URL et Titre sont cochés

8 : Dans cette colonne l'adresse de la feuille de styles est affichée (l'URL)

9 : Dans cette colonne le titre de la feuille de styles est affiché. Si aucun titre n'a été donné BlueGriffon affiche Null







La boite de dialogue Propriétés de la Feuille de styles  en détails

Deux possibilités pour afficher la boite de dialogue ci-dessous.

- soit cliquer sur l'icone + en bas, à gauche, de la fenêtre Feuille de styles (4)

- soit cliquer sur l'icone "roue" et sélectionner Edition (6)




A partir de cette fenêtre il est possible d'accéder ou de créer deux types de Feuilles de styles

- pour une  feuille Contenue dans le document, sélectionnée au préalable ou que l'on souhaite modifier ou créer

Contenue dans le document doit être coché

Pour modifier, Il est possible d'ajouter un Titre à la feuille de style si elle n'en a pas ou / et d'ajouter un médium

Pour créer une nouvelle feuille, la saisie d'un titre est obligatoire. Cliquer sur OK. La feuille de style est crée mais elle est vide.


- pour une feuille est Référencée depuis le document

Référencée depuis  le document doit être coché

l'URL est affichée, on peut en sélectionner une autre

On peut ajouter un titre à cette feuille de style, mais ce n'est pas obligatoire

NOTES :

A partir de la boite de dialogue Propriétés de la Feuille de styles, il est possible de désigner cette feuille de style comme alternative (cocher La feuille de styles est une alternative).

La saisie d'un titre est obligatoire pour déclarer une Feuille de styles alternative. Le titre est alors un des choix proposés à l'utilisateur pour visionner la page web dans les navigateurs récents par la commande : Affichage, Style.

La feuille de styles qui n'a pas de titre sera considérée par les navigateurs comme la feuille de styles par défaut.


INFORMATION intéressante avec Mozilla Firefox

Exemple dans le code source de ce document, deux feuilles de styles y sont attachées (dont une feuille de style nommée essai qui est ignorée)

Dans  Firefox, il est possible de distinguer les effets obtenus par l'une ou par l'autre.

Par défaut c'est le style par défaut qui est appliqué.dans les navigateurs.

Mais en activant la commande : Affichage, Style, du menu Firefox un sous-menu vous permet d'afficher votre page avec la deuxième feuille de style intégrée dans le code source.




Retour

Mise à jour le 09/07/16