Tu vas créer un nouveau projet dans le Web Lab de Code.org avec comme nom Activité CSS 3.
Les styles CSS permettent de modifier l'apparence des éléments de façon dynamique.
Rappel : Il est conseillé de mettre toutes les définitions des styles CSS dans un fichier différent de celui de la page HTML. Dans le fichier HTML, il faut alors ajouter la balise <link> dans l'entête <head> pour indiquer le fichier de style CSS à utiliser.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
Par défaut, la page HTML présente les liens Internet en bleu avec un soulignement.
Les styles CSS vont me permettre de changer l'apparence du lien :
J'utilise le pseudo-format CSS hover pour la balise <a> qui gère le lien. Je veux que les liens soient de couleur verte sans soulignement et deviennent de couleur rouge avec soulignement quand je les survole avec la souris :
/* Liens par défaut (non survolés) pour la balise a*/ a { text-decoration: none; color: green; font-style: italic; } /* Apparence au survol des liens */ a:hover { text-decoration: underline; color: red; }
Je peux faire la même chose avec les autres éléments de la page HTML comme par exemple avec un paragraphe :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <a href="http://www.ac-limoges.fr">Le site Internet du lycée Valadon</a> <p>Bienvenue au lycée S. Valadon</p> </body> </html>
/* Apparence au survol du paragraphe */ p:hover { font-style: italic; color: blue; }
Voici les autres interactions que je peux gérer, pour les lien ou les éléments de la page.
Le pseudo-format :active permet d'appliquer un style particulier au moment du clic. Il est surtout utilisé pour les liens :
/* Quand je clique sur le lien le fond devient de couleur grise*/ a:active { background-color: gray; }
Le pseudo-format :focus permet d'appliquer un style particulier au moment de la sélection de l'élément :
/* Quand je sélectionne le lien */ a:focus { background-color: purple; }
Le pseudo-format :visited permet d'appliquer un style particulier après la première sélection (clic) du lien :
/* Quand j'ai sélectionné le lien */ a:visited { color: olive; }
Je mets en pratique ce que j'ai appris avec l'éditeur de code interactif du site Openclassroom :
Voici un lien parmi d'autres pour découvrir les balises de base du CSS :