Embed Size (px)
DESCRIPTION
Cours XHTML/CSS. Lundi 15 Décembre 2008 Aujourd'hui, les balises et . Les balises . - PowerPoint PPT Presentation
Citation preview
Lundi 15 Décembre 2008Aujourd'hui, les balises <DIV> et <SPAN>
Les balises <div> DIV vient de "DIVision". Les balises <div> sont des
rectangles dans lesquels on affiche un ou plusieurs éléments XHTML. Les balises <div> sont souvent appelées "boites CSS" dans le jargon CSS
Les balises <div> ont les propriétés suivantes :width : largeur ;height : hauteur ;margin : marges extérieures ;padding : marges intérieures ;background-color.
Exercice sur les balises <div> Définir une balise <div> dont les caractéristiques
sont les suivantes :
largeur : 300px,hauteur: 50px,couleur d'arrière-plan : jaune,marges extérieures : 30px,Marges intérieures : 20px. Insérer du texte à l'extérieur et à l'intérieur de la
balise <div> et observer l'influence des marges.
Redimensionnez la fenêtre et observez ce qu'il se passe.
Solution<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body > avant la balise div avant la balise div avant la balise div avant
la balise div <div style="width:300px; height=50px; margin: 30px;
padding: 20px; background-color: yellow;"> intérieur de la balise div intérieur de la balise div intérieur de
la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div intérieur de la balise div
</div> Après la balise div Après la balise div Après la balise div
Après la balise div Après la balise div </body></html>
Opacité d'une boîte et positionnement absoluLes balises <div> peuvent être rendues translucides.
Vous utiliserez :
1) Pour Internet Explorer, la propriété
Filter: Alpha (Opacity=valeur1, style=0);
2) Pour les navigateurs Gecko (Firefox par exemple),
-moz-opacity: valeur2
Où valeur1 est compris entre 0 et 100 et valeur2 est compris entre 0 et 1.
Exercice : Définissez une boîte d'opacité 50% opérationnelle dans Internet Explorer et Firefox. Affichez cette boîte au-dessus d'une image JPG.
Solution<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd"> <html><head> <style type="text/css"> .alpha { Filter: Alpha(Opacity=50, Style=0); -moz-opacity: 0.5; } </style></head> <body > <img src="1.jpg" /> <div style="width:250px; height=60px; margin: 20px; padding: 10px; background-color: yellow; position: absolute; top: 10px; left: 10px;" class="alpha"> Une balise div translucide </div> </body></html>
