6.Configuration du CSS
 |
| Configuration du CSS - SAGProfProg - HTML CSS - Programmation, Développement web, Développement d'application, Génie Logiciel, Langage de programmation, Application web, Tutos, Informatique, Système d'information, Administration d'application |
Bonjour et bien!
Mon site Web est nul! Tout est fade... Je ne peux pas ajouter de couleur, centrer mon texte ou même placer une image où je veux sur ma page. Et ne me lancez même pas sur les gros liens bleus et violets. Je voulais créer un site Web et non une brochure homo pride pour la semaine de la mode de Rome. N'est-ce pas le but de ce tuto ?
Droit.
Ne vous inquiétez pas, nous corrigerons cela très bientôt.
Nous venons de terminer la première partie de ce tutoriel, sur le langage HTML, et nous sommes sur le point de commencer la deuxième partie, sur le langage CSS.
Comme je l'ai expliqué au cours du premier chapitre, vous avez besoin à la fois de HTML et de CSS pour créer un site Web entièrement fonctionnel et esthétique.
Si vous voulez une analogie, considérez HTML comme les briques qui vous permettent de construire les murs de votre maison et CSS comme la peinture qui vous permet de l'égayer.
Jusqu'à présent, nous n'avons travaillé qu'avec HTML pour que votre maison ressemble à... des briques.
Ceci est le premier chapitre de la deuxième partie de ce tutoriel et il traitera donc des aspects fondamentaux du langage CSS.
Je suis sûr que vous avez plus que quelques interrogatoires.
- Qu'est-ce que CSS ?
- Pourquoi le CSS a-t-il été inventé ?
- À quoi ressemble le CSS ?
- Où écrivez-vous le code CSS ?
- Pourquoi l'auteur est-il si génial ?
- Le CSS est-il compliqué ?
Rassurez-vous, nous couvrirons tout ce que vous pouvez imaginer et plus encore dans ce premier chapitre.
Introduction au CSS
Après avoir passé la première partie de ce cours à apprendre le HTML, nous sommes sur le point de plonger dans le langage CSS que nous avons intentionnellement mis de côté jusqu'à présent.
CSS n'est pas plus compliqué que HTML. C'est simplement un langage distinct qui sert un objectif différent.
L'acronyme CSS signifie Cascading Style Sheets et, comme vous l'avez peut-être deviné d'après son nom, il est utilisé pour formater et styliser votre site Web.
En HTML, nous avons appris à indiquer au navigateur :
- Je veux un titre ici.
- Je veux un paragraphe ici.
- Je veux une liste ici.
- Je veux une image juste après.
Avec CSS, nous apprendrons à dire :
- Je veux que mes titres soient en italique.
- Je veux mes paragraphes en rouge.
- Je veux que mes listes utilisent une police différente.
- Je veux que mon image soit centrée.
Voici un exemple réel de CSS en action.
CSS en action
Cette démonstration montrera exactement comment l'inclusion du langage CSS peut transformer un site Web.
Prenez la page Web HTML suivante.
Il est très basique et contient la plupart des éléments que nous avons déjà abordés dans ce tutoriel.
<capture>
Ceci est notre page HTML rudimentaire (celle dont vous vous plaigniez).
Le vôtre ne devrait pas être très différent.
Sans modifier aucune partie du code HTML, ajoutons simplement du CSS pour le rendre plus agréable à l'œil.
Ici, j'ai ajouté quelques CSS très basiques.
<capture>
C'est déjà mieux.
Mais cet exemple ne fait qu'appliquer les principes fondamentaux du langage CSS.
Si vous voulez voir tout le potentiel de CSS, voici une démonstration de certaines propriétés avancées.
<capture>
Les trois exemples proviennent exactement de la même page HTML.
Le contenu (code HTML) est identique mais c'est le format (code CSS) qui rend ces pages différentes.
Cool! Mon site web peut enfin être sans retard ! Mais comment utiliser CSS ?
Continuez à lire pour le savoir.
Rédaction de code CSS
Il existe trois façons d'appliquer du code CSS à une page Web ou à une partie de celle-ci.
Vous pouvez écrire du code CSS :
- dans un fichier .css séparé (recommandé)
- dans la balise <head> de votre page
- dans la balise HTML directement via l'attribut style
La première méthode est la plus couramment utilisée et vous comprendrez pourquoi une fois que nous aurons présenté les trois techniques.
Écrire CSS dans un fichier séparé
C'est la méthode standard d'inclusion CSS et celle que je recommande.
Le but est de placer le code CSS dans un fichier .css qui sera inclus dans une ou plusieurs pages web .html.
Inclure un fichier CSS dans une page Web est extrêmement simple : tout ce dont vous avez besoin est une balise HTML qui ira dans la partie <head> de votre document.
Jetez un œil au code HTML ci-dessous.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SAGProfProg</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Bienvenue à SAGProfProg</h1>
<p>SAGProfProg est le meilleur site</p>
<p>Je ne sais pas pourquoi SAGProfProg est magnifique.</p>
</body>
</html>Ce code ressemble plus ou moins à toutes les autres pages Web HTML que nous avons rencontrées jusqu'à présent, à l'exception de la nouvelle balise dans l'en-tête (sur la cinquième ligne).
C'est la ligne que j'ai ajoutée.
<link rel="stylesheet" href="style.css" />
Comme vous pouvez le voir, cette balise HTML a deux attributs.
L'élément <link> indique une relation entre le document courant et une ressource externe.
Dans notre cas, la ressource en question est une feuille de style CSS, mais il peut également s'agir d'un flux RSS (XML), d'un favicon, d'une icône d'iPhone ou de tablette, d'un moteur de recherche interne, etc.
Ce sont les deux attributs présents sur la balise <link>.
- rel spécifie la relation entre le document lié (le fichier CSS) et le document actuel (la page Web HTML). Il signifie "relation". Dans notre cas, le fichier lié est une feuille de style donc sa valeur est stylesheet. Simple.
- href stipule l'URL de la ressource liée. Nous avons déjà mentionné cet attribut lorsque nous avons introduit les liens texte dans la première partie de ce tutoriel. Dans notre cas, la valeur est le chemin relatif vers le fichier CSS que nous voulons inclure : style.css.
Nous savons maintenant comment inclure un fichier CSS séparé dans notre page Web.
Mais je n'ai pas de fichier CSS à inclure dans ma page web ! Je n'ai qu'une page Web .html.
C'est parce que nous n'avons pas encore créé notre fichier CSS.
Ne vous inquiétez pas, nous y reviendrons dans un instant.
En parlant de cela, comment modifiez-vous le code CSS ? Avez-vous besoin d'un logiciel spécifique ?
Bonne question.
Le code CSS est créé et édité de la même manière que le code HTML. Tout ce dont vous avez besoin est un éditeur de texte (Brackets, Visual Studio, Sublime, Notepad...).
Créons maintenant notre premier document CSS.
Ouvrez votre éditeur de texte et créez un nouveau fichier. Avec les crochets, allez simplement dans Fichier> Nouveau.
Votre document devrait être vide pour l'instant, ce n'est pas un problème.
Enregistrez votre fichier avec une extension .css.
Dans notre exemple le fichier s'appelle style.css mais vous pouvez lui donner le nom que vous voulez.
Ce qui est important, c'est que vous enregistriez votre nouveau fichier CSS dans le même répertoire que votre page Web HTML actuelle.
Votre dossier devrait ressembler à ceci.
<capture>
Je vous recommande d'utiliser les mêmes noms que moi pour vos fichiers HTML et CSS.
Si vous choisissez de ne pas le faire, assurez-vous que les noms de fichiers et la valeur de l'attribut href correspondent.
Voici ce que vous devriez voir dans votre éditeur de texte.
Les deux fichiers sont actuellement ouverts dans l'éditeur de texte.
Il ne reste plus qu'à voir si la feuille de style est bien appliquée à notre page web.
Double-cliquez sur l'icône du fichier .html pour l'ouvrir dans votre navigateur.
Vous devriez obtenir ce qui suit.
<capture>
C'est nul ! Cela ressemble exactement à tout ce que nous avons fait jusqu'à présent !
C'est parce que nous n'avons pas encore ajouté ou inclus de CSS. N'oubliez pas que notre fichier CSS est vide.
Remédions à cela.
Ouvrez votre document CSS et ajoutez le code suivant.
p
{
color: blue;
}
Ne vous inquiétez pas de la signification de ce code pour le moment.
Rechargez la page Web dans votre navigateur et assistez à la magie du CSS.
Vos paragraphes sont maintenant affichés en bleu.
<capturer>
Les fichiers CSS ne sont pas destinés à être chargés directement dans le navigateur. Si vous ouvrez votre document .css avec un navigateur Web, il affichera simplement votre code sous forme de texte. Seuls les fichiers HTML sont interprétés par le moteur de rendu.
C'est la méthode recommandée pour l'inclusion de code CSS.
Voyons maintenant les deux autres en action.
Écrire du CSS dans l'en-tête
La deuxième façon d'appliquer le CSS consiste à écrire votre code dans une balise <style> au sein de l'élément <head>.
Le code suivant produit exactement le même résultat que la démonstration ci-dessus.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SAGProfProg</title>
<style>
p
{
color: blue;
}
</style>
</head>
<body>
<h1>Bienvenue à SAGProfProg</h1> <p>SAGProfProg est le meilleur site</p>
<p>Je ne sais pas pourquoi SAGProfProg est magnifique.</p> </body>
</html>Testez-le et voyez par vous-même, vous devriez obtenir exactement le même résultat.
Écrire du CSS directement dans une balise
La dernière méthode est la moins recommandée.
Utilisez-le uniquement à des fins de test ou si vous n'avez pas d'autre alternative.
Vous pouvez utiliser l'attribut style sur la balise spécifique que vous souhaitez formater. Il s'agit d'un attribut global, ce qui signifie qu'il fonctionne sur n'importe quel élément HTML.
Écrivez simplement le code CSS que vous souhaitez appliquer comme valeur de l'attribut style.
Cet exemple contient uniquement le code à l'intérieur de l'élément <body>.
<h1>Bienvenue sur SAGProfProg</h1>
<p style="color: blue;">SAGProfProg est le meilleur site du web !</p>
<p>Pourquoi SAGProfProg est-il si <em>génial</em> ? Je ne sais même pas.</p>
Dans ce cas, puisque le CSS a été appliqué au premier élément <p> seul, seul le paragraphe le plus haut sera bleu.
La meilleure méthode d'inclusion de code CSS
Je ne comprends pas pourquoi vous recommandez d'utiliser la première méthode. Pourquoi dois-je créer un nouveau fichier pour CSS ? Je me débrouillais bien avec juste une page .html.
Pour l'instant, il peut sembler que séparer le code HTML et CSS dans deux fichiers distincts est inutile et ne sert qu'à compliquer les choses.
En réalité, loin de compliquer le processus, c'est en fait la solution la plus pratique.
La plupart des sites Web sont composés de plusieurs pages qui partagent un thème CSS commun.
Si vous deviez mélanger du code HTML et CSS dans le même document, vous devriez copier votre style CSS d'une page à l'autre et sur chaque page de votre site Web.
Et l'éditer s'avérerait presque impossible... vous devriez modifier manuellement chaque page.
Alors qu'avec un fichier .css séparé, tout ce que vous avez à faire est de modifier le code une fois pour modifier la conception de l'ensemble de votre site Web.
C'est pourquoi cette méthode est la plus utilisée et celle que je recommande.
Appliquer un style CSS
Nous savons maintenant où écrire le code CSS. Super.
Mais cela ne sera pas très utile à moins que nous sachions écrire du code dans le langage CSS.
Un peu plus tôt je vous ai donné un exemple de code CSS sans plus l'expliquer.
p
{
color: blue;
}
Vous avez probablement deviné sa fonction : ce code affiche chaque paragraphe en bleu.
Le code CSS contient trois éléments essentiels :
- le sélecteur : dans notre cas, nous voulons formater le contenu entre les balises <p>, donc notre sélecteur est p. Les noms de balises (<p>, <h1>, <strong>...) sont des sélecteurs très courants en CSS. N'oubliez pas de retirer les équerres.
- la propriété CSS : l'effet de mise en forme que vous souhaitez modifier. Dans notre cas, c'est la couleur du texte, donc la propriété CSS que nous utilisons est la couleur.
- la valeur de la propriété : la valeur de la propriété CSS susmentionnée. Pour chaque propriété, vous devez spécifier une valeur. Dans notre exemple, nous avons utilisé la propriété color, nous devons donc spécifier une couleur. Dans notre cas, il était bleu.
Pour chaque sélecteur, vous pouvez insérer le nombre de propriétés que vous souhaitez.
La syntaxe est CSS est facile à retenir.
- Vous entrez le sélecteur, par exemple un nom de variable sans les crochets angulaires.
- Vous ajoutez des accolades : { et }.
- Dans ces accolades, vous pouvez modifier autant de propriétés que vous le souhaitez.
- Chaque propriété commence par le nom de la propriété, puis deux-points :, puis la valeur de la propriété associée et enfin un point-virgule ; pour marquer la fin de la ligne.
Notre code CSS signifie donc "Je veux que tous mes paragraphes soient écrits en bleu".
<image>
Mais si nous modifions l'un des trois éléments, soit le sélecteur, la propriété ou la valeur, l'effet d'affichage variera en conséquence.
Essayons de changer le sélecteur.
h1
{
color: blue;
}
Ouvrez à nouveau votre page HTML et vous devriez voir le titre écrit en bleu cette fois.
<capturer>
Nous pouvons également modifier la valeur de la propriété color.
Rendons nos paragraphes rouges.
p
{
color: red;
}
Et le résultat.
<capturer>
CSS est comme de la magie. Presque.
Commentaires en CSS
Comme avec HTML, vous pouvez inclure des commentaires directement dans votre fichier CSS.
Ni les commentaires HTML ni CSS ne sont affichés ou interprétés par le navigateur Web.
Ce ne sont que des notes et des instructions sur votre page Web ou votre feuille de style que vous seul pouvez voir.
Les commentaires CSS sont contenus entre deux marqueurs : /* indique le début d'un commentaire et */ indique sa fin.
Les commentaires en CSS peuvent être placés sur une ou plusieurs lignes, comme le montre l'exemple ci-dessous.
/*
This is my CSS style sheet.
It turns every paragraph red!
*/
p
{
color: red; /* Paragraphs will be red. */
}Les commentaires CSS ne sont pas utilisés très souvent, mais vous devez savoir comment ils fonctionnent au cas où vous auriez besoin de documenter votre code.
Sélecteurs CSS avancés
Parlons un peu des sélecteurs.
Dans ce chapitre, nous avons appris à utiliser CSS pour indiquer au navigateur :
- Je veux que mes titres <h1> soient écrits en bleu.
- Je veux que mes paragraphes <p> soient écrits en rouge.
- Mais qu'en est-il des autres commandes ?
Et si on voulait dire :
- Je veux que mes titres <h1> et mes paragraphes <p> soient écrits en rose.
- Je veux seulement le premier paragraphe <p> écrit en bleu.
- Je veux que chaque emphase <em> dans un titre <h1> soit écrite en rouge.
- Je veux que chaque paragraphe <p> qui suit directement un titre <h1> écrit en vert.
Ce sont des instructions spécifiques inappropriées.
Mais CSS peut-il les exécuter ?
Bien sûr que c'est possible.
Appliquer un style à plusieurs balises
Imaginez que nous voulions que notre titre <h1> et notre texte souligné <em> soient roses.
Vous pouvez très bien utiliser le code suivant.
h1{color: deeppink;}em{color: deeppink;}
Ne vous inquiétez pas pour le rose profond, c'est juste une nuance de rose différente.
Essayez-le et voyez si tout fonctionne.
Cela fonctionne... mais n'est-ce pas un peu répétitif d'écrire chaque balise que vous devez formater ? Et si je veux que trois ou quatre balises soient bleues, dois-je écrire le même code trois ou quatre fois ?
Il s'avère que vous n'avez pas besoin de répéter une partie de votre code.
De la même manière que vous pouvez ajouter plusieurs propriétés CSS à une seule balise HTML (par exemple, la couleur et la taille de la police), vous pouvez également utiliser plusieurs balises HTML comme sélecteur CSS.
Pour combiner deux sélecteurs CSS il suffit de les séparer par une virgule.
h1, em { color: deeppink; }Ce code produit exactement les mêmes résultats que la version plus longue présentée ci-dessus.
Vous avez peut-être remarqué que j'ai légèrement raccourci le code CSS lors de ma dernière démonstration. Plus précisément, j'ai écrit chaque élément (sélecteur, propriété et valeur) sur la même ligne. C'est entièrement facultatif. Pour ce tutoriel, je continuerai à utiliser la structure de code plus longue car elle est plus lisible.
Voici ce que cela devrait vous donner.
<capture>
Vous pouvez formater autant de balises les unes après les autres que vous le souhaitez.
Les attributs class et id
Tout ce que nous avons vu jusqu'à présent manque encore d'un aspect.
Si vous dites au navigateur de rendre vos paragraphes en bleu, alors chaque occurrence de l'élément <p> sera affichée en bleu.
Que se passe-t-il si vous souhaitez que des paragraphes séparés soient formatés différemment ? Et si vous ne voulez que le premier paragraphe soit rose ?
C'est une bonne question.
Vous pouvez toujours utiliser l'attribut style pour appliquer le CSS uniquement à la balise spécifiée, mais nous avons déjà déconseillé cette méthode.
Heureusement, il existe un moyen simple de résoudre ce problème.
Nous pouvons utiliser l'un des deux attributs :
Nous pouvons utiliser l'un des deux attributs :
- l'attribut de classe
- l'attribut id
Ceux-ci sont appelés attributs globaux car ils fonctionnent sur chaque élément HTML (le style est également un attribut global).
Peut-être vous souvenez-vous de l'attribut id du chapitre sur les liens lorsque nous l'avons utilisé pour créer des ancres.
Vous lui avez donné la valeur que vous vouliez et cette valeur a servi d'identifiant pour la balise HTML. La seule exigence était que deux balises ne pouvaient pas partager le même identifiant.
L'attribut class fonctionne de la même manière.
La différence est que vous pouvez partager une classe avec autant d'éléments que vous le souhaitez.
Voici l'exemple d'un paragraphe appartenant à la classe "sagprofprog".
<p class="sagprofprog">SAGProfProg est le meilleur site du web !</p>
Puisque nous utilisons un attribut de classe, nous pouvons l'appliquer à plusieurs éléments HTML.
<h1>Bienvenue sur SAGProfProg</h1>
<p class="sagprofprog">SAGProfProg est le meilleur site du web !</p>
<p>Pourquoi SAGProfProg est-il si
<em class="sagprofprog">génial</em> ? Je ne sais même pas.</p>
Le premier paragraphe (<p>) et l'emphase (<em>) appartiennent à la classe sagprofprog.
Nous pouvons utiliser cet attribut en CSS pour dire : je veux que les balises marquées "sagprofprog" soient écrites en orange.
Pour sélectionner un attribut de classe en CSS, saisissez simplement son nom précédé d'un point . comme sélecteur.
.sagprofprog
{
color: orangered;
}
Testez le résultat.
Seul votre premier paragraphe et l'emphase auront une couleur différente.
<capturer>
L'attribut id est utilisé exactement de la même manière que class.
La seule différence est qu'il est préfixé par un caractère dièse (#) plutôt qu'un point (.) dans la feuille de style CSS.
Voici un code de démonstration HTML.
<h1 id="sagprofprog">Bienvenue sur SAGProfProg</h1>
Et le CSS associé.
#sagprofprog
{
color: blue;
}
En dehors de cela, id fonctionne exactement de la même manière que l'attribut class.
Balises à usage général
Supposons que vous souhaitiez appliquer un format spécifique à certains mots qui n'étaient pas initialement entourés de balises.
Par exemple, regardons le premier paragraphe de notre démo.
<p>SAGProfProg est le meilleur site du web !</p>
Et si nous voulons que le texte "SAGProfProg" s'affiche en rouge ?
Le problème avec la classe et l'id est qu'ils sont des attributs et qu'ils doivent donc être utilisés sur une balise HTML spécifique. Mais il n'y a pas de balise qui entoure le mot "SAGProfProg" seul.
Nous pourrions toujours insérer une balise <em> ou <strong>, ajouter de la couleur et supprimer les effets de texte inhérents (italique ou gras respectivement).
Mais rappelez-vous la règle du développement Web ? HTML est pour le contenu, CSS est pour le style.
Ajouter un élément <em> ou <strong> impliquerait que le texte contenu dans ces balises nécessite une emphase.
Qu'est-ce qu'on a juste besoin de le formater sans le mettre en valeur ?
Heureusement, il existe deux balises dans le langage HTML qui permettent exactement cela : elles sont appelées balises à usage général.
Ces balises partagent la particularité de ne communiquer aucune information sémantique à l'agent utilisateur.
Mais cela ne veut pas dire qu'ils sont inutiles, bien au contraire.
Vous pouvez les considérer comme des éléments d'espace réservé et sont principalement utilisés pour le formatage CSS.
Ce sont les deux balises à usage général qui existent en HTML.
- <span> est un élément en ligne comme <em> et <strong>. Les éléments en ligne ne prennent que la largeur requise et ne commencent pas sur une nouvelle ligne. Ils sont généralement utilisés dans un élément de bloc. C'est la balise que nous utiliserons pour notre exemple.
- <div> est un élément de bloc comme <p> et <h1>. Il signifie "division". Les balises de niveau bloc occupent tout l'espace horizontal de leur conteneur parent, forçant ainsi un nouveau saut de ligne avant et après l'élément.
Nous avons déjà mentionné la dichotomie en bloc et en ligne, vous la connaissez donc probablement déjà.
Pour notre exemple, nous souhaitons que seul le texte "SAGProfProg" soit affecté par CSS, nous utiliserons donc la balise <span>.
<p><span class="sagprofprog">SAGProfProg</span> est le meilleur site sur le Web !</p>
Et le code CSS.
.sagprofprog
{
color: red;
}
Cela devrait vous donner le résultat suivant.
<capturer>
Puisque nous n'appliquons un style qu'à une seule balise, nous pourrions utiliser la classe ou l'id à cette fin, cela ne ferait aucune différence.
Cependant, si nous devions sélectionner deux portions de texte distinctes, nous devions utiliser la classe.
Sélecteurs plus avancés
Vous savez maintenant comment appliquer un style CSS à une seule balise, à plusieurs balises ou à des balises spécifiques marquées par les attributs class ou id.
Voici d'autres moyens de cibler une partie spécifique de votre contenu à l'aide de CSS.
Le sélecteur universel
Que faire si vous souhaitez cibler chaque balise de votre document HTML ?
Utilisez simplement le sélecteur universel *.
* { color:red; }
Ce sélecteur n'est pas utilisé très souvent car la plupart des balises HTML héritent des propriétés CSS de leurs éléments parents.
Vous avez peut-être remarqué que lorsque nous avons rendu nos paragraphes bleus, la balise <em> contenue dans un paragraphe était également affichée en bleu.
Nous n'avons pas eu besoin de stipuler que nous voulions que les éléments <p> et <em> soient bleus car <em> a hérité de la propriété color de son élément parent (<p>).
Comme vous, si vous vouliez que chaque occurrence de texte sur votre page Web soit rouge, vous modifieriez la propriété de couleur sur les balises <body> ou <html> plutôt que d'utiliser le sélecteur universel.
Ce sélecteur a toujours ses utilisations occasionnelles et vous devez au moins savoir qu'il existe au cas où vous en auriez besoin.
Une balise dans une autre
Prenez ce code HTML.
<h3>Bienvenue sur <em>SAGProfProg</em> !</h3>
Et si nous voulons sélectionner le <em> à l'intérieur de l'élément <h3> ?
Techniquement, nous pourrions ajouter un attribut class ou id à l'emphase et y appliquer notre style à la place, mais n'y a-t-il pas un moyen plus simple ?
Découvrons-le.
h3 em { color: red ; }
Ce code sélectionne chaque balise <em> à l'intérieur d'un élément <h3>.
La syntaxe est A B, à ne pas confondre avec A, B qui sélectionne à la fois les éléments A et B indépendamment de leurs conteneurs.
C'est ce qu'on appelle un sélecteur descendant ou sélecteur enfant.
Sélecteur d'enfant direct
Parfois, le sélecteur descendant va un peu trop loin et formate plus que nous ne le voulons.
La raison en est qu'il sélectionne chaque occurrence de la balise A contenue dans l'élément HTML B.
Pour mieux comprendre, regardez le code suivant.
<p>
<span>Pourquoi <span>SAGProfProg</span> est-il si génial ?</span>
</p>
Essayons de formater notre code en utilisant le sélecteur que nous venons d'apprendre.
span { color: blue; }
p span { color: red ; }
Cela indique au navigateur : je veux que chaque <span> soit bleu mais que chaque <span> dans un <p> soit rouge.
Le deuxième style remplace le premier et en effet, notre texte est maintenant rouge.
<capturer>
Tout fonctionne.
Mais attendez... Pourquoi le texte "SAGProfProg" est-il rouge ? Ne devrait-il pas être bleu puisqu'il n'est pas contenu dans un <p> ?
Ce n'est pas tout à fait vrai.
Le texte "SAGProfProg" est contenu dans un <span>, qui est lui-même à l'intérieur d'un <span>... à l'intérieur d'un <p>.
La hiérarchie d'imbrication est la suivante : p > span > span.
Donc techniquement, il est contenu dans un <p>, c'est pourquoi le texte est rouge.
Mais je vois votre point.
Que se passe-t-il si nous voulons sélectionner uniquement les balises qui sont des enfants directs d'un élément parent ?
Dans notre exemple, cela signifierait uniquement formater ceux dont la hiérarchie est p > span et omettre le texte "SAGProfProg".
Pour cela, nous avons le sélecteur d'enfant direct.
Mettons à jour notre code CSS.
span { color: blue ; }
p > span { color: red ; }
Maintenant, vous devriez voir.
<capturer>
Le texte "SAGProfProg" n'est pas affecté par la deuxième ligne de notre CSS donc sa mise en forme revient à la règle d'origine (première ligne) qui s'applique à toutes les balises <span> : texte bleu.
La syntaxe d'un sélecteur enfant direct est A > B.
Il sélectionne chaque instance d'un élément B dont le parent direct est une balise A.
Une balise après l'autre
Revenons à notre page de démonstration.
<h1>Bienvenue sur SAGProfProg</h1>
<p>SAGProfProg est le meilleur site du web !</p>
<p>Pourquoi SAGProfProg est-il si <em>génial</em> ? Je ne sais même pas.</p>
Tout au long de ce chapitre, nous avons vu comment formater le paragraphe uniquement en lui attribuant un attribut class ou id.
Mais est-ce le seul moyen ?
Que se passe-t-il si nous voulons sélectionner chaque paragraphe qui suit immédiatement un titre <h1> ?
Essayez ceci.
h1 + p { color: red ; }
Ce code sélectionne la première balise <p> située après un titre <h1>.
La syntaxe est A + B donc ne la confondez pas avec ce que nous venons d'apprendre ci-dessus.
C'est ce qu'on appelle le sélecteur de frère adjacent.
Sélecteur général de frères et sœurs
Voyons d'abord le code HTML et ensuite les explications.
<p>BLEU</p>
<div>
<p>BLEU</p>
<h3>Bienvenue à SAGProfProg</h3>
<p>ROUGE</p> <!-- This tag -->
<div>
<p>BLEU</p>
</div>
<div>
<h3>LA COULEUR</h3>
<p>ROUGE</p> <!-- This tag -->
</div>
<p>ROUGE</p> <!-- And this tag -->
</div>
<p>BLEU</p>Ce code semble assez explicite.
Vous devez formater chaque balise qui dit "ROUGE" sans modifier le code HTML.
Et avant de demander, il n'y a pas de sélecteur qui permette de marquer un élément en fonction du texte qu'il contient.
La réponse ne prend qu'une ligne de code CSS.
h3 ~ p { color : red ; }
Nous devrions également rendre le texte par défaut bleu, mais j'espère que vous savez comment le faire maintenant.
Alors, c'est quoi ce nouveau sélecteur ?
Il s'appelle le sélecteur de frère général et combine quelques propriétés des sélecteurs que nous avons appris précédemment.
Le sélecteur A ~ B marque toutes les instances des éléments B qui suivent et partagent le même parent en tant que balise A.
Dans notre exemple cela signifie que la balise <p> doit :
- partager le même parent qu'une balise <h3>
- venir après un titre <h3> (mais pas nécessairement directement après)
Essaye le.
Les trois balises indiquant "ROUGE" s'afficheront en rouge. Succès.
Une balise avec un attribut
CSS peut-il sélectionner une balise contenant des attributs spécifiques ?
Découvrons-le.
un[titre] { color : red ; }
Cela affectera chaque balise <a> qui a un attribut de titre quelle que soit sa valeur.
Que faire si vous souhaitez spécifier une valeur ?
a[title="SAGProfProg"] { color : red ; }
Cela n'affectera que les éléments <a> dont l'attribut title a la valeur SiteRaw.
Il ne formatera pas :
- balises autres que <a> (indépendamment des attributs)
- balises sans attribut de titre
- balises dont la valeur de l'attribut title n'est pas SiteRaw
Et enfin, que se passe-t-il si vous voulez qu'il contienne la valeur SiteRaw plutôt que de vérifier la correspondance exacte ?
a[title*="SAGProfProg"] { color : red ; }
Le seul changement est l'ajout d'un astérisque *.
Sélecteurs combinés
Enfin, sachez que vous pouvez combiner plusieurs sélecteurs CSS en un seul méga-sélecteur.
Par exemple, vous pouvez fusionner le sélecteur de type avec le sélecteur de classe.
p.sagprofprog { color: orangered; }
em#sagprofprog { color: orangered; }
Ce code formatera chaque élément <p> de la classe "sagprofprog" et chaque élément <em> de l'identifiant "sagprofprog".
Voici une démonstration.
<p id="sagprofprog">Bienvenue sur
<em id="sagprofprog">SAGProfProg</em>.</p>
<p>Bienvenue sur <em class="sagprofprog">SAGProfProg</em>.</p>
<p class="sagprofprog">Bienvenue sur <em>SAGProfProg</em>.</p>
Essaye le.
Seuls le premier accent et le dernier paragraphe doivent être orange.
<capturer>
Sommaire
Il y a quelques autres cas que nous n'avons pas couverts, notamment ce que nous appelons les pseudo-classes.
Ils méritent presque un chapitre à eux seuls. Nous les aurons bien assez tôt.
Vous n'avez pas à vous souvenir de chaque sélecteur du langage CSS.
La plupart des exemples présentés dans ce chapitre sont à usage situationnel uniquement. Je ne me souviens pas de la dernière fois, s'il y en avait même une, où j'avais besoin de formater les liens contenant un attribut de titre différemment du reste des liens.
Les trois principaux sélecteurs dont vous devez vous souvenir sont les suivants.
<tableau>
Aucun commentaire