Comment implémenter différentes frontières en CSS?

Les bordures sont utilisées dans les pages HTML pour délimiter et mettre en évidence le contenu. Lorsqu'une page contient de nombreuses informations et que vous souhaitez attirer l'attention de l'utilisateur sur des parties spécifiques, utilisez des bordures autour de ce contenu. Dans cet article sur les bordures en CSS, je vais aborder les sujets suivants:

• Quand utiliser les bordures
• Bordures en CSS
• Attributs de CSS Border
• Valeurs par défaut pour les attributs de bordure
• Définir les frontières en sténographie
• Points à garder à l'esprit lors de la conception de bordures en CSS

Quand utiliser les bordures

La pratique standard consiste à utiliser des balises de bordure CSS pour définir des bordures dans les pages HTML pour:

• Autour des rubriques importantes
• Pour mettre en évidence PostScript ou notes importantes
• Pour joindre des photos, des illustrations, des citations de personnes, des vidéos
• Pour attirer l'attention sur les prix, les délais ou des informations importantes

Vous voudrez peut-être lire sur le avant de commencer à apprendre les frontières CSS.

Pour un didacticiel CSS complet, visitez Tutoriel CSS Edureka pour les débutants . Vous aurez un excellent aperçu de la façon dont CSS doit être utilisé pour augmenter la conception Web HTML.

Bordures en CSS

Les bordures CSS peuvent être attribuées à différentes sections de la page HTML, que ce soit pour inclure des en-têtes ou des paragraphes. Commençons par un exemple. Ici, nous définissons une bordure autour du titre et une autre bordure autour du texte du paragraphe.

body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}
Bordure autour du paragraphe aussi!
 

Attributs de CSS Border

Les bordures CSS ont 3 attributs majeurs à leur

• style:LastyleL'attribut définit le motif de la bordure.
• Couleur: La couleur peut être n'importe laquelle de l'ensemble défini par les couleurs CSS.
• largeur: La largeur est utilisée pour faire varier l'épaisseur de la bordure, pour la rendre plus proéminente.

Dans l'exemple ci-dessus, nous avons vu qu'un seul attribut de bordure est défini, c'est son style. Les autres attributs lorsqu'ils ne sont pas définis prennent des valeurs par défaut. Il existe un autre attribut appelé rayon, qui est moins fréquemment utilisé. Il est utilisé pour arrondir les bords de la bordure.

• style de bordure attribut

Vous remarquerez qu’il existe également une option «sans bordure» et «bordure cachée». Un développeur peut simplement éviter de définir une frontière, pourquoi la définir explicitement comme une «frontière cachée»? Ceci est fait à des fins d'utilisation de l'espace et d'alignement avec d'autres éléments de la page.

Les styles de bordure peuvent également être mélangés dans un élément. À cette fin, les 4 côtés de bordure individuels peuvent être définis séparément avec différents styles. Cela peut être fait de 2 manières. Soit définir les 4 côtés dans une seule balise. Dans ce cas, le décompte commence à partir de la ligne supérieure, puis se déplace dans le sens des aiguilles d'une montre. Alternativement, chacune des 4 limites peut également être définie dans des balises individuelles. Les deux cas sont présentés dans l'exemple suivant.

c ++ trier les nombres par ordre croissant

• couleur de la bordure attribut

L'attribut de couleur pour une bordure peut être défini de plusieurs manières. Ceci est similaire à la définition de la couleur pour d'autres éléments. Les couleurs peuvent être définies par l'une des méthodes suivantes:

• Nom - spécifiez un nom de couleur, comme «bleu». Vous pouvez également essayer quelques options de couleurs fantaisistes comme «BlanchedAlmond»!
• Hex - spécifiez une valeur hexadécimale, comme «# ff0000»
• RVB - définissez le code RVB. Par exemple, rgb (255,255,0) signifie jaune.
• réglage - comme «transparent» ou «opaque»

• largeur de la bordure attribut:

La propriété width, comme son nom l'indique, définit l'épaisseur des 4 côtés de bordure. Si une valeur est définie, elle s'applique à tous les côtés, sinon des valeurs de largeur individuelles peuvent également être définies.

La largeur peut être spécifiée dans l’une des unités standard telles que pixels («px»), points («pt») ou en centimètres («cm»). Vous pouvez également spécifier la largeur à l’aide des valeurs prédéfinies de «épais», «mince» et «moyen».

• rayon de bordure attribut

Le but de la définition du rayon est d'obtenir des coins arrondis pour la bordure. Le facteur de rayon définit l'étendue de l'arrondi. Plus la valeur est élevée, plus les coins sont courbés. En règle générale, les valeurs de rayon sont conservées entre 1 et 3 fois la largeur de la bordure.

Le code suivant générera:

largeur de la bordure: 10px
rayon de la bordure: 30px

Valeurs par défaut des attributs de bordure

• Le seul attribut obligatoire est le style . Si le style est manquant, la bordure n'apparaîtra pas.

• Si la couleur n'est pas spécifiée, la couleur de l'élément sous-jacent est prise comme valeur par défaut. Par exemple, si la couleur du texte d’un paragraphe est définie comme «bleu», la couleur de la bordure par défaut sera également le bleu. S'il n'y a pas de définition de couleur même pour l'élément, la couleur par défaut est «noir».

• La valeur par défaut de la largeur est «moyenne».

Définir les frontières en sténographie

Certains développeurs préfèrent définir les attributs de bordure dans une balise concise sur une seule ligne. Ce format abrégé aide à minimiser les lignes de code et les développeurs experts préfèrent ce format. L'utilisation du format abrégé est recommandée lorsque la définition de la bordure est simple et assez standardisée. Cependant, si vous devez mettre en évidence chaque côté de la bordure dans un style différent, vous devez vous en tenir au format de définition des balises individuelles.

Le code suivant est utilisé:

style de bordure: pointillé
border-couleur: vert
largeur de la bordure: 5px
bordure: pointillé vert 5px

Points à garder à l'esprit lors de la conception de bordures en CSS

• N'utilisez pas trop de bordures dans une page, cela peut distraire et empêcher l'utilisateur de se concentrer.

• Il est important de maintenir la cohérence dans le style et les couleurs des bordures. Les éléments du même niveau de hiérarchie dans une page doivent avoir un style et une largeur de bordure similaires pour assurer l'uniformité. Par exemple, si paragraphe est défini avec une bordure pleine et une largeur de 5 pixels, conservez ce format dans les autres paragraphe éléments lors de la conception du site Web.

• Tenez-vous en à un style de définitions de balises. Certains développeurs sont à l'aise avec les définitions de raccourcis avec toutes les valeurs attribuées à un seul frontière marque. D'autres préfèrent une liste explicite de toutes les balises pour la largeur, la couleur et le style. La convention est que lorsque des décorations de bordure élaborées sont requises dans une page, les balises individuelles sont répertoriées séparément. Cela aide lors du débogage de telles définitions de bordure personnalisées. Pour les cas normaux, une définition de raccourci suffirait.

J'espère que vous avez trouvé les informations que vous recherchiez sur les bordures CSS, et wAvec cela, nous arrivons à la fin de cet article Borders in CSS.

Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires du blog «Border in CSS» et nous vous recontacterons.