Appel CSS

Dans la balise

balise style="déclaration des styles"

Dans la page

dans la partie HEAD :

style

déclaration des styles

/style

Dans un fichier externe

appel du fichier dans la partie HEAD :

link rel="stylesheet" href="styles.css" type="text/css"

Longueurs

Relatives liées à la police

em : taille de la police courante

rem : taille de la police courante de l'élément racine (root em)

ex : hauteur du x de la police courante (1ex = 0.5em souvent)

ch : largeur du zéro de la police courante

Relatives liées à l'afficheur"

vh : 1/100e de la hauteur de l'afficheur (viewport height)

vw : 1/100e de la largeur de l'afficheur (viewport width)

vmin : 1/100e de la valeur minimale entre hauteur et la largeur de l'afficheur

vmax : 1/100e de la valeur maximale entre hauteur et la largeur de l'afficheur

Absolues

in : inches

cm : centimètres

pt : points (1 inch = 72pt)

px : pixel

Sélecteurs

selecteur { propriété1 ; propriété2 ; ... }

Modéle CSS 2	Signification dans la page HTML
`.identifiant`	Balise ayant `class="identifiant"`
`#identifiant`	Balise ayant `id="identifiant"`
`*`	Toutes les balises
`div`	Toutes les occurrences de `div`
`div , p`	toutes les balises `div` et `p`
`div p`	toutes les balises `p` dans `div`
`div > p`	Balise `p` fille directe de Balise `div`
`div + p`	Balise `p` précédée par Balise `div` --- (en fait `/div`)
`div[title]`	Balises `div` ayant l'attribut `title`
`div[title="Compte"]`	Balises `div` ayant l'attribut `title="Compte"`
`div[title~="Compte"]`	Balises `div` ayant la suite de caractères `Compte` dans l'attribut `title`. (Exemple `title="Compte courant"`)
`a:link`	Lien non visité
`a:visited`	Lien visité
`balise:active`	Balise activée par l'utilisateur ( `a` ou `button` )
`balise:hover`	Balise survolée
`balise:focus`	Balise courante (zone de saisie par exemple `input`)
`p::first-letter`	la première lettre après la balise `p`
`p::first-line`	la première ligne après la balise `p`
`p::selection`	quand la balise `p` est sélectionnée
`div::before`	contenu généré avant la balise `div` (par `content` par exemple)
`div::after`	contenu généré après la balise `div` (par `content` par exemple)
`p:first-child`	chaque première occurrence de la balise `p`
Modéle CSS 3	Signification
`div[title^="Compte"]`	Balises `div` ayant l'attribut `title` commençant par `Compte`
`div[title$="Compte"]`	Balises `div` ayant l'attribut `title` finissant par `Compte`
`div[title*="Compte"]`	Balises `div` dont l'attribut `title` contient le mot `Compte`
`p:only-child`	la balise `p` est la seule fille.
`p:nth-child(n)`	la balise `p` est la nième fille (toutes balises confondues, pas la nième balise `p`)
`p:nth-of-type(n)`	la balise `p` est la nième fille parmi les balises `p`
`p:last-child`	la balise `p` est la dernière fille.
`div:empty`	la balise `div` est vide

Propriétés Personnalisées

Principe

Les noms des propriétés qui sont préfixés par deux tirets : -- (par exemple : --nom-exemple) représentent des propriétés personnalisées (custom properties) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction var . Cela peut permettre de définir une couleur en début de document et donc de la modifier facilement, par exemple.

Cette fonction est expérimentale.

Utilisation

:root { --couleur: blue ; --fond: yellow }

body { color: var(--couleur) ; background-color: var(--fond) ; }