Css 2

25/06/2023
LA MISE EN FORME DES BOÎTES

Exemple (display : inline | block )
Les items de listes sont des éléments de type bloc. Ils apparaissent les uns en
dessous des autres. Avec la propriété display: inline, il est possible de les afficher
sur une ligne.
Exemple :
 display : inline | block : permet de redéfinir un élément en ligne comme étant

 /* Partie css */
un élément bloc et inversement. (voir exemple ci-après) <ol> li {
<li> <a href="#">Lien 1</a> </li> display: inline; /*affichage en ligne */
 width et height : permettent de fixer respectivement la largeur et la hauteur <li> <a href="#">Lien 2</a> </li> }
de l’élément boîte. <li> <a href="#">Lien 3</a> </li>
<li> <a href="#">Lien 4</a> </li> a {
 margin : permet de définir la marge extérieure de l’élément boîte. <li> <a href="#">Lien 5</a> </li> color : green;
<li> <a href="#">Lien 6</a> </li> border: 1px solid;
 padding : permet de définir la marge intérieure de l’élément boîte. <li> <a href="#">Lien 7</a> </li> text-decoration: none;
 background-color : permet de donner une couleur de fond à un élément. </ol> }
 opacity : permet de faire varier l’opacité ou la transparence d’un élément.

53
52
Exemple : <style>
LA MISE EN FORME DES BOÎTES (2) #round1 { width: 70px;
Code CSS : height: 70px;
 border-style : solid |dashed | dotted | double | groove | ridge | inset | outset | background-color: rgb(185,205,225);
border: 1px solid gray;
hidden | none : permet d’apporter une variété de bordures. border-radius: 35px; }
 border-width : permet de définir l’épaisseur des quatre bordures. #round2 { width: 12em;
height: 4em;
 border-color : permet de définir la couleur de la bordure. background-color: rgb(185,205,225);
border: 1px solid gray;
 border : permet de noter de façon raccourcie les différentes propriétés permettant border-radius: 1em 4em 1em 4em;}
</style>
de définir les bordures d’un élément, soit border-color, border-style et border-
width. Code html :
 border-radius : x y : permet d’arrondir les quatre extrémités de la bordure de la
<body>
boite. <p></p>
Rendu :
<div id="round1"></div>
<p></p>
<div id="round2"></div>
</body>
54 55
1
25/06/2023
LA MISE EN PAGE DES BOÎTES :

LA MISE EN FORME DES BOÎTES (3)
 position : static | relative | absolute | fixed : permet de positionner un élément.
 background-image : url(fichier_image) | none : permet d’insérer une Types de position :
image de fond disposée de façon classique, soit en mosaïque.
static Le concepteur n’a donc pas le contrôle. L’élément ne peut être positionné ou
 background-repeat : repeat | repeat-x | repeat-y |no-repeat : permet de repositionné et sa visibilité ne peut être modifiée. Il n’est également pas possible
donner le contrôle au concepteur quant à la répétition de l’image qui d’utiliser du JavaScript pour changer la position de l’élément.
ne sera ainsi plus nécessairement disposée en mosaïque. relative C’est le positionnement d’un élément par rapport à sa position normale ou
statique ( en utilisant left, right, top et bottom). (voir exemple_relative)
 background-attachment : scroll |fixed : permet de fixer une image de
absolute Le positionnement absolu crée un élément indépendant du reste du document.
fond qui ne défile pas avec le reste de la page.
Les éléments définis en position absolue sont retirés du flux normal et se
 box-shadow : x y z : permet de définir les ombres portées des boîtes.
positionnent à l’emplacement exact défini par le concepteur. (voir
 resize : none | both | horizontal | vertical : permet de redimensionner exemple_absolue)
un élément. fixed Le positionnement fixe crée aussi un élément indépendant dont on peut définir
la position. Ici l’élément reste fixe même lorsque l’on fait défiler la page.
56 57
(voir exemple_fixe)
Exemple_ relative : Exemple_ absolue :

Code CSS : <style> Code CSS :
.normale { width: 180px; <style>
border: 2px solid gray; .absolu {
text-align: center;} position: absolute;
left: 50px;
Si on ne met pas la position à relative, .relative { position: relative; top: 50px;
le décalage ne fera pas effet. top: 30px; width: 180px;
left: 60px; border: 2px solid black;
width: 180px; text-align: center;
border: 2px solid gray; }
text-align: center;} </style>
</style>
Code html : Code html :
<div class="normale"> Position normale statique </div> <p>. . . . . . . . . . . . . . . . . . . . .</p>
<p>. . . . . . . . . . . . . . . . . . . . .</p> <p>Hi boite absolue, tu m'écrase!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
<div class="relative"> Position relative </div> <div class="absolu">
Position absolue
</div>
Rendu :
Rendu :
50px
50px
60px 58 59
2
25/06/2023
Exemple_ fixe : <style> LA MISE EN PAGE DES BOÎTES (2) :

