CSS première lettre

Une feuille de style en cascade joue un rôle important dans la décoration de la première lettre du mot en HTML. Parfois, nous avons besoin que l'utilisateur fasse attention à un texte spécifique, selon notre exigence. Pour atteindre cet objectif, nous utilisons la décoration du texte et les effets sur la première lettre du mot du paragraphe ou de la rubrique. Cela aide à détourner l'accent de l'utilisateur sur le point pertinent. Cette sélection se fait via le sélecteur CSS :: First-Letter qui est le pseudo-élément CSS.

Pseudo-élément CSS

C'est le mot-clé qui est ajouté au sélecteur qui vous permet de décorer ou de coiffer la section particulière de l'élément sélectionné. La syntaxe de base utilisée pour ce style est définie dans ce qui suit:

Le sélecteur de cet article représente la première lettre du mot. La propriété de style comprend la propriété de la bordure, la couleur, la police, la marge, la décoration textuelle, le rembourrage et la propriété d'arrière-plan également. Nous appliquons les trois propriétés de style principal de ce guide.

Style de police et de couleur sur la première lettre

Tout d'abord, nous appliquons les deux propriétés dans la première lettre Style. En commençant par la balise d'ouverture HTML, nous déclarons la tête, puis ouvrons la balise de style. Étant donné que nous devons appliquer un effet sur la première lettre, il est nécessaire de le mentionner au moment du style. Sinon, l'ensemble du texte du paragraphe sera affecté. Ainsi, le «P» du paragraphe est mentionné avec la première déclaration de lettre. La couleur verte et la taille de la police en pourcentage sont appliquées.

Après cela, la section de tête est fermée. L'étiquette corporelle est complétée par la balise alignée sur le centre. C'est un exemple de style en ligne. À l'intérieur du corps, nous ajoutons à nouveau une rubrique. Le CSS en ligne est appliqué pour y appliquer la couleur. En fin de compte, le paragraphe est ajouté où nous avons appliqué le style. Nous pouvons également appliquer n'importe quel style à la première lettre de la rubrique comme dans le paragraphe.

Code:

Enregistrez le code et exécutez-le dans le navigateur. Vous verrez la page Web résultante où la première lettre du paragraphe est plus grande par rapport au reste du texte et sa couleur est modifiée. Ce changement de style est utile pour détourner l'objectif du lecteur.

Sortir:

Style de bordure sur la première lettre

La deuxième façon de rendre la première lettre proéminente est d'appliquer une forme carrée ou une bordure autour de la première lettre du texte. Laissez-nous expliquer comment cela fonctionne.

Cette fois, nous prenons les deux façons de coiffer la première lettre en appliquant un style sur l'en-tête et l'autre au paragraphe. À l'intérieur de la balise de style, la même valeur de première lettre est déclarée à l'en-tête «H3». Le style de bordure est réglé sur «solide».

Code:

De même, dans la première lettre du paragraphe, nous appliquons le style de bordure comme double. Nous pouvons également appliquer une frontière simple ou celle en pointillés en remplaçant le nom de style bordure par le mot «pointillé». À l'intérieur du corps, une rubrique et un paragraphe sont déclarés, contenant tous deux le texte factice pour montrer les effets que nous avons appliqués sur eux. Enregistrez le fichier de l'éditeur de texte, puis exécutez-le dans le navigateur par défaut.

Sortir:

Vous verrez que dans le titre, la première lettre est «t» et elle est stylée avec une bordure solide. Vous pouvez également appliquer plus d'effets sur la bordure, comme la couleur de la bordure, etc. Cela en attirera plus par rapport à l'ensemble du texte. Le paragraphe a la première lettre «L» de «Lorem». Ceci est stylé par la double bordure.

Note: Les deux effets de la frontière sont appliqués sur la première lettre du premier mot comme nous l'avons mentionné dans CSS. Mais si la définition de première lettre est supprimée, la frontière sera appliquée à l'ensemble du texte, soit dans le titre ou dans le paragraphe.

Style de décoration de texte sur la première lettre

La première lettre du texte peut également être conçue en décorant le texte. Cette fois, nous utilisons la première lettre de la liste. Chaque liste sera affectée par un style différent de la décoration de texte. CSS Text Decoration Property a plusieurs aspects; Nous irons avec la ligne de décoration texte.

Tout d'abord, considérez la section corporelle du code HTML. Deux titres simples sont appliqués. Ater que nous déclarons une liste simple. À partir des deux types de listes, nous utilisons une liste non ordonnée ici. Le

La balise est déclarée. À l'intérieur des balises de la liste non ordonnée, nous déclarons les listes avec la balise
• .

  1 2 3 4 5

  Shiza Ahsan

  Les trois listes sont déclarées à l'intérieur de l'étiquette de

  . Chaque liste est fermée séparément et après la déclaration de toutes les listes,
  est appliqué. Chaque liste est appliquée avec un nom d'identification. Le style de la première lettre est appliqué en identifiant chaque exemple alors que nous appliquons les différents styles pour chaque ligne de la liste.

  Code HTML:

  Si les ID de la liste sont supprimés, un seul style est appliqué à toutes les lignes de la liste. Maintenant, fermez la section du corps. Aller vers la section tête du corps HTML.

  À l'intérieur de la balise de style, la couleur de l'en-tête est appliquée. C'est un effet facultatif juste pour expliquer le travail. Le corps entier est appliqué par le style pour s'aligner sur le côté gauche de la page Web.

  1 2 3 4 5

  Ul li Marge: 15px;

  Un effet commun qui est appliqué à toutes les lignes de la liste est un effet de marge. Pour maintenir la distance entre deux lignes dans la liste, nous appliquons cet effet. Après cela, chaque ligne de la liste est appliquée dans les différents styles. Par exemple, dans Exemple1 ID, nous appliquons l'effet de la décoration texte avec un soulignement parsemé sur la première lettre.

  1 2 3 4 5

  # example1 :: Première lettre Décoration du texte: soulignement pointillé;

  De même, l'exemple2 et l'exemple3 sont appliqués par la décoration texte d'une ligne rouge à travers la lettre. Tandis que la troisième ligne de la liste a un effet bleu overline.

  Code CSS:

  Après avoir ajouté tous les effets, enregistrez le code et nous exécutons le fichier. La première lettre «S» du mot «Shiza» a une ligne en pointillés en dessous. La première lettre «S» de la deuxième ligne a une ligne rouge à travers elle. Et le «Z» de Zaroon contient une ligne bleue qui passait dessus.

  Sortir:

  Conclusion

  La première lettre CSS du texte en HTML joue un rôle important dans le détournement de l'attention de l'utilisateur. Dans cet article, nous donnons brièvement l'introduction de base au sélecteur de premier lettre qui est un élément de la propriété CSS Pseudo. Ce style de propriété a plusieurs catégories. Nous pouvons appliquer chacun pour mettre en évidence la première lettre. Les trois propriétés appliquées sont l'effet de couleur Font Plus, l'effet de bordure et la propriété de décoration de texte ayant des styles et des couleurs différents de lignes passant sous ou par les premières lettres.