5 propriétés CSS rarement utilisées

Maître les attributs CSS peu connus et améliorer les compétences en conception Web! Cet article présentera 5 propriétés CSS pratiques mais rarement utilisées qui fonctionnent dans tous les navigateurs modernes et peuvent vous aider à résoudre certains des défis délicats de la conception Web.

Il existe de nombreux attributs CSS, et certains attributs inhabituellement utilisés sont facilement oubliés. Voici 5 propriétés CSS pratiques mais peu connues:

1. Conversion de cas de texte (Text Transform): Cette propriété est utilisée pour modifier le cas du texte de l'élément HTML, ce qui facilite les concepteurs d'ajuster les styles sans modifier le code HTML. Les valeurs principales comprennent: capitalize (capsulaire), lowercase (minuscules), uppercase (capsulaire), none (pas de changement). Il convient de noter que lorsque le navigateur IE est défini sur font-variant, la valeur small-caps peut avoir des performances différentes. none

2. Espacement des lettres et espacement des mots: Écrire le texte de la page en html est plus facile à maintenir et est propice au SEO. peut ajuster l'espacement des caractères (px, em, ex,%, etc.), par exemple: letter-spacing h2 { letter-spacing: 0.1em; } similaire, mais agissent sur l'espacement des mots. word-spacing

Exemple:

Titre d'espacement des caractères large (0.1em)
Titre d'espacement des caractères étroit (-0.1em)

3. Indedent de texte: Définissez l'indentation gauche de la première ligne du bloc de texte (ou de l'empreinte droite lorsque text-indent est défini sur "RTL"), par exemple: direction. Bien que p { text-indent: 10px; } puisse également obtenir des effets similaires, padding n'affecte pas la largeur de l'élément et est très utile dans des scénarios tels que les menus compatibles IE, tels que: text-indent

ul#menu li a {
    display: block;
    width: 100%; /* IE hasLayout applied */
    text-indent: 10px;
}

4. Largeur de table fixe (Table-Layout): Les tables sont toujours utilisées pour les données de la table, mais lorsque le navigateur est par défaut "Auto", il peut être difficile de styliser les largeurs de colonne. Si le texte de la cellule nécessite plus d'espace, l'algorithme automatique peut écraser la largeur de la table que vous avez spécifiée. Définissez table-layout pour "corriger" pour forcer le navigateur à se conformer à la largeur de la table que vous avez spécifiée. table-layout

5. Manipulation de l'espace blanc: Détermine comment le navigateur rend l'espace blanc dans HTML. Bien que le support croisé de navigateur soit inégal, les propriétés suivantes sont compatibles avec de bonnes propriétés: white-space (les espaces blancs sont effondrés en un seul caractère, et les nouvelles lignes sont traitées selon les besoins), normal (les espaces blancs sont effondrés en un seul caractère, mais les ruptures de ligne sont supprimées), nowrap (les espaces blancs ne sont pas entretenus, ils ne sont pas cassés à HTMl). pre

est essentiel lors de la rendu des extraits de code, mais il est également utile dans d'autres situations. Par exemple, dans un tableau avec white-space défini sur "Correction": table-layout

Si vous voulez que toutes les lignes soient cohérentes et recadré du texte long (par exemple, en utilisant la boîte d'invite JS pour afficher le texte intégral), la définition de la hauteur CSS de tr ou td est invalide, mais vous pouvez utiliser white-space:

ul#menu li a {
    display: block;
    width: 100%; /* IE hasLayout applied */
    text-indent: 10px;
}

référence:

5 Les moins courants pour HTMS

• ch

Opéra Mama Project (moteur de recherche de structure Web) calc() avez-vous d'autres propriétés CSS moins connues que vous aimez?

• FAQS sur les attributs CSS peu connus (FAQ)

  currentColor color

  Quelle est l'importance de comprendre les attributs CSS peu connus?
La compréhension de ces attributs peut améliorer considérablement vos compétences en développement Web, qui fournissent des styles et des effets uniques, résoudre des problèmes de conception que les attributs communs ne peuvent pas résoudre, et ainsi créer des sites Web plus attrayants.

• object-fit

  Quelle est l'unité «CH» dans CSS et comment l'utiliser? Les unités
• représentent la largeur du caractère "0" dans la police actuelle et sont utilisés pour définir la largeur ou les marges qui évoluent avec la taille du texte.

  writing-mode

  Comment fonctionne le "calc ()" dans CSS? Les fonctions
• vous permettent d'effectuer des calculs pour déterminer la valeur d'attribut CSS, qui peut être utilisée pour ajouter, soustraire, multiplier, diviser et différentes unités.

  tab-size

  Quel est le mot-clé «CurrentColor» dans CSS et comment l'utiliser?
• Le mot-clé fait référence à la valeur de couleur actuelle de l'élément, ce qui équivaut à la valeur d'attribut

  de l'élément. resize

• Comment fonctionne l'attribut «objet-ajustement» dans CSS?

  Les propriétés spécifient comment une image ou une vidéo est redimensionnée pour s'adapter à son conteneur. outline-offset

• Quel est l'attribut «Mode d'écriture» dans CSS et comment l'utiliser?

  Propriétés Spécifiez la direction du flux de texte dans un bloc, qui est utilisé pour créer du texte vertical ou pour modifier la direction du texte dans un langage d'écriture de droite à gauche. all direction unicode-bidi

Comment fonctionne l'attribut 'Tab-Size' dans CSS? L'attribut

spécifie la largeur du caractère de l'onglet, et la valeur par défaut est 8 espaces. Quel est l'attribut «redimensionner» dans CSS et comment l'utiliser? Les attributs permettent aux utilisateurs de redimensionner les éléments. Comment fonctionne l'attribut «Outline-Offset» dans CSS? Les propriétés spécifient l'espace entre le contour et les bords ou les bordures de l'élément. Quel est l'attribut «tout» dans CSS et comment l'utiliser? Les propriétés sont une propriété d'abréviation qui réinitialise toutes les propriétés CSS (sauf et ).

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!