CSS Retirez la bordure
Exemple 01:
Commençons par l'illustration la plus élémentaire de la suppression de la frontière des éléments spécifiques du script HTML. Pour cela, nous avons commencé notre code avec la balise principale «HTML» du script HTML. Discutons d'abord de la balise «corps» comme indiqué ci-dessous. Il utilise deux titres de la plus grande taille, «1». Les deux titres sont utilisés ici avec différents titres pour les différencier. De plus, nous avons spécifié les classes «A» et «B» dans les étiquettes d'en-tête séparément pour utiliser ces classes dans le style pour styliser séparément les deux titres.
Dans la balise «style», nous avons été séparément stylisés les deux titres avec l'utilisation de leurs classes «A» et «B». Nous avons ajouté le rembourrage de 10 pixels et la largeur de 400 pixels pour les deux titres via le rembourrage et la largeur. Ainsi, nous avons attribué une bordure verte solide de 3 pixels à la première rubrique via la propriété de la frontière et pour la deuxième cap, la propriété de la frontière a été définie sur aucune. Enregistrons ce script HTML et l'exécutons dans le navigateur Chrome.
La sortie de cette page Web a été affichée dans l'onglet Chrome. Le premier titre a été affiché avec une bordure solide verte de 3 pixels. La 2ème cap a été affichée sans bordure, la même largeur et un peu de rembourrage.
Jetons un coup d'œil à comment un côté d'une bordure peut être retiré de l'élément à l'aide de la propriété de bordure améliorée. Ainsi, nous avons mis à jour le code ci-dessus comme indiqué dans l'image ci-dessous. Nous avons utilisé la même balise corporelle avec ses étiquettes ou titres intérieurs. Dans la balise de style de ce fichier HTML, nous avons ajouté des propriétés de marge et de rembourrage pour répandre uniformément les en-têtes de la page Web. Ensuite, nous avons utilisé la propriété de la frontière pour les deux titres séparément. Chaque bordure de 3 pixels solide a été fixée pour les deux. Le premier titre contiendra une bordure de couleur verte et le deuxième cap contiendra une bordure de couleur bleue.
Tandis que les propriétés des frontières de la frontière et de la bordure-gauche ont été fixées à «aucune» pour que les deux titres retirent le côté droit et gauche de la tête 1 et en tête 2 respectivement. Enregistrons et exécutons cette mise à jour.
La sortie a affiché deux titres des bordures vertes et bleues. Tandis que le côté droit de la première bordure et du côté gauche de la deuxième bordure est retiré. Cela s'est produit en raison de l'utilisation de la propriété frontalière et frontalière des frontières après avoir fixé les deux sur «Aucun».
Exemple 02:
Avec la création d'une bordure solide, vous pouvez également créer un contour pour tout élément spécifique d'une page Web HTML sans utiliser la bordure. Les contour et les frontières sont visiblement similaires, mais ils sont très différents dans les propriétés. Utilisons la propriété Outline de la langue de script HTML pour créer un contour en pointillé. Nous utiliserons le même fichier HTML même sans modifier une grande partie de son script. Le même corps avec ses étiquettes et un style assez similaire a été utilisé. Le seul changement a été effectué dans la balise de style où nous avons réglé le CSS pour les deux titres.
Ici, nous utilisons la propriété Outline pour les deux titres. Le contour pour le premier titre serait de 3 pixels parsemé de couleur bleue tandis que l'autre en-tête ne contiendra aucun titre conformément à la valeur «Aucun» défini pour la propriété de contour. Enregistrons et déboglons ce script HTML pour voir les résultats via le code Visual Studio.
Après le débogage, nous avons ouvert la page HTML dans le navigateur Chrome et obtenu le résultat ci-dessous illustré. La page HTML de sortie affiche la première rubrique avec un contour en pointillé et le deuxième titre sans contour ni bordure.
Il s'agissait de la création d'un contour autour des titres. Créons des contours en pointillés, en pointillés et solides pour les titres dans le code HTML. Nous avons utilisé un total de 4 paragraphes dans cette page Web en utilisant la balise «P» dans la balise corporelle avec leurs classes spécifiques qui ont été spécifiées, A, B, C et D. Dans la balise de style, nous utilisons les classes pour les paragraphes pour styliser séparément chaque paragraphe. La marge de propriété, le rembourrage et les propriétés de largeur sont utilisés avec les mêmes valeurs pour les trois paragraphes. Nous utilisons la propriété frontalière du premier paragraphe pour créer un paragraphe en pointillé de couleur rouge. La propriété frontalière définie sur «Aucun» a été utilisée pour le deuxième paragraphe pour créer une frontière sans. La troisième propriété frontalière dans le «P.Le paragraphe de classe C ”a été utilisé pour définir la bordure de couleur de chocolat en pointillés à 3 pixels. Dans le dernier style, nous avons utilisé la propriété de la bordure pour ajouter la bordure solide de 3 pixels de couleur violette autour du 4ème cap de cette page. Enregistrons ce code et exécutons-le pour voir les résultats.
La sortie de ce programme HTML a montré l'affichage d'un titre et 4 paragraphes. Le premier paragraphe est entouré d'une bordure rouge en pointillés, le second n'a pas de bordure, le troisième a une bordure de couleur au chocolat en pointillés, et le dernier a une bordure de couleur unie.
Exemple 03:
Jetons un coup d'œil à notre dernier exemple pour retirer une bordure de l'environnement de la table. Pour cela, nous utiliserons deux tables à titre de comparaison. Dans l'étiquette corporelle de ce fichier HTML, nous avons utilisé deux balises de table distinctes pour créer des tables. Les deux tables ont les mêmes colonnes d'en-tête et les mêmes colonnes de données, 3 colonnes et 3 lignes. Nous avons attribué un «ID» différent aux deux tables pour les différencier dans la balise de style, A et B.
Dans la balise de style, nous utilisons la même marge, rembourrage et propriété de bordure pour les deux tables. Pour la classe «B» du tableau 2, nous avons utilisé la frontière de propriété définie «s'effondrer» pour effondrer la bordure d'un tableau. Enregistrons et exécutons ce code maintenant.
La sortie de ce code HTML a affiché deux tables statiques. Le premier est avec la bordure intérieure et extérieure tandis que la seconde a sa frontière s'effondrer.
Conclusion:
Cet article a introduit l'utilisation de la propriété des frontières pour supprimer un ou plusieurs côtés des frontières autour de n'importe quel élément d'une page Web HTML. Nous avons discuté de la façon dont les propriétés frontalières, frontalières, de frontières et de frontières peuvent être utilisées à cet effet uniquement. Nous avons également discuté de l'utilisation de la frontière et des contour dans ces exemples et avons discuté de la façon dont une propriété de frontière peut être utilisée pour la suppression des frontières autour de l'élément de table. Nous avons ajouté les illustrations les plus simples pour que les lecteurs atteignent le niveau de compréhension.