Créez votre page HTML. Ouvrez un nouveau fichier dans un éditeur de texte et enregistrez-le avec ".html" comme extension. Entrez le code schéma suivant:
Cette structure crée une page Web de base avec deux éléments "div" en elle pour la démonstration.
Créer des règles CSS de votre page. Ouvrez un nouveau fichier dans un éditeur de texte et l'enregistrer comme "borderstyle.css" ou tout autre nom que vous préférez, tant que vous utilisez l'extension «.css». Entrez le code CSS suivant:
div.style1 {
border-style: solid;
border-width: 2px;
border-color: # FF0000-}
div.style2 {
border: 5px à double # 0000FF-}
Ce code définit le style, la largeur et la couleur des bordures pour chacune des deux classes «div» dans la page. Dans le premier style, chaque propriété border est déclarée séparément, tandis que dans le second, la syntaxe abrégée est utilisée pour définir toutes les propriétés en une seule déclaration.
Ajouter un lien vers les déclarations CSS dans votre page Web. Utilisation de la syntaxe suivante, connectez votre code HTML et CSS en ajoutant entre l'ouverture et la fermeture des balises "head":
Si vous avez enregistré votre fichier CSS en utilisant un nom différent, modifier ce code dans l'attribut "href" pour refléter le nom que vous avez choisi. Ouvrez votre page Web dans un navigateur pour voir l'effet de vos déclarations de style.
Ajouter un autre élément "div" dans votre page. Insérez le balisage suivant avant la fermeture "tête" l'étiquette de votre page:
Ajouter déclarations de style supplémentaires à votre fichier CSS:
div.style3 {
border-left: 3px précipita # 00FF00;
border-top: épaisse rainure # FFFF00;
border-right: mince arête # 00FFFF;
border-bottom: encart moyen FF00FF- #}
Ce code définit différentes propriétés de bordure de chaque côté de la nouvelle "div", démontrant les réglages possibles, vous pouvez opter pour.
Ajouter des propriétés pour le rembourrage et des marges au sein de votre code CSS. Le modèle de boîte CSS détermine l'endroit où la frontière apparaît par rapport à d'autres propriétés de l'élément. La zone de l'élément est immédiatement entouré par un rembourrage, puis la frontière, puis un espace pour les marges extérieures qui. Ajoutez ce qui suit à un de vos styles CSS "div" pour voir l'effet de ces propriétés:
padding: 10px;
margin: 5px;
Lorsque vous testez votre page dans un navigateur, vous verrez que la zone entre le contenu de l'élément et la frontière - ainsi que l'écart entre l'élément et la page environnante - a augmenté.