Comment ajouter une bordure HTML

Comment ajouter des bordures HTML

En HTML, les bordures sont un moyen simple d'ajouter des bordures visibles aux éléments. Des bordures peuvent être appliquées autour du contenu d'un élément pour créer un cadre visuel. Les bordures peuvent être appliquées aux tableaux, images, zones de texte et autres éléments HTML. Dans cet article, nous explorerons les bordures HTML et comment ajouter des bordures à vos pages Web.

Type de bordure HTML

Le type de bordure est un attribut courant en CSS. En HTML, vous avez le choix entre trois types de bordures : pleine, en pointillés et en pointillés.

1. Bordure unie :

Les bordures apparaissent sous la forme de lignes pleines et constituent le type de bordure le plus courant. Ils sont définis comme « solides ».

2. Bordure pointillée :

La bordure apparaît sous la forme d'une ligne pointillée, qui est un effet espacé et est définie comme « pointillée ».

3. Bordure pointillée :

La bordure apparaît sous la forme d'une ligne pointillée, composée d'un point et d'une ligne vierge, et est définie comme "pointillé".

Comment ajouter des bordures HTML

Pour ajouter des bordures aux pages HTML, utilisez une feuille de style CSS. Les feuilles de style CSS vous permettent de modifier le style et la disposition des éléments HTML. Les bordures peuvent être appliquées à la plupart des éléments HTML, tels que :

1.Images

Vous pouvez ajouter des bordures aux images en utilisant la feuille de style CSS suivante :

img {

border: 2px solid black;

}

Dans le code ci-dessus, nous allons A 2 Une bordure noire unie d'une largeur de 1 pixel est appliquée à toutes les images.

2. Tableau

Dans un tableau, vous pouvez modifier les propriétés de la bordure extérieure à l'aide de la feuille de style CSS suivante :

table {

border: 2px solid black;
border-collapse: collapse;

}

La feuille de style ci-dessus applique une bordure solide de 2 pixels de large au tableau. . Notez que nous définissons également la propriété "border-collapse" sur "collapse" pour garantir qu'il n'y a pas de distance supplémentaire entre les cellules.

3. Boutons

Vous pouvez ajouter une bordure à votre bouton pour le faire ressortir davantage. Voici un exemple de code pour ajouter une bordure à un bouton :

button {

border: 2px solid black;

}

Cela appliquera une bordure noire unie de 2 pixels de large à tous les boutons.

4. Zone de texte

La zone de texte est un autre élément courant auquel vous souhaiterez peut-être ajouter une bordure. Voici un exemple de code pour ajouter une bordure à une zone de texte :

input[type=text] {

border: 2px solid black;

}

Cela appliquera une bordure noire unie de 2 pixels de large à toutes les zones de texte.

Conclusion

L'ajout de bordures est une étape fondamentale dans la conception de sites Web HTML. Il vous aide à améliorer l’apparence et la lisibilité de vos pages. Cet article explique les trois types de bordures HTML et comment ajouter des bordures aux images, tableaux, boutons et zones de texte à l'aide de feuilles de style CSS. Maîtriser l'art des bordures HTML peut rendre votre site Web plus professionnel et plus attrayant.

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!