Créer un cadre en Css

<style type="text/css"> et </style> : permet de "délimiter" le contenue du style. Ces balises sont à utiliser dans un document xhtml entre les balises <head> et </head>. Il est préférable d'utiliser le langage CSS dans une feuille de style externe afin de séparer le contenu de la mise en forme.

#moncadre : est le nom que je donne à mon style. Le "#" correspond à un "id" et un "id" ne peut être utilisé qu'une seule fois au sein d'un document.

{ et } : les accolades permettent de "délimiter" les différents éléments contenu 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'intérieur du cadre.

background : permet de donner une couleur de fond au cadre.

border : bordure du cadre.

border-radius : permet d'arrondir les angles. Les préfixes "-webkit-" et "-moz-" permet de faire comprendre à certains navigateurs qui ne savent pas interpréter la commandes "border-radius" qu'il faut justement arrondir les angles.

solid : signifie que la bordure sera pleine.

px : taille en pixel.

; : permet de fermer chaque bloc (chaque fin de ligne).
    <style type="text/css">
        #moncadre {
        width:800px;
        margin:0 auto;
        padding:10px;
        background:orange;
        border:1px solid #DDD;
        border-radius:5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        }
    </style>
Placé dans un document xhtml ou php celà donne donc :
<!DOCTYPE html>
<html lang="fr">
    <title>Exemple de création d'un cadre avec du css</title>
    <meta name="Description" content="Comment créer un cadre avec du Css .">
    <meta charset="UTF-8" />
    <style type="text/css">
        #moncadre {
        width:800px;
        margin:0 auto;
        padding:10px;
        background:orange;
        border:1px solid #DDD;
        border-radius:5px;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        }
    </style>
</head>

<body>
    
    <div id="moncadre">Exemple d'un cadre créé en utilisant le Css.</div>
    
</body>
</html>
Pour utiliser le style il suffit de l'appeler de cette façon dans un document :
 <div id="moncadre">ici mon texte</div>
Voir/déposer un commentaire (2) | Signaler un problème