prog:css
Ceci est une ancienne révision du document !
Table des matières
Insertion dans une page
- Via un fichier css
Cela s'insère dans la partie head
.
<head> <link rel="stylesheet" href="styles.css" /> </head>
- Directement dans
<head>
Non recommandé.
<head> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head>
- Directement dans le code HTML
Non recommandé.
<h1 style="color: blue;background-color: yellow;border: 1px solid black;"> Hello World! </h1> <p style="color:red;">Ceci est mon premier exemple CSS</p>
Syntaxe
On définit une liste de balises html avec ses propriétés CSS.
h1 { color: red; }
Fonctions principales :
- Il est possible de mettre une liste de balises en les séparant par des
,
.
class
: pour désigner une classe, il faut préfixer le nom de la classe par un point.
- Pour désigner une balise qui a un nom de classe précis, il faut mettre
balise.nom_de_classe
.
- Hiérarchie : séparer les désignations par un espace.
- Succession : si on veut désigner une balise qui est précédée par une autre balise, c'est
+
.
- État : ou événement (changement d'état) c'est
:
.
- Id : comme
class
sauf que lesid
sont uniques. C'est#
.
li { list-style-type: square ; } p, .special { color: orange; font-weight: bold; } li.special { font-size: 1.2em; } ul li, em + em { color: red; } a:link { color: pink; } #titleh2 { font-size: 2em; } <h2 id="titleh2">Titre</h2> <p>This is the second second <a href="http://example.com">link</a>. It contains an <em>emphasized</em> <em>element</em>.</p> <ul> <li>Item one</li> <li class="special">Item deux</li> </ul> | |
Rendu
Ordre de priorité
Dans le CSS, certaines règles peuvent être contradictoires.
La priorité (par ordre décroissant) est donc : l'id, la classe, l'élément, l'ordre dans la feuille de style.
Selector | Identifiers | Classes | Elements | Total specificity |
---|---|---|---|---|
h1 | 0 | 0 | 1 | 0-0-1 |
h1 + p::first-letter | 0 | 0 | 3 | 0-0-3 |
li > a[href*="en-US"] > .inline-warning | 0 | 2 | 2 | 0-2-2 |
#identifier | 1 | 0 | 0 | 1-0-0 |
button:not(#mainBtn, .cta) | 1 | 0 | 1 | 1-0-1 |
Cascade, specificity, and inheritance Archive du 01/01/2024 le 01/04/2024
prog/css.1712004568.txt.gz · Dernière modification : 2024/04/01 22:49 de root