interface Web
tutoriel CSS
Introduction aux éléments CSS au niveau des blocs/éléments en ligne, à l'héritage et aux propriétés associées
Introduction aux éléments CSS au niveau des blocs/éléments en ligne, à l'héritage et aux propriétés associées
Que sont les éléments de niveau bloc ?
Les navigateurs affichent généralement les éléments de niveau bloc en utilisant des sauts de ligne avant et après l'élément. Vous pouvez visualiser cela comme un tas de boîtes.
Les éléments au niveau du bloc commencent toujours sur une nouvelle ligne et occupent toute la largeur disponible (en s'étendant vers la gauche et la droite lorsque cela est possible).
Utilisation : les éléments de niveau bloc ne peuvent apparaître que dans l'élément <body>.
Que sont les éléments en ligne ?
En HTML, un élément en ligne est un élément qui occupe uniquement l'espace délimité par la balise qui définit l'élément, plutôt que de perturber le flux du contenu. Dans cet article, nous examinerons les éléments HTML en ligne et en quoi ils diffèrent des éléments au niveau bloc.
Les éléments en ligne ne démarrent pas sur une nouvelle ligne et n'occupent que la largeur nécessaire.
Qu'est-ce que l'héritage ?
L'héritage en CSS est un mécanisme permettant de transmettre certaines propriétés d'un élément parent à ses éléments enfants.
Compréhension personnelle : Quels facteurs sont transmis par défaut des parents à leurs enfants. Exemple : Si les deux parents ont les cheveux noirs, leurs enfants hériteront par défaut des cheveux noirs. À moins que l'enfant veuille se teindre les cheveux en gris, parlons-en séparément. Si ce n'est pas l'enfant de ce parent, parlons-en séparément.
Toutes les propriétés CSS ne sont pas héritées, car certaines d'entre elles n'ont aucun sens. Par exemple, les marges ne sont pas héritées car il est peu probable que les éléments enfants aient besoin des mêmes marges que leur parent. Dans la plupart des cas, le bon sens vous indiquera quelles propriétés sont héritées et lesquelles ne le sont pas, mais vous devez examiner chaque propriété dans le tableau récapitulatif des propriétés de la spécification CSS 2.1.
Attributs qui peuvent et ne peuvent pas être hérités en CSS
1 Attributs non hérités
1 Affichage : Spécifie le type de boîte que l'élément doit générer
2. attributs :
vertical-align : alignement vertical du texte
text-decoration : spécifie la décoration ajoutée au texte
text-shadow : effet d'ombre du texte
white-space : traitement des caractères d'espacement
unicode- bidi : définissez la direction du texte
3. Attributs du modèle de boîte :
largeur, hauteur, marge, marge supérieure, marge droite, marge inférieure, marge gauche, bordure, style de bordure, style de bordure supérieure, style de bordure droite, style de bordure inférieure, style de bordure gauche, largeur de bordure, largeur de bordure supérieure, bordure droite-droite, largeur de bordure inférieure, bordure gauche- largeur, couleur de la bordure, couleur de la bordure supérieure, couleur de la bordure droite, couleur de la bordure inférieure, couleur de la bordure gauche, bordure supérieure, bordure droite, bordure inférieure, bordure gauche, rembourrage, rembourrage- top, padding -right, padding-bottom, padding-left
4. Attributs d'arrière-plan :
background, background-color, background-image, background-repeat, background-position, background-attachment
5. Attributs de positionnement :
float, clear, position, top, right, bottom, left, min-width, min-height, max-width, max-height, overflow, clip, z-index
6. attributs :
contenu, contre-réinitialisation, contre-incrément
7. Attributs de style de contour :
attributs de style de page : taille, saut de page avant, saut de page après
9. Attributs de style sonore :
pause-avant, pause-après, pause, signal avant, signal après, signal, lecture pendant
2. Attributs hérités
font : police combinée
font-family : spécifie la famille de police de l'élément
font-weight : définit l'épaisseur de l'élément. font
font-size : Définissez la taille de la police
font-style : Définissez le style de la police
font-variant : Définissez la police des lettres en petites majuscules pour afficher le texte, ce qui signifie que toutes les minuscules les lettres seront converties en majuscules, mais toutes les lettres utilisant des petites majuscules ont une taille de police plus petite que le reste du texte.
font-stretch : étirez et transformez la famille de polices actuelle. Non pris en charge par tous les principaux navigateurs.
font-size-adjust : Spécifiez une valeur d'aspect pour un élément afin que la hauteur x de la police préférée soit conservée.
2. Attributs de la série de texte
text-indent : retrait du texte
text-align : alignement horizontal du texte
line-height : hauteur de la ligne
word-spacing : augmenter ou diminuer l'espacement entre les mots Espace blanc (c'est-à-dire espacement des mots)
lettre-espacement : augmenter ou diminuer l'espace entre les caractères (espacement des caractères)
text-transform : contrôler la casse du texte
direction : spécifier le sens d'écriture du texte
couleur : Couleur du texte
3. Visibilité de l'élément : visibilité
4. Attributs de disposition du tableau :
côté légende, effondrement des bordures, espacement des bordures, cellules vides, disposition du tableau
5. Attributs :
list-style-type, list-style-image, list-style-position, list-style
6. Attributs de contenu généré : guillemets
Attributs du curseur : curseur
8. Attributs de style de page :
page, saut de page à l'intérieur, fenêtres, orphelins
9. Attributs de style sonore :
parler, parler-ponctuation, parler-numéral, parler-en-tête, débit de parole, volume, famille de voix, hauteur, plage de hauteur, contrainte, richesse, azimut, élévation
3 Attributs pouvant être hérités par tous les éléments
2. : curseur
4. Attributs pouvant être hérités par les éléments en ligne
1. Attributs de la famille de polices
2. Attributs de la série de texte sauf text-indent et text-align
5. attributs
1, text-indent, text-alignnce_and_cascade#The_cascade
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment vérifier la date de bootstrap
Apr 07, 2025 pm 03:06 PM
Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
