Comment faire une boîte autour de votre texte

Chaque fois que vous visitez un site Web qui a des boîtes autour du texte, les développeurs du site probablement créé cet effet l'aide de feuilles de style en cascade (CSS). CSS permet aux développeurs d'appliquer le style visuel des éléments sur une page Web. De nombreux éléments HTML ont des boîtes autour d'eux. Les boîtes peuvent ne pas être visibles, mais elles existent. Développeurs non seulement les rendre visibles comme nécessaire, mais ils utilisent aussi des CSS pour définir la couleur, le style et la largeur des boîtes. Pour ajouter une zone autour du texte sur une page Web, mettez le texte à l'intérieur d'un HTML

élément et l'utilisation de CSS pour dénommer.

Instructions

  1. 1

    Créer un nouveau fichier HTML et ajouter ce code à la section:


    Le cadre autour de ce texte est en pointillés et rouge


    Le cadre autour de ce texte est plus épais, en pointillés et bleu





    Le cadre autour de ce texte est solide, plus épais et jaune

    Le

    tag définit une boîte. Si vous ne définissez pas les propriétés d'un
    , la boîte sera invisible. Chacune de ces boîtes référence une classe CSS différente. La section de CSS du document HTML contient les caractéristiques d'affichage pour chaque
    . Par exemple, la première zone de texte fait référence à une classe CSS nommée "dottedRed." Cette classe définit la couleur de la bordure au rouge et le style de bordure à parsemée. La boîte autour du texte dans cette div apparaîtra en pointillés et rouge. Les deux autres
    référence balises différentes classes qui définissent des caractéristiques visuelles différentes pour leurs boîtes.

  2. 2



    Ajouter ces définitions de style de feuille à la section:

    Voir Ressources pour afficher les valeurs des propriétés de frontières possibles qu'un élément de bloc HTML peut avoir. Dans le "dottedRed" définition de la classe, les propriétés de bordure sont fixés aux valeurs indiquées. Contrôler le remplissage entre le texte et le bord de la boîte en ajustant la valeur de "rembourrage." Dans ces exemples, le rembourrage est fixé à cinq pixels. Cela signifie que le texte dans chaque boîte sera à une distance de cinq pixels de chaque côté de la boîte.

  3. 3

    Enregistrez le fichier et l'afficher dans votre navigateur. La boîte autour de chaque bloc de texte permet d'afficher les propriétés visuelles définies dans la feuille de style en cascade.

Conseils & Avertissements

  • Texte dans une zone se terminera selon le "largeur" La valeur que vous définissez dans le CSS. Augmenter la valeur de la largeur si vous voulez plus longues lignes de texte. Utilisez votre imagination en dénommant les bordures de buis autour de votre texte. Mélanger et combiner différentes couleurs, styles, frontalières-frontières largeurs et d'autres propriétés d'adapter l'apparence de vos boîtes.
» » » » Comment faire une boîte autour de votre texte