Maison >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
- 一个新手original
- 2017-09-23 10:06:241859parcourir
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!