Des cadres placés autour des images ou du texte décorent le site et ajoutent de la variété à son design. Si vous utilisez des tableaux pour créer des bordures, le code de chaque bordure prendra trop de place. De plus, dans ce cas, vous devrez réécrire le code HTML pour chaque cadre. Avec CSS, vous pouvez facilement créer une bordure de n'importe quelle épaisseur et couleur que vous voulez en écrivant un code simple une fois pour tous les éléments qui seront entourés par cette bordure. Cette technologie permettra, si nécessaire, de changer le type de cadres sur le site en quelques minutes.
Il est nécessaire
- - avoir votre propre site web;
- - savoir ce qu'est le CSS et où sont écrits ces styles sur le site.
Instructions
Étape 1
Pour créer une bordure, écrivez d'abord le code suivant en CSS:
ramka {}
Étape 2
Pour donner à la bordure la taille souhaitée, utilisez le paramètre border-width, qui définit la largeur de la ligne en pixels. Par exemple, si la ligne du cadre doit avoir une largeur de 3 pixels, l'entrée ressemblera à ceci:
ramka {border-width: 3px;}
Étape 3
Définissez maintenant le style de la bordure à l'aide du paramètre border-style. Si vous souhaitez créer une bordure dont les côtés sont des lignes continues régulières, placez l'entrée suivante dans le code entre les accolades - border-style: solid.
Étape 4
Une bordure pointillée peut être obtenue en l'écrivant comme ceci: border-style: pointillé. Vérifier le style de la bordure: en pointillé vous donnera une bordure en pointillé.
Étape 5
Vous pouvez faire de la bordure une double ligne continue comme ceci: border-style: double. Utilisez border-style: groove ou border-style: ridge pour encadrer du texte ou des images dans des cadres avec des effets secondaires 3D. La différence entre ces deux options est que dans le premier cas, le cadre est constitué de lignes en retrait, et dans le second, de lignes convexes.
Étape 6
Utilisez ce code: border-style: inset pour créer l'effet d'un encart avec la bordure d'un élément de site. Pour rendre le contenu de la bordure, avec la bordure, au contraire, convexe, écrivez border-style: outset.
Étape 7
Vous pouvez ajouter la couleur souhaitée au cadre en utilisant le paramètre border-color, également placé entre les accolades. Si vous voulez rendre la bordure rouge, écrivez border-color: rouge, bleu - border-color: bleu, orange - border-color: orange.
Étape 8
Le code de bordure CSS, y compris toutes les options, ressemble à ceci:
ramka {border-width: 3px; border-style: solide; couleur de la bordure: bleu;}
Étape 9
Maintenant, en HTML, écrivez ceci:
Contenu du cadre Au lieu de la phrase "Contenu du cadre", insérez le texte ou le code de l'image souhaitée.
Étape 10
Ainsi, vous pouvez concevoir un nombre illimité d'éléments sur le site. Pour modifier l'apparence du cadre, il vous suffit de modifier le code CSS.