Code CSS :
.fixe {position: fixed;
top: 50%;  float: right| left| none : permet de retirer un élément boîte du flux normal pour la
left: 50px;
width: 180px; placer le plus à droite ou le plus gauche possible dans son élément parent, soit son
border: 2px solid black;
text-align: center;} conteneur. (voir Exemple1_ float et Exemple2_ float )
}
 clear: right | left | both : permet d’annuler le flottement introduit par la propriété
</style>
float.
Code html :  z-index : permet d’ajouter un axe en profondeur permettant de positionner des
<p>. . . . . . . . . . . . . . . . . . . . .</p> éléments au-dessus ou en dessous d’un autre élément, la superposition des boîtes.
<div class="fixe">
Position fixe (voir Exemple_ z-index)
</div>
 overflow: hidden | scroll | visible | auto : permet de déterminer ce que le navigateur
<img src="./images1/ummto.jpg" alt="">
<img src="./images1/ummto.jpg" alt=""> doit faire lorsqu’un élément est plus grand que l’élément parent qui le contient.
<img src="./images1/ummto.jpg" alt="">
<img src="./images1/ummto.jpg" alt="">  clip : rect(sup_gauche sup_droit inf_droit inf_gauche) |auto : permet de déterminer
la partie visible de l’élément, généralement une image.
 visibility : visible | hidden : permet de déterminer si un élément est visible ou caché.
Rendu : Pour voir l’effet de position, faites défiler la page.
60 61
Exemple1_ float : Exemple2_ float : Code css : <style>

Rendu : #conteneur {
Code : Code html : width: 940px;
margin: 0 auto;
<div>
<div id="conteneur"> }
<img src="./images1/ummto.jpg"> #boite-gauche {
<div id="boite-gauche">
</div> width: 300px;
<h3>Mollis Nullam</h3>
<p>Lorem ipsum dolor sit amet, padding: 0;
<p>Maecenas sed diam...</p>
consectetuer adipiscing elit. Sed non margin-right: 20px;
</div> float: left;
risus. Suspendisse lectus <p>
<div id="boite-centre"> }
<h3>Porta Ornare</h3> #boite-centre {
<p>Cras mattis consectetur...</p> width: 300px;
</div> padding: 0;
margin: 0;
Rendu si on rajoute le style float : "right" <div id="boite-droite">
float: left;
au div conteneur de l’image : <h3>Parturient Magna</h3>
}
<p>Morbi leo risus...</p> #boite-droite {
</div> width: 300px;
</div> padding: 0;
margin-left: 20px;
float: left;
Rendu : }
</style>
62 63
3
25/06/2023
Exemple_ z-index :
.boite3 {
Code css : position: absolute;
left: 60px;
<style> top: 80px;
.boite1 { width: 80px;
position: absolute; height: 40px;
left: 20px; padding: 4px;
top: 20px; border: 2px solid gray;
width: 80px; background-color: white;
z-index: 3; Rendu :
height: 40px;
padding: 4px; }
border: 2px solid gray; </style>
background-color: rgb(125, 165, 205);
z-index: 1;
}
.boite2 {
position: absolute;
left: 40px; Code html :
top: 50px;
width: 80px; <div class="boite1">
height: 40px; z-index 1
padding: 4px; </div>
border: 2px solid gray; <div class="boite2">
background-color: rgb(215, 230, 245); z-index 2
z-index: 2; </div>
} <div class="boite3">
z-index 3
</div> 64

Css 2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Css 2

Transféré par

Droits d'auteur :

Formats disponibles

25/06/2023

LA MISE EN FORME DES BOÎTES

 display : inline | block : permet de redéfinir un élément en ligne comme étant

 opacity : permet de faire varier l’opacité ou la transparence d’un élément.

LA MISE EN PAGE DES BOÎTES :

Exemple_ relative : Exemple_ absolue :

Exemple_ fixe : <style> LA MISE EN PAGE DES BOÎTES (2) :

Exemple1_ float : Exemple2_ float : Code css : <style>

Vous aimerez peut-être aussi