Ajout de bordures en HTML5 et en programmation CSS3 - Mannequins

Vous pouvez utiliser CSS3 pour dessiner des bordures autour de n'importe quel élément HTML5. Vous avez une certaine liberté dans la taille de la bordure, le style et la couleur. Voici deux façons de définir des propriétés de bordure: en utilisant des attributs de bordure individuels et en utilisant un raccourci. Les bordures ne changent pas réellement la disposition, mais elles ajoutent une séparation visuelle qui peut être attrayante, particulièrement quand vos dispositions sont plus complexes.

Comment utiliser les attributs de bordure

Voici une page avec une bordure simple dessinée autour du titre.

Le code pour borderProps. La page html montre les principes de base des bordures en CSS:

borderProps. html h1 {border-color: rouge; largeur de la bordure:. 25em; border-style: double;}

Ceci a une bordure

Chaque élément peut avoir une bordure définie. Les frontières nécessitent trois attributs:

• largeur : La largeur de la bordure. Cela peut être mesuré dans n'importe quelle unité CSS, mais la largeur de la bordure est normalement décrite en pixels ou en ems. ( Rappelez-vous: Un em est approximativement la largeur de la lettre majuscule "M" dans la police actuelle.)

• couleur : La couleur utilisée pour afficher la frontière. La couleur peut être définie comme toute autre couleur dans CSS, avec des noms de couleurs ou des valeurs hexadécimales.

• style : CSS supporte un certain nombre de styles de bordure. L'exemple illustre une double bordure. Ceci dessine une bordure avec deux lignes plus fines autour de l'élément.

Vous devez définir les trois attributs si vous souhaitez que les bordures apparaissent correctement. Vous ne pouvez pas compter sur les valeurs par défaut pour fonctionner dans tous les navigateurs.

Comment définir les styles de bordure

CSS a une liste prédéterminée de styles de bordure que vous pouvez choisir. Voici une page avec tous les styles de bordure primaires affichés.

Vous pouvez choisir l'un de ces styles pour n'importe quelle bordure:

• Solide: Une seule ligne continue autour de l'élément.

• Double: Deux lignes autour de l'élément avec un espace entre elles. La largeur de la bordure est la largeur combinée des deux lignes et l'écart.

• Groove: Utilise l'ombrage pour simuler une rainure gravée dans la page.

• Crête: Utilise un ombrage pour simuler une crête dessinée sur la page.

• Encart: Utilise un ombrage pour simuler un bouton enfoncé.

• Outset: Utilise l'ombrage pour simuler un bouton dépassant de la page.

• Pointillé: Une ligne pointillée autour de l'élément.

• Pointillé: Une ligne pointillée autour de l'élément.

Comment utiliser le raccourci de bordure

La définition de trois attributs CSS différents pour chaque bordure est un peu fastidieuse. Heureusement, CSS inclut un raccourci pratique qui facilite grandement la définition des frontières.

Vous ne pouvez pas distinguer la différence de la sortie, mais le code de borderShortcut. html est extrêmement simple:

borderShortcut. html h1 {border: rouge 5px solide;}

Cette page utilise le raccourci de bordure

L'ordre dans lequel vous décrivez les attributs de bordure n'a pas d'importance. Spécifiez simplement une couleur, une taille et un style de bordure.

Comment créer des bordures partielles

Si vous le souhaitez, vous pouvez avoir un contrôle plus précis de chaque côté d'une bordure. Il existe un certain nombre de raccourcis à la frontière spécialisés pour chacune des sous-frontières.

Cette page applique un style de bordure au bas de l'en-tête ainsi que différentes bordures au-dessus, en dessous et sur les côtés des paragraphes. Les bordures partielles sont assez faciles à construire, comme vous pouvez le voir dans la liste des codes:

sous-bandes. html h1 {border-bottom: 5px noir double;} p {border-left: 3px noir pointillé; bordure-droite: 3px noir pointillé; border-top: 3px noir en pointillé; border-bottom: 3px groove noir;}

Ce titre a une bordure inférieure
Les paragraphes ont plusieurs bordures définies.
Les paragraphes ont plusieurs frontières définies.

Notez les styles de bordure: border-top, border-bottom, border-left et border-right. Chacun de ces styles agit comme le raccourci de la bordure, mais il n'agit que d'un côté de la bordure.

Il existe également des attributs de bordure spécifiques pour chaque côté (la largeur de la bordure inférieure ajuste la largeur de la bordure inférieure, par exemple), mais ils ne sont presque jamais utilisés car la version du raccourci est beaucoup plus facile.