Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Les sélecteurs CSS simples Le CSS va nous permettre de mettre en page un conten

Les sélecteurs CSS simples Le CSS va nous permettre de mettre en page un contenu et de changer son apparence en lui appliquant des styles.Pour appliquer un style à un élément HTML, nous allons devoir au préalable le « sélectionner » ou le cibler.Un sélecteur va donc nous permettre de cibler un ou plusieurs éléments HTML afin de leur appliquer un style particulier.Il existe différents types de sélecteurs qu’on appelle sélecteurs « simples » ou « complexes ». Nous allons voir les plus utilisés d’entre eux au cours des chapitres à venir. On appelle également les sélecteurs CSS simple des "sélecteurs éléments", tout simplement car ils reprennent le nom du type d'élément HTML à cibler.Par exemple, si l’on souhaite par exemple appliquer un style particulier à tous les paragraphes de notre page web, nous utiliserons le sélecteur CSS p. Les propriétés CSS Les propriétés vont nous permettre de choisir quel(s) aspect(s) (ou "styles") d’un élément HTML on souhaite modifier.Par exemple, nous allons pouvoir modifier la couleur d’un texte et lui appliquer la couleur que l’on souhaite grâce à la propriété color (« couleur », en français). Une propriété va être accompagnée d’une ou plusieurs valeurs qui vont définir le comportement de cette propriété.Par exemple, la propriété color peut prendre le nom d’une couleur (en anglais). Si l’on donne la valeur « red » (rouge) à notre propriété color, les textes au sein des éléments HTML auxquels on applique cette propriété s’afficheront en rouge. Sélecteurs, propriétés et valeurs en pratique Prenons immédiatement un premier exemple ensemble, afin d’illustrer ce que nous venons de dire et de bien voir comment le CSS fonctionne. p { color:blue; font-size: 14px; } Dans l’exemple ci-dessus, nous utilisons le sélecteur CSS simple p qui va cibler tous les paragraphes de notre page HTML.Ensuite, vous remarquez que nous utilisons deux propriétés color (couleur) et font-size (taille de la police d'écriture) pour modifier nos paragraphes.Nos paragraphes vont dorénavant s’afficher en bleu (blue) et notre texte va avoir une taille égale à 14 pixels (14px). Profitez-en pour déjà noter la syntaxe du CSS et apprendre un peu de vocabulaire : on appelle le couple « propriété : valeur » une déclaration en CSS.Chaque déclaration doit être séparée d’une autre par un point virgule On place toutes les déclarations relatives à un sélecteur à l’intérieur d’un couple d’accolades. Cela permet au CSS de savoir à quel sélecteur il doit appliquer les styles correspondants. Premières explications Lorsque l’on code, vous devez bien vous dire que rien n’est « magique » : tout le code que vous écrirez dans votre vie reposera sur des règles et des mécanismes. Les connaître vous permettra de beaucoup mieux comprendre ce que vous faîtes et comment faire telle ou telle chose.Comme nous l’avons vu dans la partie précédente, on va utiliser des sélecteurs en CSS afin d’appliquer des styles, c’est-à-dire afin de modifier l’apparence d’éléments HTML. Cependant, il va falloir d’une manière ou d’une autre « lier » notre code CSS à notre code HTML afin que les éléments de nos pages HTML tiennent bien compte des styles qu’on a voulu leur appliquer en CSS.Pour faire cela, nous allons pouvoir écrire le code CSS à trois endroits différents. Chaque méthode va présenter des avantages et des inconvénients selon une situation donnée. La première façon d’écrire du code CSS va être à l’intérieur même de notre page HTML, au sein d’un élément style.De cette façon, le code CSS ne s’appliquera qu’à la page HTML dans laquelle il a été écrit.Cette première méthode d’écriture du CSS n’est pas recommandée, pour des raisons de maintenance et d’organisation du code en général.Nous la voyons dans ce cours à titre d’exemple, afin que vous sachiez l’identifier si un jour vous voyez du code CSS écrit de cette façon dans un fichier. L’élément style sera en général placé en haut de notre page HTML, à l’intérieur même de l’élément head. <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>titre de la page</title> <link rel="stylesheet" href="depart.css"> <style> body{ background-color: orange; } p{ color:blue; font-size: 16px; } </style> </head> <body> <h1>Que d'erreurs dans cette page !</h1> <p>Mon premier paragraphe</p> <p>Mon second paragraphe ?</p> <p>Mon troisième paragraphe.</p> <p> Voici <a href=http://www.google.fr>un lien pour Google</a>.</p> </body> </html> Ici, je commence donc par créer un élément style que je place dans l’élément head de ma page HTML. Ensuite, j’écris mon CSS à l’intérieur de cet élément style.Je commence par appliquer une couleur de fond orange à mon élément body (c’est-à-dire à toute la partie visible de ma page) avec la propriété CSS background-color en le ciblant avec le sélecteur CSS body. Ensuite, je change la couleur et la taille du contenu de tous les éléments p de ma page HTML. Mes paragraphes auront désormais une taille égale à 16 pixels et s’afficheront en bleu. Nous pouvons également écrire notre code CSS à l’intérieur de la balise ouvrante de nos éléments HTML.Pour faire cela, nous utiliserons cette fois-ci un attribut style (à ne pas confondre avec l’élément style). Cet attribut va prendre comme valeur les différentes déclarations CSS relatives à l’élément.Avec cette seconde méthode, les styles CSS ne s’appliqueront qu’à l’élément au sein duquel est écrit le CSS. Cette méthode d’écriture du CSS, bien qu’elle puisse parfois être pratique, n’est également pas recommandée et est à éviter tant que possible. <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>titre de la page</title> <link rel="stylesheet" href="depart.css"> <style> body{ background-color: orange; } p{ color:blue; font-size: 16px; } </style> </head> <body> <h1>Que d'erreurs dans cette page !</h1> <p style="color:red;font-size: 30px; ">Mon premier paragraphe</p> <p>Mon second paragraphe ?</p> <p>Mon troisième paragraphe.</p> <p> Voici <a href=http://www.google.fr>un lien pour Google</a>.</p> </body> </html> Comme vous pouvez le voir ci-dessus, seul notre premier paragraphe a été modifié cette fois-ci. Finalement, nous pouvons écrire notre code CSS dans un fichier séparé portant l’extension « .css ». C’est la méthode recommandée, qui sera utilisée autant que possible.Cette méthode comporte de nombreux avantages, notamment une meilleure maintenabilité du code grâce à la séparation des différents langages, ainsi qu’une meilleure lisibilité.Cependant, le plus gros avantage de cette méthode est qu’on va pouvoir appliquer des styles à plusieurs pages HTML en même temps, d'un seul coup. En effet, en utilisant l'une des deux premières méthodes, nous aurions été obligés de réécrire tout notre code CSS pour chaque nouvelle page HTML composant notre site.Ici, nous allons pouvoir lier notre fichier CSS à autant de fichiers HTML que nous le voulons. Ainsi, lorsque nous voudrons modifier, par exemple, la couleur de tous les paragraphes, nous n’aurons à le faire qu’une fois pour toutes.Nous allons donc commencer par créer un fichier CSS qu’on va appeler styles.css. Nous allons enregistrer ce fichier et le placer dans le même dossier que notre page HTML pour plus de simplicité. p{ color:blue; font-size: 14px; } body { background-color: orange; } Nous travaillons donc dorénavant avec deux fichiers : un fichier que j’ai appelé depart.html et notre fichier depart.css.Nous allons maintenant finalement devoir lier notre fichier CSS à notre fichier HTML. Pour cela, nous allons utiliser un nouvel élément HTML : l’élément link (« lien », en français).Cet élément va avoir besoin de deux attributs : rel, qui va préciser le type de fichier (dans notre cas, ce sera « stylesheet » pour feuille de style) et un attribut href qui va indiquer l’adresse relative du fichier CSS. On va placer l’élément link dans l’élément head de notre fichier HTML. Cet élément prend la forme d’une balise orpheline. <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>titre de mon site</title> <link rel="stylesheet" href="depart.css"> </head> <body> <h1>Que d'erreurs dans cette page !</h1> <p>Mon premier paragraphe</p> <p>Mon second paragraphe ?</p> <p>Mon troisième paragraphe.</p> <p> Voici <a href=http://www.google.fr>un lien pour Google</a>.</p> </body> </html> Nos deux fichiers sont maintenant liés et les styles CSS vont bien être appliqués aux éléments de notre page HTML. Les commentaires, le retour Tout comme nous avons vu qu’on pouvait écrire des commentaires en HTML, nous allons également pouvoir commenter notre code CSS.Les commentaires n’influent une nouvelle fois en rien sur le code et ne sont pas visibles par les utilisateurs. Commenter le code CSS n’est pas une option : cela va très vite devenir indispensable car vous allez vous rendre compte que les fichiers CSS s’allongent très vite. Il est donc essentiel de bien organiser et de bien commenter son code CSS afin de ne pas faire d’erreur en appliquant par exemple deux styles différents à un même élément. La syntaxe des commentaires en CSS est totalement différente de celle des commentaires en HTML. Nous écrirons de la même manière un commentaire mono-ligne ou multi-lignes en CSS. /* Commentaire sur une ligne*/ p{ color:blue; font-size: 14px; } /*Commentaire sur plusieurs lignes */ body { background-color: orange; } Vous pouvez également remarquer une utilisation intéressante des commentaires et qui est très commune en CSS : le fait de commenter une déclaration CSS.En effet, vous voudrez parfois supprimer momentanément une déclaration CSS, pour effectuer des tests par exemple. Plutôt que de l’effacer complètement, vous pouvez la commenter. Ainsi, la uploads/s3/ 03-les-bases-en-css.pdf