Développement de site web
L. GARNIER
L1 Info1B
L. GARNIER xhtml-css L1 Info1B. 1 / 85
Plan
1 Introduction
2 Un peu de style CSSLes couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
4 Les compteurs
5 Les tableauxLes tableaux standardsMarges intérieures et extérieuresFusion(s) de cellulesLes grands tableaux
6 Structuration d’une page xHTML
7 Les formulaires
L. GARNIER xhtml-css L1 Info1B. 2 / 85
Introduction
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
4 Les compteurs5 Les tableaux
Les tableaux standardsMarges intérieures et extérieuresFusion(s) de cellulesLes grands tableaux
6 Structuration d’une page xHTML7 Les formulaires[current,currentsubsection,sectionstyle=show/shaded,subsectionstyle=show/shad
L. GARNIER xhtml-css L1 Info1B. 3 / 85
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
L. GARNIER xhtml-css L1 Info1B. 4 / 85
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
L. GARNIER xhtml-css L1 Info1B. 4 / 85
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
L. GARNIER xhtml-css L1 Info1B. 4 / 85
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
Accès avec un client sftp (permet le transfert de fichiers) : filezilla
L. GARNIER xhtml-css L1 Info1B. 4 / 85
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
Accès avec un client sftp (permet le transfert de fichiers) : filezilla
Editeur : bluefish lancé par $ bluefish &
L. GARNIER xhtml-css L1 Info1B. 4 / 85
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
Accès avec un client sftp (permet le transfert de fichiers) : filezilla
Editeur : bluefish lancé par $ bluefish &
Navigateur : firefox (iceweasel), chrome, opera...
L. GARNIER xhtml-css L1 Info1B. 4 / 85
Introduction
Salles I.E.M.
Serveur linux : salles -> clients sous linux. Accès au compte depuis n’importequelle salle de l’I.E.M.
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
Accès en ligne de commande pour le login toto $ ssh -X -ltoto 193.50.49.96
Accès avec un client sftp (permet le transfert de fichiers) : filezilla
Editeur : bluefish lancé par $ bluefish &
Navigateur : firefox (iceweasel), chrome, opera...
Dans les noms de fichiers et derépertoires, pas d’espace, pasd’accents.
L. GARNIER xhtml-css L1 Info1B. 4 / 85
Introduction
Le répertoire public_html
Dépôt du projet personnel (seul ou en binôme) au format zipdans le répertoire public_html
L. GARNIER xhtml-css L1 Info1B. 5 / 85
Introduction
Le répertoire public_html
Dépôt du projet personnel (seul ou en binôme) au format zipdans le répertoire public_html
Le répertoire public_html qui doit être accessible en Lecture/Execution pourtout le monde. La commande à lancer sous Linux :$ chmod -R a+rx public_html/
L. GARNIER xhtml-css L1 Info1B. 5 / 85
Introduction
Le répertoire public_html
Dépôt du projet personnel (seul ou en binôme) au format zipdans le répertoire public_html
Le répertoire public_html qui doit être accessible en Lecture/Execution pourtout le monde. La commande à lancer sous Linux :$ chmod -R a+rx public_html/
Vous devez également donner le droit d’éxécution à tout le monde sur votrerépertoire personnel. La commande est la suivante sous Linux dans votrerépertoire personnel : $ chmod o+x . (le point fait parti de la syntaxe)
Merci à Philippe Cavret
L. GARNIER xhtml-css L1 Info1B. 5 / 85
Introduction
Le répertoire public_html
Dépôt du projet personnel (seul ou en binôme) au format zipdans le répertoire public_html
Le répertoire public_html qui doit être accessible en Lecture/Execution pourtout le monde. La commande à lancer sous Linux :$ chmod -R a+rx public_html/
Vous devez également donner le droit d’éxécution à tout le monde sur votrerépertoire personnel. La commande est la suivante sous Linux dans votrerépertoire personnel : $ chmod o+x . (le point fait parti de la syntaxe)
Merci à Philippe Cavret
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
L. GARNIER xhtml-css L1 Info1B. 5 / 85
Introduction
Le répertoire public_html
Dépôt du projet personnel (seul ou en binôme) au format zipdans le répertoire public_html
Le répertoire public_html qui doit être accessible en Lecture/Execution pourtout le monde. La commande à lancer sous Linux :$ chmod -R a+rx public_html/
Vous devez également donner le droit d’éxécution à tout le monde sur votrerépertoire personnel. La commande est la suivante sous Linux dans votrerépertoire personnel : $ chmod o+x . (le point fait parti de la syntaxe)
Merci à Philippe Cavret
http ://ufrsciencestech.u-bourgogne.fr/licence1/Info12_ConceptionDeSitesWeb/
http ://ufrsciencestech.u-bourgogne.fr/~garnier/
L. GARNIER xhtml-css L1 Info1B. 5 / 85
Introduction
Chemin absolu ou chemin relatif
Chemins absolus/home/lionel/info12/tp1/home/lionel/info12/tp1/html
L. GARNIER xhtml-css L1 Info1B. 6 / 85
Introduction
Chemin absolu ou chemin relatif
Chemins absolus/home/lionel/info12/tp1/home/lionel/info12/tp1/html
Chemins relatifaucun sens
L. GARNIER xhtml-css L1 Info1B. 6 / 85
Introduction
Chemin absolu ou chemin relatif
Chemins absolus/home/lionel/info12/tp1/home/lionel/info12/tp1/html
Chemins relatifaucun sensDepuis html pour aller dans css../cssDepuis tp2 pour aller dans css../tp1/css
L. GARNIER xhtml-css L1 Info1B. 6 / 85
Introduction
Chemin absolu ou chemin relatif
Chemins absolus/home/lionel/info12/tp1/home/lionel/info12/tp1/html
Chemins relatifaucun sensDepuis html pour aller dans css../cssDepuis tp2 pour aller dans css../tp1/css
Que des chemins relatifs, aucun chemin absolu
L. GARNIER xhtml-css L1 Info1B. 6 / 85
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
L. GARNIER xhtml-css L1 Info1B. 7 / 85
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
XHTML = HTML + XML (Extensible HyperText Markup Language = langagede marquage hypertexte extensible)
L. GARNIER xhtml-css L1 Info1B. 7 / 85
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
XHTML = HTML + XML (Extensible HyperText Markup Language = langagede marquage hypertexte extensible)
Validation des pages HTMLhttp ://validator.w3.org/http ://html5.validator.nu/http ://www.wave.webaim.org/wave/index.jsp
L. GARNIER xhtml-css L1 Info1B. 7 / 85
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
XHTML = HTML + XML (Extensible HyperText Markup Language = langagede marquage hypertexte extensible)
Validation des pages HTMLhttp ://validator.w3.org/http ://html5.validator.nu/http ://www.wave.webaim.org/wave/index.jspValidation des feuilles de styleshttp ://www.css-validator.org/
L. GARNIER xhtml-css L1 Info1B. 7 / 85
Introduction
Définition d’HTML et de xhtml
Définition (HTML et xhtml)
HTML = HyperText Markup Language
XHTML = HTML + XML (Extensible HyperText Markup Language = langagede marquage hypertexte extensible)
Validation des pages HTMLhttp ://validator.w3.org/http ://html5.validator.nu/http ://www.wave.webaim.org/wave/index.jspValidation des feuilles de styleshttp ://www.css-validator.org/Quelques liens utileshttp ://www.la-grange.net/w3c/html4.01/cover.htmlhttp ://www.alsacreations.com/http ://openweb.eu.org/http ://www.w3schools.com/
L. GARNIER xhtml-css L1 Info1B. 7 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!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">
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!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>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Ma premiere page XHTML </title>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Ma premiere page XHTML </title>
</head>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Ma premiere page XHTML </title>
</head>
<body>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Ma premiere page XHTML </title>
</head>
<body>
Partie visible dans le navigateur</body>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
En-tête xhtml
Un document HTML est un fichier texte qui contient des balises (tag enanglais)
✿✿✿✿✿
écrites✿✿✿
en✿✿✿✿✿✿✿✿✿✿
minuscule
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Ma premiere page XHTML </title>
</head>
<body>
Partie visible dans le navigateur</body>
</html>
L. GARNIER xhtml-css L1 Info1B. 8 / 85
Introduction
Types de balises
Définition (balises ouvrante et fermante )
Une balise ouvrante est de la forme <syntaxe> tandis que sa balisefermante est </syntaxe>.
L. GARNIER xhtml-css L1 Info1B. 9 / 85
Introduction
Types de balises
Définition (balises ouvrante et fermante )
Une balise ouvrante est de la forme <syntaxe> tandis que sa balisefermante est </syntaxe>.
<body>
Partie visible dans le navigateur</body>
Définition (balise auto-fermante )
Certaines balises ne vont pas par deux, la syntaxe est <syntaxe />.
L. GARNIER xhtml-css L1 Info1B. 9 / 85
Introduction
Types de balises
Définition (balises ouvrante et fermante )
Une balise ouvrante est de la forme <syntaxe> tandis que sa balisefermante est </syntaxe>.
<body>
Partie visible dans le navigateur</body>
Définition (balise auto-fermante )
Certaines balises ne vont pas par deux, la syntaxe est <syntaxe />.
Placée entre <head> et </head>, la syntaxe :<link rel="stylesheet" type="text/css" href="chemin" />
permet de définir l’emplacement de la feuille de style (css)
L. GARNIER xhtml-css L1 Info1B. 9 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
• la balise adresse
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
• la balise adresse<address> </address>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
• la balise adresse<address> </address>
• la balise de citation (version bloc)
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Balise de blocs (block)
Définition (balises de bloc, une ouvrante et une fermante )
Une balise de bloc génère un retour à la ligne avant et après et contient un
bloc.
Les balises de blocs les plus courantes sont :
• les balises de titre<h1> Titre le plus gros possible </h1>
<h6> Titre le plus petit possible </h6>
• les balises de paragraphe<p> Je suis un paragraphe </p>
• la balise générique<div> </div>
• la balise adresse<address> </address>
• la balise de citation (version bloc)<blockquote><p>...</p></blockquote>
L. GARNIER xhtml-css L1 Info1B. 10 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
• la balise de citation (version en ligne)
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
• la balise de citation (version en ligne)<p>...<q>...</q>...</p>
• la balise de citation de titre ou d’événement
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Définition (balises en ligne, une ouvrante et une fermante )
Une balise en ligne ne génère aucun espace avant ou après et est contenu
dans une balise de bloc.
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
• la balise de citation (version en ligne)<p>...<q>...</q>...</p>
• la balise de citation de titre ou d’événement<p>...<cite>...</cite>...</p>
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Introduction
Les balises en ligne (inline)
Les balises en ligne les plus courantes sont :
• la balise de lien hypertexte<p>... <a href="http://www.google.fr">
moteur de recherche google </a> ...</p>
• la balise de mise en évidence<strong>...</strong>
• la balise générique<span> </span>
• la balise de citation (version en ligne)<p>...<q>...</q>...</p>
• la balise de citation de titre ou d’événement<p>...<cite>...</cite>...</p>
Les balises contenant em, i, sub et sup sont interdites dansle fichier html =⇒ CSS
L. GARNIER xhtml-css L1 Info1B. 11 / 85
Un peu de style CSS
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
4 Les compteurs5 Les tableaux
Les tableaux standardsMarges intérieures et extérieuresFusion(s) de cellulesLes grands tableaux
6 Structuration d’une page xHTML7 Les formulaires[current,currentsubsection,sectionstyle=show/shaded,subsectionstyle=show/shad
L. GARNIER xhtml-css L1 Info1B. 12 / 85
Un peu de style CSS Les couleurs
L’hexadécimal
Définition (chiffres en base b)
Système de numérotation en base b, b ∈ N−{0;1}. Les chiffres sont les
éléments de{0;1; · · · ;b−1}
L. GARNIER xhtml-css L1 Info1B. 13 / 85
Un peu de style CSS Les couleurs
L’hexadécimal
Définition (chiffres en base b)
Système de numérotation en base b, b ∈ N−{0;1}. Les chiffres sont les
éléments de{0;1; · · · ;b−1}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
L. GARNIER xhtml-css L1 Info1B. 13 / 85
Un peu de style CSS Les couleurs
L’hexadécimal
Définition (chiffres en base b)
Système de numérotation en base b, b ∈ N−{0;1}. Les chiffres sont les
éléments de{0;1; · · · ;b−1}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
L. GARNIER xhtml-css L1 Info1B. 13 / 85
Un peu de style CSS Les couleurs
L’hexadécimal
Définition (chiffres en base b)
Système de numérotation en base b, b ∈ N−{0;1}. Les chiffres sont les
éléments de{0;1; · · · ;b−1}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
• En base 2, les chiffres sont {0;1} et 1+1 = 10
L. GARNIER xhtml-css L1 Info1B. 13 / 85
Un peu de style CSS Les couleurs
L’hexadécimal
Définition (chiffres en base b)
Système de numérotation en base b, b ∈ N−{0;1}. Les chiffres sont les
éléments de{0;1; · · · ;b−1}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
• En base 2, les chiffres sont {0;1} et 1+1 = 10
• En base 16, les chiffres sont {0;1;2;3;4;5;6;7;8;9;A;B;C;D;E ;F} etF +1 = 10
L. GARNIER xhtml-css L1 Info1B. 13 / 85
Un peu de style CSS Les couleurs
L’hexadécimal
Définition (chiffres en base b)
Système de numérotation en base b, b ∈ N−{0;1}. Les chiffres sont les
éléments de{0;1; · · · ;b−1}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
• En base 2, les chiffres sont {0;1} et 1+1 = 10
• En base 16, les chiffres sont {0;1;2;3;4;5;6;7;8;9;A;B;C;D;E ;F} etF +1 = 10
Définition (octet)
Un octet est la réunion de 8 bits. Les valeurs prises sont entre 0 et
28 −1 = 255.
L. GARNIER xhtml-css L1 Info1B. 13 / 85
Un peu de style CSS Les couleurs
L’hexadécimal
Définition (chiffres en base b)
Système de numérotation en base b, b ∈ N−{0;1}. Les chiffres sont les
éléments de{0;1; · · · ;b−1}
et si nous ajoutons 1 au dernier chiffre b−1, nous obtenons le nombre 10.
• En base 10, les chiffres sont {0;1;2;3;4;5;6;7;8;9} et 9+1 = 10
• En base 2, les chiffres sont {0;1} et 1+1 = 10
• En base 16, les chiffres sont {0;1;2;3;4;5;6;7;8;9;A;B;C;D;E ;F} etF +1 = 10
Définition (octet)
Un octet est la réunion de 8 bits. Les valeurs prises sont entre 0 et
28 −1 = 255.
28 = 24×2 =(
24)2
= 162
En hexadécimal, les valeurs prises sont entre 00 et FF
L. GARNIER xhtml-css L1 Info1B. 13 / 85
Un peu de style CSS Les couleurs
Les couleurs
• Couleurs prédéfinies :blanc, noir, rouge, bleu, vert, jaune ...http://zone47.com/xhtml/couleurs.php
L. GARNIER xhtml-css L1 Info1B. 14 / 85
Un peu de style CSS Les couleurs
Les couleurs
• Couleurs prédéfinies :blanc, noir, rouge, bleu, vert, jaune ...http://zone47.com/xhtml/couleurs.php
A écrire en français évidemment
• Couleurs en hexadécimal :#RRGGBB
#000000#000000
#FFFFFF#FFFFFF
#FF0000#FF0000
#00FF00#00FF00
#00A000#00A000
#0000FF#0000FF
#A0A0A0#A0A0A0
#404040#404040
#FFFF00#FFFF00
#FF6000#FF6000
#00FFFF#00FFFF
#FF00FF#FF00FF
L. GARNIER xhtml-css L1 Info1B. 14 / 85
Un peu de style CSS Les couleurs
Les couleurs
• Couleurs prédéfinies :blanc, noir, rouge, bleu, vert, jaune ...http://zone47.com/xhtml/couleurs.php
A écrire en français évidemment
• Couleurs en hexadécimal :#RRGGBB
#000000#000000
#FFFFFF#FFFFFF
#FF0000#FF0000
#00FF00#00FF00
#00A000#00A000
#0000FF#0000FF
#A0A0A0#A0A0A0
#404040#404040
#FFFF00#FFFF00
#FF6000#FF6000
#00FFFF#00FFFF
#FF00FF#FF00FF
http://fr.wikipedia.org/wiki/Liste_de_couleurs
L. GARNIER xhtml-css L1 Info1B. 14 / 85
Un peu de style CSS Les couleurs
Les couleurs
• Couleurs prédéfinies :blanc, noir, rouge, bleu, vert, jaune ...http://zone47.com/xhtml/couleurs.php
A écrire en français évidemment
• Couleurs en hexadécimal :#RRGGBB
#000000#000000
#FFFFFF#FFFFFF
#FF0000#FF0000
#00FF00#00FF00
#00A000#00A000
#0000FF#0000FF
#A0A0A0#A0A0A0
#404040#404040
#FFFF00#FFFF00
#FF6000#FF6000
#00FFFF#00FFFF
#FF00FF#FF00FF
http://fr.wikipedia.org/wiki/Liste_de_couleurs
Logiciel Gimp et utilisation de la pipette
L. GARNIER xhtml-css L1 Info1B. 14 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : é
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : à
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : ü
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œ
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
« : «
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
« : «» : »
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
« : «» : »
© : &copie;
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Les accents
Définition (Accents grave, aigu, circonflexe et autre)
Pour obtenir une lettre avec un accent ou un tréma ou une cédille, la lettre est
précédée de & et est suivie de :
• grave; pour un accent grave
• acute; pour un accent aigu
• circ; pour un accent circonflexe
• uml; pour un tréma
• cedil; pour une cédille
é : éè : è
à : àî : î
ü : üç : ç
œ : œC : €
< : <> : >
« : «» : »
© : &copie;°: °
L. GARNIER xhtml-css L1 Info1B. 15 / 85
Un peu de style CSS Mise en forme du texte
Alignement horizontal
Définition (text-align)
La syntaxe pour aligner du texte de façon horizontale est :
{text-align: valeur;
}
où valeur vaut left, right, center ou justify.
L. GARNIER xhtml-css L1 Info1B. 16 / 85
Un peu de style CSS Mise en forme du texte
Alignement horizontal
Définition (text-align)
La syntaxe pour aligner du texte de façon horizontale est :
{text-align: valeur;
}
où valeur vaut left, right, center ou justify.
HTML : <h1> Alignement à droite </h1>
L. GARNIER xhtml-css L1 Info1B. 16 / 85
Un peu de style CSS Mise en forme du texte
Alignement horizontal
Définition (text-align)
La syntaxe pour aligner du texte de façon horizontale est :
{text-align: valeur;
}
où valeur vaut left, right, center ou justify.
HTML : <h1> Alignement à droite </h1>
<h4> Alignement au centre </h4>
L. GARNIER xhtml-css L1 Info1B. 16 / 85
Un peu de style CSS Mise en forme du texte
Alignement horizontal
Définition (text-align)
La syntaxe pour aligner du texte de façon horizontale est :
{text-align: valeur;
}
où valeur vaut left, right, center ou justify.
HTML : <h1> Alignement à droite </h1>
<h4> Alignement au centre </h4>
CSS : h1{text-align:right; }
L. GARNIER xhtml-css L1 Info1B. 16 / 85
Un peu de style CSS Mise en forme du texte
Alignement horizontal
Définition (text-align)
La syntaxe pour aligner du texte de façon horizontale est :
{text-align: valeur;
}
où valeur vaut left, right, center ou justify.
HTML : <h1> Alignement à droite </h1>
<h4> Alignement au centre </h4>
CSS : h1{text-align:right; }
h4{text-align:center; }
L. GARNIER xhtml-css L1 Info1B. 16 / 85
Un peu de style CSS Mise en forme du texte
Alignement horizontal
Définition (text-align)
La syntaxe pour aligner du texte de façon horizontale est :
{text-align: valeur;
}
où valeur vaut left, right, center ou justify.
HTML : <h1> Alignement à droite </h1>
<h4> Alignement au centre </h4>
CSS : h1{text-align:right; }
h4{text-align:center; }
Exemple d’alignements
L. GARNIER xhtml-css L1 Info1B. 16 / 85
Un peu de style CSS Mise en forme du texte
Alignement horizontal
Définition (text-align)
La syntaxe pour aligner du texte de façon horizontale est :
{text-align: valeur;
}
où valeur vaut left, right, center ou justify.
HTML : <h1> Alignement à droite </h1>
<h4> Alignement au centre </h4>
CSS : h1{text-align:right; }
h4{text-align:center; }
Exemple d’alignements
Valeur par défaut : left
L. GARNIER xhtml-css L1 Info1B. 16 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :• top
top : le contenu de la cellule est calé en haut de celle-ci
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :• top
• bottom
top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-ci
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :• top
• bottom
• baseline
top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élément
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :• top
• bottom
• baseline
• middle
top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de texte
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :• top
• bottom
• baseline
• middle
• sub
top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indice
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :• top
• bottom
• baseline
• middle
• sub
• super
top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indicesuper : l’élément est mis en exposant
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :• top
• bottom
• baseline
• middle
• sub
• super
• text-bottom
top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indicesuper : l’élément est mis en exposanttext-top : le haut de l’élément est aligné sur le haut de la ligne de texte
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
Définition (vertical-align)
La syntaxe pour aligner du texte de façon verticale est :
{vertical-align: valeur; }
où valeur prend l’une des valeurs suivantes :• top
• bottom
• baseline
• middle
• sub
• super
• text-bottom
• text-top
top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indicesuper : l’élément est mis en exposanttext-top : le haut de l’élément est aligné sur le haut de la ligne de textetext-bottom : le bas de l’élément est aligné sur le bas de la ligne de texte
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Alignement vertical
top : le contenu de la cellule est calé en haut de celle-cibottom : le contenu de la cellule est calé en bas de celle-cipar défaut, baseline : positionnement normal de l’élémentmiddle : le milieu de l’élément est aligné sur le milieu de la ligne de textesub : l’élément est mis en indicesuper : l’élément est mis en exposanttext-top : le haut de l’élément est aligné sur le haut de la ligne de textetext-bottom : le bas de l’élément est aligné sur le bas de la ligne de texte
bottom
text-top
text-bottom
top
baseline
L. GARNIER xhtml-css L1 Info1B. 17 / 85
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)
L. GARNIER xhtml-css L1 Info1B. 18 / 85
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)
L. GARNIER xhtml-css L1 Info1B. 18 / 85
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)• px : taille d’un pixel
L. GARNIER xhtml-css L1 Info1B. 18 / 85
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)• px : taille d’un pixel
� Unité absolue
L. GARNIER xhtml-css L1 Info1B. 18 / 85
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)• px : taille d’un pixel
� Unité absolue
• cm : centimètres
L. GARNIER xhtml-css L1 Info1B. 18 / 85
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)• px : taille d’un pixel
� Unité absolue
• cm : centimètres• mm : millimètres
L. GARNIER xhtml-css L1 Info1B. 18 / 85
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)• px : taille d’un pixel
� Unité absolue
• cm : centimètres• mm : millimètres• pt : points (1 pt =0,0352777 cm)
L. GARNIER xhtml-css L1 Info1B. 18 / 85
Un peu de style CSS Mise en forme du texte
Unité de longueur
� Unité relative
• em : taille de la police de caractère (caractère m)• ex : taille du caractère x minuscule (’x’)• px : taille d’un pixel
� Unité absolue
• cm : centimètres• mm : millimètres• pt : points (1 pt =0,0352777 cm)
� Pourcentage de la valeur de l’élément parent
L. GARNIER xhtml-css L1 Info1B. 18 / 85
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 19 / 85
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
L. GARNIER xhtml-css L1 Info1B. 19 / 85
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
L. GARNIER xhtml-css L1 Info1B. 19 / 85
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
• helvetica
L. GARNIER xhtml-css L1 Info1B. 19 / 85
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
• helvetica
• serif
L. GARNIER xhtml-css L1 Info1B. 19 / 85
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
• helvetica
• serif
• sans-serif
L. GARNIER xhtml-css L1 Info1B. 19 / 85
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
• helvetica
• serif
• sans-serif
• monospace
L. GARNIER xhtml-css L1 Info1B. 19 / 85
Un peu de style CSS Mise en forme du texte
Famille de police
Définition (Famille de police)
Le type de la police à utiliser se fait par la syntaxe :{font-family: valeur; }
où valeur prend l’une des valeurs suivantes :
• arial
• verdana
• helvetica
• serif
• sans-serif
• monospace
Problème selon les O.S., les polices installées sur l’ordinateur...http://www.logz.org/art-407-tit-Les-meilleures-familles
-de-polices-compatibles-linux-windows-mac
L. GARNIER xhtml-css L1 Info1B. 19 / 85
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 20 / 85
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 20 / 85
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal
L. GARNIER xhtml-css L1 Info1B. 20 / 85
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • italic
L. GARNIER xhtml-css L1 Info1B. 20 / 85
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • italic • oblique
L. GARNIER xhtml-css L1 Info1B. 20 / 85
Un peu de style CSS Mise en forme du texte
Style de police
Définition (Style de police)
Le style de la police se fait par la syntaxe :{font-style: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • italic • oblique
normal est la valeur par défaut
L. GARNIER xhtml-css L1 Info1B. 20 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
✿✿✿✿✿✿
Valeur✿✿✿✿✿✿✿
relative
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
✿✿✿✿✿✿✿
larger : plus grand que l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
•✿✿✿✿✿✿✿✿
inherit
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
✿✿✿✿✿✿✿
larger : plus grand que l’élément parent.
✿✿✿✿✿✿✿✿
inherit : de la taille de l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
•✿✿✿✿✿✿✿✿
inherit
• longueur
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
•✿✿✿✿✿✿✿✿
inherit
• longueur
•✿✿✿
%✿✿
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
✿✿✿✿✿✿✿
larger : plus grand que l’élément parent.
✿✿✿✿✿✿✿✿
inherit : de la taille de l’élément parent.
✿✿✿
%✿✿
: pourcentage de la taille de l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Taille des polices
Définition (Taille de la police)
La taille de la police se fait par la syntaxe :
{font-size: valeur; }
où valeur prend l’une des valeurs suivantes :
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
•✿✿✿✿✿✿✿✿
smaller
•✿✿✿✿✿✿✿
larger
•✿✿✿✿✿✿✿✿
inherit
• longueur
•✿✿✿
%✿✿
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿✿
smaller : plus petit que l’élément parent.
✿✿✿✿✿✿✿
larger : plus grand que l’élément parent.
✿✿✿✿✿✿✿✿
inherit : de la taille de l’élément parent.
✿✿✿
%✿✿
: pourcentage de la taille de l’élément parent.
Exemple concernant la taille des polices
L. GARNIER xhtml-css L1 Info1B. 21 / 85
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 22 / 85
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal
L. GARNIER xhtml-css L1 Info1B. 22 / 85
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold
L. GARNIER xhtml-css L1 Info1B. 22 / 85
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold •✿✿✿✿✿✿✿
bolder
✿✿✿✿✿✿
Valeur✿✿✿✿✿✿✿
relative
✿✿✿✿✿✿✿
bolder : plus gras que l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 22 / 85
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold •✿✿✿✿✿✿✿
bolder •✿✿✿✿✿✿✿✿
lighter
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿
bolder : plus gras que l’élément parent.
✿✿✿✿✿✿✿✿
lighter : moins gras que l’élément parent.
L. GARNIER xhtml-css L1 Info1B. 22 / 85
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold •✿✿✿✿✿✿✿
bolder •✿✿✿✿✿✿✿✿
lighter
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿
bolder : plus gras que l’élément parent.
✿✿✿✿✿✿✿✿
lighter : moins gras que l’élément parent.
Il est aussi possible de spécifier un nombre qui est un multiple entier de 100.
L. GARNIER xhtml-css L1 Info1B. 22 / 85
Un peu de style CSS Mise en forme du texte
Poids des lettres
Définition (font-weight)
Le poids de la police à utiliser se fait par la syntaxe :
{font-weight: valeur; }
où valeur prend l’une des valeurs suivantes :
• normal • bold •✿✿✿✿✿✿✿
bolder •✿✿✿✿✿✿✿✿
lighter
✿✿✿✿✿✿✿
Valeurs✿✿✿✿✿✿✿✿
relatives
✿✿✿✿✿✿✿
bolder : plus gras que l’élément parent.
✿✿✿✿✿✿✿✿
lighter : moins gras que l’élément parent.
Il est aussi possible de spécifier un nombre qui est un multiple entier de 100.
Exemple concernant le poids des polices
L. GARNIER xhtml-css L1 Info1B. 22 / 85
Un peu de style CSS Mise en forme du texte
Espacement des lettres et mots
Définition (Espacement)
L’espacement des lettres se fait par la syntaxe :
{letter-spacing: valeur de l’espace ; }
L. GARNIER xhtml-css L1 Info1B. 23 / 85
Un peu de style CSS Mise en forme du texte
Espacement des lettres et mots
Définition (Espacement)
L’espacement des lettres se fait par la syntaxe :
{letter-spacing: valeur de l’espace ; }
L’espacement des mots se fait par la syntaxe :
{word-spacing: valeur de l’espace ; }
L. GARNIER xhtml-css L1 Info1B. 23 / 85
Un peu de style CSS Mise en forme du texte
Espacement des lettres et mots
Définition (Espacement)
L’espacement des lettres se fait par la syntaxe :
{letter-spacing: valeur de l’espace ; }
L’espacement des mots se fait par la syntaxe :
{word-spacing: valeur de l’espace ; }
Exemple d’espacements de lettres et de mots
L. GARNIER xhtml-css L1 Info1B. 23 / 85
Un peu de style CSS Mise en forme du texte
Espacement des lettres et mots
Définition (Espacement)
L’espacement des lettres se fait par la syntaxe :
{letter-spacing: valeur de l’espace ; }
L’espacement des mots se fait par la syntaxe :
{word-spacing: valeur de l’espace ; }
Exemple d’espacements de lettres et de mots
Trait horizontal :
L. GARNIER xhtml-css L1 Info1B. 23 / 85
Un peu de style CSS Mise en forme du texte
Espacement des lettres et mots
Définition (Espacement)
L’espacement des lettres se fait par la syntaxe :
{letter-spacing: valeur de l’espace ; }
L’espacement des mots se fait par la syntaxe :
{word-spacing: valeur de l’espace ; }
Exemple d’espacements de lettres et de mots
Trait horizontal :
Balise <hr/>, auto-fermante à placer hors des balises de blocs<p> ...</p> ou autres.
L. GARNIER xhtml-css L1 Info1B. 23 / 85
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
L. GARNIER xhtml-css L1 Info1B. 24 / 85
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
✿✿✿✿✿
none : rien
L. GARNIER xhtml-css L1 Info1B. 24 / 85
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
• underline
✿✿✿✿✿
none : rienunderline : soulignement inférieur
L. GARNIER xhtml-css L1 Info1B. 24 / 85
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
• underline
• overline
✿✿✿✿✿
none : rienunderline : soulignement inférieuroverline : barre au-dessus du texte
L. GARNIER xhtml-css L1 Info1B. 24 / 85
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
• underline
• overline
• line-through
✿✿✿✿✿
none : rienunderline : soulignement inférieuroverline : barre au-dessus du texteline-through : texte barré
L. GARNIER xhtml-css L1 Info1B. 24 / 85
Un peu de style CSS Mise en forme du texte
Soulignement et autres
Définition (Soulignement)
Un texte souligné, barré ou autre se fait par la syntaxe :
{text-decoration: valeur; }
où valeur prend l’une des valeurs suivantes :
•✿✿✿✿✿
none
• underline
• overline
• line-through
✿✿✿✿✿
none : rienunderline : soulignement inférieuroverline : barre au-dessus du texteline-through : texte barré
Exemple de soulignement et autres
L. GARNIER xhtml-css L1 Info1B. 24 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Définition (Identifiant)
Un identifiant est utilisé une et une seule fois dans toute la page html et se fait
par la syntaxe :
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Définition (Identifiant)
Un identifiant est utilisé une et une seule fois dans toute la page html et se fait
par la syntaxe :
Dans le fichier html
id="nom"
où nom commence par une lettre
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Définition (Identifiant)
Un identifiant est utilisé une et une seule fois dans toute la page html et se fait
par la syntaxe :
Dans le fichier html
id="nom"
où nom commence par une lettre
Dans le fichier css
#nom {. . .}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Définition (Identifiant)
Un identifiant est utilisé une et une seule fois dans toute la page html et se fait
par la syntaxe :
Dans le fichier html
id="nom"
où nom commence par une lettre
Dans le fichier css
#nom {. . .}
Définition (Classe)
Une classe peut-être utilisée plusieurs fois dans la page html et se fait par la
syntaxe :
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Définition (Identifiant)
Un identifiant est utilisé une et une seule fois dans toute la page html et se fait
par la syntaxe :
Dans le fichier html
id="nom"
où nom commence par une lettre
Dans le fichier css
#nom {. . .}
Définition (Classe)
Une classe peut-être utilisée plusieurs fois dans la page html et se fait par la
syntaxe :
Dans le fichier html
class="nom"
où nom commence par une lettre
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Définition (Identifiant)
Un identifiant est utilisé une et une seule fois dans toute la page html et se fait
par la syntaxe :
Dans le fichier html
id="nom"
où nom commence par une lettre
Dans le fichier css
#nom {. . .}
Définition (Classe)
Une classe peut-être utilisée plusieurs fois dans la page html et se fait par la
syntaxe :
Dans le fichier html
class="nom"
où nom commence par une lettre
Dans le fichier css
.nom {. . .}
Exemple de soulignement et autres
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
Dans le fichier css
body{
font-weight: normal;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
</span>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
</span>
texte toujours nouveau
souligné
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
</span>
texte toujours nouveau
souligné
</span>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Dans le fichier html
<h1>Text-décoration
</h1>
<p>
<span class="souligne">
Texte souligné
</span> <br /><br />
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
<span id="nenni">
QUE NENNI,
</span>
</span>
texte toujours nouveau
souligné
</span>
</p>
Dans le fichier css
body{
font-weight: normal;
}
h1{text-align:center;
}
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
#nenni{
font-size: larger;
color:magenta;
font-weight:900;
}L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Le texte non souligné l’est quand même : le span<span class="souligne"> prend le dessus sur le span<span class="defaut">.
<span class="souligne">
Texte souligné
<span class="defaut">
texte par défaut,
</span>
texte toujours nouveau
souligné
</span>
.souligne{
text-decoration:underline;
color:red;
}
.defaut{
text-decoration: none;
color:green;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Il est possible de simplifier le css en enlevant tous les span<span class="souligne">, il y a deux solutions :
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Il est possible de simplifier le css en enlevant tous les span<span class="souligne">, il y a deux solutions :
• il suffit de définir le style sur le paragraphe ce qui donne dans le css :p{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Il est possible de simplifier le css en enlevant tous les span<span class="souligne">, il y a deux solutions :
• il suffit de définir le style sur le paragraphe ce qui donne dans le css :p{
text-decoration:underline;
color:red;
}
L’inconvénient est que tous les paragraphes auront ce style.
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Il est possible de simplifier le css en enlevant tous les span<span class="souligne">, il y a deux solutions :
• il suffit de définir le style sur le paragraphe ce qui donne dans le css :p{
text-decoration:underline;
color:red;
}
L’inconvénient est que tous les paragraphes auront ce style.
• il suffit de donner un identifiant au paragraphe ce qui donne dans lefichier html :
<p id="pSouligne">
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Mise en forme du texte
Identifiant et classe
Il est possible de simplifier le css en enlevant tous les span<span class="souligne">, il y a deux solutions :
• il suffit de définir le style sur le paragraphe ce qui donne dans le css :p{
text-decoration:underline;
color:red;
}
L’inconvénient est que tous les paragraphes auront ce style.
• il suffit de donner un identifiant au paragraphe ce qui donne dans lefichier html :
<p id="pSouligne">
et dans le fichier css :#pSouligne{
text-decoration:underline;
color:red;
}
L. GARNIER xhtml-css L1 Info1B. 25 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Exemple d’une image de fond jpeg
où le motif est :
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Exemple d’une image de fond jpeg
où le motif est :
Attention, deux extensions possibles : jpg et jpeg.
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Exemple d’une image de fond jpeg
où le motif est :
Attention, deux extensions possibles : jpg et jpeg.
Exemple d’une image de fond gif
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
••••
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
•✿✿✿✿✿✿✿
repeat pour une répétition de l’image, exemple ;•••
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
•✿✿✿✿✿✿✿
repeat pour une répétition de l’image, exemple ;• no-repeat pour aucune répétition de l’image, exemple ;••
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
•✿✿✿✿✿✿✿
repeat pour une répétition de l’image, exemple ;• no-repeat pour aucune répétition de l’image, exemple ;• repeat-x pour une répétition horizontale de l’image, exemple ;•
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Exemple d’une image de fond jpeg
Attention, deux extensions possibles : jpg et jpeg.
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
•✿✿✿✿✿✿✿
repeat pour une répétition de l’image, exemple ;• no-repeat pour aucune répétition de l’image, exemple ;• repeat-x pour une répétition horizontale de l’image, exemple ;• repeat-y pour une répétition verticale de l’image, exemple.
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
•✿✿✿✿✿✿✿
repeat pour une répétition de l’image, exemple ;• no-repeat pour aucune répétition de l’image, exemple ;• repeat-x pour une répétition horizontale de l’image, exemple ;• repeat-y pour une répétition verticale de l’image, exemple.
Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh;
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
•✿✿✿✿✿✿✿
repeat pour une répétition de l’image, exemple ;• no-repeat pour aucune répétition de l’image, exemple ;• repeat-x pour une répétition horizontale de l’image, exemple ;• repeat-y pour une répétition verticale de l’image, exemple.
Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
•✿✿✿✿✿✿✿
repeat pour une répétition de l’image, exemple ;• no-repeat pour aucune répétition de l’image, exemple ;• repeat-x pour une répétition horizontale de l’image, exemple ;• repeat-y pour une répétition verticale de l’image, exemple.
Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page tandis que valeurh désignela position par rapport au haut de la page.
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
•✿✿✿✿✿✿✿
repeat pour une répétition de l’image, exemple ;• no-repeat pour aucune répétition de l’image, exemple ;• repeat-x pour une répétition horizontale de l’image, exemple ;• repeat-y pour une répétition verticale de l’image, exemple.
Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page tandis que valeurh désignela position par rapport au haut de la page.L’argument valeurg peut prendre les valeurs left, center ou right.
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Pour définir une image de fond, il suffit d’écrire dans le fichier css :body{
background-image:url("chemin_relatif");
}
Il est possible de répéter l’image ou non en ajoutant la syntaxebackground-repeat:valeur; où valeur peut valoir :
•✿✿✿✿✿✿✿
repeat pour une répétition de l’image, exemple ;• no-repeat pour aucune répétition de l’image, exemple ;• repeat-x pour une répétition horizontale de l’image, exemple ;• repeat-y pour une répétition verticale de l’image, exemple.
Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page tandis que valeurh désignela position par rapport au haut de la page.L’argument valeurg peut prendre les valeurs left, center ou right.L’argument valeurh peut prendre les valeurs top, center ou bottom.
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
Il est possible de placer l’image dans la page en ajoutant la syntaxebackground-position:valeurg valeurh; où valeurg désigne laposition par rapport au côté gauche de la page tandis que valeurh désignela position par rapport au haut de la page.L’argument valeurg peut prendre les valeurs left, center ou right.L’argument valeurh peut prendre les valeurs top, center ou bottom.
Il faut empêcher le déplacement de l’image avec le défilement de la pageen ajoutant : background-attachement:fixed; (la valeur par défaut est
✿✿✿✿✿✿✿
scroll).
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}Exemple
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}Exemple
Pour background-position , il est possible d’utiliser des pourcentages,cm...
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}Exemple
Pour background-position , il est possible d’utiliser des pourcentages,cm...body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 25% ;
}
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Image de fond
Body et image de fond
body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right center;
}Exemple
Pour background-position , il est possible d’utiliser des pourcentages,cm...body{
background-image: url("image4couleurs.jpeg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 25% ;
}Exemple
L. GARNIER xhtml-css L1 Info1B. 26 / 85
Un peu de style CSS Les pseudo-formats
Pseudo-format
Définition (Pseudo-format)
Un pseudo-format permet d’appliquer un style lors d’un événement :
L. GARNIER xhtml-css L1 Info1B. 27 / 85
Un peu de style CSS Les pseudo-formats
Pseudo-format
Définition (Pseudo-format)
Un pseudo-format permet d’appliquer un style lors d’un événement :
� Pour toutes les balises
L. GARNIER xhtml-css L1 Info1B. 27 / 85
Un peu de style CSS Les pseudo-formats
Pseudo-format
Définition (Pseudo-format)
Un pseudo-format permet d’appliquer un style lors d’un événement :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
L. GARNIER xhtml-css L1 Info1B. 27 / 85
Un peu de style CSS Les pseudo-formats
Pseudo-format
Définition (Pseudo-format)
Un pseudo-format permet d’appliquer un style lors d’un événement :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
L. GARNIER xhtml-css L1 Info1B. 27 / 85
Un peu de style CSS Les pseudo-formats
Pseudo-format
Définition (Pseudo-format)
Un pseudo-format permet d’appliquer un style lors d’un événement :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
•✿✿✿✿✿✿
a:link permet de définir les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur n’a pas visité la page.
• a:active permet de modifier les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur clique dessus ;
L. GARNIER xhtml-css L1 Info1B. 27 / 85
Un peu de style CSS Les pseudo-formats
Pseudo-format
Définition (Pseudo-format)
Un pseudo-format permet d’appliquer un style lors d’un événement :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
•✿✿✿✿✿✿
a:link permet de définir les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur n’a pas visité la page.
• a:active permet de modifier les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur clique dessus ;
• a:visited permet de modifier les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur a déjà visité la page ;
L. GARNIER xhtml-css L1 Info1B. 27 / 85
Un peu de style CSS Les pseudo-formats
Pseudo-format
Définition (Pseudo-format)
Un pseudo-format permet d’appliquer un style lors d’un événement :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
•✿✿✿✿✿✿
a:link permet de définir les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur n’a pas visité la page.
• a:active permet de modifier les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur clique dessus ;
• a:visited permet de modifier les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur a déjà visité la page ;
� Pour les balises de lien hypertexte et de formulaire
L. GARNIER xhtml-css L1 Info1B. 27 / 85
Un peu de style CSS Les pseudo-formats
Pseudo-format
Définition (Pseudo-format)
Un pseudo-format permet d’appliquer un style lors d’un événement :
� Pour toutes les balises
• b:hover permet de modifier les propriétés du style de la balise b lorsque la
souris passe dessus ;
� Pour les balises de lien hypertexte
•✿✿✿✿✿✿
a:link permet de définir les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur n’a pas visité la page.
• a:active permet de modifier les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur clique dessus ;
• a:visited permet de modifier les propriétés du style de la balise de lien
hypertexte a lorsque l’utilisateur a déjà visité la page ;
� Pour les balises de lien hypertexte et de formulaire
• b:focus permet de modifier les propriétés du style de la balise b
lorsque l’utilisateur clique dessus ou lorsque l’utilisateur utilise les
touches de tabulation pour se déplacer dans la page.
L. GARNIER xhtml-css L1 Info1B. 27 / 85
Les listes
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
4 Les compteurs5 Les tableaux
Les tableaux standardsMarges intérieures et extérieuresFusion(s) de cellulesLes grands tableaux
6 Structuration d’une page xHTML7 Les formulaires[current,currentsubsection,sectionstyle=show/shaded,subsectionstyle=show/shad
L. GARNIER xhtml-css L1 Info1B. 28 / 85
Les listes
Types de listes
Il existe trois types de listes :
L. GARNIER xhtml-css L1 Info1B. 29 / 85
Les listes
Types de listes
Il existe trois types de listes :
• les listes de définitions ;
Exemple
L. GARNIER xhtml-css L1 Info1B. 29 / 85
Les listes
Types de listes
Il existe trois types de listes :
• les listes de définitions ;
Exemple
• les listes ordonnées ;
Exemple
L. GARNIER xhtml-css L1 Info1B. 29 / 85
Les listes
Types de listes
Il existe trois types de listes :
• les listes de définitions ;
Exemple
• les listes ordonnées ;
Exemple
• les listes non ordonnées ;
Exemple
L. GARNIER xhtml-css L1 Info1B. 29 / 85
Les listes
Types de listes
Il existe trois types de listes :
• les listes de définitions ;
Exemple
• les listes ordonnées ;
Exemple
• les listes non ordonnées ;
Exemple
UNE LISTE NE SE MET NI DANS UN TITRE NI DANS UN
PARAGRAPHE.
L. GARNIER xhtml-css L1 Info1B. 29 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L’élément de définition se met entre <dd> et </dd>.
Exemple
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L’élément de définition se met entre <dd> et </dd>.
Exemple
<h1> Liste de définition </h1>
<dl>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L’élément de définition se met entre <dd> et </dd>.
Exemple
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L’élément de définition se met entre <dd> et </dd>.
Exemple
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L’élément de définition se met entre <dd> et </dd>.
Exemple
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L’élément de définition se met entre <dd> et </dd>.
Exemple
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L’élément de définition se met entre <dd> et </dd>.
Exemple
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd>Jeu de balle</dd>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L’élément de définition se met entre <dd> et </dd>.
Exemple
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd>Jeu de balle</dd>
<dd>Jeu à 1 ou 2</dd>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Liste de définition : DL
Définition (Liste de définition)
Une liste de définition est une énumération de style lexique.
La liste commence par <dl> et se termine par </dl>.L’élément de terme i.e. la partie à définir se met entre <dt> et </dt>.
L’élément de définition se met entre <dd> et </dd>.
Exemple
<h1> Liste de définition </h1>
<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd>Jeu de balle</dd>
<dd>Jeu à 1 ou 2</dd>
</dl>
L. GARNIER xhtml-css L1 Info1B. 30 / 85
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
L. GARNIER xhtml-css L1 Info1B. 31 / 85
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
L. GARNIER xhtml-css L1 Info1B. 31 / 85
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
L. GARNIER xhtml-css L1 Info1B. 31 / 85
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>
L. GARNIER xhtml-css L1 Info1B. 31 / 85
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>
</dl>
L. GARNIER xhtml-css L1 Info1B. 31 / 85
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>
</dl>
Partie CSS
dt{
color: blue;
text-decoration: underline;
}
L. GARNIER xhtml-css L1 Info1B. 31 / 85
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>
</dl>
Partie CSS
dt{
color: blue;
text-decoration: underline;
}
dd{
background-color: black;
color: white;
}
L. GARNIER xhtml-css L1 Info1B. 31 / 85
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>
</dl>
Partie CSS
dt{
color: blue;
text-decoration: underline;
}
dd{
background-color: black;
color: white;
}
#dd1{
color:yellow;
margin-right: 5cm;
margin-left: 5cm;
padding-left: 3cm;
border : solid green 0.1em;
}
L. GARNIER xhtml-css L1 Info1B. 31 / 85
Les listes Les listes de définitions
Exemple de style avec une liste de définition
Exemple
Partie HTML<dl>
<dt>Football</dt>
<dd>Jeu de ballon</dd>
<dd>Jeu à 11</dd>
<dt>Tennis</dt>
<dd id="dd1">Jeu de
balle</dd>
<dd id="dd2">Jeu à
1 ou 2</dd>
</dl>
Partie CSS
dt{
color: blue;
text-decoration: underline;
}
dd{
background-color: black;
color: white;
}
#dd1{
color:yellow;
margin-right: 5cm;
margin-left: 5cm;
padding-left: 3cm;
border : solid green 0.1em;
}
#dd2{
margin-left: 5cm;
width:150px;
color:yellow;
border : solid green 0.1em;
}
L. GARNIER xhtml-css L1 Info1B. 31 / 85
Les listes Liste à puces
Définition de liste à puces, ul et ol
Définition (Liste à puces)
Une liste à puce peut être ordonnée ou non :
L. GARNIER xhtml-css L1 Info1B. 32 / 85
Les listes Liste à puces
Définition de liste à puces, ul et ol
Définition (Liste à puces)
Une liste à puce peut être ordonnée ou non :
• une liste ordonnée commence par <ol> et se termine par </ol>.
L. GARNIER xhtml-css L1 Info1B. 32 / 85
Les listes Liste à puces
Définition de liste à puces, ul et ol
Définition (Liste à puces)
Une liste à puce peut être ordonnée ou non :
• une liste ordonnée commence par <ol> et se termine par </ol>.
• une liste non ordonnée commence par <ul> et se termine par </ul>.
L. GARNIER xhtml-css L1 Info1B. 32 / 85
Les listes Liste à puces
Définition de liste à puces, ul et ol
Définition (Liste à puces)
Une liste à puce peut être ordonnée ou non :
• une liste ordonnée commence par <ol> et se termine par </ol>.
• une liste non ordonnée commence par <ul> et se termine par </ul>.
Le texte qui suit une puce se met entre <li> et </li>.
Exemple de liste à puces non ordonnée
L. GARNIER xhtml-css L1 Info1B. 32 / 85
Les listes Liste à puces
Définition de liste à puces, ul et ol
Définition (Liste à puces)
Une liste à puce peut être ordonnée ou non :
• une liste ordonnée commence par <ol> et se termine par </ol>.
• une liste non ordonnée commence par <ul> et se termine par </ul>.
Le texte qui suit une puce se met entre <li> et </li>.
Exemple de liste à puces non ordonnée
Exemple de liste à puces ordonnée
L. GARNIER xhtml-css L1 Info1B. 32 / 85
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
<ul>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
<ul>
<li>Football</li>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
<ul>
<li>Football</li>
<li>Handball</li>
<li>Rugby</li>
<li>Basket-ball</li>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
Les listes Liste à puces
Exemple de liste non ordonnée
Exemple de liste à puces non ordonnée
<h1> Liste non ordonnée </h1>
<p>Quelques sports de ballons</p>
<ul>
<li>Football</li>
<li>Handball</li>
<li>Rugby</li>
<li>Basket-ball</li>
</ul>
L. GARNIER xhtml-css L1 Info1B. 33 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
<li>Bordeaux (6)</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li>Reims (6)
</li>
<li>Paris (6)
</li>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li>Reims (6)
</li>
<li>Paris (6)
</li>
</ol>
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li>Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li>Reims (6)
</li>
<li>Paris (6)
</li>
</ol>
Partie CSS
.pas{
list-style-type: none;
}
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li class="pas">Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li class="pas">Reims (6)
</li>
<li class="pas">Paris (6)
</li>
</ol>
Partie CSS
.pas{
list-style-type: none;
}
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li class="pas">Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li class="pas">Reims (6)
</li>
<li class="pas">Paris (6)
</li>
</ol>
Partie CSS
.pas{
list-style-type: none;
}
Exemple de liste à puces ordonnée
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Exemple de liste ordonnée
Exemple de liste à puces ordonnée
Partie HTML
<h1> Liste ordonnée
</h1>
<p>Les clubs de football ayant
le plus de titre de
champion de France
</p>
<ol>
<li>Saint-Etienne (10)</li>
<li>Marseille (9)</li>
<li>Nantes (8)</li>
<li>Monaco (7)</li>
<li class="pas">Lyon (7)
</li>
<li>Bordeaux (6)</li>
<li class="pas">Reims (6)
</li>
<li class="pas">Paris (6)
</li>
</ol>
Partie CSS
.pas{
list-style-type: none;
}
Exemple de liste à puces ordonnée
Pour toute une liste, on applique le style list-style-type directement à<ol> ou à <ul>.
L. GARNIER xhtml-css L1 Info1B. 34 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;circle =⇒ cercle noir ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
decimal =⇒ nombres entiers : 1, 2,3... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
decimal =⇒ nombres entiers : 1, 2,3... ;decimal-leading-zero=⇒nombres entiers avec deux chiffresminimum : 01, 02, 03... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
decimal =⇒ nombres entiers : 1, 2,3... ;decimal-leading-zero=⇒nombres entiers avec deux chiffresminimum : 01, 02, 03... ;
upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
decimal =⇒ nombres entiers : 1, 2,3... ;decimal-leading-zero=⇒nombres entiers avec deux chiffresminimum : 01, 02, 03... ;
upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
decimal =⇒ nombres entiers : 1, 2,3... ;decimal-leading-zero=⇒nombres entiers avec deux chiffresminimum : 01, 02, 03... ;
upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;upper-alpha ou upper-latin =⇒lettres majuscules : A, B, C... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
decimal =⇒ nombres entiers : 1, 2,3... ;decimal-leading-zero=⇒nombres entiers avec deux chiffresminimum : 01, 02, 03... ;
upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;upper-alpha ou upper-latin =⇒lettres majuscules : A, B, C... ;lower-alpha ou lower-latin=⇒lettres minuscules : a, b, c... ;
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Valeurs possibles de list-style-type
Les valeurs possibles de list-style-type sont :
cas d’une liste non ordonnée
none =⇒ pas de puce ;
✿✿✿✿✿
disc =⇒ disque noir ;circle =⇒ cercle noir ;square =⇒ carré noir.
Listes à puces non ordonnées
cas d’une liste ordonnée
✿✿✿✿✿✿✿✿
decimal =⇒ nombres entiers : 1, 2,3... ;decimal-leading-zero=⇒nombres entiers avec deux chiffresminimum : 01, 02, 03... ;
upper-roman =⇒ nombres romainsen majuscule : I, II, III... ;lower-roman =⇒ nombres romainsen minuscule : i, ii, iii... ;upper-alpha ou upper-latin =⇒lettres majuscules : A, B, C... ;lower-alpha ou lower-latin=⇒lettres minuscules : a, b, c... ;lower-greek =⇒ lettres grecques :α, β , γ...
Listes à puces ordonnées
L. GARNIER xhtml-css L1 Info1B. 35 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
<li>le 17 juin 1940</li>
</ul>
</li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
<li>le 17 juin 1940</li>
</ul>
</li>
</ul>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
<li>le 17 juin 1940</li>
</ul>
</li>
</ul>
Syntaxe CSSul{/*style de la premiere liste*/
list-style-image:url("Vert.gif");
}
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Définition (Une image à la place d’une puce dans une liste non ordonnée)
La commande list-style-image : url("Chemin"); permet de
remplacer une puce d’une liste non ordonnée par une image.
Des images comme puces dans une liste non ordonnée
Syntaxe HTML<ul>
<li>Le 1er septembre 1939,
la guerre commence
<ul>
<li>en France</li>
<li>en Pologne</li>
</ul>
</li>
<li>La France demande
l’armistice le
<ul>
<li>le 1er mai 1940</li>
<li>le 17 juin 1940</li>
</ul>
</li>
</ul>
Syntaxe CSSul{/*style de la premiere liste*/
list-style-image:url("Vert.gif");
}
ul ul{/*style des sous-listes*/
list-style-image:url("Red.gif");
}
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la premiere sous-liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la premiere sous-liste-->
</li> <!--fin de la premiere puce de la premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la premiere sous-liste-->
</li> <!--fin de la premiere puce de la premiere liste-->
<li><!--seconde puce de la premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la premiere sous-liste-->
</li> <!--fin de la premiere puce de la premiere liste-->
<li><!--seconde puce de la premiere liste-->
<ul> <!--seconde sous-liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la premiere sous-liste-->
</li> <!--fin de la premiere puce de la premiere liste-->
<li><!--seconde puce de la premiere liste-->
<ul> <!--seconde sous-liste-->
<li><!--premiere puce--></li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la premiere sous-liste-->
</li> <!--fin de la premiere puce de la premiere liste-->
<li><!--seconde puce de la premiere liste-->
<ul> <!--seconde sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la premiere sous-liste-->
</li> <!--fin de la premiere puce de la premiere liste-->
<li><!--seconde puce de la premiere liste-->
<ul> <!--seconde sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la seconde sous-liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la premiere sous-liste-->
</li> <!--fin de la premiere puce de la premiere liste-->
<li><!--seconde puce de la premiere liste-->
<ul> <!--seconde sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la seconde sous-liste-->
</li> <!--fin de la seconde puce de la premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les listes Liste à puces
Une image comme puce dans une liste
Des images comme puces dans une liste non ordonnée
<!--Commentaire dans un fichier html-->
<ul> <!--premiere liste-->
<li> <!--premiere puce de la premiere liste-->
<ul> <!--premiere sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la premiere sous-liste-->
</li> <!--fin de la premiere puce de la premiere liste-->
<li><!--seconde puce de la premiere liste-->
<ul> <!--seconde sous-liste-->
<li><!--premiere puce--></li>
<li><!--seconde puce--> </li>
</ul><!--fin de la seconde sous-liste-->
</li> <!--fin de la seconde puce de la premiere liste-->
</ul> <!--fin de la premiere liste-->
L. GARNIER xhtml-css L1 Info1B. 36 / 85
Les compteurs
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
4 Les compteurs5 Les tableaux
Les tableaux standardsMarges intérieures et extérieuresFusion(s) de cellulesLes grands tableaux
6 Structuration d’une page xHTML7 Les formulaires[current,currentsubsection,sectionstyle=show/shaded,subsectionstyle=show/shad
L. GARNIER xhtml-css L1 Info1B. 37 / 85
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
L. GARNIER xhtml-css L1 Info1B. 38 / 85
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :
L. GARNIER xhtml-css L1 Info1B. 38 / 85
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
counter-reset:nomCompteur ValeurInitiale;
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
counter-reset:nomCompteur ValeurInitiale;
}
2 La seconde étape consiste, dans l’élément contenant le compteur, à :
ElementContenantCompteur:before{
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
counter-reset:nomCompteur ValeurInitiale;
}
2 La seconde étape consiste, dans l’élément contenant le compteur, à :
• incrémenter le compteur
ElementContenantCompteur:before{
counter-increment: nomCompteur ValeurDIncrementation;
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
Les compteurs
Définition
Il est possible de numéroter automatiquement des titres ou des listes à l’aidede compteurs.
1 La première étape est l’initialisation du compteur dans l’élément parent :ElementParent{
counter-reset:nomCompteur ValeurInitiale;
}
2 La seconde étape consiste, dans l’élément contenant le compteur, à :
• incrémenter le compteur• définir le style et l’afficherElementContenantCompteur:before{
counter-increment: nomCompteur ValeurDIncrementation;
content: "Nom " counter(nomCompteur,StyleCompteur) ":";
}
L. GARNIER xhtml-css L1 Info1B. 38 / 85
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
L. GARNIER xhtml-css L1 Info1B. 39 / 85
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
L. GARNIER xhtml-css L1 Info1B. 39 / 85
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
L. GARNIER xhtml-css L1 Info1B. 39 / 85
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
L. GARNIER xhtml-css L1 Info1B. 39 / 85
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Titre " counter(section,upper-roman) "/ " ;
}
L. GARNIER xhtml-css L1 Info1B. 39 / 85
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Titre " counter(section,upper-roman) "/ " ;
}
Un compteur de titre h1
L. GARNIER xhtml-css L1 Info1B. 39 / 85
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Titre " counter(section,upper-roman) "/ " ;
}
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
L. GARNIER xhtml-css L1 Info1B. 39 / 85
Les compteurs
Conter un compteur de titre h1
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Titre " counter(section,upper-roman) "/ " ;
}
Un compteur de titre h1
body{
counter-reset : section -1;
}
h1:before{
counter-increment: section 2;
content : "Section " counter(section,upper-greek) "." ;
}L. GARNIER xhtml-css L1 Info1B. 39 / 85
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
L. GARNIER xhtml-css L1 Info1B. 40 / 85
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<ol>
<li>Barcelone</li>
<li>Atlanta </li>
<li>Sydney </li>
<li>Athènes </li>
<li>Pékin </li>
<li>Londres </li>
<li>Rio </li>
</ol>
L. GARNIER xhtml-css L1 Info1B. 40 / 85
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<ol>
<li>Barcelone</li>
<li>Atlanta </li>
<li>Sydney </li>
<li>Athènes </li>
<li>Pékin </li>
<li>Londres </li>
<li>Rio </li>
</ol>
ol{
L. GARNIER xhtml-css L1 Info1B. 40 / 85
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<ol>
<li>Barcelone</li>
<li>Atlanta </li>
<li>Sydney </li>
<li>Athènes </li>
<li>Pékin </li>
<li>Londres </li>
<li>Rio </li>
</ol>
ol{
counter-reset : jeux 1988; /* 1992−4 = 1988*/
L. GARNIER xhtml-css L1 Info1B. 40 / 85
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<ol>
<li>Barcelone</li>
<li>Atlanta </li>
<li>Sydney </li>
<li>Athènes </li>
<li>Pékin </li>
<li>Londres </li>
<li>Rio </li>
</ol>
ol{
counter-reset : jeux 1988; /* 1992−4 = 1988*//*on enleve les puces avant li*/
list-style-type : none;
L. GARNIER xhtml-css L1 Info1B. 40 / 85
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<ol>
<li>Barcelone</li>
<li>Atlanta </li>
<li>Sydney </li>
<li>Athènes </li>
<li>Pékin </li>
<li>Londres </li>
<li>Rio </li>
</ol>
ol{
counter-reset : jeux 1988; /* 1992−4 = 1988*//*on enleve les puces avant li*/
list-style-type : none;
}
ol li:before{
L. GARNIER xhtml-css L1 Info1B. 40 / 85
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<ol>
<li>Barcelone</li>
<li>Atlanta </li>
<li>Sydney </li>
<li>Athènes </li>
<li>Pékin </li>
<li>Londres </li>
<li>Rio </li>
</ol>
ol{
counter-reset : jeux 1988; /* 1992−4 = 1988*//*on enleve les puces avant li*/
list-style-type : none;
}
ol li:before{
counter-increment : jeux 4 ;
L. GARNIER xhtml-css L1 Info1B. 40 / 85
Les compteurs
Conter un compteur de liste ordonnée
Un compteur de liste ordonnée
<ol>
<li>Barcelone</li>
<li>Atlanta </li>
<li>Sydney </li>
<li>Athènes </li>
<li>Pékin </li>
<li>Londres </li>
<li>Rio </li>
</ol>
ol{
counter-reset : jeux 1988; /* 1992−4 = 1988*//*on enleve les puces avant li*/
list-style-type : none;
}
ol li:before{
counter-increment : jeux 4 ;
/* par defaut, la numerotation est en decimal*/
content : "Olympiades " counter(jeux) " : " ;
}
L. GARNIER xhtml-css L1 Info1B. 40 / 85
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
L. GARNIER xhtml-css L1 Info1B. 41 / 85
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<ol class="ville1">
<li>Barcelone
<ol>
<li>basket</li>
<li>plongeon</li>
</ol>
</li>
<li>Atlanta
<ol>
<li>Foot</li>
<li>judo</li>
</ol>
</ol>
L. GARNIER xhtml-css L1 Info1B. 41 / 85
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<ol class="ville1">
<li>Barcelone
<ol>
<li>basket</li>
<li>plongeon</li>
</ol>
</li>
<li>Atlanta
<ol>
<li>Foot</li>
<li>judo</li>
</ol>
</ol>
.ville1{
counter-reset : cpt1 0;
list-style-type : none;
}
L. GARNIER xhtml-css L1 Info1B. 41 / 85
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<ol class="ville1">
<li>Barcelone
<ol>
<li>basket</li>
<li>plongeon</li>
</ol>
</li>
<li>Atlanta
<ol>
<li>Foot</li>
<li>judo</li>
</ol>
</ol>
.ville1{
counter-reset : cpt1 0;
list-style-type : none;
}
ol{
counter-reset : cpt2 0;
list-style-type : none;
}
L. GARNIER xhtml-css L1 Info1B. 41 / 85
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<ol class="ville1">
<li>Barcelone
<ol>
<li>basket</li>
<li>plongeon</li>
</ol>
</li>
<li>Atlanta
<ol>
<li>Foot</li>
<li>judo</li>
</ol>
</ol>
.ville1{
counter-reset : cpt1 0;
list-style-type : none;
}
ol{
counter-reset : cpt2 0;
list-style-type : none;
}
ol li:before{
counter-increment : cpt1 ;
content : "Ville " counter(cpt1,upper-roman) " : " ;
}
L. GARNIER xhtml-css L1 Info1B. 41 / 85
Les compteurs
Conter des compteurs de listes ordonnées
Un compteur de liste ordonnée
<ol class="ville1">
<li>Barcelone
<ol>
<li>basket</li>
<li>plongeon</li>
</ol>
</li>
<li>Atlanta
<ol>
<li>Foot</li>
<li>judo</li>
</ol>
</ol>
.ville1{
counter-reset : cpt1 0;
list-style-type : none;
}
ol{
counter-reset : cpt2 0;
list-style-type : none;
}
ol li:before{
counter-increment : cpt1 ;
content : "Ville " counter(cpt1,upper-roman) " : " ;
}
ol li ol li:before{
counter-increment : cpt2 ;
content : "Epreuve " counter(cpt1,upper-roman) "."
counter(cpt2,lower-roman)" : " ;
}
L. GARNIER xhtml-css L1 Info1B. 41 / 85
Les tableaux
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
4 Les compteurs5 Les tableaux
Les tableaux standardsMarges intérieures et extérieuresFusion(s) de cellulesLes grands tableaux
6 Structuration d’une page xHTML7 Les formulaires[current,currentsubsection,sectionstyle=show/shaded,subsectionstyle=show/shad
L. GARNIER xhtml-css L1 Info1B. 42 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau
<table>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau
<table>
<tr>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau
<table>
<tr>
<th>Je suis un titre de cellule</th>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
<tr>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
</tr>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Syntaxe pour définir un tableau
Définition (Définition d’un tableau)
Un tableau est defini entre les balises <table> et </table>.
Chaque ligne commence par <tr>, se termine par </tr> et contient aumoins une cellule.
Chaque cellule commence par <td> et se termine par </td>.Optionnellement, si la première ligne contient une en-tête pour toute la
colonne, les balises <td> et </td> sont remplacées respectivement par
<th> et </th>.
Un pauvre tableau
<table>
<tr>
<th>Je suis un titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
</tr>
</table>
L. GARNIER xhtml-css L1 Info1B. 43 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Par défaut, un tableau n’a pas de bordure =⇒ CSS
Un tableau à deux lignes et deux colonnes avec bordures
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Par défaut, un tableau n’a pas de bordure =⇒ CSS
Un tableau à deux lignes et deux colonnes avec bordures
HTML<table>
<tr>
<th>Premier titre de cellule</th>
<th>Second titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
<td>Je suis une cellule</td>
</tr>
</table>
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Par défaut, un tableau n’a pas de bordure =⇒ CSS
Un tableau à deux lignes et deux colonnes avec bordures
HTML<table>
<tr>
<th>Premier titre de cellule</th>
<th>Second titre de cellule</th>
</tr>
<tr>
<td>Je suis une cellule</td>
<td>Je suis une cellule</td>
</tr>
</table>
CSStable{
border-style: solid;
}
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
table{
border-style: solid;/*style des bordures, un trait*/
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
table{
border-style: solid;/*style des bordures, un trait*/
/*coller les bordures, par defaut separate*/
border-collapse: collapse;
}
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
table{
border-style: solid;/*style des bordures, un trait*/
/*coller les bordures, par defaut separate*/
border-collapse: collapse;
}
td,th{
border: 2px solid red ;
/*Regroupe les trois proprietes des bordures*/
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Tableau et bordures
Un tableau à deux lignes et deux colonnes avec bordures
td,th{
border-style: double; /*style des bordures, deux traits*/
border-color: red; /*couleur des bordures*/
border-width: 10px; /*epaisseur des bordures*/
}
Un tableau à deux lignes et deux colonnes avec bordures
table{
border-style: solid;/*style des bordures, un trait*/
/*coller les bordures, par defaut separate*/
border-collapse: collapse;
}
td,th{
border: 2px solid red ;
/*Regroupe les trois proprietes des bordures*/
border-collapse: collapse; /*coller les bordures*/
}
L. GARNIER xhtml-css L1 Info1B. 44 / 85
Les tableaux Les tableaux standards
Valeur possible pour border-style
Un espace dans une page html s’effectue par la syntaxe .
L. GARNIER xhtml-css L1 Info1B. 45 / 85
Les tableaux Les tableaux standards
Valeur possible pour border-style
Un espace dans une page html s’effectue par la syntaxe .
Styles des bordures d’un tableau
L. GARNIER xhtml-css L1 Info1B. 45 / 85
Les tableaux Les tableaux standards
Valeur possible pour border-style
Un espace dans une page html s’effectue par la syntaxe .
Styles des bordures d’un tableau
Hormis pour border-collapse, les propriétés border-toto sontapplicables aux listes, puces, paragraphes, titres, div et span.
Bordures appliquées à d’autre éléments qu’un tableau
L. GARNIER xhtml-css L1 Info1B. 45 / 85
Les tableaux Les tableaux standards
Valeur possible pour border-style
Un espace dans une page html s’effectue par la syntaxe .
Styles des bordures d’un tableau
Hormis pour border-collapse, les propriétés border-toto sontapplicables aux listes, puces, paragraphes, titres, div et span.
Bordures appliquées à d’autre éléments qu’un tableau
De plus, pour chaque propriété border-toto, il est possible de spécifier lespropriétés :
• à gauche via border-left-toto ;
L. GARNIER xhtml-css L1 Info1B. 45 / 85
Les tableaux Les tableaux standards
Valeur possible pour border-style
Un espace dans une page html s’effectue par la syntaxe .
Styles des bordures d’un tableau
Hormis pour border-collapse, les propriétés border-toto sontapplicables aux listes, puces, paragraphes, titres, div et span.
Bordures appliquées à d’autre éléments qu’un tableau
De plus, pour chaque propriété border-toto, il est possible de spécifier lespropriétés :
• à gauche via border-left-toto ;
• à droite via border-right-toto ;
L. GARNIER xhtml-css L1 Info1B. 45 / 85
Les tableaux Les tableaux standards
Valeur possible pour border-style
Un espace dans une page html s’effectue par la syntaxe .
Styles des bordures d’un tableau
Hormis pour border-collapse, les propriétés border-toto sontapplicables aux listes, puces, paragraphes, titres, div et span.
Bordures appliquées à d’autre éléments qu’un tableau
De plus, pour chaque propriété border-toto, il est possible de spécifier lespropriétés :
• à gauche via border-left-toto ;
• à droite via border-right-toto ;
• au-dessus via border-top-toto ;
L. GARNIER xhtml-css L1 Info1B. 45 / 85
Les tableaux Les tableaux standards
Valeur possible pour border-style
Un espace dans une page html s’effectue par la syntaxe .
Styles des bordures d’un tableau
Hormis pour border-collapse, les propriétés border-toto sontapplicables aux listes, puces, paragraphes, titres, div et span.
Bordures appliquées à d’autre éléments qu’un tableau
De plus, pour chaque propriété border-toto, il est possible de spécifier lespropriétés :
• à gauche via border-left-toto ;
• à droite via border-right-toto ;
• au-dessus via border-top-toto ;
• en bas via border-bottom-toto.
Sudoku
L. GARNIER xhtml-css L1 Info1B. 45 / 85
Les tableaux Marges intérieures et extérieures
Marges
Définition (Marges)
Les marges extérieures (resp. intérieures) se définissent par margin (resp.
padding).
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Définition (Marges)
Les marges extérieures (resp. intérieures) se définissent par margin (resp.
padding).
Pour différencier les côtés, les marges extérieures (resp. intérieures) sedéfinissent par margin-cote (resp. padding-cote) où cote vaut soit
right, soit top, soit left, soit bottom.
Marges Marges sans CSS
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Définition (Marges)
Les marges extérieures (resp. intérieures) se définissent par margin (resp.
padding).
Pour différencier les côtés, les marges extérieures (resp. intérieures) sedéfinissent par margin-cote (resp. padding-cote) où cote vaut soit
right, soit top, soit left, soit bottom.
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Définition (Marges)
Les marges extérieures (resp. intérieures) se définissent par margin (resp.
padding).Pour différencier les côtés, les marges extérieures (resp. intérieures) se
définissent par margin-cote (resp. padding-cote) où cote vaut soitright, soit top, soit left, soit bottom.
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<hr />
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<hr />
<div>
<hr />
</div>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<hr />
<div>
<table>
</table>
<hr />
</div>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<hr />
<div>
<table>
<tr>
</tr>
<tr>
</tr>
</table>
<hr />
</div>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS
<h1> Marges intérieures et extérieures </h1>
<hr />
<div>
<table>
<tr>
<td class="cl1">padding-left : 1cm;</td>
<td class="cl1">padding-top: 3cm;</td>
</tr>
<tr>
<td class="cl2">padding-right: 2cm;</td>
<td class="cl2">padding-bottom: 3cm; </td>
</tr>
</table>
<hr />
</div>
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 1
<h1> Marges intérieures
et extérieures </h1>
<hr />
h1 {
border : 3px dashed red;
margin-left: 10%;
padding-left: 20%;
padding-bottom: 1cm;
margin-bottom: 2cm;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 2
<h1> Marges intérieures
et extérieures </h1>
<hr />
h1 {
border : 3px dashed red;
margin-left: 10%;
padding-left: 20%;
padding-bottom: 1cm;
margin-bottom: 2cm;
}
<h1> Marges intérieures
et extérieures </h1>
<hr />
<div>
<hr />
</div>
div{
border : 5px dashed green;
padding-left: 50px;
padding-top: 1cm;
padding-right: 10px;
padding-bottom: 2cm;
margin : 1cm;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 3
<table>
<tr>
<td >p-left:1cm;
</td>
<td >p-top:3cm;
</td>
</tr>
<tr>
<td >p-right:2cm;
</td>
<td >p-bottom:3cm;
</td>
</tr>
</table>
table{
border-collapse: collapse;
border: 7px solid blue;
font-size: 0.75cm;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 4
<table>
<tr>
<td >p-left:1cm;
</td>
<td >p-top:3cm;
</td>
</tr>
<tr>
<td >p-right:2cm;
</td>
<td >p-bottom:3cm;
</td>
</tr>
</table>
table{
border-collapse: collapse;
border: 7px solid blue;
font-size: 0.75cm;
}
td{
border: 7px dashed blue;
width: 12cm;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 5
<table>
<tr>
<td class="cl1" >p-left:1cm;
</td>
<td class="cl1" >p-top:3cm;
</td>
</tr>
<tr>
<td >p-right:2cm;
</td>
<td >p-bottom:3cm;
</td>
</tr>
</table>
td{
border: 7px dashed blue;
width: 12cm;
}
.cl1{
padding-left: 1cm;
padding-top: 3cm;
border-bottom-style: solid;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape 6
<table>
<tr>
<td class="cl1" >p-left:1cm;
</td>
<td class="cl1" >p-top:3cm;
</td>
</tr>
<tr>
<td class="cl2" >p-right:2cm;
</td>
<td class="cl2" >p-bottom:3cm;
</td>
</tr>
</table>
td{
border: 7px dashed blue;
width: 12cm;
}
.cl1{
padding-left: 1cm;
padding-top: 3cm;
border-bottom-style: solid;
}
.cl2{
padding-right: 2cm;
padding-bottom: 3cm;
border-top-style: solid;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Marges
Marges Marges sans CSS Etape finale
<table>
<tr>
<td class="cl1" >p-left:1cm;
</td>
<td class="cl1" >p-top:3cm;
</td>
</tr>
<tr>
<td class="cl2" >p-right:2cm;
</td>
<td class="cl2" >p-bottom:3cm;
</td>
</tr>
</table>
td{
border: 7px dashed blue;
width: 12cm;
}
.cl1{
padding-left: 1cm;
padding-top: 3cm;
border-bottom-style: solid;
}
.cl2{
padding-right: 2cm;
padding-bottom: 3cm;
border-top-style: solid;
/* pour padding-right*/
text-align: right;
}
L. GARNIER xhtml-css L1 Info1B. 46 / 85
Les tableaux Marges intérieures et extérieures
Donner un titre à un tableau
Définition (Titre)
Le titre d’un tableau se met entre <caption> et </caption>,
L. GARNIER xhtml-css L1 Info1B. 47 / 85
Les tableaux Marges intérieures et extérieures
Donner un titre à un tableau
Définition (Titre)
Le titre d’un tableau se met entre <caption> et </caption>, juste après
le mot <table>.
Titre à un tableau
L. GARNIER xhtml-css L1 Info1B. 47 / 85
Les tableaux Marges intérieures et extérieures
Donner un titre à un tableau
Définition (Titre)
Le titre d’un tableau se met entre <caption> et </caption>, juste après
le mot <table>.
Titre à un tableau
La position du titre se fait par la syntaxe caption-side:valeur; oùvaleur peut prendre comme valeur, soit
✿✿✿✿
top, soit bottom
L. GARNIER xhtml-css L1 Info1B. 47 / 85
Les tableaux Marges intérieures et extérieures
Donner un titre à un tableau
Définition (Titre)
Le titre d’un tableau se met entre <caption> et </caption>, juste après
le mot <table>.
Titre à un tableau
La position du titre se fait par la syntaxe caption-side:valeur; oùvaleur peut prendre comme valeur, soit
✿✿✿✿
top, soit bottom
Titre en bas d’un tableau
L. GARNIER xhtml-css L1 Info1B. 47 / 85
Les tableaux Marges intérieures et extérieures
Donner un titre à un tableau
Définition (Titre)
Le titre d’un tableau se met entre <caption> et </caption>, juste après
le mot <table>.
Titre à un tableau
La position du titre se fait par la syntaxe caption-side:valeur; oùvaleur peut prendre comme valeur, soit
✿✿✿✿
top, soit bottom
Titre en bas d’un tableau
HTML
<table>
<caption>Statistisque sur les
genres</caption>
<tr>· · ·</table>
L. GARNIER xhtml-css L1 Info1B. 47 / 85
Les tableaux Marges intérieures et extérieures
Donner un titre à un tableau
Définition (Titre)
Le titre d’un tableau se met entre <caption> et </caption>, juste après
le mot <table>.
Titre à un tableau
La position du titre se fait par la syntaxe caption-side:valeur; oùvaleur peut prendre comme valeur, soit
✿✿✿✿
top, soit bottom
Titre en bas d’un tableau
HTML
<table>
<caption>Statistisque sur les
genres</caption>
<tr>· · ·</table>
CSS
caption{
caption-side: bottom;
text-align: right;
}
L. GARNIER xhtml-css L1 Info1B. 47 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Définition (Fusion de cellules)
La fusion de deux cellules consécutives dans une même ligne (resp. colonne)se fait par la syntaxe colspan="NbeDeCellulles" (resp.
rowspan="NbeDeCellulles").
Fusions de cellules dans un tableau
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Définition (Fusion de cellules)
La fusion de deux cellules consécutives dans une même ligne (resp. colonne)se fait par la syntaxe colspan="NbeDeCellulles" (resp.
rowspan="NbeDeCellulles").
Fusions de cellules dans un tableau
Une sélection de nos meilleurs vins
Chassagne-Montrachet En rupture
Volnay Bouteille de 75cl 19CVin jaune 24C
Vin de paille Bouteille de 37,5cl 25C
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Définition (Fusion de cellules)
La fusion de deux cellules consécutives dans une même ligne (resp. colonne)se fait par la syntaxe colspan="NbeDeCellulles" (resp.
rowspan="NbeDeCellulles").
Fusions de cellules dans un tableau
Une sélection de nos meilleurs vins
Chassagne-Montrachet En rupture
Volnay Bouteille de 75cl 19CVin jaune 24C
Vin de paille Bouteille de 37,5cl 25C
Première ligne : en-tête, fusion des trois cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Définition (Fusion de cellules)
La fusion de deux cellules consécutives dans une même ligne (resp. colonne)se fait par la syntaxe colspan="NbeDeCellulles" (resp.
rowspan="NbeDeCellulles").
Fusions de cellules dans un tableau
Une sélection de nos meilleurs vins
Chassagne-Montrachet En rupture
Volnay Bouteille de 75cl 19CVin jaune 24C
Vin de paille Bouteille de 37,5cl 25C
Première ligne : en-tête, fusion des trois cellulesDeuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Définition (Fusion de cellules)
La fusion de deux cellules consécutives dans une même ligne (resp. colonne)se fait par la syntaxe colspan="NbeDeCellulles" (resp.
rowspan="NbeDeCellulles").
Fusions de cellules dans un tableau
Une sélection de nos meilleurs vins
Chassagne-Montrachet En rupture
Volnay Bouteille de 75cl 19CVin jaune 24C
Vin de paille Bouteille de 37,5cl 25C
Première ligne : en-tête, fusion des trois cellulesDeuxième ligne : fusion des deux dernières cellulesDeuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
</table>
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
</table>
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th >Une
sélection de nos
meilleurs vins</th>
</tr>
</table>
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
</table>
Première ligne : en-tête, fusion des trois cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
</tr>
</table>
Première ligne : en-tête, fusion des trois cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
</tr>
</table>
Première ligne : en-tête, fusion des trois cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td >En rupture
</td>
</tr>
</table>
Première ligne : en-tête, fusion des trois cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
</table>
Deuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
</tr>
</table>
Deuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
</tr>
</table>
Deuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td >Bouteille
de 75cl</td>
</tr>
</table>
Deuxième ligne : fusion des deux dernières cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
<tr>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
<tr>
<td>Vin de paille</td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
<tr>
<td>Vin de paille</td>
<td>Bouteille
de 37,5cl</td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Fusions de cellules dans un tableau sans CSS
<table>
<caption>A boire avec
modération</caption>
<tr>
<th colspan="3" >Une
sélection de nos
meilleurs vins</th>
</tr>
<tr>
<td >Chassagne-Montrachet
</td>
<td colspan="2" >En rupture
</td>
</tr>
<tr>
<td>Volnay</td>
<td rowspan="2" >Bouteille
de 75cl</td>
<td>19- €</td>
</tr>
<tr>
<td>Vin jaune</td>
<td>24- € </td>
</tr>
<tr>
<td>Vin de paille</td>
<td>Bouteille
de 37,5cl</td>
<td>25- € </td>
</tr>
</table>
Deuxième colonne : fusion des troisième et quatrième cellules
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 1
HTML CSS
table{
border: 10px outset green;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 2
HTML CSS
table{
border: 10px outset green;
}
caption{
caption-side: bottom;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 3
HTML CSS
table{
border: 10px outset green;
}
caption{
caption-side: bottom;
} th{
border : 5px double #cccccc;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 4
HTML
<td >Chassagne-
Montrachet</td>
<td >Volnay</td>
<td >Vin jaune
</td>
<td >Vin de paille
</td>
CSS
table{
border: 10px outset green;
}
caption{
caption-side: bottom;
} th{
border : 5px double #cccccc;
}
.td1{
width:70%;
border:inset 5px #6699cc;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 4
HTML
<td class="td1" >Chassagne-
Montrachet</td>
<td class="td1" >Volnay</td>
<td class="td1" >Vin jaune
</td>
<td class="td1" >Vin de paille
</td>
CSS
caption{
caption-side: bottom;
} th{
border : 5px double #cccccc;
}
.td1{
width:70%;
border:inset 5px #6699cc;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 5
HTML<td class="td1" >Chassagne-
Montrachet</td>
<td class="td1" >Volnay</td>
<td class="td1" >Vin jaune
</td>
<td class="td1" >Vin de paille
</td>
<td >19-
€</td>
<td >24-
€ </td>
<td >25-
€ </td>
CSS
th{
border : 5px double #cccccc;
}
.td1{
width:70%;
border:inset 5px #6699cc;
}
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 5
HTML<td class="td1" >Chassagne-
Montrachet</td>
<td class="td1" >Volnay</td>
<td class="td1" >Vin jaune
</td>
<td class="td1" >Vin de paille
</td>
<td class="td2" >19-
€</td>
<td class="td2" >24-
€ </td>
<td class="td2" >25-
€ </td>
CSS
.td1{
width:70%;
border:inset 5px #6699cc;
}
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 6
HTML<td class="td2" >19-
€</td>
<td class="td2" >24-
€ </td>
<td class="td2" >25-
€ </td>
<td colspan="2">
En rupture</td>
CSS
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
#td3{
border:dashed 5px #ffcccc;
text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape 6
HTML<td class="td2" >19-
€</td>
<td class="td2" >24-
€ </td>
<td class="td2" >25-
€ </td>
<td id="td3" colspan="2">
En rupture</td>
CSS
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
#td3{
border:dashed 5px #ffcccc;
text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape finale
HTML
<td id="td3" colspan="2">
En rupture</td>
<td rowspan="2">
Bouteille de 75cl</td>
<td >
Bouteille de 37,5cl</td>
CSS
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
#td3{
border:dashed 5px #ffcccc;
text-align:center;
}
.td4{
width :15%;
border:outset 5px #ff00cc;
text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Plusieurs cellules sur une ligne ou une colonne
Sans CSS Résultat final Etape finale
HTML
<td id="td3" colspan="2">
En rupture</td>
<td class="td4" rowspan="2">
Bouteille de 75cl</td>
<td class="td4" >
Bouteille de 37,5cl</td>
CSS
.td2{
border:outset 5px #00ffcc;
text-align:right;
}
#td3{
border:dashed 5px #ffcccc;
text-align:center;
}
.td4{
width :15%;
border:outset 5px #ff00cc;
text-align:center;
}
L. GARNIER xhtml-css L1 Info1B. 48 / 85
Les tableaux Fusion(s) de cellules
Espacement entre les cellules
Définition (Espace entre les cellules)
L’espace entre cellules d’un tableau se fait via border-spacing et deux cassont à distinguer :
L. GARNIER xhtml-css L1 Info1B. 49 / 85
Les tableaux Fusion(s) de cellules
Espacement entre les cellules
Définition (Espace entre les cellules)
L’espace entre cellules d’un tableau se fait via border-spacing et deux cassont à distinguer :
• border-spacing : valeurNumerique; donne la valeur
d’espacement des quatre côtés des cellules ;
L. GARNIER xhtml-css L1 Info1B. 49 / 85
Les tableaux Fusion(s) de cellules
Espacement entre les cellules
Définition (Espace entre les cellules)
L’espace entre cellules d’un tableau se fait via border-spacing et deux cassont à distinguer :
• border-spacing : valeurNumerique; donne la valeur
d’espacement des quatre côtés des cellules ;
• border-spacing : valeurNumeriqueH valeurNumeriqueV;
donne la valeur d’espacement horizontaux via valeurNumeriqueH et
verticaux via valeurNumeriqueV.
L. GARNIER xhtml-css L1 Info1B. 49 / 85
Les tableaux Fusion(s) de cellules
Espacement entre les cellules
Définition (Espace entre les cellules)
L’espace entre cellules d’un tableau se fait via border-spacing et deux cassont à distinguer :
• border-spacing : valeurNumerique; donne la valeur
d’espacement des quatre côtés des cellules ;
• border-spacing : valeurNumeriqueH valeurNumeriqueV;
donne la valeur d’espacement horizontaux via valeurNumeriqueH et
verticaux via valeurNumeriqueV.
table{
border: 10px outset green;/* rien de nouveau*/
L. GARNIER xhtml-css L1 Info1B. 49 / 85
Les tableaux Fusion(s) de cellules
Espacement entre les cellules
Définition (Espace entre les cellules)
L’espace entre cellules d’un tableau se fait via border-spacing et deux cassont à distinguer :
• border-spacing : valeurNumerique; donne la valeur
d’espacement des quatre côtés des cellules ;
• border-spacing : valeurNumeriqueH valeurNumeriqueV;
donne la valeur d’espacement horizontaux via valeurNumeriqueH et
verticaux via valeurNumeriqueV.
table{
border: 10px outset green;/* rien de nouveau*/
border-spacing: 1.0cm 1.75cm;
}
Sans espace Avec espace
L. GARNIER xhtml-css L1 Info1B. 49 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
1 un en-tête de tableau thead ;
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;3 un corps de tableau tbody
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;3 un corps de tableau tbody
DANS L’ORDRE : thead, tfoot PUIS tbody.
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;3 un corps de tableau tbody
DANS L’ORDRE : thead, tfoot PUIS tbody.
Exemple de grand tableau
<table>
<caption>Le titre</caption>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;3 un corps de tableau tbody
DANS L’ORDRE : thead, tfoot PUIS tbody.
Exemple de grand tableau
<table>
<caption>Le titre</caption>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;3 un corps de tableau tbody
DANS L’ORDRE : thead, tfoot PUIS tbody.
Exemple de grand tableau
<table>
<caption>Le titre</caption>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>
<tfoot>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</tfoot>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;3 un corps de tableau tbody
DANS L’ORDRE : thead, tfoot PUIS tbody.
Exemple de grand tableau
<table>
<caption>Le titre</caption>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>
<tfoot>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</tfoot>
<tbody>
<tr>
<td>...</td>
...
<td>...</td>
</tr>
</tbody>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Les tableaux Les grands tableaux
Tableaux par morceaux
Lorsque les tableaux sont volumineux, il est possible de le fractionner en troisparties :
1 un en-tête de tableau thead ;2 un pied de tableau tfoot ;3 un corps de tableau tbody
DANS L’ORDRE : thead, tfoot PUIS tbody.
Exemple de grand tableau
<table>
<caption>Le titre</caption>
<thead>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</thead>
<tfoot>
<tr> <th> ... </th>
...
<th>... </th>
</tr>
</tfoot>
<tbody>
<tr>
<td>...</td>
...
<td>...</td>
</tr>
</tbody>
</table>
L. GARNIER xhtml-css L1 Info1B. 50 / 85
Structuration d’une page xHTML
Plan
1 Introduction2 Un peu de style CSS
Les couleursMise en forme du texteImage de fondLes pseudo-formats
3 Les listesLes listes de définitionsListe à puces
4 Les compteurs5 Les tableaux
Les tableaux standardsMarges intérieures et extérieuresFusion(s) de cellulesLes grands tableaux
6 Structuration d’une page xHTML7 Les formulaires[current,currentsubsection,sectionstyle=show/shaded,subsectionstyle=show/shad
L. GARNIER xhtml-css L1 Info1B. 51 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture
L. GARNIER xhtml-css L1 Info1B. 52 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
L. GARNIER xhtml-css L1 Info1B. 52 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.bandeau { width :600px ;
height :40px ;
background-
color :#00CCFF ;
padding-top : 10px ;
}
.pied_page {
width :600px ;
height :40px ;
background-
color :#33FF99 ;
padding-top : 10px ;
}
L. GARNIER xhtml-css L1 Info1B. 52 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.bandeau { width :600px ;
height :40px ;
background-
color :#00CCFF ;
padding-top : 10px ;
}
.pied_page {
width :600px ;
height :40px ;
background-
color :#33FF99 ;
padding-top : 10px ;
}
L. GARNIER xhtml-css L1 Info1B. 52 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
L. GARNIER xhtml-css L1 Info1B. 52 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
L. GARNIER xhtml-css L1 Info1B. 52 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
L. GARNIER xhtml-css L1 Info1B. 52 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div class="menu">Ceci
est le menu</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
L. GARNIER xhtml-css L1 Info1B. 52 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div class="menu">Ceci
est le menu</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
.menu { float :left ;
width :100px ;
height :200px ;
background-
color :#FF6699 ;
padding-top : 200px ;
}
L. GARNIER xhtml-css L1 Info1B. 52 / 85
Structuration d’une page xHTML
Balise <div>...</div>
html css capture<body>
<div
class="bandeau">Ceci
est le bandeau</div>
<div class="menu">Ceci
est le menu</div>
<div
class="contenu">Ceci
est le contenu</div>
<div
class="pied_page">Ceci
est le pied de page</div>
</body>
.contenu { width :600px ;
height :200px ;
background-
color :#FFCC00 ;
padding-top : 200px ; }
.menu { float :left ;
width :100px ;
height :200px ;
background-
color :#FF6699 ;
padding-top : 200px ;
}
L. GARNIER xhtml-css L1 Info1B. 52 / 85