Vous êtes ici : Accueil >> CSS >> Base pour créer un site en CSS >> Créer un cadre en Css

Créer un cadre en Css


<style> et </style> : permet de "délimiter" le contenue du style. Ces balises sont à utiliser dans un document html entre les balises <head> et </head> .
/* couleur du cadre */ : permet de mettre un commentaire (pour si retrouver) qui serat invisible .
#moncadre : est le nom que je donne à mon style
{ et } : les accolades permettent de "délimiter" les différents élément contenue dans un style. Elles sont par paires , une au début et une à la fin .
width : permet de donner une longueur au cadre .
margin : permet de mettre une marge externe au cadre .
padding : permet de mettre une marge à l'interieure du cadre .
background-color : permet de donner une couleur de fond au cadre .
border-left : bordure gauche du cadre .
border- right : bordure droite du cadre .
border-bottom : bordure bas du cadre .
border-top : bordure haute du cadre .
solid : signifie que la bordure sera pleinne .
px : taille en pixel .
; : permet de fermer chaque bloc (chaque fin de ligne) .

  <style>
#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
  </style>

Placé dans un document html ou php celà donnerait donc :

<html>
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1">
  <title>mon cadre en css</title>
  <style>
#moncadre {
width:800px;
margin:auto;
padding:10px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
  </style>
</head>
<body>
<div id="moncadre">ici mon texte
</div>
</body>
</html>

Pour utiliser le style il suffit de l'appeller de cette façon dans un document :
 <div id="moncadre">ici mon texte</div>

Le style permettant d'affecter une bordure à notre cadre peut être simplifié en une seule ligne:
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
Après:
border:1px solid #000000; /* couleur du cadre */
Etant donné que nous attribuons le même style à toutes les bordures, autant simplifier .

Catégorie CSS

Commentaire sur : Créer un cadre en Css
Signaler une erreurSignaler une erreur

Créer un site en utilisant le CSS et une feuille de styleCréer un site en utilisant le CSS et une feuille de styleBase pour créer un site en CSSBase pour créer un site en CSS Créer un menu en cssCréer un menu en css