К содержанию

Tutoriel HTML et CSS pour débutants

Un tutoriel simple sur la création de pages web avec les langages HTML et CSS pour les débutants, avec une théorie détaillée et un livre de problèmes.

Fondamentaux du CSS

Bases du langage CSS

Comment travailler avec CSS

Mots-clés pour les couleurs en CSS

Toutes les couleurs en CSS

Largeur et hauteur des éléments en CSS

Alignement du texte en CSS

Alignement du texte à droite en CSS

Alignement du texte au centre en CSS

Alignement du texte à gauche en CSS

Alignement du texte à droite et à gauche simultanément en CSS

Pratique de l'alignement du texte en CSS

Épaisseur du texte en CSS

Italique en CSS

Taille de police en CSS

Type de police en CSS

Interligne en CSS

La valeur de line-height sans unité en CSS

La propriété raccourci font en CSS

Indentation de la première ligne en CSS

Effets de texte en CSS

Soulignement de texte en CSS

Soulignement supérieur du texte en CSS

Barrer du texte en CSS

Annulation des effets de texte en CSS

Pratique sur les propriétés CSS de base

Sélecteurs

Liens de parenté des balises en HTML

Héritage des propriétés CSS

Regroupement des sélecteurs en CSS

Propriétés communes lors du regroupement de sélecteurs en CSS

Sélecteur de descendants en CSS

Sélecteur d'enfant en CSS

Classes d'éléments en CSS

Balise span pour des fragments de texte en HTML

La balise div pour regrouper des balises en HTML

Regroupement de classes en CSS

Balise avec une classe spécifique en CSS

Sélecteur de descendants et classes en CSS

Combinaisons complexes de sélecteurs de descendants et de classes en CSS

Erreur courante des débutants avec le sélecteur de descendants

Élément avec plusieurs classes CSS

Sélection d'un élément par id unique en CSS

Sélecteur par id et classes CSS

Utilisation des id en CSS

Sélection d'un élément par plusieurs classes en CSS

Plusieurs sélecteurs combinés en CSS

Erreur lors de l'utilisation de plusieurs sélecteurs CSS

Regroupement de sélecteurs complexes en CSS

Erreur lors du regroupement de sélecteurs CSS complexes

Pratique sur les combinaisons de sélecteurs CSS

Priorité des sélecteurs CSS

Remarque sur le conflit de propriétés CSS

Règles de spécificité en CSS

Priorité des sélecteurs descendants en CSS

Sélecteur adjacent en CSS

Sélecteur de fratrie en CSS

Sélecteur universel en CSS

Sélecteurs d'attributs en CSS

États des liens en CSS

Nuances de la séquence des états des liens en CSS

Les états des liens link et visited en CSS

Utilisation courante des états des liens en CSS

Sélecteurs complexes avec états des liens en CSS

Lien avec une classe en CSS

Sélection des éléments terminaux en CSS

Sélection par position des éléments en CSS

Sélection de l'unique enfant en CSS

Sélection des éléments vides en CSS

Sélection par position et type d'éléments en CSS

Sélecteur de négation en CSS

Décoration

Définition de la couleur d'arrière-plan en CSS

Les bases des bordures en CSS

Bordure pleine en CSS

Bordure pointillée en CSS

Bordure en tirets en CSS

Bordure convexe en CSS

Double bordure en CSS

Propriété raccourcie pour la bordure en CSS

Bordures pour les côtés individuels en CSS

Arrondissement des bordures de bloc en CSS

Arrondissement des bordures de fond en CSS

Créer un cercle en CSS

Coins arrondis différents pour les angles CSS

Les quatre valeurs de border-radius pour les coins en CSS

Deux valeurs de bordure arrondie pour différents angles en CSS

Les trois valeurs de border-radius pour les coins différents en CSS

Coins arrondis en pourcentage en CSS

Création d'un cercle avec un arrondi en pourcentage en CSS

Image d'arrière-plan en CSS

Répétition de l'image d'arrière-plan en CSS

Autres propriétés pour l'arrière-plan en CSS

Travail avec les marqueurs de listes ul en CSS

Marqueurs carrés pour les listes ul en CSS

Marqueurs de liste ul en forme de cercles en CSS

Travailler avec les marqueurs de listes ul en CSS

Absence de puces de liste ul en CSS

Travail avec les marqueurs de listes ol en CSS

Chiffres romains minuscules pour les listes ol en CSS

Chiffres romains majuscules pour les listes ol en CSS

Lettres latines minuscules pour les listes ol en CSS

Lettres latines majuscules pour les listes ol en CSS

Lettres grecques minuscules pour les listes ol en CSS

Nombres avec zéro en tête pour les listes ol en CSS

Modèle de boîte

Travail avec les marges margin en CSS

Marges margin pour différents côtés en CSS

Plusieurs valeurs dans la propriété margin en CSS

Les quatre valeurs de la propriété margin en CSS

Deux valeurs pour la propriété margin en CSS

Les trois valeurs de la propriété margin en CSS

Travail avec les marges intérieures padding en CSS

Indentations padding pour différents côtés en CSS

Valeurs multiples pour la propriété padding en CSS

Travailler avec les marges intérieures padding en CSS

L'influence de la bordure sur l'expansion des éléments en CSS

L'impact du padding et des bordures sur l'expansion des éléments en CSS

Annulation de l'expansion des éléments en CSS

Particularités des éléments de bloc en CSS

Largeur et hauteur d'un élément bloc en CSS

