Tél.: 05 32 92 09 16 Email: contact@sagexa.com

Tutoriel


Taux global de satisfaction Client : 4.8 sur 5 pour 457 formations

Accueil / Tutoriels / Web / Client

C.S.S.::Tutoriel CSS Accéléré - 4 ème partie

Cascading Style Sheets

Par • • programmation client

Tutoriel CSS Accéléré - 4 ème partie

Dans cette leçon vous apprendrez...
  1. à comprendre la différence entre un div et un span.
  2. à associer des styles aux divs et aux spans.
  3. à utiliser judicieusement le div ou le span selon le contexte.

<div> et <span>

Les balises div et span sont utilisées en conjonction avec les feuilles de style CSS .

Quand utiliser un div ou un span ?

Les balises div et span font très peu de choses par elles-mêmes: <span> n'a aucune conséquence visuelle, tandis que <div> crèe un bloc de contenu (comme un <p>).

Comme la plupart des balises, <div> et <span> peuvent prendre les attributs class, id ou style.

C'est au travers de ces attributs que les styles seront appliqués au contenu de ces balises.
On peut naturellement imbriquer les div et les span, comme toute autre balise html.

Exemple de Code: /Demos/Div_Span_01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div et Span</title>
</head>
<body>
<div style="position:absolute; left:0px; top:0px; 
 font-family:Verdana; font-size:10pt;
 border-style:groove; border-width:30px; border-color:blue; padding:4px">
Ce texte est affiché dans le coin  
 <span style="font-style:italic; color:red">supérieur gauche</span>
 de la page.<br /> Et possède une bordure d'un goût discutable.
</div>
</body>
</html>
Explication du Code

Cette page sera affichée comme suit :

  • div permet de définir un bloc (taille et position)
  • span délimite un texte en ligne

Exo: Divs et Spans

Durée: 10 à 20 minutes.

L'exercice consiste à reproduire l'écran ci-après, en utilisant les div et les span :

note : vous pouvez utiliser les codes couleurs black, yellow, red, green et orange.

Où est la solution?

SAGEXA

La bienveillance numérique à vos côtés,

en Nouvelle-Aquitaine et partout ailleurs.

information actualisée le 18/04/2024

Nous contacter

Adresse: St Georges des Agoûts

Téléphone: Tél.: 05 32 92 09 16

Fax: 00 71 50 20 17

Email: contact@sagexa.com

Clients & Témoignages

avatar
"Le stage s'est très bien déroulé, dans une bonne ambiance, et bien mené par le formateur."
E.P., DRASS Caen
avatar
"Excellente formation sur la découverte de PHP/MySql"
R.A., Cetelem
avatar
"Bon prof, bonne formation"
C.P., Crédit Agricole
avatar
"Formation très efficace"
M.D., Dassault Systèmes
avatar
"Très condensé avec des exercices pertinents"
I.B., Orange
avatar
"Une très bonne approche pour évaluer la potentialité de PHP."
S.C., La Documentation Française
avatar
"Bonnes bases pour retravailler seul et approfondir."
Y.C., DRASS Caen
avatar
"Formation très complète, et de nombreux exercices à difficultés dosées ce qui permet de bien assimiler."
H.S., DRASS Caen
avatar
"Très bien !"
B.A., ALCATEL
avatar
"Un peu court pour tout voir, mais la doc permet de compléter."
C.C., Philips
avatar
"Très bien. Correspond exactement à ce que je suis venu chercher."
B.R., Etat-Major des Armées
avatar
"Il y a beaucoup de manipulations. Bon cours."
L.H., Etat-Major des Armées
avatar
"Rythme intense. Méthode efficace."
F.C., France Télécom
avatar
"Formateur très disponible à toutes les questions et difficultés rencontrées au cours des exercices."
C.J-P., Préfecture de Police
avatar
"Très dense et très riche, mais trop court !"
C.P., Ministère de l'Intérieur
avatar
"Cours très complet qui permet de voir énormément de points.Les exercices sont pertinents et permettent de voir des cas concrets.Beaucoup d’infos à absorber en 4 jours qui nécessitent de beaucoup pratiquer pour bien assimiler.La doc fournie est complète et sera très utile."
L.S., Camaieu
avatar
"Contenu approprié à mes besoins"
V.M., Normand Info
avatar
"Le contenu de la formation est à la hauteur de mes attentes, très bon sur la pédagogie."
D.M., IHEDN
avatar
"Très bonne formation, assez approfondie pour de la "prise en main"."
P.J., Safran Aircraft Engines
avatar
"Cette formation est très bien conçue avec une très bonne pédagogie du formateur."
M.L.J., RATP
avatar
"Formation correspondant à mes attentes"
G.L.G., CRAMIF
avatar
"Très satisfait - Formateur maitrisant parfaitement le sujet."
B.A., EDF
avatar
"Très satisfait - Le formateur était pédagogue, patient et expérimenté. De plus, le groupe comprenait peu de personnes. Je suis donc très satisfait de cette formation."
B.F., Alten SIR
avatar
"Très satisfait - Je suis particulièrement satisfait de la formation surtout par la disponibilité du formateur et par le contenu du programme."
E.Y.Z., CGI
avatar
"Très satisfait - Super formation avec un super formateur !"
J.B., Devoteam
avatar
"Très satisfaite - vraiment ravie de cette formation, j’ai pu mieux appréhender l’orientation objet. Xavier a toujours su répondre à mes questions et remarques!"
C.A., BRED Banque Populaire
avatar
"Très satisfaite - Approche pas à pas avec une alternance pratique et théorie fortement appréciée"
F.M., Invensense Movea France
avatar
"Très satisfait - Explications toujours pertinentes et très claires. Formateur ayant une approche très pédagogique et très compétent sur le sujet"
L.S., Collins Aerospace
avatar
"Très satisfait - Très bon formateur, très compétent et expliquant de manière graduelle les concepts mis en jeu."
V.N., SNAO

© Sagexa.com