p { color: red; font-size: 16px; }.; final est facultatif sur la dernièresélecteur { propriété: valeur; ... }]]><sélecteur propriété="valeur">]]>sélecteur (propriété = valeur)]]>sélecteur -> propriété -> valeur]]><p> ?]]>h1, p,div...). Il sélectionne tous les élémentsp { ... }]]><>).]]><p> { ... }]]>#p { ... }]]># désigne un id, pas un.p { ... }]]>. désigne une classe.]]>class="bouton" ?]]>bouton { ... }]]>@bouton { ... }]]>@ introduit des règles@media, @import...).]]>#bouton { ... }]]># désigne un id (élément.bouton { ... }]]>id="navigation" ?]]>.), id (#). On peut lesp.important (paragraphes ayantnavigation { ... }]]>.navigation { ... }]]>. désigne une classe.]]>*navigation { ... }]]>* est le sélecteur universel#navigation { ... }]]>#) désignecolor (texte) etbackground-color (fond). Plusieurs syntaxesred),#ff0000), rgb, rgba, hsl.]]>background]]>background (oubackground-color) change la couleur de fond, pas du texte.]]>color]]>color: red;,color: #ff0000;, color: rgb(255, 0, 0);.]]>font-color]]>text-color]]><link>), interne (<style>), inlinestyle="..."). L'externe est la meilleure.css séparé, lié via <link>]]>style="..."]]><style> à la fin du <body>]]>em, rem) pour lapx pour les élémentsfont-size]]>font-size: 16px;,font-size: 1.2em;. Unités courantes :px (pixel), em (relatif au parent),rem (relatif à la racine), %.]]>large]]>large est une valeur, pasfont-size: large;).]]>size]]>text-size]]>/ commentaire /]]>// commentaire]]>//.]]>-- commentaire]]># commentaire]]>style.css à une pagestyle.css oumain.css. Pour des styles spécifiques à<import rel="stylesheet" href="style.css">]]>@import mais c'est en CSS, pas en HTML.]]><style src="style.css" type="text/css">]]><style> n'a pas d'attributsrc. Il sert à inclure du CSS interne.]]><css rel="stylesheet" href="style.css" />]]><css> n'existe pas.]]><link rel="stylesheet" href="style.css">]]><link> avecrel="stylesheet" (relation = feuille dehref (chemin). À placer dans<head>.]]>!important outrepassecolor, font-family oui ; border,padding, margin non. Forcerinherit.]]>color estbody { color: blue; } rendemrem (relative à laem]]>1.2em vaut 120 % de larem]]>rem est relatif à la<html>), pas au parent.]]>cm]]>px (pixel)]]>nav a (avec un (descendant), > (enfant+ (frère adjacent), ~ (frère)., pour grouper plusieurs sélecteurs.]]><a> après un <nav>]]>nav + a (frère adjacent).]]><a> descendants d'un <nav>]]>nav > a.]]>nav a<nav> et <a>]]>nav,a (virgule) qui cibleraitnav et a.]]>#rrggbb), rgb/rgba (transparencered, #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)]]>red et #ff0000, pas les deux autres]]>rgb(255, 0, 0), la plus précise]]>rgb(255, 0, 0)red, le code#ff0000 etp { color: blue; }
p { color: red; }<p>Texte</p>pclass est découpéclass="bouton,primaire".classe = catégorie (peut#id = identifiant.) peut êtrebox-sizing: content-box) :
p {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 15px;
}Quelle largeur totale ce paragraphe occupe-t-il
horizontalement, marges comprises ?
box-sizing: content-box (défaut), lawidth + padding + bordures.box-sizing: border-box change lawidth inclut alors padding etcontent-box), width ne désigne que la<p class="alerte" id="principal">Texte</p>
Trois règles CSS sont définies dans la même feuille de style :
- p { color: blue; }
- .alerte { color: orange; }
- #principal { color: red; }
De quelle couleur le mot « Texte » s'affichera-t-il ?
]]>style="...") est encore!important permet d'outrepasser!important et qu'il n'y a pas de style en ligne,#principal) l'emporte sur la classe (.alerte),p).]]>p est le plus général donc le plus prioritaire]]>width: 200px; padding: 20px; border: 2px solid black; margin: 10px;
Avec box-sizing: border-box, quelle est la
largeur rendue de la boîte (zone occupée à
l'écran par le contenu, le padding et la bordure,
sans inclure la marge externe) ?
border-box, la largeur rendue est directementcontent-box (défaut), elle vaut, ::before, *::after
{ box-sizing: border-box; } dans leur feuille dewidth fixe directement la largeur rendue]]>border-box, la largeurcontent-box, où padding et bordurewidth. En border-box, ils sontwidth.]]>