Largeur d'un élément bloc en CSS

Hauteur d'un élément bloc en CSS

Hauteur d'un élément bloc sans contenu en CSS

Plusieurs éléments de bloc côte à côte en CSS

Particularités des éléments en ligne en CSS

Largeur et hauteur d'un élément en ligne en CSS

Plusieurs éléments en ligne côte à côte en CSS

Indentations entre les éléments en ligne en CSS

Définition du modèle de boîte des balises HTML

Travailler avec la propriété display en CSS

Particularités des éléments en ligne-bloc en CSS

Largeur et hauteur d'un élément en ligne-block en CSS

Largeur d'un élément en ligne-block en CSS

Hauteur d'un élément en ligne-bloc en CSS

Plusieurs éléments en ligne-bloc côte à côte en CSS

Alignement des éléments de bloc en CSS

Alignement d'un élément bloc avec une marge gauche en CSS

Alignement d'un élément en bloc avec une marge droite en CSS

Alignement des éléments en ligne en CSS

Centrage des éléments en ligne en CSS

Centrage de plusieurs éléments en ligne

Alignement des éléments en ligne à droite en CSS

Alignement des éléments en ligne-blocs en CSS

Centrage des éléments en ligne-block en CSS

Alignement des éléments en ligne-block sur le côté droit en CSS

Les éléments flex en CSS

Hauteur du parent des éléments flex en CSS

Largeur du parent des éléments flex en CSS

Parent en ligne-bloc des éléments flex en CSS

Indentations padding du parent des éléments flex en CSS

Indentations margin aux descendants en CSS

Alignement des éléments flex en CSS

Alignement des éléments flex au centre en CSS

Alignement des éléments flex par rapport au parent en CSS

Alignement des éléments flex par rapport au parent avec des marges

Alignement des éléments flex avec des marges égales

Positionnement

Positionnement absolu des éléments en CSS

Positionnement relatif des éléments en CSS

Positionnement relatif au parent en CSS

Positionnement par rapport à un parent absolu en CSS

Positionnement absolu sans coordonnées en CSS

Centrage avec la position absolue en CSS

Valeurs négatives en positionnement CSS

Positionnement fixe en CSS

Bloc sur toute la largeur de l'écran en CSS

Superposition des éléments sur l'axe Z en CSS

Régulation de la superposition des éléments sur l'axe Z en CSS

Subtilités de l'utilisation des valeurs négatives de z-index en CSS

Flottants

Introduction à la propriété float en CSS

Pénétration des éléments flottants à travers les balises en CSS

Combinaison de float et margin en CSS

Combinaison de float et padding en CSS

Éléments flottants sous les balises en CSS

L'effet des flottants sur le parent en CSS

Hauteur du parent des flottants en CSS

Texte dans un parent de flottants en CSS

Flottement en CSS

Annulation du flottement avec la propriété clear en CSS

Un div séparé avec clearfix en CSS

Clearfix et hauteur du parent en CSS

La propriété float pour les blocs en CSS

Propriété float et plusieurs blocs en CSS

Propriété float et parent sans texte en CSS

Flexbox

Disposition des éléments flex en ligne ou en colonne en CSS

Placement des éléments flex en rangée inversée en CSS

Disposition des éléments flex en colonne en CSS

Inversion d'une colonne avec des éléments flex en CSS

Axes principale et transversale dans les conteneurs flex en CSS

Alignement des éléments flex le long de l'axe principal en CSS

Alignement des blocs flex le long de l'axe transversal en CSS

Signification de la valeur center de la propriété align-items en CSS

Centrage sans hauteur définie en CSS

Centrage de blocs de hauteurs différentes en CSS

Signification de la valeur stretch de la propriété align-items en CSS

Pratique de l'alignement des axes en CSS

Alignement d'un élément individuel dans le modèle flex en CSS

Ordre des blocs flex en CSS

Grilles

Introduction aux grilles CSS

Pistes et lignes dans les grilles CSS

Affichage des grilles dans le débogueur du navigateur

Nombre et largeur des colonnes dans les grilles CSS

L'unité fr dans les grilles CSS

Unités fractionnaires fr dans les grilles CSS

Pixels et unités fr dans les grilles CSS

Pourcentages et unités fr dans les grilles CSS

La fonction repeat dans les grilles CSS

La valeur auto dans les grilles CSS

La signification de auto-fill dans les grilles CSS

La fonction minmax dans les grilles CSS

Signification de auto-fit dans les grilles CSS

Nombre et largeur des rangées dans les grilles CSS

Raccourci pour les rangées et les colonnes dans les grilles CSS

Fusion des rangées dans les grilles CSS

Fusion de colonnes dans les grilles CSS

Combinaisons de fusion de lignes et de colonnes dans les grilles CSS

Chevauchement des colonnes dans les grilles CSS

Espacement entre les colonnes dans les grilles CSS

Espacement entre les rangées dans les grilles CSS

Espacement entre les colonnes et les rangées dans les grilles CSS

Mise en page en grille avec CSS

Maquettes

Création de menus en CSS

Mises en page de site web à une colonne simples en CSS

Schéma de mise en page avec plusieurs wrappers en CSS

Blocs structurels d'un site en HTML

Schéma de mise en page à deux colonnes de site en CSS

Schéma de mise en page à trois colonnes de site web en CSS

Balises spéciales pour les éléments de mise en page de site web en HTML

Balises de mise en page principales en HTML

Balise pour les sections en HTML

Pratique sur les maquettes en HTML et CSS