Les feuilles de style (CSS)

• Les feuilles de style
• - qu'est-ce qu'un style
• - les styles dans une page web
• Liens
• L'utilisation des feuilles de style
• Les feuilles de style
• Feuilles de style alternatives

 

Page en préparation

 

Cette page ne devrait pas être en ligne. C'est un brouillon.
(j'ai pas mal de difficultés à clarifier la chose ;-))
Cependant, elle rassemble déjà des liens utiles pour ceux qui veulent s'initier ou utiliser les feuilles de style.

 

Les feuilles de style :

 

Afin de comprendre l'utilité des feuilles de style (CSS) dans un site web, il est nécessaire de commencer par le début : l'utilisation de style pour mettre en forme un texte.

 

Qu'est-ce qu'un style ? :

Pour aborder la notion de style, il est nécessaire de connaître quelques règles de typographie :

La police de caractère :
Une police de caractère est un ensemble de caractères de même style.
http://www.aglossa.net/ecrits/une_histoire_des_polices_de_caracteres.htm

On peut choisir :
- la police de caractère (Times, Arial, Verdana, etc.)
- la taille des caractères (exemple : 10, 12, 14, 18, etc.)
- l'apparence (exemple : gras, italique, souligné, etc.)

 

A l'origine, les styles sont utilisés dans un traitement de texte.
Ils permettent de mettre en forme un document afin de distinguer titres et paragraphes.
exemple : on choisira une police de caractère pour afficher les titres, une autre pour afficher les paragraphes.

 

exemple :

Un titre en police Helvetica, de taille 14 pixels, en gras.

Un paragraphe en police Times, de taille 12 pixels.

 

Définir un style consiste à :

1 - choisir ses caractéristiques :

- police de caractère (exemple : Times ou Helvetica)
- taille des caractères (exemple : 12 pixels ou 14 pixels)
- "graisse" (exemple : gras) ou le style (exemple : italique),
mais aussi :
- alignement du texte (exemple : aligné à gauche ou centré),
- couleur du texte (exemple : rouge ou bleu)
- etc.

2 - lui attribuer un nom.

exemple : Titre ou Paragraphe.

 

Les styles dans le traitement de texte Word :

Ici, le style "Titre 2" est caractérisé par :
- Police Arial, taille : 12, gras, italique, alignement gauche

 

Avantages :

On pourra uniformiser la présentation d'un document.
exemple : appliquer le style "Titre" à tous les titres du document ; appliquer le style "Paragraphe" à tous les paragraphes du document.

On pourra modifier un style et changer la présentation d'un document.
exemple : modifier le style "Titre" permettra de modifier, en même temps, tous les titres du documents.

 

- On pourra définir autant de styles que l'on souhaite (titre, sous-titre, note, etc.)
- L'ensemble de ces styles constituera une feuille de style.

 

Les styles dans une page web :

Pour appliquer un style à un texte il faut distinguer :
- le style en lui-même,
- le texte auquel le style est appliqué.

Il faut donc :
- 1 - définir les caractéristiques du style (police, taille, etc.)
- 2 - appliquer le style au texte.

 

Il y a 3 façons d'appliquer un style à un texte :
- définir le style et l'appliquer au texte dans la partie body de la page,
- définir le style dans la partie head de la page et l'appliquer au texte dans la partie body,
- définir le style dans une feuille de style externe, associer la feuille de style à la page dans la partie head de la page, appliquer le style au texte dans la partie body.

 

La syntaxe :

Suivant la solution choisie, la syntaxe sera différente :

 

- 1 - Définir le style dans la partie body de la page :

Cette solution est utilisable une seule fois dans la page.
Elle n'apporte aucun des avantages des feuilles de style.
Elle peut être utilisée exceptionnellement.

Syntaxe :

Ici, on modifie la balise <p> par <p style="..."> ; on intègre les attributs du style entre les guillemets.
Le style est appliqué directement au texte.

 

- 2 - Définir le style dans la partie head de la page :

Celle solution est utilisable seulement dans la page.
On peut définir plusieurs styles. Mais ils devront être définis dans la partie head de toutes les pages auxquelles ils s'appliqueront.

Syntaxe :

Ici, dans la partie head de la page :
- on crée une balise <style type="text/css"> suivie du ou des styles, terminée par la balise fermante </style>
dans la partie body de la page :
- on applique le style sélectionné au texte.

 

- 3 - Définir le style dans une feuille de style externe :

C'est la meilleure solution pour utiliser les feuilles de style dans un site web.
On créera une feuille de style externe commune pour toutes les pages, qui rassemblera tous les styles utilisés sur le site.

Syntaxe :

Ici, dans la feuille de style externe :
- on crée le style correspondant. , on décrit le style utilisé
dans la partie head de la page :
- on fait référence à la feuille de style.
dans la partie body de la page :
- on applique le style sélectionné au texte

 

Liens :

 

Pour s'initier aux CSS :

Comment s'initier aux feuilles de style :
http://perso.orange.fr/coin.des.experts/reponses/faq9_49/index.html

Tout sur les CSS :
http://www.aidenet.com/css/index.htm

FAQ du site AlsaCreations :
http://forum.alsacreations.com/faq/

Feuilles de style CSS :
http://fr.selfhtml.org/css/index.htm
surtout :
http://fr.selfhtml.org/css/proprietes/index.htm

Les feuilles de style en cascade :
http://www.yoyodesign.org/doc/w3c/css2/cover.html#minitoc

Les feuilles de style :
http://www.tuteurs.ens.fr/internet/web/html/css.html

 

Compatibilité d'Internet Explorer avec les CSS :

Internet Explorer 6.x (et précédents) interprètent mal les CSS, ce qui peut entraîner des différences à l'affichage (voir des incompatibilités) :

Gérer les modèles de boîtes CSS standard et Microsoft :
http://openweb.eu.org/articles/dimensions_boites_css/

CSS et Internet Explorer pour Windows :
http://www.christopher-jablonski.com/fr/reperes/ie6.shtml

Les bugs des navigateurs :
http://www.alsacreations.com/articles/compatibilite/

Model Box et Doc Switching :
http://www.siteduzero.com/tuto-3-11595-1-introduction.html

 

Des solutions sont possibles :

Internet Explorer peut fonctionner en deux modes :
- le mode Standard,
- le mode Quirk
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm (anglais)
http://hsivonen.iki.fi/doctype/ (anglais)

Contourner les défauts d'Internet Explorer :
http://www.fastclemmy.com/index.php?
viewlog=75_contourner-les-defauts-limitations-bugs-d-Internet-Explorer

 

La meilleure solution consistera à utiliser une feuille de style supplémentaire qui contiendra les styles modifiés à l'intention d'Internet Explorer.
Cette feuille de style sera mentionnée dans la partie head de la page par une instruction semblable :

Voir : Les syntaxes de commentaires conditionnels pour IE Windows :
http://www.blog-and-blues.org/articles/
Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

Vérifier la validité de son site :

Un ensemble de tests et de contrôles qui permettent de vérifier l'accessibilité de son site.
http://www.acces-pour-tous.net/

 

Tester l'affichage de son site :
http://browsershots.org/submit/

Installer Internet Explorer en version "Stand alone" pour tester l'affichage :
http://tredosoft.com/Multiple_IE

 

Initiation au positionnement :

En CSS, on n'utilise pas de tableaux pour mettre en page images et texte, mais on positionne des blocs les uns par rapport aux autres...

Sur Openweb :
http://openweb.eu.org/articles/initiation_flux/
Sur AlsaCreations :
http://css.alsacreations.com/Bases-et-indispensables/
Comprendre-le-positionnement-des-balises-en-CSS
Sur AideJavaScript :
http://www.aidejavascript.com/article93.html
Sur le site du Zero :
http://www.siteduzero.com/tuto-3-42-1-mise-en-boite-partie-1-2.html

Savoir utiliser et positionner les calques (div) :
http://wiki.media-box.net/tutoriaux/html/savoir-utiliser-positionner-les-calques-div

 

Les menus en CSS :

Un choix important de menus en CSS :
http://css.maxdesign.com.au/listamatic/

http://www.cssplay.co.uk/menus/index.html

 

 

L'utilisation des feuilles de style :

 

L'utilisation des feuilles de style :

L'utilisation des feuilles de style (CSS) se généralise de plus en plus.

Les feuilles de style (CSS = Cascading Style Sheet) peuvent être utilisées à 2 niveaux :
1 Utilisation simple, pour la mise en forme du texte (titres, paragraphes, liens).
2 utilisation avancée, pour la mise en page (utilisation de blocs à la place de tableaux pour la mise en page).

 

1 Utilisation simple : mise en forme du texte :

Cela concerne particulièrement les sites qui ont été conçus en HTML classique.
On commence d'abord par modifier la façon d'afficher les textes.

Au lieu d'utiliser des balises <font> pour définir la(les) police(s) de caractères, on va utiliser des styles.

Chaque style va recenser :
- la police de caractère utilisée, la taille, l'épaisseur, la couleur, etc.

 

2 Utilisation avancée : utilisation des blocs :

C'est l'utilisation la plus avancée des feuilles de style.
Elle consiste à créer des blocs avec des balises <div>, à les positionner sur la page pour effectuer la mise en page.

 

Comprendre le positionnement des balises en CSS :
http://css.alsacreations.com/Bases-et-indispensables/
Comprendre-le-positionnement-des-balises-en-CSS

 

Les menus déroulants en CSS :

Difficile de trouver un menu déroulant qui soit compatible avec tous les navigateurs.
Celui-ci fonctionne sous Internet Explorer 5 (Windows et Macintosh) et Safari.

http://iubito.free.fr/prog/menu.php

 

 

Utilisation des polices de caractère dans une page web :

Important :
Pour afficher une police de caractère dans une page web (comme dans un traitement de texte), il faut que cette police soit présente dans le dossier Polices de l'ordinateur :
- menu Démarrer, Panneau de configuration, Polices.

Donc : si on conçoit une page web avec une police "exotique", cette police ne s'affichera pas sur un ordinateur ne la possédant pas.
Une police de remplacement s'affichera à la place. Ce qui modifiera la présentation du texte, telle qu'elle a été conçue au départ.

Pour cette raison, il faut limiter son choix aux polices les plus courantes.
(ne pas oublier qu'une police de caractère doit s'afficher non seulement sous Windows, mais aussi sur des ordinateurs Macintosh ou équipés de Linux).

Les polices les plus courantes :

Arial, Helvetica, sans-serif	{ font-family: Arial, Helvetica, sans-serif;}
Times New Roman, Times, serif	{ font-family: "Times New Roman", Times, serif; }
Courier New, Courier, mono	{ font-family: "Courier New", Courier, mono;}
Georgia, Times New Roman, Times, serif	{ font-family: Georgia, "Times New Roman", Times, serif;}
Verdana, Arial, Helvetica, sans-serif	{font-family: Verdana, Arial, Helvetica, sans-serif;}
Geneva, Arial, Helvetica, sans-serif

Voir :
http://edu.ca.edu/article67.html

 

- Arial, Helvetica, sans-serif
- Times New Roman, Times, serif
- Courier New, Courier, mono
- Georgia, Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif

La police affichée en gras sera la police à utiliser.
Si elle n'est pas présente, elle sera remplacée par la police suivante.

Les autres polices :

 

Pages dynamiques :
- le contenu est stocké le plus souvent dans une base de données, structurée en tables et en champs. C'est le contenu des champs de la base qui est créé/modifié par le rédacteur, et non pas la page elle-même. On parle de site "dynamique".

Les CMS :
http://fr.wikipedia.org/wiki/Syst%C3%A8me_de_gestion_de_contenu

 

 

Les feuilles de style :

 

Qu'est-ce qu'un "style" :

Un style est un ensemble d'attributs permettant de définir l'aspect d'un texte.
Un style est composé de :
. la police de caractère, sa taille, son style (gras, italique, souligné, etc.)
. le format de paragraphe : son alignement (gauche, droit, centré, justifié), son espacement avant et arrière, etc.

On définit un style pour :
- un titre de paragraphe,
- un texte.

Pour définir le format d'un texte

Les caractéristiques d'un texte :

police de caractère

 

Les avantages des feuilles de style :

Les feuilles de style permettent d'uniformiser la présentation d'un site :
Pour chaque partie du texte (paragraphe, titre principal, sous-titres, etc) on choisit une police de caractère (et ses attributs).

 

Par exemple, pour ce site, j'ai défini les styles suivants :

 

La modification d'un style entraînera automatiquement la modification du texte sur toutes les pages concernées.
On pourra ainsi "essayer" plusieurs présentations sans avoir à modifier les pages.

Les feuilles de style viennent en complément des modèles (voir), pour faciliter la modification et l'évolution d'un site.
Elles permettent de réduire sensiblement la taille d'une page web en limitant l'utilisation de balises HTML consacrées à la définition des polices de caractère.

 

Caractéristiques d'un style :

Un style est déterminé essentiellement par :
- la police de caractère (Arial, Times, Verdana, etc),
- sa taille (à définir de préférence en points plutôt qu'en pourcentage),
- son épaisseur (normal, gras, etc.)
- son style (normal, italique, etc.)
- sa couleur,
- l'alignement du texte (gauche, droite, centré, justifié),
- la couleur d'arrière-plan,
- les bordures (épaisseur en pixels, style solide, pointillé, double, etc.),
- etc.

 

 

 

.texte {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
color: #000099;
}

body {
/* font-size: 9pt;
color: #000099; */
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff; /* couleur de fond */
margin: 0; /* suppression de toutes les marges */
padding: 0;
}

img {
border: 0px none;
}

p {
font-family: Arial, Helvetica, sans-serif;
color: #000099;
font-size: 75%;
}

 

J'énumère ici les paramètres les plus courants. Il en existe d'autres, mais il faudra se méfier de leur utilisation, du fait de la mauvaise gestion des feuilles de style sur les anciens navigateurs.
Il sera donc souhaitable de vérifier le bon affichage des textes avec plusieurs navigateurs (Internet Explorer, Firefox, Opéra, etc.)

Infos sur les feuilles de style :
http://www.allhtml.com/css/css45.php

 

Voir aussi sur ce site :
Utilisation des feuilles de style avec Dreamweaver.

 

Les balises block et les balises inline :

En XHTML, il y a deux catégories de balises :

Les bailses block :
exemple : <div></div>, <p></p>, <h1></h1>, etc.
- elles sont "indépendantes" et constituent chacune un élément "à part",
- il y a toujours un espace au-dessus et au-dessous d'une balise block,
- elles peuvent être à l'intérieur d'une autre balise block.

Les balises inline :
exemple : <a></a>, <span></span>, </strong></strong>, <img />, etc.
- elles sont toujours à l'intérieur d'une balise block.

exemple :

display: block; = permet de transformer une balise inline en balise block

 

Feuilles de style alternatives :

Pour une même page web, on peut proposer au visiteur de choisir entre plusieurs présentations.
On peut également définir une feuille de style spécifique à l'impression.

Avoir plusieurs présentations alternatives pour votre site :
http://openweb.eu.org/articles/presentations_alternatives/

Feuilles de style permanentes, alternatives et préférées en (X)HTML :
http://www.blog-and-blues.org/weblog/2005/08/04/437

 

Une feuille de style pour l'impression :
http://openweb.eu.org/articles/css_impression/
Un exemple de feuille de style d'impression
http://openweb.eu.org/articles/exemple_css_print/