CSS : feuille de style.
Cours : CSS : feuille de style.. Recherche parmi 300 000+ dissertationsPar Ben67207 • 22 Mars 2021 • Cours • 1 362 Mots (6 Pages) • 489 Vues
CSS : feuille de style.
CSS : CascadingStyleSheets ou feuille de style en cascade. Le CSS a été créé en 1996, afin de mettre en forme du contenu. Par exemple pour changer la taille d’un texte, sa couleur, son alignement ; pour enjoliver le code html.
- Lien avec le HTML.
Les sélecteurs vont nous permettre de cibler ou de sélectionner du contenu HTML tandis que les propriétés vont nous permettre d’altérer l’aspect visuel de ces éléments HTML.
Voir le site : http://www.csszengarden.com/ [pic 1][pic 2] On peut voir le site SANS CSS en cliquant ici | [pic 3] |
Grâce au HTML, nous avons pu rédiger le contenu de notre site mais il est brut de décoffrage. Le CSS vient compléter ce code pour mettre en forme tout cela et donner au contenu l'apparence que l'on souhaite.
- Propriété, valeur et sélecteur.
Pour voir comment fonctionne le CSS, on ajoute deux nouveaux paragraphes et une balise style dans l’entête qui va indiquer que la couleur d’écriture d’un paragraphe devra être bleu (blue).
<!doctype html>
<html lang="fr">[pic 4]
<head>
<title>image</title>
<meta charset="utf-8">
<style>
p{
color:blue;
}
</style>
</head>
<body>
<h1> image</h1>
<p> un premier paragraphe</p>
<imgsrc="hibou.jpg" alt="hibou"/>
<p>Un second paragraphe</p>
</body>
</html>
Remarque : il vous faut bien sûr une image nommée hibou.jpg si vous voulez un joli résultat !
Tous les paragraphes sont en bleu, on cible le sélecteur p qui correspond au paragraphe.
Dans un code CSS, on trouve trois éléments différents :
- Des noms de balises (un sélecteur) : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si je veux modifier l'apparence de tous les paragraphes<p>, je dois écrire p.
- Des propriétés CSS : les « effets de style » de la page sont rangés dans des propriétés. Il y a par exemple la propriétécolorqui permet d'indiquer la couleur du texte,font-sizequi permet d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS.
- Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriétécolor, il faut indiquer le nom de la couleur. Pourfont-size, il faut indiquer quelle taille on veut, etc.
Si on veut mettre les titres h1 en caractère souligné.
<style>
p{
color:blue;
}
h1{
text-decoration:underline;
}
</style>
- Où écrire le CSS ?
Pour le moment, vous faites vos tests sur un seul fichier HTML. Cependant, votre site sera plus tard constitué de plusieurs pages HTML.
Imaginez : si vous placez le code CSS directement dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML de votre site ! Et si demain vous changez d'avis, par exemple si vous voulez que vos paragraphes soient écrits en rouge et non en bleu, il faudra modifier chaque fichier HTML un à un, comme le montre la figure suivante.
...