Cours CSS : Gestion des Couleurs
Cours CSS : Gestion des Couleurs
...
Quelle est la différence entre CSS et HTML ?
HTML sert à structurer le contenu, CSS sert à formater un contenu structuré.
La popularité du Web croissant, les concepteurs se mirent à rechercher des moyens pour ajouter de la présentation aux documents en ligne. Pour satisfaire à cette demande, les éditeurs de navigateurs (en ce temps-là, Netscape et Microsoft) inventèrent de nouvelles balises HTML, comme par exemple , qui différaient des éléments originaux en cela qu'ils définissaient une présentation et non une structure.
Cela conduisit aussi à une situation où les balises de structure originales, telle que
, étaient de plus en plus utilisées à tort pour présenter les pages et non pour ajouter une structure au texte. Beaucoup de nouvelles balises de présentation, telle que , n'étaient reconnues que par un type de navigateur. "Vous devez utiliser le navigateur X pour voir cette page" devint un avertissement courant sur les sites Web.
CSS fut inventé pour remédier à cette situation en offrant aux concepteurs Web des possibilités de présentations sophistiquées, gérées par tous les navigateurs. En même temps, séparer le style de présentation des documents de leur contenu rend leur entretien beaucoup plus facile.
Quels sont les avantages de CSS ?
CSS fut une révolution dans l'univers de la conception Web et sont donc devenus l’outil de présentation des pages Web standards. Les avantages concrets de CSS sont les suivants :
- Le contrôle de la présentation de plusieurs documents par une seule feuille de style donc une gestion simplifiée de la présentation d’un site pour toutes les pages, aisément modifiable;
- allègement du code-source des pages Web : une feuille de style n’est chargée qu’une fois par un navigateur ;
- Un contrôle plus précis de la présentation ;
- Des présentations différentes appliquées à des types de médias différents (à l'écran, à l'impression, etc.) Les feuilles de style print permettent une impression immédiate d’une page depuis le navigateur, et dispensent d’avoir à créer une version imprimable du document HTML ;
- Possibilité de doter une page de présentations alternatives au choix de l’utilisateur ;
- De nombreuses techniques évoluées et sophistiquées.
- Meilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.
Leçon 2 : Comment CSS fonctionne-t-il ?
La syntaxe CSS de base
Supposons que nous voulions que le fond d'une page Web soit d'un beau rouge :
Avec HTML, nous l'aurions fait comme ceci :
Avec CSS, on peut obtenir le même résultat comme cela :
Comme vous l'aurez remarqué, les codes sont plus ou moins identiques pour HTML et CSS. Cet exemple illustre également le modèle fondamental de CSS :
La syntaxe d'un style est très simple. Elle se compose de :
- Un sélecteur de balise (qui définit sur quelle(s) balise(s), classe(s) ou id(s) agit le style)
- Deux accolades qui encadrent les propriétés et valeurs
- Des propriétés séparées entre-elles par des point-virgules et séparées de leur valeur par des doubles points.
Exemple pour un style appliqué à l'ensemble des balises (le sélecteur universel * intervient) :
*{
color:#000000; text-align:left; }
Exemple d'un style s'appliquant uniquement à la balise
:
p{
color:#000000; text-align:left; }
Exemple d'un style s'appliquant uniquement aux balises
et
p,div{
color:#000000; text-align:left; }
les sélecteurs de style
Un sélecteur contextuel possède une syntaxe très proche de celle d'un sélecteur classique. La seule différence est que le style prend effet sur une balise contenue dans une autre (qu'elle soit directement contenue ou non).
Exemple pour un style appliqué à la balise contenue dans la balise
- :
li span{
color:#000000; text-align:left; }
Un sélecteur descendant revient sensiblement au même, il permet d'appliquer un style sur une balise située à l'intérieur d'une autre, mais directement. Ainsi l'exemple suivant fonctionnera pour ce code :
- test
mais pas pour celui-ci :
-
test
car la balise n'est pas directement située dans la balise
- .
Exemple pour un style appliqué à la balise contenue directement dans la balise
- :
li > span{
color:#000000; text-align:left; }
Un sélecteur adjacent permet d'appliquer un style sur une balise située immédiatement après une autre. Dans notre exemple nous allons appliquer un effet sur la balise
Exemple pour un style appliqué à la balise
contenue dans le document et située juste après la balise
:
p + h1{
color:#000000; text-align:left; }
Les sélecteurs d'attributs permettent d'appliquer un style sur une balise contenant des attributs précis ou imprécis. Exemple pour un style appliqué à la balise
contenant l'attribut align (avec ou sans valeur) :
p[align]{
color:#000000; text-align:center; }
Exemple pour un style appliqué à la balise
contenant l'attribut align dont la valeur doit être égale à center :
p[align="center"]{ color:#000000; text-align:center; }
Exemple pour un style appliqué à la balise
contenant l'attribut align dont la valeur doit s'approcher de center :
color:#000000; text-align:center; }
Exemple pour un style appliqué à la balise
contenant l'attribut align dont la valeur doit commencer par left :
p[align|="left"]{ color:#000000; text-align:center; }
Mais où place-t-on le code CSS ?
Appliquer CSS à un document HTML
Il y a trois façons d'appliquer le style CSS à un document HTML. Nous vous recommandons d'examiner la troisième méthode, c'est-à-dire celle externe.
Méthode 1 : Dans la ligne (l'attribut style)
Une façon d'appliquer du style CSS à HTML est celle avec l'attribut HTML style. En reprenant l'exemple précédent avec l'arrière-plan rouge, on peut l'appliquer ainsi :
Exemple
Cette page est rouge
Méthode 2 : Interne (l'élément style)
Une autre méthode consiste à inclure le code CSS avec la balise HTML
Cette page est rouge
Méthode 3 : Externe (un lien vers une feuille de style)
La méthode recommandée est celle avec un lien vers ladite feuille de style externe.
Une feuille de style externe est simplement un fichier texte ayant l'extension « .css ». Comme n'importe quel fichier, la feuille de style peut être rangée sur un serveur Web ou sur un disque dur.
Par exemple, disons que votre feuille de style se nomme « style.css » et se trouve dans un dossier appelé « style ». On peut illustrer cette situation comme ceci :
L'opération consiste à créer un lien depuis le document HTML (default.htm) vers la feuille de style (style.css). Ce lien peut être créé en une ligne de code HTML :
Remarquez comment on indique le chemin de la feuille de style avec l'attribut href.
La balise permettant d'ajouter une feuille de style est la balise . On la place toujours entre les balises et et on lui ajoute toujours l'attribut rel qui prend ici la valeur stylesheet pour dire que l'on ajoute un lien vers une feuille de style. On ajoute ensuite l'attribut type portant la valeur text/css. Tout ceci sera toujours pareil quelle que soit la feuille de style que vous ajouterez.
Le reste est plus intéressant puisqu'il va permettre de créer différents styles en fonction de l'utilisateur qui consulte votre site. Vous allez pouvoir créer un style différent pour l'impression de votre page Web, un style différent pour l'affichage sur un PDA ou encore sur un téléphone portable. Le tout sans changer le code XHTML de vos pages !.
Voici les différentes valeurs que peut prendre l'attribut media :
- all : On applique le style pour tout le monde et pour tous les périphériques !
- screen : On applique le style sur le moniteur (pas sur l'imprimante ni sur le reste)
- tty : Pour les médias de type TV ayant une basse résolution
- projection : Si vous affichez votre site sur un vidéo projecteur (la classe )
- handheld : Pour l'affichage sur un pocket PC
- print : Pour l'impression de vos pages web (pour consulter le résultat, un aperçu avant impression dans votre navigateur vous montrera ce que ça donne)
- embossed : Documents imprimés en braille
- tv : Télévision
- braille : Appareils représentant la page en braille
- aural : Synthétiseurs vocaux
Ce lien instruit le navigateur d'utiliser la présentation du fichier CSS pour afficher le fichier HTML.
Plusieurs documents HTML peuvent être reliés à la même feuille de style. En d'autres termes, on peut utiliser un seul fichier CSS pour contrôler la présentation de plusieurs documents HTML.
Cette technique permet d'économiser beaucoup d'efforts.
Essayez vous-même
Lancez Bloc-notes (ou votre éditeur de texte habituel) et créez deux fichiers, un fichier HTML et un fichier CSS, avec les contenus suivants :
defaultâtm
Placez maintenant les deux fichiers dans le même dossier. sauvegardez les fichiers avec les bonnes extensions (respectivement « .htm » et « .css »)
Priorité d'affichage
Lorsque vous définissez un style à un document ou une balise vous pouvez le faire de différentes manières. Si vous le faites de deux (ou plus) manières différentes, il faut bien que le navigateur choisisse le style qu'il devra utiliser pour afficher correctement l'élément en cause. Il existe donc des priorités d'affichage. Voici les priorités d'affichage par ordre décroissant :
- Le style en ligne :
- Le style dans le document :
- Le style importé :
- Le style externe :
Leçon 3 : Les couleurs et les arrières-plans
Dans cette leçon, vous apprendrez comment appliquer des couleurs et des couleurs d'arrière-plan à vos sites Web. Nous étudierons également des méthodes évoluées pour positionner et contrôler les images d'arrière-plan. Les propriétés CSS suivantes seront expliquées :
- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
La couleur d'avant-plan : la propriété 'color'
La propriété color décrit la couleur d'avant-plan d'un élément.
Par exemple, supposons que nous voulions tous les titres du document en rouge foncé. Les titres sont tous balisés avec l'élément HTML
. Le code suivant donne aux éléments
une couleur rouge.
On peut définir les couleurs avec des valeurs hexadécimales comme dans l'exemple précédent (#ff0000), ou avec les noms des couleurs ("red"), ou avec des valeurs RGB (rgb(255,0,0)).
La propriété 'background-color'
La propriété background-color décrit la couleur d'arrière-plan des éléments.
Pour changer la couleur d'arrière-plan d'une page entière, il faudrait donc appliquer la propriété 'background-color' à l'élément .
On peut aussi appliquer une couleur d'arrière-plan à d'autres éléments y compris les titres et le texte. Dans l'exemple ci-dessous, Des couleurs d'arrière-plan différentes sont appliquées aux éléments et
.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
Remarquez que nous avons appliqué deux propriétés à
en les séparant par un point-virgule.
Les images d'arrière-plan [background-image]
La propriété CSS background-image sert à insérer une image d'arrière-plan.
Pour insérer l'image en arrière-plan d'une page Web, appliquez simplement la propriété background-image à l'élément et indiquez le chemin de l'image.
Remarquez la façon dont nous avons indiqué le chemin de l'image avec url("(image.gif"). Cela signifie que l'image se trouve dnas le même dossier que la feuille de style. On peut aussi appeler des images dans d'autres dossiers avec url("../images/(image.gif"), ou même sur Internet en donnant l'adresse complète du fichier : url (" ").
Répéter l'image d'arrière-plan [background-repeat]
Dans l'exemple précédent, l'image était répété par défaut horizontalement et verticalement pour couvrir la totalité de l'écran ? Ce comportement est contrôlé par la propriété background-repeat.
Le tableau suivant décrit les quatre valeurs différentes de background-repeat.
Valeur Description
Background-repeat: repeat-x L'image se répète horizontalement
background-repeat: repeat-y L'image se répète verticalement
background-repeat: repeat L'image se répète horizontalement et verticalement
background-repeat: no-repeat L'image ne se répète pas
Par exemple, pour éviter la répétition d'une image d'arrière-plan, le code devrait ressembler à ceci :
Bloquer l'image d'arrière-plan [background-attachment]
La propriété background-attachment définit si l'image d'arrière-plan est fixe ou bien défile avec l'élément conteneur.
Une image d'arrière-plan bloquée ne bougera pas avec le texte lorsque le lecteur fait défiler la page, au contraire d'une image d'arrière-plan non bloquée qui défilera avec le texte de la page Web.
Le tableau suivant décrit les deux valeurs différentes de background-attachment. Cliquez sur les exemples pour voir la différence entre défiler et fixé.
Valeur Description
Background-attachment: scroll L'image défile avec la page (non bloquée)
Background-attachment: fixed L'image est bloquée
Par exemple, le code suivant bloquera l'image d'arrière-plan.
body {
background-color: #FFCC66;
background-image: url("image.gif"); background-repeat: no-repeat; background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Par défaut, l'image d'arrière-plan se positionnera dans le coin supérieur gauche de l'écran. La propriété
background-position permet de changer cette position prédéfinie et de placer l'image d'arrière-plan n'importe où à l'écran.
Il y a plusieurs méthodes pour fixer la valeur de background-position. Par contre, elles se présentent toutes sous la forme d'un jeu de coordonnées. Par exemple, la valeur'100px 200px' positionne l'image d'arrière-plan à 100px depuis la gauche et à 200px depuis le haut de la fenêtre du navigateur.
Les coordonnées peuvent s'exprimer en pourcentages de la largeur de l'écran, ou en unités fixes (pixels, centimètres, etc.), ou on peut utiliser les mots-clés "top", "bottom", "center", "left" ou "right". Le modèle suivant illustre ce système :
Le tableau suivant fournit quelques exemples.
Valeur Description
background-position: 2cm 2cm L'image est positionnée à 2 cm de la gauche et à 2 cm du haut de la page
background-position: 50% 25% L'image est positionnée au centre et à un quart de la page vers le bas
background-position: top right L'image est positionnée au coin supérieur droit de la page
L'exemple de code à suivre positionne l'image d'arrière-plan dans le coin inférieur droit de la page :
Concision [background]
La propriété background est un raccourci pour toutes les propriétés listées dans cette leçon.
Avec background, on peut comprimer plusieurs propriétés et donc écrire une feuille de style plus courte, ce qui en facilite la lecture.
Par exemple, les cinq lignes suivantes :
On peut obtenir le même résultat avec background en une seule ligne de code :
La liste de commande est la suivante :
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Si une propriété manque, elle prend automatiquement sa valeur par défaut. Par exemple, si on supprime
background-attachment et background-position de l'exemple :
Ces deux propriété non définies prendront tout simplement leurs valeurs par défaut, qui sont comme chacun sait "scroll" et "top left".
Leçon 4 : Les polices
Les propriétés CSS suivantes seront décrites :
- font-family
- font-style
- font-variant
- font-weight
- font-size
- font
La famille de polices [font-family]
La propriété font-family sert à indiquer la liste prioritaire des polices à utiliser pour l'affichage d'un élément donné ou d'une page Web. Si la première police de la liste n'est pas disponible sur l'ordinateur utilisé pour accéder au site, la police suivante est essayée et ainsi de suite jusqu'à ce qu'il y en ait une qui convienne.
Il y a deux types de noms pour catégoriser les polices : les noms de familles et les familles génériques. Les deux termes sont expliqués ci-dessous.
Le nom de famille
Comme exemples de noms de familles (souvent appelées « polices »), on trouve "Arial", "Times New
Roman" ou "Tahoma".
La famille générique
On peut décrire les familles génériques comme des groupes de noms de familles ayant des aspects uniformes. Un exemple est celui de la famille sans sérif, qui est un ensemble de polices sans « empattement ».
On peut illustrer cette différence comme ceci :
...
Lorsqu'on liste des polices pour un site Web, on commence naturellement par la police préférée suivie par des polices de remplacement. Il est recommandé de terminer la liste par une famille générique. Ainsi, la page s'affichera au moins avec une police de la même famille si aucune des polices indiquées n'était disponible.
Un exemple de liste prioritaire de polices ressemblerait à ceci :
Les titres marqués par des éléments
s'afficheront dans la police "Arial". Si elle n'est pas installée dans l'ordinateur de l'utilisateur, la police "Verdana" sera utilisée à la place. Si ces deux polices sont indisponibles, les titres s'afficheront dans une police de la famille sans-serif.
Remarquez que le nom de la police "Times New Roman" contient des espaces, et elle est donc listée entre des guillemets.
Le style des polices [font-style]
La propriété font-style définit le style de la police concernée être normal, italic ou oblique. Dans l'exemple à suivre, tous les titres balisés par des éléments
s'afficheront en italiques.
Les variantes de polices [font-variant]
La propriété font-variant sert à choisir entre les variantes normal ou small-caps (N.d.T. petites capitales) d'une police. Une police small-caps utilise des lettres en capitales de taille réduite à la place des lettres en minuscules?
Si la propriété font-variant vaut small-caps et qu'aucune police en petites capitales n'est disponible, le navigateur affichera très probablement le texte en capitales à la place.
La graisse des polices [font-weight]
La propriété font-weight décrit avec quel degré de graisse (ou de « noir ») présenter la police. Elle peut avoir une graisse normale ou bold (N.d.T. caractères gras). Certains navigateurs permettent même d'utiliser des nombres entre 100 et 900 (les centaines) pour décrire la graisse de la police.
Le corps des polices [font-size]
Le corps d'une police se règle par la propriété font-size.
Beaucoup d'unités différentes (par exemple, pixels et pourcentages) existent pour décrire les corps des polices. Voici les unités les plus courantes et appropriées :
Il existe une différence essentielle entre les quatre unités précédentes. Les unités « px » et « pt » font que le corps de la police est absolu, tandis que « % » et « em » permettent à l'utilisateur de l'ajuster si nécessaire. Beaucoup d'utilisateurs ont des handicaps, sont âgées ou simplement pâtissent d'une mauvaise vue ou de la piètre qualité de leur moniteur. Pour rendre votre site Web accessible à tous, vous devriez utiliser des unités ajustables telles que « % » ou « em ».
Il existe une autre méthode en donnant une valeur relative : c'est-à-dire en écrivant carrément "gros", "très gros", "petit", "minuscule". Mais bien sûr, comme tout c'est en anglais :p. Voici la liste des différentes valeurs que vous pouvez mettre ainsi que leur signification :
- xx-small : minuscule
- x-small : très petit
- small : petit
- medium : moyen
- large : grand
- x-large : très grand
- xx-large : euh... gigantesque
Concision [font]
Avec la propriété raccourcie font, il est possible de couvrir toutes les différentes propriétés de police en un coup.
Par exemple, prenons ces quatre lignes de code servant à décrire les propriétés de police de
:
Avec la propriété raccourcie, on peut simplifier le code :
L'ordre des valeurs de la propriété font est le suivant :
font-style | font-variant | font-weight | font-size | font-family
Leçon 5 : Le texte
Formater et ajouter du style au texte est primordial pour tout concepteur Web. Cette leçon vous introduira aux possibilités offertes par CSS pour la présentation du texte. Les propriétés suivantes seront décrites :
- text-indent
- text-align
- text-decoration
- letter-spacing
- text-transform
L'indentation du texte [text-indent]
La propriété text-indent permet d'ajouter une touche d'élégance aux paragraphes de texte en appliquant une indentation à la première ligne du paragraphe. Dans l'exemple suivant, un alinéa de 30px est appliqué à tous les paragraphes balisés par un élément
:
L'alignement du texte [text-align]
La propriété CSS text-align correspond à l'attribut align utilisé dans les versions anciennes de HTML. Le texte peut être aligné à gauche (left), à droite (right) ou centré (center). Outre cela, la valeur justify étirera chaque ligne de sorte que les marges à gauche et à droite soient droites toutes les deux. Cette mise en page est courante, par exemple, dans les journaux et les magazines.
Dans l'exemple suivant, le texte des titres du tableauest aligné à droite, tandis que les données du tableausont centrées. Enfin, les paragraphes de texte normaux sont justifiés :
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
La décoration du texte [text-decoration]
La propriété text-decoration permet d'ajouter des « décorations » ou « effets » différents au texte. Par exemple, on peut souligner le texte, le barrer, ou tracer un trait au-dessus, etc. Dans l'exemple suivant, les éléments
sont des titres soulignés, les éléments
sont des titres avec un trait au-dessus et les éléments
des titres barrés.
L'espacement des lettres [letter-spacing]
L'espacement entre les caractères du texte peut être défini avec la propriété letter-spacing. La valeur de la propriété est simplement celle de l'espacement désiré. Par exemple, si vous voulez un espacement de 3px entre les lettres d'un paragraphe de texte
, et de 6px entre les lettres des titres
, voici le code à utiliser :
La transformation du texte [text-transform]
La propriété text-transform contrôle la capitalisation du texte. On peut choisir une capitalisation initiale, une mise en majuscules ou une mise en minuscules, indépendamment de l'aspect du texte original dans le code HTML.
Voici un exemple avec le mot « titre » que l'on peut présenter à l'utilisateur comme « TITRE » ou « Titre ». La propriété text-transform admet quatre valeurs possibles :
capitalize
Elle capitalise la première lettre de chaque mot. Par exemple, « marcel dupond » deviendra « Marcel
Dupond ».
uppercase
Elle convertit toutes les lettres en majuscules. Par exemple, « marcel dupond » deviendra « MARCEL
DUPOND ».
lowercase
Elle convertit toutes les lettres en minuscules. Par exemple, « MARCEL DUPOND » deviendra « marcel dupond ».
none
Aucune transformation, et le texte se présente tel qu'il apparaît dans le code HTML.
Pour exemple, nous utiliserons une liste de noms, balisés avec des éléments
- (list-item). Disons que nous voulons que les noms soient capitalisés et les titres soient en lettres majuscules.
Examinez le code HTML de cet exemple et vous constaterez que le texte est en fait en minuscules.
