Structure |
||
| <html></html> |
Élément racine. |
|
| <head></head> |
Élément délimitant les informations destinées au navigateur : n’apparaît pas sur la page |
|
| <body></body> |
Élément délimitant le "corps" de la page, autrement dit le contenu visible de la page web. |
|
Head |
||
| <meta /> |
Élément spécifiant une information de type méta (destinée aux navigateurs ou aux robots crawlers) comme l’encodage. |
|
| <title></title> |
Élément délimitant le titre de la page, apparaissant en tête de l’onglet. |
|
| <link /> |
Élément spécifiant un lien une ressource externe, telle qu’une feuille de style CSS. |
|
Body |
||
| <h1></h1> |
Élément délimitant un titre de niveau 1 (h eader 1) |
|
| <h2></h2> |
Élément délimitant un titre de niveau 2 (h eader 2) |
|
| <h3></h3> |
Élément délimitant un titre de niveau 3 (h eader 3) |
|
| <p></p> |
Élément délimitant un paragraphe. |
|
| <ul></ul> |
Élément délimitant une liste non ordonnée. |
|
| <ol></ol> |
Élément délimitant une liste ordonnée. |
|
| <li></li> |
Élément délimitant un point d'une liste. |
|
| <img> |
Élément permettant d'insérer une image, locale ou distante, par le biais de l'attribut src (qui sert à spécifier le chemin vers l'image). |
|
| <figure></figure> |
Élément permettant de délimiter une image et sa légende. |
|
| <figcaption></figaption> |
Élément permettant de délimiter la légende d'une image. |
|
Texte |
||
| <a></a> |
Élément encdrant les hyperliens, dont l’adresse est spécifié dans l’attribute 'href'. |
|
| <em></em> |
Élément délimitant un texte en italique. |
|
| <sup></sup> |
Élément délimitant un texte en exposant. |
Élément |
||
| width |
Définit la largeur d’un élément. |
|
| height |
Définit la hauteur d’un élément. |
|
| overflow |
Définit le comportement d’un élément dont la hauteur est définie lorsque le contenu dépasse les limites de cet élément (anglais overflows). Par défaut le contenu est visible mais il est possible de la cacher ou d'ajouter un scroll à l’élément en cas de dépassement. |
|
| overscroll-behavior |
Permet de contrecarrer le bouncing effect appliqué par défaut par les navigateurs mobiles. |
|
| background-color |
Définit la couleur de fond d’un élément. |
|
| background-image |
Définit l’image de fond d’un élément. |
|
| background-position |
Définit la position d’une image de fond. |
|
| background |
Raccourcis pour modifier tous les paramètres de fond en une seule commande. |
|
| border-radius |
Définit le rayon d’un cercle selon lequel les coins de l'élément seront arrondis. |
|
| border |
Raccourcis pour modifier tous les paramètres de contour (taille, couleur, type) pour les quatre côtés d’élément. |
|
| box-shadow |
Ajoute une ombre portée à un élément. |
|
| box-sizing |
Grâce à la valeur border-box, permet d’intégrer le compte des margin et padding dans la longueur d’un élément (par défaut ceux-ci sont ajoutés). Très utile. |
|
| padding |
Définit l’espace entre le contenu d’un bloc et son contour / ses limites. |
|
| margin |
Définit l’espace entre la bordure, les limites d'un bloc et les éléments voisins (espace autour du bloc). |
|
Mise En Page |
||
| display |
Définit le comportement d’un élément ou de ses éléments enfants à l’intérieur d’un flux. Par défaut, les valeurs que prend cette propriété conditionnent le comportement de l’élément lui-même : block (l’élément s'étend sur toute la largeur du parent) ou inline (la largeur de l’élément correspond à la largeur de son contenu). Parmi les valeurs possibles, flex (flexboxs) et grid (CSS grids) permettent de conditionner non pas le comportement des éléments eux-mêmes mais le flux des éléments enfants. |
|
| column-count |
Modifie le nombre de colonnes entre lesquels les éléments enfants d’un élément se disposent. |
|
| column-gap |
Modifie la taille de la gouttière entre les colonnes. |
|
| colmun-fill |
Modifie la répartition verticale du contenu. |
|
| columns |
Raccourcis pour spécifier tous les paramètres de colonnes relatives à un élément en une seule commande. |
|
| position |
Définit le comportement de l’élément quant au flux (si oui ou non l’élément fait partie du flux normal, et s’il en est extrait, quels seront les points de références quant à son positionnement). Modifier la position permet de placer des éléments absolument (absolute), fixement (fixed), relativement (relative) ou par défaut, statiquement (static). |
|
| top |
Définit la distance entre un élément en position fixed ou absolute et le haut de la fenêtre, ou le haut de l'élément parent si celui-ci est en position relative. |
|
| right |
Définit la distance entre un élément en position fixed ou absolute et le bord droit de la fenêtre, ou le bord droit de l'élément parent si celui-ci est en position relative. |
|
| bottom |
Définit la distance entre un élément en position fixed ou absolute et le bas de la fenêtre, ou le bas de l'élément parent si celui-ci est en position relative. |
|
| left |
Définit la distance entre un élément en position fixed ou absolute et le bord gauche de la fenêtre, ou le bord gauche de l'élément parent si celui-ci est en position relative. |
|
| z-index |
Définit la position de l’élément en position fixed ou absolute sur l’axe Z. Utile pour gérer les superpositions. |
|
Texte |
||
| color |
Modifie la couleur du texte d’un élément (par défaut noir). |
|
| font-size |
Modifie le corps de texte d’un élément (par défaut 16px). |
|
| line-height |
Modifie l’interlignage d’un élément (par défaut 1,2 fois la taille du corps). |
|
| letter-spacing |
Modifie l’interlettrage d’un texte. |
|
| text-decoration |
Permet de souligner, barrer, créer un filet au-dessus d’un texte, et de définir la nature de ce filet (continu, pointillés, vaguelettes...). |
|
| font-stretch |
Permet d’étendre ou de condenser la font d’un texte. |
|
| hyphens |
Définit la présence ou non de césures dans un élément. |
|
| word-break |
Définit le comportement de césure des mots lorsqu'il n'y a aucune opportunité de césure dans un élément. |
|
| word-spacing |
Modifie la taille de l’espace entre les mots dans un élément. |
|
| text-align |
Comportement du texte : ferré à gauche, droite, justifié (éviter la justification). |
|
Transformations |
||
| transform |
Applique une ou plusieurs transformations (modification d'échelle verticale, horizontale, déplacement, rotation...) à un élément. |
|
| filter |
Applique un filtre (inverser, flou, niveaux de gris...) à un élément. |
|
| backdrop-filter |
Définit un effet de filtre sur le fond (et seulement le fond) d’un élément superposé à un autre. |
|
| mix-blend-mode |
Applique un filtre de fusion (produit, différence, éclaircir...) à un élément et son fond. |
|
| perspective |
Combiné avec transform, applique un effet de perspective aux éléments enfants d’un élément. |
Sélection |
||
| document.getElementById(id) |
Permet de sélectionner l'élément HTML dont l’id correspond à l’id spécifié comme argument.
Élement HTML |
|
| element.querySelector(sélecteurs) |
Permet de sélectionner le premier élément HTML descendent de l'élément qui correspond à la description du sélecteur.
Élement HTML |
|
| element.querySelectorAll(sélecteurs) |
Permet de sélectionner tous les éléments HTML descendants qui correspondent à la description du sélecteur.
|
|
| element.getElementsByClassName(class) |
Permet de sélectionner tous les éléments HTML descendants qui correspondent à la description du sélecteur.
|