Tutoriel HTML et CSS pour débutants

Bases du HTML

Introduction Langage HTML Balises HTML Attributs Styles Structure principale de la page Balises de base Paragraphes Titres Texte en gras Texte en italique Listes non ordonnées Listes ordonnées Liens Liens internes Images Largeur de l'image Hauteur de l'image Définir la largeur et la hauteur de l'image Tableaux Largeur et hauteur du tableau Cellules d'en-tête Pratique

Fondamentaux du CSS

Introduction au CSS Comment utiliser le CSS Valeurs de couleur Toutes les couleurs Largeur et hauteur Alignement du texte Alignement du texte à droite Alignement du texte au centre Alignement du texte à gauche Alignement justifié du texte Pratique sur l'alignement du texte Gras Italique Taille de la police Famille de polices Interligne Valeur line-height sans unités Propriété raccourcie font Alinéa Effets de texte Soulignement du texte Ligne au-dessus du texte Barré du texte Annulation des effets de texte Pratique

Sélecteurs

Liens de parenté des balises Héritage des propriétés Regroupement des sélecteurs Propriétés communes Sélecteurs de descendants Sélecteur d'enfant direct Sélecteur de classe Balise span Balise div Regroupement de classes Balise avec une classe donnée Sélecteur de descendants et classes Combinaisons complexes de sélecteurs de descendants et de classes Erreur des débutants avec le sélecteur de descendants Élément avec plusieurs classes Sélecteur par id Sélecteur par id et classes Utilisation des id Sélecteur par plusieurs classes Plusieurs sélecteurs ensemble Erreur de plusieurs sélecteurs Regroupement de sélecteurs complexes Erreur lors du regroupement Entraînement aux combinaisons de sélecteurs Priorité des sélecteurs Remarque sur le conflit de propriétés Règles de spécificité Priorité des sélecteurs de descendants Sélecteur adjacent Sélecteur frère Sélecteur universel Sélecteurs d'attributs États des liens Nuances de la séquence des états des liens États link et visited Utilisation ordinaire des états des liens Sélecteurs complexes avec des liens Lien avec une classe Sélection des éléments terminaux Sélection par position Sélection de l'enfant unique Sélection des éléments vides Sélection par position et type d'éléments Négation not

Décoration

Couleur de fond Fondamentaux des bordures Bordure pleine Bordure pointillée Bordure tiretée Bordure en relief Double bordure Propriété raccourcie pour les bordures Bordures pour différents côtés Arrondi des bordures du bloc Arrondi des bordures du fond Création d'un cercle Arrondi pour différents angles Quatre valeurs Deux valeurs Trois valeurs Arrondi en pourcentage Création d'un cercle avec un arrondi en pourcentage Image de fond Répétition de l'image de fond Autres propriétés pour le fond Marqueurs des listes ul Marqueurs carrés pour les listes ul Marqueurs des listes ul en forme de cercles Marqueurs des listes ul en forme de cercles pleins Absence de marqueurs pour les listes ul Marqueurs des listes ol Chiffres romains minuscules pour les listes ol Chiffres romains majuscules pour les listes ol Lettres latines minuscules pour les listes ol Lettres latines majuscules pour les listes ol Lettres grecques minuscules pour les listes ol Nombres avec un zéro devant pour les listes ol

Modèle de boîte

Marge externe margin Marges margin pour les différents côtés Plusieurs valeurs dans margin Quatre valeurs dans margin Deux valeurs dans margin Trois valeurs dans margin Marge interne padding Marges padding pour les différents côtés Plusieurs valeurs dans padding Expansion des éléments Influence de la bordure sur l'expansion des éléments Influence conjointe du padding et de la bordure sur l'expansion des éléments Annulation de l'expansion des éléments Éléments de bloc Largeur et hauteur d'un élément de bloc Largeur d'un élément de bloc Hauteur d'un élément de bloc Hauteur sans contenu Plusieurs éléments de bloc côte à côte Éléments en ligne Largeur et hauteur d'un élément en ligne Plusieurs éléments en ligne côte à côte Espaces entre les éléments en ligne Définition du modèle de boîte Propriété display Éléments en ligne-bloc Largeur et hauteur d'un élément en ligne-bloc Largeur d'un élément en ligne-bloc Hauteur d'un élément en ligne-bloc Plusieurs éléments en ligne-bloc côte à côte Alignement des éléments de bloc Alignement d'un élément de bloc avec une marge à gauche Alignement d'un élément de bloc avec une marge à droite Alignement des éléments en ligne Centrage des éléments en ligne Centrage de plusieurs éléments en ligne Alignement des éléments en ligne sur le bord droit Alignement des éléments en ligne-bloc Centrage des éléments en ligne-bloc Alignement des éléments en ligne-bloc sur le bord droit Éléments flex Hauteur du parent des éléments flex Largeur du parent des éléments flex Parent en ligne-bloc Marges padding du parent Marges margin aux descendants Alignement des éléments flex Alignement des éléments flex au centre Alignement des éléments flex le long du parent Alignement des éléments flex le long du parent avec des marges Alignement des éléments flex le long du parent avec des marges égales

Positionnement

Absolu Relatif Absolu par rapport au parent Absolu par rapport à l'absolu Absolu sans coordonnées Centrage via absolute Valeurs négatives absolute Positionnement fixe Bloc sur toute la largeur de l'écran Chevauchement des éléments sur l'axe Z Régulation du chevauchement des éléments sur l'axe Z Nuances de l'utilisation des valeurs négatives de z-index

Flottants

Introduction à la propriété float Propriété float et balises Combinaison de float et margin Combinaison de float et padding Éléments flottants sous les balises Action des flottants sur le parent Hauteur du parent des flottants Texte dans le parent des flottants Habillage Annulation de l'habillage Div séparé avec clearfix Hauteur du parent et clearfix Propriété float pour les blocs Propriété float et plusieurs blocs Propriété float et parent sans texte

Flexbox

Disposition en ligne ou en colonne Disposition des éléments flex en ligne inversée Disposition des éléments flex en colonne Inversion de la colonne avec des éléments flex Axes principal et transversal Alignement sur l'axe principal Alignement sur l'axe transversal Valeur center de la propriété align-items Centrage sans hauteur des blocs Centrage avec des hauteurs de blocs différentes Valeur stretch de la propriété align-items Pratique sur l'alignement des axes Alignement d'un élément individuel Ordre des blocs flex

Grilles

Introduction aux grilles Tracks et lignes Affichage dans le débogueur Colonnes Unité fr fr fractionnaires Pixels et fr Pourcentages et fr Fonction repeat Valeur auto Valeur auto-fill Fonction minmax Valeur auto-fit Lignes Raccourci pour les lignes et colonnes Combinaison de lignes Combinaison de colonnes Combinaisons de fusions Chevauchement de colonnes Espacement entre les colonnes Espacement entre les lignes Espacement entre les colonnes et les lignes Carrelage

Maquettes

Création de menu Maquettes de sites web à une colonne simples Schéma de maquettes avec plusieurs wrappers Blocs structurels du site web Schéma de maquette à deux colonnes Schéma de maquette de site web à trois colonnes Balises spéciales pour les éléments de maquette de site web Balises de maquette principales Balise pour les sections Pratique sur les maquettes
↑
uzldeesidit