Cours complet sur les feuilles de Styles CSS
Qu'est-ce qu'on peut faire avec CSS ?
CSS est un langage de style qui définit la présentation des documents HTML. Par exemple, CSS couvre les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évolués et bien d'autres choses. Attendez de voir /
HTML peut être (mal) utilisé pour la présentation des sites Web. Mais CSS offre plus d'options et se montre plus précis et sophistiqué. CSS est pris en charge par tous les navigateurs actuels.
Après seulement quelques leçons dans ce tutoriel, vous pourrez fabriquer vos propres feuilles de style avec CSS pour donner un aspect tout nouveau à votre site Web.
Quelle est la différence entre CSS et HTML ?
HTML sert à structurer le contenu, CSS sert à formater un contenu structuré.
Bon, ça sonne un peu technique et confus. Mais continuez à lire, ça prendra tout son sens bientôt.
Retour au bon vieux temps où Madonna était une vierge et un type nommé Tim Berners Lee inventait le World Wide Web, le langage HTML était seulement utilisé pour structurer du texte. Un auteur pouvait marquer son texte en déclarant "voici un titre" ou "voici un paragraphe", avec les balises HTML <h1> , ou <p>.
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 <font>, 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 <table>, é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 <blink>, 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. Les avantages concrets de CSS sont les suivants:
Leçon 2 : Comment CSS fonctionne-t-il ?
Dans cette leçon, vous apprendrez à fabriquer votre première feuille de style. Vous saurez ce qu'est le modèle CSS de base et quels sont les codes nécessaires pour utiliser CSS dans un document HTML.
Beaucoup de propriétés des feuilles de style en cascade (CSS) sont similaires à celles de HTML. Si vous avez l'habitude d'utiliser HTML pour la présentation, vous reconnaîtrez donc beaucoup de ces codes. Voyons un exemple concret.
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:
<body bgcolor="#FF0000">
Avec CSS, on peut obtenir le même résultat comme cela:
body {background-color: #FF0000;}
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 :
Mais où place-t-on le code CSS ? C'est précisément ce que nous allons voir maintenant.
Appliquer CSS n un document HTML
Il y a trois façons d'appliquer le style CSS à un document HTML. Elles sont toutes expliquées ci-dessous. Nous vous recommandons d'examiner la troisième méthode, c'est-à-dire celle externe.
Méthode 1 : Local - 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 :
<html>
<head>
<title>Exemple</title>
</head>
<body style="background-color: #FF0000;">
<p>Cette page est rouge</p> </body>
</html>
Méthode 2 : Global - Interne (l'élément style)
Une autre méthode consiste à inclure le code CSS avec la balise HTML <style>. Par
exemple, comme ceci :
<html>
<head>
<title> Exemple </title>
<style type="text/css">
body {background-color: #FF0000;} </style>
</head>
<body>
<p>Cette page est rouge</p>
</body>
</html>
Méthode 3 : Externe (un lien vers une feuille de style: un ficher)
La méthode recommandée est celle avec un lien vers ladite feuille de style externe. Pour le reste de ce tutoriel, nous utiliserons cette méthode pour tous les exemples.
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'astuce 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 :
<link rel="stylesheet" type="text/css" href="style/style.css" />
Remarquez comment on indique le chemin de la feuille de style avec l'attribut href.
La ligne de code doit s'inscrire dans la section d'en-tête du code HTML, c'est-à-dire entre les balises <head> et </head>. Comme ceci :
<html> <head>
<title>Mon document</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head> <body>
Ce lien instruit le navigateur d'utiliser la présentation du fichier CSS pour afficher le fichier HTML.
Ce qui est vraiment futé, c'est que 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 est susceptible d'économiser beaucoup d'efforts. Par exemple, si vous voulez changer la couleur d'arrière-plan d'un site Web contenant 100 pages, une feuille de style peut vous épargner la modification manuelle des 100 documents HTML. Avec CSS, le modification peut intervenir en quelques secondes en changeant juste une seule ligne de code de la feuille de style centrale.
Mettons donc en pratique ce que nous venons d'apprendre.
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.htm
<html>
<head>
<title>Mon document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<hl>Ma première feuille de style</hl>
</body>
</html>
style.css
body {
background-color: #FF0000; }
Placez maintenant les deux fichiers dans le même dossier. Songez à sauvegarder les fichiers avec les bonnes extensions (respectivement « .htm » et « .css »)
Ouvrez « default.htm» dans votre navigateur et constatez le fond rouge de la page. Félicitations 1 Vous avez fabriqué votre première feuille de style 1
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 <h1>. Le code suivant donne aux éléments <h1> une couleur rouge. hl {
color: #ff0000;
}
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.
L'élément <body> est le réceptacle de tout le contenu du document HTML. 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 <body>.
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 <body> et <h1>.
body {
background-color: #FFCC66;
}
hl {
color: #990000;
background-color: #FC9804;
}
Remarquez que nous avons appliqué deux propriétés à <h1> 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.
Comme exemple d'image d'arrière-plan, nous utilisons le papillon ci-dessous. Vous pouvez télécharger l'image pour l'utiliser sur votre propre ordinateur (en cliquant sur le bouton de
droite de la souris et en sélectionnant « Enregistrer l'image sous » , ou vous pouvez utiliser une autre image si vous voulez.
Pour insérer l'image du papillon en arrière-plan d'une page Web, appliquez simplement la propriété background-image à l'élément <body> et indiquez le chemin de l'image.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
hl {
color: #990000;
background-color: #FC9804;
}
Remarquez la façon dont nous avons indiqué le chemin de l'image avec url("butterfly.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/butterfly.gif") , ou même sur Internet en donnant l'adresse complète du fichier : …
Répéter l'image d'arrière-plan [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 :
body {
background-color: #FFCC66;
background-image: url('lbutterfly.gif'l~;
background-repeat: no-repeat;
}
hl {
color: #990000;
background-color: #FC9804;
}
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("butterfly.gif");
background-repeat:no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Positionner une image d'arrière-plan [background-position]
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 :
body {
background-color: #FFCC66;
background-image: url("butterfly.gif"~; background-repeat:no-repeat; background-attachment: fixed; background-position: right bottom; }
hl {
color: #990000;
background-color: #FC9804;
}
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:
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
On peut obtenir le même résultat avec background en une seule ligne de code :
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
La liste de commande est la suivante:
[background-color] 1 [background-image] 1 [background-repeat] 1 [background-attachment] 1 [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:
background: #FFCC66 url("butterfly.gif") no-repeat;
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
Dans cette leçon, vous apprendrez ce que sont les polices et comment les appliquer avec CSS. Nous étudierons également comment contourner le problème des polices spécifiques choisies pour un site Web qui ne sont visibles que si elles sont installées sur l'ordinateur utilisé pour accéder au site Web. 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 :
hl {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Les titres marqués par des éléments <h1> 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 si le style de la police concernée doit être normal, italic ou oblique. Dans l'exemple à suivre, tous les titres balisés par des éléments <h2> s'afficheront en italiques. hl {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
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. Embrouillé ? Étudiez ces exemples :
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.
hl {font-variant: small-caps;} h2 {font-variant: normal;}
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 normal 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.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Le corps des polices [font-size]
Le corps d'une police se règle par la propriété font-size.
On peut choisir parmi beaucoup d'unités différentes (par exemple, pixels et pourcentages) pour décrire les corps des polices. Dans ce tutoriel, nous nous concentrerons sur les unités les plus courantes et appropriées. Les exemples comprennent :
hl {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;} p {font-size: 1em;}
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és 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 ».
Voici une illustration de la façon d'ajuster la taille du texte dans Mozilla Firefox et dans Internet Explorer. Essayez vous-même (super, n'est-ce pas ?)
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 <p> :
p {
font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;
}
Avec la propriété raccourcie, on peut simplifier le code :
p {
font: italic bold 30px arial, sans-serif;
}
L'ordre des valeurs de la propriété font est le suivant : font-style | font-variant | font-weight | font-size | font-family
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 <p> :
p {
text-indent: 30px;
}
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 tableau <th> est aligné à droite, tandis que les données du tableau <td> sont 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 <h1> sont des titres soulignés, les éléments <h2> sont des titres avec un trait au-dessus et les éléments <h3> des titres barrés.
hl {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
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 <p>, et de 6px entre les lettres des titres <h1>, voici le code à utiliser :
hl {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
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 <li> (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.
hl {
text-transform:uppercase;
}
li {
text-transform: capitalize;
}
Leçon 6 : Les liens
Vous pouvez appliquer aux liens ce que vous avez déjà vu dans les leçons précédentes (c'est-à-dire à changer les couleurs et les polices, les soulignés, etc.). La nouveauté, c'est que CSS permet de définir ces propriétés différemment, selon que le lien est visité, non visité, activé, ou si le curseur le survole. Cela permet d'ajouter des effets plaisants et utiles à vos sites Web. Pour contrôler ces effets, on utilise ce qu'on appelle des pseudo-classes.
Qu'est-ce qu'une pseudo-classe ?
Une pseudo-classe permet de tenir compte de conditions et événements différents pour la définition d'une propriété sur une balise HTML.
Voyons un exemple. Comme vous le savez, les liens sont définis en HTML avec des balises <a~. On peut donc utiliser a comme sélecteur dans CSS :
a {
color: blue;
}
Un lien est susceptible d'avoir plusieurs états. Par exemple, il peut être visité ou non. Vous pouvez utiliser des pseudo-classes pour assigner des styles différents aux liens visités et non visités.
a:link {
color: blue;
}
a:visited {
color: red;
}
Utilisez respectivement a:link et a:visited pour les liens non visités et pour ceux visités. Les liens actifs ont pour pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur survole le lien.
Nous allons maintenant examiner chacune des quatre pseudo-classes avec des exemples et des explications supplémentaires.
La pseudo-classe :link
La pseudo-classe :link est utilisée pour les liens menant aux pages que l'utilisateur n'a pas visitées.
Dans le code suivant, les liens non visités seront en bleu clair.
a:link {
color: #6699CC;
}
La pseudo-classe :visited
La pseudo-classe :visited est utilisée pour les liens menant aux pages que l'utilisateur a visitées. Par exemple, le code suivant donnera la couleur mauve foncé à tous les liens visités :
a:visited {
color: #660099;
}
La pseudo-classe :active
La pseudo-classe :active est utilisée pour les liens qui sont activés.
Cet exemple montre des liens activés dont la couleur d'arrière-plan est jaune :
a:active {
background-color: #FFFF00;
}
La pseudo-classe :hover
La pseudo-classe :hover est utilisée lorsque le pointeur de la souris survole un lien.
On peut s'en servir pour créer des effets intéressants. Par exemple, si nous voulons que nos liens soient orange et en italiques au survol du pointeur, le code CSS devrait être le suivant :
a:hover {
color: orange; font-style: italic;
}
Exemple 1 : Effet au survol du lien par le curseur
Créer des effets différents pour le survol du pointeur sur les liens est très populaire. Nous examinerons donc quelques exemples de plus pour la pseudo-classe :hover.
Example la : Espacement des lettres
Comme indiqué dans la leçon 5 , on peut ajuster l'espacement entre les lettres avec la propriété letter-spacing. Cela s'applique aux liens pour un effet spécial :
a:hover {
letter-spacing: 10px; font-weight:bold; color:red;
}
Exemple lb : MAJUSCULES et minuscules
Dans la leçon 5 , nous avons vu la propriété text-transform qui permet de basculer entre des lettres majuscules et minuscules. Elle peut aussi servir pour créer un effet sur les liens :
a:hover {
text-transform:uppercase; font-weight:bold; color:blue; background-color:yellow;
}
Les deux exemples donnent un aperçu des possibilités de combinaison des différentes propriétés presque illimitées. Vous pouvez créer vos propres effets, essayez-donc !
Exemple 2 : Supprimer le trait sous les liens
On pose souvent la question : K Comment supprimer le trait sous les liens ? »
Vous devriez évaluer soigneusement s'il est nécessaire de supprimer le souligné car cela pourrait réduire considérablement la convivialité de votre site Web. Le public est habitué aux liens bleus soulignés des pages Web et sait qu'on peut cliquer dessus. Même ma maman le sait! 5i vous changez le souligné et la couleur des liens, il y a de fortes chances que l'utilisateur s'embrouille et donc n'exploite pas tout le contenu de votre site Web.
Ceci dit, il est très facile de supprimer le souligné des liens. Comme vous vous en rappelez de la leçon 5 , on peut utiliser la propriété text-decoration pour indiquer de souligner le texte ou non. Pour supprimer le souligné, il suffit de lui donner la valeur none.
a {
text-decoration:none;
}
Autrement, vous pouvez fixer la valeur de text-decoration en même temps que celles d'autres propriétés pour les quatre pseudo-classes.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
Résumé
Dans cette leçon, vous avez appris les pseudo-classes, en utilisant quelques propriétés vues dans les leçons précédentes. Cela devrait vous donner une idée des possibilités offertes par CSS.
