cours xhtml css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cours XHTML/CSS PowerPoint Presentation
Download Presentation
Cours XHTML/CSS

Loading in 2 Seconds...

play fullscreen
1 / 9

Cours XHTML/CSS - PowerPoint PPT Presentation


  • 88 Views
  • Uploaded on

Cours XHTML/CSS. Lundi 9 Février 2009 Aujourd'hui, l'arrière-plan des balises <div>. Un arrière-plan dans un div. Pour définir une image d'arrière-plan dans une balise <div>, il suffit de préciser son URL dans la propriété background-image :

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Cours XHTML/CSS' - jeff


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cours xhtml css

Cours XHTML/CSS

Lundi 9 Février 2009

Aujourd'hui, l'arrière-plan des balises <div>

un arri re plan dans un div
Un arrière-plan dans un div

Pour définir une image d'arrière-plan dans une balise <div>, il suffit de préciser son URL dans la propriété background-image :

<div style="background-image: url(chute-eau.jpg); ">

exercice
Exercice

Définissez une balise <DIV> en utilisant un arrière-plan JPG de votre choix. Définissez les propriétés suivantes pour ce DIV :

  • Taille du texte : 40 px
  • Couleur du texte : red
solution
Solution

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<body>

<div style="background-image: url(image.jpg); font-size: 40px; color: yellow;"> Ce texte est affiché au dessus de l'arrière-plan image.jpg. </div>

</body>

</html>

r p tition de l arri re plan
Répétition de l'arrière-plan

Pour répéter un arière-plan sur toute la surface d'un <DIV>, il suffit de le positionner en flottant à gauche du <DIV> :

<div style="width: largeur_du_div; height: hauteur_du_div; background-image: url(image.jpg); float: left;"></div>

exercice1
Exercice

Définissez une balise <DIV> ayant les caractéristiques suivantes :

  • Largeur : 300px
  • Hauteur : 200px
  • Image d'arrière-plan : téléchargée depuis http://lem.korp.free.fr/mulots/texture.jpg
  • Style de bordure (border-style) initialisé à solid
  • Positionnement float: left

Vous devriez obtenir ce résultat :

la solution
La solution

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<body>

<div style="width: 300px; height: 200px; background-image: url(20.jpg); border-style: solid; float: left;"></div>

</body>

</html>

r p tition partielle de l arri re plan
Répétition partielle de l'arrière-plan

Pour ne répéter l'arrière-plan qu'horizontalement, vous utiliserez un positionnement flottant et vous initialiserez la propriété background-repeat avec la valeur repeat-x. Bien évidemment, la valeur repeat-y limite la répétition à l'axe vertical.

<div style="background-image: url(image.jpg); background-repeat: repeat-x; float: left;"></div>

exercice2
Exercice

Définissez une balise <DIV> ayant les caractéristiques suivantes :

  • Largeur : 300px
  • Hauteur : 200px
  • Image d'arrière-plan : téléchargée depuis http://lem.korp.free.fr/mulots/texture.jpg
  • Style de bordure (border-style) initialisé à solid
  • Positionnement float: left
  • Répétition horizontale seulement (background-repeat: repeat-x)

Vous devriez obtenir ce résultat :