1 - Comprendre les feuilles de style
2 - Qu'est-ce que l'effet de cascade?
3 - Modifier la police et la couleur des liens dans tout le site
4 - Comment utiliser un fichier .css existant
5 - Comment créer un fichier .css
6 - À quoi servent chacun des volets de style?
7 - Problème des styles dans FrontPage 2000
8 - Valider une feuille de style
9 - Adresses de référence
10 - N'imprimer qu'une partie de la page
1 - Comprendre les feuilles de style
On
me suggère d'utiliser des CSS ou des feuilles de style. Mais en pratique,
qu'est-ce que c'est?
Il existe trois façons d'indiquer la mise en forme (police, gras, italique...)
dans une pages Web. On les appelle les "feuilles de style en cascade" ou CSS
(pour Cascading Style Sheets).
- La "feuille de style en cascade en ligne" indique une commande placée
directement dans le texte de la page. Par exemple (dans FrontPage), quand on sélectionne des
paragraphes et qu'on change leur police, la balise <font> est insérée dans le
code HTML et elle sera répétée autant de fois que nécessaire, pour chacun des
paragraphes.
- La "feuille de style en cascade interne" indique des commandes placées dans la
section <head>, au début du code de la page Web. Les instructions de mise en forme
n'y sont indiquées qu'une seule fois et s'appliquent à toute la page. (Dans les
logiciels récents, comme Expression Web et SharePoint Designer, tous les formats
appliqués directement à un élément sont inscrits automatiquement dans la feuille
de style interne, devenant alors disponibles pour être réutilisés.)
- La "feuille de style en cascade externe" regroupe toutes les commandes de mise
en forme dans une seule page ayant l'extension .css. Cette feuille est alors
liée à toutes les pages du site Web. Cette méthode est très avantageuse, car
elle réduit la taille de chaque page, ce qui permet de les afficher plus
rapidement. La mise en forme étant séparée du contenu, la mise à jour du site
s'en trouve simplifiée. De plus, l'utilisation des feuilles de style externe
permet de créer des pages plus accessibles pour tous les types de navigateurs.
(Un exemple: les navigateurs incluent pour la plupart la possibilité de surfer
avec une feuille de style personnalisée, ainsi un mal voyant peut forcer des
couleurs contrastées .)
2 - Qu'est-ce que l'effet de cascade?
Si on me dit que l'effet
de cascade empêche un style de s'appliquer, de quoi s'agit-il?
L'effet
de cascade n'est pas négligeable: le style intraligne (le format placé près
d'un élément) est toujours prioritaire, ensuite c'est le style placé dans
la section <head> de la page qui s'applique, sinon c'est celui provenant
de la feuille de style externe.
Voici un peu d'informations sur le principe de cascade, dans un fichier
pdf:
http://louise.mvps.org/volumes/ExtraitEW2.pdf
3 - Modifier la police et la couleur des liens dans tout le site
Comment peut-on appliquer une police à l'ensemble du site ou modifier les
couleurs de tous les liens?
La meilleure façon de modifier la police de base, c'est de modifier le style appliqué
à la balise body, car elle englobe tout le
contenu de la page. Vous en trouverez un exemple dans la rubrique
Polices.
Pour les couleurs des liens, voir la rubrique
Liens hypertexte #8.
Pour des blocs de liens formatés avec des styles, voir
Menus #2.
Dans Expression Web et dans SharePoint Designer, le changement
de la police se fait à
partir du volet Gérer les styles:
- ouvrez le modèle Web dynamique ou la feuille de style appliquée au site,
- affichez le Volets de tâches - Gérer les styles,
- dans ce volet, cliquez avec le bouton droit sur 'body', choisissez Modifier le
style,
- dans la zone Police, sélectionnez une famille dans 'font-family'...
4 - Comment utiliser un fichier .css existant
J'ai importé une feuille de style (un fichier .css). J'ai besoin de conseils
pour l'insérer dans un site en construction.
Pour lier la feuille de style .css avec toutes les pages du site, ouvrez une
page Web. Choisissez successivement Format - Styles CSS - Attacher une feuille
de style - Toutes
les pages HTML - Attacher comme Lien - bouton Parcourir, puis sélectionnez le fichier .css.
(Dans FrontPage 2003, l'équivalence se trouve au menu Format - Liens de feuille de style
- Toutes les pages - bouton Ajouter...)
Mais, si vous avez déjà attribué du gras, de l'italique ou une police à un
élément de la page, ce style en ligne s'affichera en priorité au lieu du style
de la feuille externe. Pour enlever le style en ligne, sélectionnez toute la
page (ou le paragraphe), puis au menu Format, choisissez Supprimer la mise en
forme.
Ensuite, dans la zone Style (au début de la barre d'outils Mise en forme), vous
pourrez choisir le style de certains paragraphes, comme Titre 1, Titre 2... La
mise en forme est alors ajustée selon le contenu de la feuille de style.
Pour modifier au besoin les couleurs (et autres formats) provenant d'un style,
voyez la question 6, plus bas.
5 - Comment créer un fichier .css
Je
voudrais créer un fichier externe contenant toute la mise en forme pour mon site
Web. Comment puis-je faire?
Partie 1 - Avec Expression Web ou SharePoint Designer
2007
Pour créer une nouvelle feuille de style (fichier .css), utilisez le menu
Fichier - Nouveau - Page - Feuille de style, sélectionnez celui vide ou un des
modèles.
Pour établir un lien entre les pages et le fichier de la feuille de style,
affichez le volet Gérer les styles, cliquez sur le lien au début du volet:
Attacher une feuille de style.
Pour créer un nouveau style, en haut du volet Gérer les styles, cliquez sur le
lien Nouveau style. Dans la fenêtre Nouveau style, vérifiez la zone Définir dans
(Page active, Nouvelle feuille de style ou Feuille de style existante).
Pour modifier un style existant, dans le volet Gérer les styles, cliquez avec le
bouton droit sur son nom et choisissez Modifier le style.
Partie 2 - Avec FrontPage
Pour créer la feuille de style externe, au menu Fichier, choisissez Nouveau.
Avec FrontPage 2002, sélectionnez Page ou site Web, puis Modèles de page (avec
FrontPage 2003, cliquez plutôt sur le lien Autres modèles de pages). Dans
l'onglet Feuilles de style, sélectionnez Feuilles de style Normal; enregistrez
ensuite la nouvelle page avec une extension .css.
Les commandes de styles peuvent être tapés directement dans cette page .css. Mais vous pouvez aussi les définir à partir
d'un menu lorsque la page .css est ouverte. Dans ce cas, au menu Format, Style,
sélectionnez un style (si nécessaire, choisissez Balises Html dans la zone
Lister), puis cliquez sur les boutons Modifier, Format; sélectionnez Police ou
Paragraphe ou autre et faites les choix voulus.
Ensuite, pour lier des pages Web avec la feuille de style externe, sélectionnez
le nom des pages en mode Dossiers, puis au menu Format, Liens de feuille de
style, cliquez sur le bouton Ajouter et choisissez la page .css voulue.
Note 1: Un détail à remarquer: lors de la création des styles, ce sont les
balises du code HTML qui sont offertes (comme h1, h2, p...) mais pour les
appliquer avec le bouton Style, c'est plutôt leur nom qui apparaît (comme Titre
1, Titre 2, Normal...)
Note 2: Au besoin, les feuilles de style doivent être autorisés dans FrontPage:
au menu Outils, Options de page, onglet Opérations d'auteur (ou onglet
Compatibilité), cochez les options CSS 1.0 et CSS 2.0.
6 - A quoi servent chacun des volets de styles?
Dans Expression
Web, la difficulté que je
rencontre maintenant, c'est de comprendre, dans le volet des tâches, ce
qui est modifiable avec chacune des commandes "Propriétés de la balise"
, "Propriétés CSS" et "Gérer les styles"?
Vous pouvez souvent utiliser un outil ou l'autre pour obtenir un résultat
équivalent.
Quand je travaille, j'affiche toujours le volet "Gérer les styles" parce
qu'il offre la liste de tous les styles disponibles, c'est-à-dire ceux déjà
définis dans la page active et dans le feuille de style liée. (A noter:
le bouton Options en haut de ce volet permet de ne voir que les styles appliqués
dans la page, ceux à la sélection ou de tout afficher.) Dans ce volet, un
simple clic droit sur un style permet alors de l'appliquer ou de le modifier. De plus, l'option "Sélectionner
tout : x instances" montre si le style est utilisé ou non.
Dans le volet "Appliquer les styles", j'utilise surtout le lien "Effacer
les styles", très pratique pour enlever tous les formats appliqués à la
sélection.
Mais quand les styles sont emmêlés et que le résultat obtenu n'est pas celui
attendu, j'ouvre le volet "Propriétés CSS". Il donne la liste des styles
applicables à l'endroit où se trouve le curseur. Les règles qui ne s'appliquent
pas (pour des raisons de priorité entre elles ou parce que non héritées
d'un niveau à l'autre) sont alors rayées. En immobilisant la souris sur
un élément rayé, j'en vois la raison (du genre "Telle propriété est remplacée
par telle règle"). Les propriétés des styles peuvent être modifiées
directement dans ce volet.
Le volet "Propriétés de la balise" présente plutôt les attributs qui pourraient
être placés directement à la suite de la balise dans le code HTML, comme
sa langue, son titre ou un style intraligne.
Note: ces outils sont les mêmes pour Expression Web et SharePoint
Designer 2007.
7 - Problème des styles dans FrontPage 2000
Impossible de modifier une feuille de style dans FrontPage 2000. Quand je crée
une page css et l'enregistre immédiatement, pas de problème. Mais si je modifie
cette page puis l'enregistre, le logiciel plante, avec un message "RunTime Error
- Abnormal program termination".
Ce problème se présente parfois dans FrontPage 2000 avec les feuilles de style.
Un truc serait de modifier le fichier css avec le Bloc-notes:
- dans FrontPage, au menu Outils, Options, onglet Configurer les éditeurs,
choisir d'ouvrir les fichiers .css avec le Bloc-notes (notepad.exe);
- ou, pour modifier un fichier css, clic droit sur son nom, choisir les options
Ouvrir avec, Éditeur de texte notepad.exe;
- ensuite, pour afficher le changement dans une page .htm liée à la feuille de
style, utiliser la touche F5.
Mais le menu "Format-Style" pourrait quand même être utilisé pour modifier la
page CSS. Dans ce cas, au lieu de l'enregistrer, son contenu pourrait être
copié/collé dans le Bloc-notes.
8 - Valider une feuille de style
Existe-t-il des outils pour vérifier la qualité de ma page CSS?
Dans Expression Web et
SharePoint Designer, pour vérifier la qualité des styles utilisés, utilisez le
menu Outils - Rapports CSS. Vous pourrez voir la liste des styles non utilisés
et de ceux non définis.
Avec FrontPage, voyez plutôt un site Web externe, comme:
https://validator.w3.org/unicorn/
Pour plus d'informations:
https://docs.microsoft.com/fr-fr/previous-versions/visualstudio/design-tools/expression-studio-2/cc295563(v=expression.10)
9 - Adresses de référence
Où
puis-je trouver plus d'informations sur les feuilles de style CSS?
Pour une vue d'ensemble des feuilles de styles dans Expression Web:
https://msdn.microsoft.com/fr-fr/library/cc295521...
https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade
Pour comprendre les différences d'affichage entre les navigateurs et les
points à vérifier:
https://www.alsacreations.com/actu/lire/194-mthodologie-pour-rsoudre-les-problmes-daffichage-en-css.html
10 - N'imprimer qu'une partie de la page
Si quelqu'un avait un
bout de code pour indiquer "Imprimer à partir de là jusque là", ce serait
super..
Voici une méthode pour n'imprimer qu'une section de la page, sans les menus,
sans les publicités, seulement le texte pertinent, par exemple un formulaire:
1. prévoir les sections à masquer;
2. créer une feuille de style pour l'impression;
3. inscrire la feuille de style dans l'en-tête de la page Web.
1. Les sections à masquer, celles qui ne seront pas imprimées, doivent être
encadrées par des balises de division <div>. Repérez les balises head, body
et form qui sont déjà en place dans le code de votre page Web. Ajoutez les
balises div juste avant ou juste après, un peu comme dans cet exemple:
<body>
<div id="avant">
...
</div>
<form action="envoi.php" method="post">
...
</form>
<div id="fin">
...
</div>
</body>
Note: cet exemple ne serait pas valable si votre page était construite avec
un seul grand tableau de disposition. Et si vous utilisiez déjà des balises
div, il faudrait ajuster cet exemple en fonction de ce qui existe déjà.
2. La feuille de style externe est un simple document de type texte avec
l'extension ".css". Dans Expression Web, elle peut être faite à partir du
menu Fichier, Nouveau, Feuille de style CSS. Dans FrontPage 2003, utilisez
le menu Fichier, Nouveau, Autres modèles de pages, onglet Feuilles de style,
Feuille de style normal (sinon, la page CSS peut être préparée dans le Bloc-notes).
Enregistrez la page sous le nom de "imprime.css" et tapez-y ce texte:
#avant{
display : none;
}
#fin {
display : none;
}
3. Dans votre page de formulaire, ajoutez un lien vers la feuille de style,
dans la section d'en-tête <head>, en précisant media="print":
<head>
...
<link rel="stylesheet" type="text/css" href="imprime.css" media="print" />
...
</head>
Voici quelques adresses complémentaires:
https://www.alsacreations.com/tuto/lire/586-feuille-css-impression.html
https://www.pompage.net/pompe/impression/