Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Lundi 15 Décembre 2008 Aujourd'hui, les balises et
2
Les balises DIV vient de "DIVision". Les balises sont des rectangles dans lesquels on affiche un ou plusieurs éléments XHTML. Les balises sont souvent appelées "boites CSS" dans le jargon CSS Les balises ont les propriétés suivantes : width : largeur ; height : hauteur ; margin : marges extérieures ; padding : marges intérieures ; background-color.
3
Exercice sur les balises Définir une balise 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 et observer l'influence des marges. Redimensionnez la fenêtre et observez ce qu'il se passe.
4
Solution avant la balise div avant la balise div avant la balise div avant 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 intérieur de la balise 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
5
Opacité d'une boîte et positionnement absolu Les balises 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.
6
Solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">.alpha { Filter: Alpha(Opacity=50, Style=0); -moz-opacity: 0.5; } <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
Présentations similaires
