Les partenaires publicitaires:

Comment faire une frontière HTML en utilisant div

Lorsque vous concevez et construisez des pages Web HTML, vous pouvez définir le contenu et l'apparence. Utilisation de HTML en conjonction avec CSS ou Cascading Style Sheets, vous pouvez créer des éléments de pages web avec des styles spécifiques qui leur sont appliquées. CSS vous permet de définir diverses propriétés de style, y compris les frontières. Lors de la déclaration des biens à la frontière pour un élément tel un "div" en HTML, vous pouvez spécifier le style de bordure, la largeur et la couleur. Vous pouvez également définir la frontière pour apparaître différemment sur chacun des quatre côtés de l'élément.

Instructions

  1. 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:

    Div style 1

    Div style 2

    Cette structure crée une page Web de base avec deux éléments "div" en elle pour la démonstration.




  2. 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.

  3. 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.

  4. Ajouter un autre élément "div" dans votre page. Insérez le balisage suivant avant la fermeture "tête" l'étiquette de votre page:



    Div style 3

  5. 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.

  6. 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é.

Conseils Avertissements

  • Utilisez frontières CSS pour rendre les zones de texte dans le contenu HTML plus lisible, en divisant une page en sections claires.
  • CSS apparaît différemment selon les navigateurs, il est donc préférable de tester vos pages dans plus d'un.
» » » » Comment faire une frontière HTML en utilisant div