Home > Développement > CSS > Général

Général

Général

Les unités absolues

  • Centimètre : cm ;
  • Millimètre : mm ;
  • Pouce : in (1 in = 2.54 cm) ;
  • Point : pt (1/72 in = 0.352 778 mm) ;
  • Pica : pc (1 pc = 12 pt = 4.233 mm).

Les unités relatives

Les polices de caractères :

  • Police de l’élément parent : em ;
  • La lettre x minuscule de l’élément parent : ex.

La taille de l’écran et la résolution employée : px ;

La dimension d’un élément parent ou une autre dimension du même élément : %.

Les conversions sont approximatives et dépendent des navigateurs comme des OS et de la famille de caractères.

Règles @

La règle @import inclut une feuille de styles CSS au sein d’une autre feuille de styles. Cette règle doit absolument être placée en tête du fichier sous peine d’être invalide.

@import url(css/feuille2.css);

La règle @media indique qu’un bloc de règles ne concernera que des périphériques de sortie déterminés. Les principaux médias reconnus sont all (tout média), aural et speech (synthèses vocales), handheld (mobiles), print (imprimantes), projection (projecteurs), screen (écrans d’ordinateurs).

@media screen { 
    body {
        background: url(photo.jpg); 
    }
}
@media print { 
    body {
        background: #FFFFFF; 
    } 
}

À savoir : Safari Mobile se comporte en screen.

Pseudos

Pseudo éléments

:first-line /* première ligne de l’élément */
:first-letter /* première lettre de l’élément */
:first-child/:last-child /* premier/dernier enfant de l’élément */
:first-of-type/:last-of-type /* premier/dernier élément du type de l’élément de son parent */
:before/:after /* placer du contenu avant/après l’élément */
content : " … " ;
content : url() ;

Pour différencier les pseudos éléments des pseudo-classes :

::before, ::after… 

Pseudo-classes

:hover /* élément survolé par le curseur */
:active /* élément cliqué par la souris */
:focus /* élément sélectionné par la touche tabulation */
:link /* lien non visité */
:visited /* lien visité */
:target /* élément étant la cible d’un lien (ancre) */
:lang(string) /* cible l’élément en fonction de la langue */
:empty /* balise vide */
:blank /* balise vide avec un espace ou un commentaire */
:not() /* élément exclu par le sélecteur donné */

Pseudo-classes pour les formulaires

:checked /* élément coché */
:enabled/:disabled /* élément activé/désactivé */
:indeterminate /* élément avec un état indéterminé (coché ou pas) */
:read-only/:read-write /* élément non éditable / élément éditable par l’utilisateur */
:valid/:invalid /* élément dont le contenu est valide/invalide (champ) */
:optional/:required /* élément optionnel/requis à la validation du formulaire */
:in-range/:out-of-range /* élément dont la valeur est dans les limites ou non (préciser min et max en HTML) */

Sélecteurs

Ordre de priorité

#id > .class > balise

Sélecteurs parents

Le symbole > entre deux sélecteurs élémentaires précise que la descendance doit être immédiate.

Sélecteurs frères

Le symbole + entre deux sélecteurs élémentaires précise que le second est le frère immédiat du premier => sélecteur d’adjacence directe.

Le symbole ~ entre deux sélecteurs élémentaires précise que le second est un frère (au même rang) du premier mais pas forcément immédiat sélecteur d’adjacence indirecte.

Le n-ième d’une fratrie

:nth-child(odd) /* Les éléments impairs  */
:nth-child(even) /* Les éléments pairs */ 
:first-child /* Le premier élément */
:last-child /* Le dernier élément */ 
:nth-last-child(2) /* L’avant dernier élément */
:nth-child(5) /* Le 5ème élément */
:nth-child(-n+5) /* Les 5 premiers éléments */
:nth-child(n+6) /* Tous les éléments sauf les 5 premiers */ 
:nth-child(4n+1) /* Un élément sur 4 */

Sélecteur d’attribut

[attr] /* Un attribut */
[attr="value"] /* Un attribut avec une valeur */
[attr~="value1 value2"] /* Un attribut dont la valeur appartient à une liste de valeurs séparées par des espaces */
[attr^="value"] /* Un attribut dont la valeur commence par value */
[attr$="value"] /* Un attribut dont la valeur se finit par value */
[attr*="value"] /* Un attribut dont la valeur contient value */
not([attr]) /* Les éléments n’ayant pas cet attribut */

Propriétés

Background-attachment

Position du fond :

scroll /* l'image d'arrière-plan se déplace quand on scrolle (valeur par défaut) */
fixed /* l'image d'arrière-plan reste en place quand on scrolle */
local /* l'image de fond ne se déplace pas quand l'élément qui la contient scroll, mais avec le défilant de son contenu */
valeur, valeur /* plusieurs valeurs ci-dessus séparées par une virgule pour les images de fond multiples */
inherit

Background-position

Gestion de la position de l’image de fond :

numérique /* valeur x et valeur y */
top-left /* valeur par défaut */
top 
top center
right 
right center 
right top 
left 
left center 
center 
bottom 
bottom center 
bottom left 
bottom right

Box-sizing

Permet de déterminer comment width et height sont calculés :

content-box /* valeur par défaut */
padding-box /* padding et border ajoutés à width et height (valeur déconseillée) */
border-box /* width et height incluent padding et border */

Pour appliquer à toute la page :

*, *::after, *::before {
    box-sizing: border-box;
}

Display

Manière dont un élément est affiché :

none /* élément masqué à l’affichage */
block /* les éléments se placent les uns en dessous des autres, occupent toute la largeur du conteneur, dimensionné avec */
inline /* les éléments se placent les uns à côté des autres, la taille s’ajustera au texte qu’ils contiennent, marges latérales applicables */
inline-block /* les éléments se placent les uns à la suite des autres et peuvent être redimensionnés */
table/table-raw/table-cell /* même rendu visuel qu’un tableau/ses lignes/ ses cellules */
flex/inline-flex /* pour définir le flex-container */

Par défaut :

span, em, strong, imp, br, input, … /* inline */
div, p, h1, ul, ol, table, pre, … /* block */

En règle générale :

  • Un élément de type block peut contenir un ou plusieurs éléments block ou inline. Il possède des marges internes et externes non nulles reset général des marges.
  • Un élément de type inline ne peut contenir qu’un ou plusieurs éléments inline.

Flex Box

Sheet PDF

List-style-position

Aligne à gauche d’une liste :

inside /* après le retour à la ligne, alignement au début de la puce */
outside /* après le retour à la ligne, alignement à la fin de la puce. Valeur par défaut */

Visibility

Visibilité de la boîte :

visible /* l’élément est visible */
hidden /* l'élément est invisible */
collapse /* l'élément est invisible mais la place qu'il occupe est perdue. Ne s'applique qu'à certains éléments */