Chapitre1 HTML5etCSS3

Développement Web
Prof. Hafida ZROURI

e-mail : h.zrouri@ump.ac.ma
Développement Web
Chapitre 1 : HTML5 et CSS3

Qu'est ce que le HTML5 ?
♦ Le HTML5 (HyperText Markup Language 5) est la dernière révision majeure
d'HTML qui est un langage de balisage permettant de structurer le contenu de
documents hypertextuels.
♦ Le HTML5 reprend les grands principes d’HTML et améliore certains aspects.

Parmi les nouveautés apportées :
- Un nouveau doctype simplifié.
- La suppression des balises et attributs de présentation.
- De nouvelles balises sémantiques ou d’organisation.
- De nouvelles balises audio et vidéo qui ne nécessitent plus l’appel à des plugins
dédiés.
- Nombreuses nouveautés pour les formulaires comme les curseurs ou les
calendriers et la prise en charge de façon native par les navigateurs de la
validation des données.
-…
09/11/2023 Prof. Hafida ZROURI 3

Le document HTML5 minimum
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Titre de la page</title>
</head>
<body>

</body>
</html>
Rappel de quelques balises d’HTML5
<br /> <iframe></iframe>
<html></html>
<head></head> <hr /> <ol></ol>
<sub></sub> <ul></ul>
<body></body>
<sup></sup> <li></li>
 <a></a> <dl></dl>
<title></title> <img /> <dt></dt>
<meta /> <map></map> <dd></dd>
<link /> <area /> <form></form>
<script></script> <i></i> <input />
<style></style> <b></b> <button></button>
<table></table> <textarea></textarea>
<hx></hx> (x : de 1 à 6)
<caption></caption> <select></select>
<p></p> <tr></tr> <option></option>
<pre></pre> <th></th> <fieldset></fieldset>
<div></div> <td></td> <legend></legend>
<span></span>
Balises sémantiques d’HTML5
♦ Les balises sémantiques décrivent la nature de certains éléments du contenu d’une
page. Ces derniers pourront ainsi être plus facilement récupérés et réutilisés par
des moteurs de recherche.
♦ Les anciennes balises sémantiques :
Le HTML5 a hérité des anciennes balises sémantiques du HTML 4.0 :
- <cite> … </cite> : affiche une citation. Par défaut cette citation est affiché en
italique.
- <q> … </q> : affiche une citation. Cette fois, le contenu devrait être affiché par
défaut entre guillemets.
- <strong> ... </strong> : définit un texte important. Par défaut, son contenu est
affiché en gras.
- <em> … </em> : marque un texte sur lequel on veut insister. Par défaut, son
contenu est affiché en italique.

- <abbr> … </abbr> : signale une abréviation.
Ex : <abbr title="Kilogramme">KG<abbr>
- <address> … </address> : affiche une adresse de contact. Son contenu est affiché
par défaut en italique. Aucun lien vers cette adresse n’est effectué par cette balise.
Ex : <address title="Contact" > ESTO <br />
<a href="mailto:esto.webmaster@ump.ma" >Contact mail</a><br />
Adresse : BP 473 Complexe universitaire Al Qods Oujda <br />
Tel : +212 36 500 224
</address>
- <var> … </var> : contient une variable. Par défaut, son contenu est affiché en
italique.
Ex : <p>Une équation : <var>x</var> = <var>y</var> + 2 </p>

- <code> … </code> : définit un code informatique, un script ou une partie de
script. Par défaut, son contenu est affiché dans une police à espacement fixe.
- <samp> … </samp> : met en évidence un texte d’exemple. Par défaut, son
contenu est affiché dans une police à espacement fixe.
Ex : <p>Déclaration et initialisation d'une variable en JavaScript :
<code> var nomVariable=valeur;</code> <br />
Exemple : <samp>var i=2;</samp></p>
- <dfn> … </dfn> : donne la définition d’un terme. Par défaut, cette définition est
affichée en italique.
Ex : <p>L'abbréviation W3C a pour signification <dfn>World Wide Web
Consortium</dfn></p>

♦ Les nouvelles balises d’organisation :
Ces balises d’organisation sont plutôt destinées au concepteur de la page afin qu’il
puisse distinguer plus aisément des portions de code.
1- Les balises <header>, <nav>, <footer> et <aside> :
▪ La majorité des pages existantes sur la toile, comportent les éléments suivants :
- Un en-tête de page avec, par exemple, un logo, une bannière, le nom du site, un
slogan ou un champ de recherche.
- Les outils de navigation, indispensables pour la consultation des différentes parties
du site.
- Une partie consacrée au contenu.
- Une zone annexe qui permet d’apporter des éléments accessoires au contenu
proprement dit, comme une publicité.
- Un pied de page avec par exemple des liens de contact, le nom de l’auteur, le plan
du site, les règles d’accessibilité, etc.
Ce qui visuellement peut prendre les formes suivantes :

En-tête de page En-tête de page
Navigation
Navigation Contenu
Contenu
Pied de page Pied de page
En-tête de page
Navigation Contenu A part
Pied de page

▪ HTML5 a créé de nouvelles balises pour permettre d’identifier plus clairement ces
grandes parties du design de la page. Ainsi :
- <header> … </header> regroupent les éléments de l’en-tête de la page. Cette
balise peut remplacer les <div id="header"> que l’on rencontre fréquemment.
- <nav> … </nav> indique les éléments d’un menu de navigation.
- <footer> … </footer> signale les éléments de pied de page. Cette balise peut
remplacer les <div id="footer"> que l’on rencontre fréquemment.
- <aside> … </aside> avertit qu’il s’agit d’informations complémentaires au
contenu.
<header>
<nav> Contenu <aside>
<footer>

2- Les balises <section> et <article> :
▪ Le contenu principal peut à son tour être organisé en diverses parties :
- <section> … </section> détermine une partie du contenu de la page se rapportant à un
thème déterminé.
- <article> … </article> définit un contenu indépendant du document qui possède une
identité à part entière dans la page comme l’article d’un blog, un post dans un forum ou
un produit dans un site commercial.
Remarque : Rien n’interdit de mettre des <nav> dans des <footer>, des <header> dans des
<section>, des <header> dans des <article>,… Pour que ces balises atteignent leur
objectif, elles doivent être utilisées avec modération.
<header> <header>
<section>
<aside> <section>
<article>
<nav> <aside> <article> <aside>
<nav>
<section> <article>
<aside> <article>
<footer> <footer>

♦ Nouvelles balises pour la structuration d’un tableau :
Le HTML5 prévoit des balises pour structurer de façon logique le contenu d’un tableau.
Ces balises sont :
▪ <thead> : pour regrouper les informations concernant l’en-tête du tableau comme par
exemple le titre et l’intitulé des colonnes.
▪ <tbody> : pour le corps du tableau, soit l’ensemble des données de celui-ci.
▪ <tfoot> : pour le contenu de bas de tableau comme par exemple des remarques ou une
légende.
Remarque :
Ces divisions logique n’affectent en rien la présentation par défaut du tableau mais elles
peuvent être reprises par des propriétés de style pour agrémenter la présentation du
tableau.

Exemple :
Dans le <head> de la page HTML :
<style>
table {border-collapse: collapse}
td,th {border: 2px solid black;}
thead {background-color: orange}
tfoot {font-style: italic}
</style>
Dans le <body> de la page HTML :
<table>
<thead>
<tr><th>Produit</th><th>Prix</th></tr>
</thead>
<tbody>
<tr> <td>PC</td> <td>5000</td></tr>
<tr> <td>Imprimante</td><td>1000</td></tr>
</tbody>
<tfoot>
<tr><td>total</td><td>6000</td></tr>
</tfoot>
</table>
♦ De nouvelles balises sémantiques :
Le HTML5 introduit également d’autres nouvelles balises sémantiques.
▪ La balise <mark> :
- Cette balise met en évidence une partie du texte. Le contenu
de cette balise est surligné sur fond jaune.
- Ex :
<p> <mark>HTML5</mark> a remplacé le HTML4.</p>
▪ La balise <time> :
- Cette balise définit une date et|ou une heure. L’attribut facultatif datetime indique la
date et l’heure selon la représentation numérique internationale de la norme ISO8601.
- Ex :
<p>Rendez-vous le <time datetime="2023-12-30">30 décembre</time>.</p>
<p>On peut faire l'examen <time>demain</time> ?</p>
<p>Connexion le <time datetime="2022-11-01T10:42:00">1 novembre à 10:42</time></p>

▪ La balise <meter> :
- Cette balise représente une mesure scalaire dans un intervalle connu. Il est possible de
définir au niveau de la plage de valeurs une valeur basse ("low") en dessous de laquelle
les mesures sont considérées comme faibles et une valeur haute ("high") au dessus de
laquelle les mesures sont considérées comme élevées. Ces deux indicateurs permettent
également de conditionner la couleur d'affichage (rouge, jaune ou verte) de la jauge.
- Cette balise possède les attributs :
• value : la valeur courante de la mesure. Cet attribut est obligatoire.
• min : la valeur minimale que peut prendre la mesure. (Sa valeur par défaut est 0)
• max : la valeur maximale que peut prendre la mesure. (Sa valeur par défaut est 1)
• low : la valeur maximale en dessous de laquelle la mesure est considérée comme basse.
• high : la valeur minimale à partir de laquelle la mesure est considérée comme haute.
• optimum : la valeur idéale pour la mesure.
- Ex :
<p>Le score de Amin est de <meter value="5" min="0" max="20" low="8" high="18" optimum="19.5"></meter> sur 20.<br />
Le score de Najat est de <meter value="14" min="0" max="20" low="8" high="18" optimum="19.5"></meter> sur 20.<br />
Le score de Said est de <meter value="19" min="0" max="20" low="8" high="18" optimum="19.5"></meter> sur 20.</p>

▪ La balise <figure> :
- Cette balise peut être utilisée pour regrouper des éléments tels que des images, des
vidéos, des diagrammes, des fragments de code ou même du texte qui viennent en
illustration du contenu principal.
- La balise <figcaption>, utilisée conjointement à la balise <figure>, fournit une légende
aux éléments ainsi regroupés.
- Ex :
<figure>
<img src="einstein.jpg" alt="Einstein" width="250" height="150">
<figcaption>Fig.1 - Le physicien Einstein</figcaption>
</figure>

▪ Les balises <details> et <summary> :
- La balise <details> définit des détails ou un contenu accessoire. La balise <summary>
fournit un résumé de ces éléments accessoires.
- Par défaut, seul le texte de la balise <summary> est visible. Au clic sur ce dernier, le
contenu de la balise <details> devrait apparaître. Si l’élément <summary> n'est pas
présent, le navigateur utilisera un intitulé par défaut (généralement, ce sera "Détails").
- Attribut open de l'élément <details> : Si cet attribut est présent, les détails sont exposés à
l'utilisateur dès le chargement.
- Ex :
<details>
<summary >Le HTML5</summary>
<p>Le HTML5 est la dernière révision majeure d'HTML. </p>
<p>Cette version a été finalisée le 28 octobre 2014.</p>
</details>

▪ La balise <progress> :
- Cette balise permet d’afficher la progression d’une tâche.
- Cette balise possède les attributs :
• max : définit la valeur maximale de la progression. Si cet attribut est présent, sa valeur
doit être un nombre décimal supérieur à 0. La valeur par défaut est 1.
• value : définit la valeur actuelle de la progression. La valeur de cet attribut doit être un
nombre décimal compris entre 0 et max (ou entre 0 et 1 si l'attribut max est absent). Si
l'attribut value est absent, la barre de progression traduit un état indéterminé (la tâche
est en cours et on ne sait pas la durée qu'elle prendra).
- Remarque : La valeur minimale est toujours 0 et il n'existe pas d'attribut min pour
l'élément progress.
- Ex :
<p>Avancement de la tache : <progress value="50" max="100">50%</progress></p>

Balises multimédia d’HTML5
♦ Les balises <audio> et <video> sont utilisées respectivement pour intégrer des fichiers
sons et des vidéos dans un document HTML.
♦ Ces deux balises peuvent contenir plusieurs sources (balise <source>) introduites avec
l'attribut src. Le navigateur décidera lequel utiliser. Du contenu alternatif peut aussi être
ajouté pour les navigateurs ne supportant pas cette fonctionnalité.
♦ Syntaxe :
<video [width="…" height= "…"]> <audio>
<source src="fichier.mp4"> <source src="fichier.mp3">
<source src="fichier.webm"> <source src="fichier.ogg">
… …
<a href="fichier.mp4"> … </a> <a href="fichier.mp3"> … </a>
</video> </audio>
♦ Les attributs des balises <audio> et <video> :
– controls : affiche la barre de contrôle (lecture, pause, volume, temps écoulé)
– autoplay : démarrage automatique
– loop : lecture en boucle
– preload : none (pas de préchargement), metadata (préchargement des métadonnées
attachées au fichier) ou auto (laisse le navigateur décider).
Nouveautés HTML5 pour les formulaires
♦ Les formulaires ont bien évolués avec les nouveautés d'HTML5.
L'introduction de nouveaux types de champs sémantiques et de nouveaux outils pour la
validation de la saisie simplifie le travail du développeur qui était jusque là obligé de
palier à ces manques bien souvent avec du JavaScript.
♦ Les nouveaux types de champs :
▪ Ligne de texte d’adresse email : <input type="email">
Ex : Email : <input type="email" name="mail" required>
<input type="submit" value="Envoyer">
Remarque : si l'attribut multiple est indiqué, la valeur peut être une liste d'adresses
électroniques séparées par des virgules. Chaque blanc situé avant et après chaque adresse
sera retiré.
▪ Ligne de texte d’url : <input type="url">

Ex : Taper l'URL de votre site : <input type="url" name="web" required>
<input type="submit" value="Envoyer">

▪ Ligne de texte avec liste de suggestions :
- La balise <datalist> ajoutée à une ligne de texte ouvre une liste de suggestion d’encodage
au focus de celle-ci. L’utilisateur peut retenir une suggestion ou encoder une valeur de
son choix.
- La balise <datalist> est reliée à la ligne de texte par un identifiant id qui renvoie à l’attribut
list de celui-ci. Cette balise contient une liste de balises <option> reprenant les
suggestions d’encodage. Ces balises <option> doivent toujours posséder un attribut
value.
- Syntaxe : <datalist id="… " >
<option value="… " >
<option value= " … " >
...
</datalist>
- Ex : Choisir un fruit : <br /> <input type="text" size="30" list="fruits">
<datalist id="fruits"> <option value="Orange">
<option value="Pomme">
<option value="Poire">
<option value="Prune">
</datalist>
▪ Ligne de texte de format numérique : <input type="number">
Cette balise a des attributs spécifiques :
▪ min : indique la valeur minimale du compteur.
▪ max : indique la valeur maximale du compteur.
▪ step : (Sa valeur par défaut est 1) est un nombre qui détermine le pas d’avancement à chaque
pression de la souris sur la flèche ▲ ou ▼ ou le mot clé any. Seules les valeurs qui sont des
multiples de cet attribut depuis le seuil min sont valides. Lorsque la chaîne de caractères
any est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur
(comprise entre min et max) est valide.
▪ value : la valeur de départ du compteur.
Ex : Nombre d'articles (conditionnées par 2) : <br />
<input type="number" name="n" min="2" max="12" step="2" value="2">

▪ Ligne de texte de format de date : <input type="date">
Cette balise fait apparaître automatiquement un calendrier où l’utilisateur aura le choix dans
la date. Elle se décline sous plusieurs formes :
▪ <input type="date"> : la plus générale. Elle permet de sélectionner l’année,
le mois et le jour.
▪ <input type="month"> : pour le mois et l’année.
▪ <input type="week"> : pour une semaine déterminée.
Ex : Exemple de date : <input type="date" name="d"><br />
Exemple de month : <input type="month" name="m"><br />
Exemple de week : <input type="week" name="w">

▪ Ligne de texte de format horaire : <input type="time">
Cette balise a les attributs suivants :
▪ min : permet de fixer une heure de départ (minimale) .
▪ max : permet de fixer une heure de fin (maximale).
▪ step : détermine le pas d’avancement (en seconde).
▪ value : la valeur de départ de l’heure.
Ex : Livraison de la pizza à :
<input type="time" min="11:00" max="22:00" step="600" value="11:00">
▪ Ligne de texte de format date et heure : <input type="datetime-local">

Ex : Exemple de datetime : <input type="datetime-local" name="dt">

▪ Ligne de texte de téléphone : <input type="tel">
Étant donné que les numéros de téléphone peuvent avoir des formats différents, aucune
vérification n’est effectuée par le navigateur. Il est possible d’appliquer un format
particulier en utilisant l’attribut pattern (voir plus loin).
▪ Ligne de texte de recherche : <input type="search">
L’aspect de ce champ de texte sera géré par le navigateur.
Ex : Recherche :
<input type="search"><input type="submit" value="Go">
▪ Ligne de texte de couleur : <input type="color">
Ex : Choisir une couleur : <input type="color">

▪ Les curseurs : <input type="range">
▪ min : indique la valeur minimale du curseur.
▪ max : indique la valeur maximale du curseur.
▪ step : détermine le pas d’avancement.
▪ value : la valeur de départ du curseur.
Ex : Quantités commandées : <br />
<input type="range" name="curseur" min="1" max="5" value="3" step="1" />

▪ Visualisation du résultat d’un calcul : <output for="…" name="…" ></output>
La balise <output> est un élément utilisable au sein de formulaires pour afficher le résultat
d'un calcul (souvent en JavaScript) à partir de champs saisissables par l'utilisateur. Ce
champ est en lecture seule et s'actualise dès que l'une des valeurs sur laquelle le calcul se
base change (en utilisant par exemple le gestionnaire d’événement oninput).
▪ for : indique la liste des identifiants des éléments qui participent au calcul (les séparer par
des espaces).
▪ name : spécifie le nom de la balise <output>.
▪ form : spécifie l'identifiant du formulaire auquel l'élément output appartient.
Ex : <form oninput="o.value=a.value*b.value">
<input type="number" name="a" id="a" value="2"> *
<input type="number" name="b" id="b" value="3"> =
<output name="o" for="a b">6</output>
</form>

♦ Quelques nouveaux attributs introduits par HTML5 :
▪ L’attribut autofocus :
- Donne le focus à l'élément au chargement de la page.
- Cet attribut peut être appliqué aux balises input, select, textarea et button.
▪ L’attribut placeholder :
- Donne une indication à l'utilisateur sur le type de donnée à entrer.
- La valeur de l'attribut placeholder est affichée jusqu'à ce que le champ prenne le focus
ainsi qu'à la perte du focus si le champ est vide. S'applique aux balises input et textarea.
▪ L’attribut required :
- Indique que le champ est obligatoire.
- Il sert essentiellement pour les vérifications côté navigateur sans utiliser JavaScript.
▪ L’attribut minlength :
- Indique le nombre minimal de caractères que l’utilisateur doit saisir dans le champ.

▪ L’attribut readonly :
- Indique que la valeur attribuée à la ligne de texte ne pourra être modifiée par l’utilisateur.
▪ L’attribut autocomplete :
- Cet attribut permet d'activer la saisie semi-automatique : le navigateur va
automatiquement compléter par des valeurs que l'utilisateur a entré auparavant.
- Cet attribut est ignoré si la valeur de l'attribut type est hidden, checkbox, radio, file, ou que
l'élément est un bouton (button, submit, reset, image).
- Les valeurs possibles sont :
off : L'utilisateur doit entrer la valeur de manière explicite et/ou le document fourni sa
propre méthode d'auto-complétion. Le navigateur ne complète pas l'entrée.
on : Le navigateur peut compléter automatiquement la valeur en se basant sur des valeurs
que l'utilisateur a rentré précédemment.
- Exemple :
Recherche : <input type="search" name="search" autocomplete="on" />

▪ L’attribut pattern :
- Cet attribut permet de définir une expression régulière qui sera utilisée pour déterminer
si la saisie est conforme au format attendu.
- Le tableau suivant présente une liste de composants pour former une expression
régulière.
Caractère Description
[a-z] Trouve n’importe quel caractère de a à z
[0-9] Trouve n’importe quel chiffre de 0 à 9
[a-zA-Z] Trouve n’importe quel caractère de a à z ou de A à Z
[a-z0-9_-] Trouve n’importe quel caractère de a à z, un chiffre de 0 à 9,
underscore ou un trait d’union
x{n} Trouve x exactement n fois
x{n,} Trouve x au moins n fois
x{n, m} Trouve x entre n et m fois
- Exemple 1 : ci-dessous un champ de texte qui doit contenir trois lettres majuscules
suivies de quatre chiffres. Les attributs required et pattern permettent de s'assurer que
le champ sera rempli au format souhaité lors de la soumission. Enfin, lors du survol du
champ, l'utilisateur verra apparaître un message correspondant à l'attribut title lui
indiquant le format attendu.
<input type="text" name="exemple" pattern="[A-Z]{3}[0-9]{4}"
title="Ce champ contient 3 lettres en majuscules suivies de 4 chiffres" required />
<input type="submit" value="Envoyer" />
- Exemple 2 : Numéro de téléphone marocain

<input type="tel" name="noTel" pattern="0[5-7][0-9]{8}"
title="Ce champ contient 10 chiffres avec un 0 au début suivi de 5 ou 6" required />

Qu'est ce que le CSS3 ?
♦ CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé
pour décrire la présentation d'un document écrit en HTML ou XML.
♦ La version 3 de CSS (CSS3) apporte plusieurs nouveautés, comme

- de nouveaux sélecteurs
- les bords arrondis
- les bordures imagés
- les ombres
- la présentation en plusieurs colonnes d’un texte
- les transitions
- …

Rappel du syntaxe de CSS
♦ Une feuille de style est composée de règles qui ont la forme suivante :
sélecteur {
propriété1: valeur1;
[propriété2: valeur2;]
…
/* commentaire */
}
♦ Il existe trois techniques pour associer des styles à un document HTML :
▪ Style en ligne : on ajoute l’attribut de style dans la balise concernée :
<balise style="prop1:val1;…"> … </balise>
▪ Style interne : on regroupe les règles de styles à l’aide de la balise de style :
<style> … </style>
▪ Style externe : on regroupe les règles de styles dans un fichier externe (d’extension
«.css») et on fait appel à ce dernier dans l’entêté du document HTML en utilisant la
balise <link> ou l’instruction @import :
- Style lié : <link rel="stylesheet" href="feuilledestyle.css">
- Style importé : <style> @import url(feuilledestyle.css); </style>
Rappel de quelques sélecteurs CSS
♦ Sélecteur universel : *
- sélectionne tous les éléments
♦ Sélecteur d’élément : E
- sélectionne tous les éléments E : <E>…</E>
♦ Sélecteur d’identification : #valeurID
- sélectionne de manière unique un élément ayant id : <balise id="valeurID">…</balise>
♦ Sélecteur de classe : .nomDeLaClasse
- sélectionne les éléments ayant une classe : <balise class="nomDeLaClasse">…</balise>
♦ Sélecteur descendant : E F
- sélectionne tout élément F qui est un descendant (enfant direct ou indirect) de l’élément E
♦ Sélecteur d’enfant : E>F
- sélectionne tout élément F qui est un enfant direct de l’élément E
♦ Sélecteur d’adjacence directe : E+F
- sélectionne l'élément F placé immédiatement après l’élément E
♦ Sélecteur de pseudo-classe des ancres : A:link, A:visited, A:hover et A:active
- permet d’appliquer un style à un lien non visité, lien visité, lien survolé avec la souris et lien
cliqué

Rappel de quelques sélecteurs CSS
♦ Sélecteur d’attribut :
- E[at] : sélectionne l'élément E ayant comme attribut "at" quelles qu'en soient les valeurs
- E[at="val"] : sélectionne l'élément E ayant comme attribut "at" et dont sa valeur est égale à
"val"
- E[at~="val"] : sélectionne l'élément E ayant comme attribut "at" et dont la valeur est une liste
de valeurs séparée par des espaces et dont une de ses valeurs est égale à "val"
♦ Sélecteur de pseudo-élément :
- E:first-letter : sélectionne la première lettre de l’élément E
- E:first-line : sélectionne la première ligne de l’élément E
- E:before : insère un contenu généré avant celui de l’élément E
- E:after : insère un contenu généré après celui de l’élément E
:before et :after s’utilisent avec la propriété content et peuvent insérer du texte ou des images.
[:before {content: url(nom_de_l’image) ;} ou :before {content: "texte" ;} ]
♦ Sélecteur de pseudo-classe dynamique : E:hover, E:active et E:focus
- permet d’appliquer un style à un élément survolé avec la souris, élément cliqué et élément qui
a le focus. (E:focus est dédié principalement au formulaire et elle permet de mettre en forme
un élément de formulaire quand il obtient le focus)

Nouveaux sélecteurs CSS3
♦ Sélecteur de pseudo-élément :
- CSS3 propose une nouvelle syntaxe pour les pseudo-éléments. En lieu est place du « : » il
faudra écrire « :: ». CSS3 a introduit la notation ::first-letter, ::first-line, ::before, et ::after
pour différencier les pseudo-classes et les pseudo-éléments.
- Le pseudo-élément ::selection : permet d'appliquer des règles de styles à une portion du
document qui a été sélectionnée par l'utilisateur.
Exemple :
<style>
p::before { content: "("; font-size: 2em; }
p::after { content: ")"; font-size: 2em; }
::selection { color: red; background-color: black ; }
</style>
<p> Les pseudo-éléments accèdent à certaines parties de l'élément pour les styler. </p>

♦ Sélecteur d’attribut :
- E[at^="val"] : sélectionne l'élément E ayant comme attribut "at" et dont la valeur commence
exactement par le préfixe "val"
- E[at$="val"] : sélectionne l'élément E ayant comme attribut "at" et dont la valeur finit
exactement par le suffixe "val"
- E[at*="val"] : sélectionne l'élément E ayant comme attribut "at" et dont la valeur contient au
moins une fois la sous chaîne "val"
Exemple :
<style>
input[name^="nom"] {background-color: green;}
input[title*="dip"] {color: red;}
</style>
Nom et Prénom : <input type="text" name="nomPrenom" /><br />
Diplôme : <input type="text" name="diplome" title="dernier diplôme" />
→ Le 1er champ aura une couleur d’arrière-plan verte et le texte saisi dans le 2ème champ sera
rouge.

♦ Sélecteur d’adjacence indirecte : E~F
- sélectionne tous les éléments F placés après l’élément E
Exemple :
<style>
h1 ~ p {color: red;}
</style>
<h1>Math</h1>
<h2>Fonctions :</h2>
<p>Fonction linéaire : f(x) = ax+b</p>
<p>Fonction du second degré : f(x) = ax2+bx+c</p>
→ Le texte du deux paragraphes sera en rouge (car ces deux paragraphes sont frères de h1).

♦ Sélecteur de pseudo-classe :
- :root : correspond à l'élément racine d'un document. En HTML, :root est représenté par
l'élément <html>
- :empty : permet de cibler chaque élément qui ne possède aucun enfant, ni aucun contenu
- :not(…) : prend un sélecteur comme argument. Il sert à exclure les éléments qui sont
concernés par le sélecteur en argument. Le sélecteur passé en argument ne doit pas contenir
d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.
- :first-child : sélectionne le premier élément enfant
- :last-child : sélectionne le dernier élément enfant
- :nth-child(n) : sélectionne le nième élément enfant où n est un nombre ou les mots-clés even
(pairs) ou odd (impairs)
- :nth-last-child(n) : sélectionne le nième enfant en partant du dernier élément
- :first-of-type : représente le premier élément de ce type
- :last-of-type : représente le dernier élément de ce type
- :nth-of-type(n) : désigne le nième élément de ce type où n est un nombre ou les mots-clés
even (pairs) ou odd (impairs)
- :nth-last-of-type(n) : sélectionne le nième élément de ce type en partant du dernier élément
- :only-child : sélectionne un élément s'il est le seul enfant de son parent
- :only-of-type : sélectionne un élément s'il est le seul enfant de son parent qui a ce type
Nouveaux sélecteurs de CSS3
Exemple 1 :
<style>
:root {border: solid 7px red;}
:root body {border: solid 2px blue; padding:15px;}
div:empty {width: 210px; height: 30px; background-color: green;}
p:not(.test) {font-weight: bold;}
</style>
<div></div>
<div>
<h2>Développement Web</h2>
<p class="test">Ceci est le cours d'HTML5</p>
<p>Ceci est le cours de CSS3</p>
</div>

Exemple 2 :
<style>
table, th, td {border: solid 1px black;}
tr:first-child {background-color: lightblue;}
/* tr:first-of-type {background-color: lightblue;} */
tr:nth-child(2), tr:last-child { background-color: yellow;}
/* tr:nth-of-type(2), tr:last-of-type { background-color: yellow;} */
</style>
<table>
<tr><th>Jour</th> <th>Matière</th></tr>
<tr><td>Lundi</td><td>HTML-CSS</td></tr>
<tr><td>Mardi</td><td>JavaScript</td></tr>
<tr><td>Mercredi</td><td>PHP</td></tr>
</table>
Exemple 3 :
<style>
em:only-child {text-decoration: underline}
strong:only-of-type {background-color:lightblue}
</style>
<h2>Qu'est ce que le <em>CSS</em> ?</h2>
<p><em>CSS</em> est un langage de feuilles de style utilisé pour décrire la
présentation d'un document <strong>HTML</strong>. </p>
<p><strong>CSS3</strong> apporte plusieurs nouveautés comme de
<strong>nouveaux sélecteurs</strong>.</p>

♦ Sélecteur de pseudo-classe pour les formulaires :
- :checked : permet de cibler chaque élément de formulaire qui est coché. (il concerne les
boutons radio et les cases à cocher)
- :required : permet de cibler chaque élément de formulaire qui est obligatoire.
Ce sélecteur sélectionne les éléments qui ont l'attribut HTML required
- :optional : permet de cibler chaque élément de formulaire (acceptant l’attribut required)
pour lequel l'attribut required n'est pas activé.
- :read-only : permet de cibler chaque élément de formulaire qui est en lecture seule.
Ce sélecteur sélectionne les éléments qui ont l'attribut HTML readonly
- :disabled : permet de cibler chaque élément de formulaire qui est désactivé.
Ce sélecteur sélectionne les éléments qui ont l'attribut HTML disabled
- :read-write : permet de cibler chaque élément de formulaire en lecture et écriture.
Ce sélecteur sélectionne les éléments qui n’ont pas l'attribut HTML readonly
- :valid : permet de cibler chaque élément de formulaire qui est considéré comme valide.
La validité d'un élément dépend du navigateur et du type d'élément
- :invalid : permet de cibler chaque élément de formulaire qui est considéré comme
invalide. L’invalidité d'un élément dépend du navigateur et du type d'élément

Exemple 1 :
<style>
:disabled {border: dotted 3px black;}
input[type*="e"]:read-write {font-weight: bold;}
input:checked {border: solid 3px red;}
:required {background-color: yellow;}
input:read-only {font-style: italic;}
</style>
<form method="post" action="test.php">
Nom et Prénom : <input type="text" name="nomPrenom" /><br />
Sexe : <input type="radio" name="s" value="F" />F
<input type="radio" name="s" value="H" />H<br />
Email : <input type="email" name="mail" required /><br />
<input type="text" size="36" value="N'oublier pas de cliquer sur le bouton !" readonly />
<input type="button" value="---" disabled />
</form>

Exemple 2 :
<style>
input[type*="e"]:invalid {border: solid 3px red;}
input[type*="e"]:valid {border: dotted 3px green;}
</style>
<form method="post" action="traitement.php">
Nom : <input type="text" name="nom" required /><br />
Email : <input type="email" name="mail" required /><br />
</form>

Exemple 3 :
<style>
input:invalid+span::after { content: '✖'; padding-left: 10px; }
input:valid+span::after { content: '✓'; padding-left: 10px; }
</style>
<form method="post" action="traitement.php">
<label for="b">Quantité de bonbons à commander (par 5) :</label>
<input type="number" name="b" id="b" step="5" min="5" max="50" required />
<span></span><br />
</form>

Rappel de quelques propriétés CSS
Propriété Description
font-family Définit la police de caractères. Ex : h3{font-family: arial}
font-size Définit la taille de la police. Ex : p{font-size: 14pt}
font-style Définit le style de l'écriture. Ex : h2{font-style: italic}
text-transform Définit la casse du texte. Ex : p{text-transform: uppercase}
visibility Détermine si un élément est visible ou caché (hidden, visible).

Ex : p{visibility: hidden;}
text-align Définit l'alignement : à gauche, centré, … Ex : p{text-align: center}
text-indent Définit un retrait dans la première ligne. Ex : p{text-indent: 1cm}
background-color Définit la couleur de l'arrière-plan. Ex : div{background-color: red}
background-image Définit l'image de l'arrière plan.
Ex : body{background-image: url(image.gif)}

Rappel de quelques propriétés CSS
Propriété Description
list-style-type Détermine le type de puce ou de numérotation. (none, disc, circle,
square, decimal, lower-alpha,…). Ex : ul{list-style-type: square}
list-style-image Permet de remplacer la puce ou la numérotation par une image.
Ex : ul{list-style-image: url(image.gif)}
border-spacing Permet de spécifier l’espacement des cellules.
Ex : table{border-spacing: 5px}
border-collapse Permet de fusionner (collapse) ou non (separate) les bordures des
cellules. Ex : table{border-collapse: collapse}
float Spécifie de quel coté de l’élément parent doit s’aligner l’élément
concerné. Ex : img{float: right}
display Permet de modifier le type de rendu d’un élément [none, inline, block,
inline-block (l'élément est une boite, mais lui-même est inséré dans le
flot en mode inline, sans retour à la ligne), …]. Ex : div{display: inline}

Rappel du modèle de boite de CSS
♦ Le modèle de mise en forme des CSS est basé sur le concept de boîte.
- Une boîte est un conteneur, une zone rectangulaire qui affiche à l’écran un contenu.
- Tout élément du HTML peut être considéré comme une boîte.
margin
♦ Quelques propriétés des boites : border
padding
- Les dimensions : width, height content
Ex : p{width: 300px; height: 100px}
- Style de la bordure : border-style
Ex : div{border-style: solid} p{border-style: dashed dotted solid double}
- Épaisseur de la bordure : border-width
Ex : p.note{border-width: 2px}
- Couleur de la bordure : border-color
Ex : div.remarque{border-color: green}
- Raccourci pour toutes les propriétés de la bordure : border
Ex : h1{ border: 5px solid red }
- Marge intérieure : padding (padding-top, padding-bottom, padding-left, padding-right)
- Marge extérieure : margin (margin-top, margin-bottom, margin-left, margin-right)

Nouvelles propriétés CSS3
♦ Contrôle des dimensions d’un élément boîte : box-sizing
▪ La propriété box-sizing définit la façon dont la hauteur et la largeur totale d'un
élément est calculée. Elle permet de spécifier si la valeur de width ou de height
inclut la marge intérieure et la taille de la bordure.
▪ Cette propriété peut pendre comme valeur :

content-box : (Valeur par défaut) la longueur width et la hauteur height n'incluent
pas la marge intérieure padding et la bordure border. Toute marge interne ou
bordure ajoutée ultérieurement augmentera les dimensions de l'élément.
border-box : la longueur width et la hauteur height incluent la marge intérieure
padding et la bordure border. En augmentant la taille des marges internes ou des
bordures, la taille de l’élément ne change pas mais son contenu sera compressé.
▪ Remarque : Il est souvent utile de définir box-sizing à border-box aux éléments.

▪ Exemple 1 :
Dans le <HEAD> de la page HTML :
<STYLE type="text/css">
div {
width: 120px;
height: 60px;
padding: 10px;
border: 5px solid red; Largeur totale : 120px + (2 * 10px) + (2 * 5px) = 150px
Hauteur totale : 60px + (2 * 10px) + (2 * 5px) = 90px
background: yellow; Largeur de la boîte de contenu : 120px
Hauteur de la boîte de contenu : 60px
}
.content-box { box-sizing: content-box; } /* Modèle de boîte par défaut */
.border-box { box-sizing: border-box; }
</STYLE> Largeur totale : 120px
Hauteur totale : 60px
Largeur de la boîte de contenu : 120px - (2 * 10px) - (2 * 5px) = 90px
Dans le <BODY> de la page HTML : Hauteur de la boîte de contenu : 60px - (2 * 10px) - (2 * 5px) = 30px
<div class="content-box">Exemple de content-box</div> <br>

<div class="border-box">Exemple de border-box</div>

▪ Exemple 2 :
Dans le <HEAD> de la page HTML :
<STYLE type="text/css">
.conteneur { width: 50%;
background-color: gray;
border: 1px solid black; }
p { width: 100%;
background-color: lightblue;
padding: 20px;
border: 10px solid black; }
#p1 { box-sizing: content-box; /*Valeur par défaut*/ }
#p2 { box-sizing: border-box; }
</STYLE>
Dans le <BODY> de la page HTML :
<div class="conteneur">
<p id="p1">HTML5 et CSS3</p>
<p id="p2">JavaScript et DOM</p>
</div>
♦ Les bords arrondis : border-radius
▪ La propriété border-radius permet d'arrondir les 4 coins d'un élément HTML.
▪ Syntaxe : border-radius: x/y;
où x et y sont une valeur ou un pourcentage. Les valeurs de x et y déterminent les
rayons horizontaux et verticaux d’un quart d’ellipse, ce qui induira la courbure de
l’angle. Voici des exemples de l’aspect des coins arrondis obtenus en fonctions de
différents rayons :
x=50px y=50px x=100px y=50px x=50px y=100px

▪ Remarque : Une seule valeur peut être indiquée. Dans ce cas, la valeur de x est
égale à la valeur de y.
▪ Exemple :
<div style="width:150px; height:60px; border-style:solid; border-radius:25px"></div>
▪ Il est possible de spécifier indépendamment un angle pour chaque extrémité.

border-top-left-radius: x y; (arrondi du coin supérieur gauche)
border-top-right-radius: x y; (arrondi du coin supérieur droite)
border-bottom-right-radius: x y; (arrondi du coin inférieur droite)
border-bottom-left-radius: x y; (arrondi du coin inférieur gauche)
où x et y sont une valeur ou un pourcentage.

▪ Il est également possible de définir l’arrondi de chacun des angles, à l’aide d’une écriture
raccourcie :
1) border-radius: liste valeurs / liste valeurs;
La 1ère liste de valeurs représente les rayons horizontaux des angles, la 2ème liste représente
les rayons verticaux des angles. Ex : border-radius: 7px 10px 7px 10px / 10px 7px 10px 7px;
2) border-radius: liste valeurs;
Dans ce cas les rayons horizontaux sont égaux aux rayons verticaux des angles.
- 4 valeurs. (supérieur gauche, supérieur droite, inférieur droite, inférieur gauche)
Ex : border-radius: 30px 60px 10px 100px;
- 3 valeurs. (la 1ère pour le coin supérieur gauche, la 2ème pour les coins supérieur
droite - inférieur gauche, et la dernière pour le coin inférieur droite)
Ex : border-radius: 30px 60px 10px;
- 2 valeurs. (la 1ère pour les coins supérieur gauche- inférieur droite, la 2ème pour les
coins supérieur droite - inférieur gauche). Ex: border-radius: 25px 50px;
- 1 valeur pour les quatre coins. Ex: border-radius: 20px;

Exemple :
<style>
div {width: 100px; height: 100px;}
#id1 {background-color: red; border-radius : 10px 15px 20px 25px;}
#id2 {background-color: orange; border-radius: 10px 35px 0;}
#id3 {background-color: gray; border-radius: 50%;}
</style>
<div id="id1"></div>
Remarque : Si la forme de l’élément est carré, on peut former
un rond avec une valeur de border-radius de 50% .

♦ Les bordures imagées : border-image
▪ La propriété border-image permet l’utilisation d’une image pour l’appliquer à la
bordure d’un élément boîte.
▪ Cette propriété prend une image rectangulaire et la divise en 9 parties (voir la
figure). Les 8 parties du contour sont utilisées pour les coins et les cotés (les
quatre découpes des coins seront placés sur les coins de la bordure, les quatre
découpes intermédiaires rempliront les bordures sur les cotés). Le centre est
caché pour permettre l’affichage du contenu.

▪ Syntaxe : border-image: url(fichier_image) a b c d valeur valeur;
où
- url(fichier_image) est l’adresse de l’image.
- a, b, c et d sont la dimension d’un morceau de la grille dans les côtés de la bordure. On
peut ne signaler qu’un seul paramètre. Dans ce cas, celui-ci est appliqué pour les 4
cotés. Avec 2 paramètres, ceux-ci déterminent la dimension des cotés haut/bas et
gauche/droite. 3 paramètres, respectivement le coté haut, gauche/droite et bas. Et enfin
4 paramètres, dans l’ordre, coté haut, coté droit, coté bas et coté gauche.
- valeur soit round, repeat ou stretch
Le mot-clé round reproduit les images et redimensionne celles-ci afin qu’elles s’ajustent
exactement à la largeur et la hauteur de l’élément. Le mot-clé repeat effectue le même
travail que round mais sans ajustement. Et enfin, stretch (valeur par défaut) étire
l’image aux dimensions de la boîte.
Une seule valeur détermine les 4 cotés. Deux valeurs s’appliquent respectivement au
coté haut/bas et gauche/droit.

Exemple 1:
Soit l’image border.png :

<style>
div { width: 220px; height: 80px;
text-align: center;
border: solid 20px;
border-image: url(border.png) 30 30 round;
}
</style>
<div><h2>HTML5 et CSS3</h2></div>
Si on change la valeur round par stretch on obtient l’affichage suivant :
Remarque : Certains navigateurs n'affichent pas l'image de bordure si

border-style vaut none ou si border-width vaut 0.
Exemple 2:
Soit l’image border2.png :

<style>
text-align: center;
border: solid 20px;
border-image: url(border2.png) 30 30 stretch;
}
</style>
<div><h2>HTML5 et CSS3</h2></div>

♦ Les ombres :
Avec CSS3, il est possible d’ajouter un effet d’ombre sur le texte ou sur les
éléments boîte.
1. Les ombres sur le texte : text-shadow
▪ L’ombre est définie par un décalage relatif au texte et cette définition peut
éventuellement inclure la couleur et le rayon de flou.
▪ Syntaxe : text-shadow: x y z couleur;
où
- x y (obligatoires) définissent le décalage de l'ombre par rapport au texte.
x définit la distance horizontale. Une valeur négative placera l'ombre à gauche
du texte.
y définit la distance verticale. Une valeur négative placera l'ombre au-dessus du
texte.
- z est l’intensité du dégradé ou du flou (facultatif, par défaut 0).
- couleur est la couleur de l’ombre.

▪ Exemple :
<style>
h2:first-of-type { text-shadow: 4px 4px 1px red; }
h2:nth-of-type(2) { text-shadow: 4px 4px 3px black; color:white; }
h2:last-of-type { text-shadow: -4px -4px 3px red; }
</style>
<h2>HTML5 et CSS3</h2>
<h2>JAVASCRIPT</h2>
<h2>PHP</h2>

2. Les ombres sur les éléments boîte : box-shadow
▪ Syntaxe : box-shadow: x y z couleur;
où
- x y (obligatoires) définissent le décalage de l'ombre.
x définit la distance horizontale. Une valeur négative placera l'ombre à gauche
de l’élément.
y définit la distance verticale. Une valeur négative placera l'ombre au-dessus de
l’élément.
- z est l’intensité du dégradé ou du flou (facultatif, par défaut 0).
- couleur est la couleur de l’ombre.

▪ Exemple 1 :
<style>
div {background-color: lightgray; width: 200px; height: 35px; margin: 40px}
#id1 {box-shadow: 9px 9px 2px gray}
#id2 {box-shadow: 9px -9px 15px gray}
#id3 {box-shadow: -9px -9px 7px gray}
</style>

▪ Exemple 2 :
<style>
img {
width: 150px;
height: 100px;
box-shadow: 6px 6px 12px red;
}
</style>
<img src="einstein.jpg" alt="Einstein" />

♦ Décoration :
▪ La propriété text-decoration définit la décoration du texte.
▪ En CSS1, cette propriété n'était pas une raccourcie et avait les valeurs suivantes :
none (aucun trait « valeur par défaut »), underline (le texte est souligné), overline
(le texte a un trait au-dessus), line-through (le texte est barré en son milieu).
▪ En CSS3, c'est une raccourcie qui permet de paramétrer simultanément les
propriétés suivantes :
text-decoration-line spécifie le type de la décoration utilisée (none, underline, …).
Cette propriété accepte une ou plusieurs valeurs.
text-decoration-color spécifie la couleur de la décoration utilisée.
text-decoration-style spécifie le style à utiliser pour la décoration : solid (solide),
dashed (tirets), dotted (pointillé), double (double) et wavy (ondulé).
Si la valeur de l'une de ses propriétés est absente, la valeur par défaut sera définie
automatiquement. La text-decoration-line est requise.
▪ Syntaxe :
text-decoration: <text-decoration-line> [<text-decoration-color> <text-decoration-style>]

▪ Exemple :
<style>
p { font-size: 25pt; }
#a { text-decoration: underline; }
#b { text-decoration: underline dashed; }
#c { text-decoration: underline dashed red; }
#d { text-decoration: green wavy underline; }
#e { text-decoration: underline overline double blue; }
</style>
<p id="a">HTML5</p>
<p id="b">CSS3</p>
<p id="c">JavaScript</p>
<p id="d">PHP</p>
<p id="e">XML</p>

♦ Les arrière-plans multiples :
▪ Le CSS3 rende possible l’affichage de plusieurs images dans un même arrière-plan en
permettant de cumuler les valeurs au sein des propriétés background-image, background-
position, background-repeat.
▪ Exemple :
Soit les images fleur1.png, fleur2.png, fleur3.png, fleur4.png.

<style>
div { width:300px; height: 200px; border: 1px solid gray;
background: url(fleur1.png) top left no-repeat,
url(fleur2.png) top right no-repeat,
url(fleur3.png) bottom right no-repeat,
url(fleur4.png) bottom left no-repeat; }
</style>
<div ></div>
♦ Colonnes multiples :
▪ CSS3 permet de présenter un contenu en plusieurs colonnes.
▪ Syntaxe :
- column-count : entier qui détermine le nombre de colonnes dans lesquelles sera
affiché le contenu de l’élément ou la valeur auto qui indique que le nombre de
colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de
column-width).
- column-width : valeur qui décrit la largeur optimale de chaque colonne (facultatif).
- column-gap : valeur qui détermine l’espace ou le padding entre les colonnes.
- column-rule : définit une bordure entre les colonnes.
▪ Remarque : La propriété columns est une propriété raccourcie permettant de définir
les deux propriétés column-width et column-count en même temps.
columns = <column-width> et/ou <column-count>
Ex : columns: 3; /* Nombre de colonnes */
columns: 2 25px; /* Nombre de colonnes et largeur */

Exemple :
<style>
text-align: justify;
column-count: 2;
column-gap: 25px;
column-rule: solid 1px silver;
}
</style>

<div> Il est bien admis que la détermination théorique des propriétés …</div>

♦ Les transitions :
▪ Le principe de base d'une transition CSS3 est de permettre une transition douce entre
l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est
déclenché : - soit via une pseudo-classe telles que :hover, :focus, :active, :checked, …
- soit via JavaScript (modification d'une ou plusieurs class)
▪ Les transitions se réalisent principalement à partir de quatre propriétés :
- transition-property : précise les propriétés CSS à animer (ex : width). Ces propriétés sont
précisées en les listant, séparées par des virgules. Le mot clé all (valeur par défaut) désigne
toutes les propriétés animables de l’élément.
- transition-duration : définit la durée de la transition en seconde (s) ou milliseconde (ms).
- transition-timing-function : précise la fonction de transition à utiliser :
ease : lent au début, puis rapide puis ralenti sur la fin (valeur par défaut)
linear : vitesse constante sur toute la durée de l’animation
ease-in : lent au début et accélère de plus en plus vers la fin
ease-out : rapide sur le début et décélère sur la fin
ease-in-out : le départ et la fin sont lents
- transition-delay : précise l'avance ou le retard du départ de la transition. Celui-ci est exprimé
en s (seconde) ou ms (milliseconde).

▪ La propriété CSS transition est une propriété raccourcie pour les 4 propriétés citées
plus haut.
Syntaxe :
transition: <…--property> <...-duration> [<…-timing-function> <…-delay>]
Exemple : transition: width 2s linear;
▪ Remarques :
- La propriété transition-duration doit être fourni, sinon la transition ne se fera pas : 0
seconde par défaut.
- La valeur par défaut de la propriété transition-delay est de 0 ce qui signifie que la
propriété devra débuter sa transition dès que sa valeur change ; les valeurs positives
retardent le début de la transition de la valeur spécifiée. Les valeurs négatives lancent
l'animation immédiatement mais à partir d'un état intermédiaire (comme si
la transition avait déjà commencé).

Exemple 1 :
<style>
a { padding: 8px; color: black; text-decoration: none;
border-bottom: solid 1px black;
transition: border 1s linear;
}
a:hover{ border-bottom: solid 30px blue; } Au survol de chaque lien, la taille
</style> de la bordure augmente via une
transition d'une durée de 1s :
<nav>
<a href="#">Accueil</a>
<a href="#">HTML5</a>
<a href="#">CSS3</a>
<a href="#">Contact</a>
</nav>

Exemple 2 :
<style>
img {
width: 50px;
height: 50px;
transition: width 2s linear, height 2s linear; Au survol de l’image, la largeur
} et la hauteur de cette dernière
img:hover { augmente doucement via une
transition d'une durée de 2s :
width: 100px;
height: 100px;
}
</style>

<img src="fleur.jpg" alt="Fleur" />

Chapitre1 HTML5etCSS3

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre1 HTML5etCSS3

Transféré par

Droits d'auteur :

Formats disponibles

Développement Web

Prof. Hafida ZROURI

Chapitre 1 : HTML5 et CSS3

♦ Le HTML5 reprend les grands principes d’HTML et améliore certains aspects.

09/11/2023 Prof. Hafida ZROURI 3

09/11/2023 Prof. Hafida ZROURI 6

09/11/2023 Prof. Hafida ZROURI 7

09/11/2023 Prof. Hafida ZROURI 8

09/11/2023 Prof. Hafida ZROURI 9

Pied de page Pied de page

Navigation Contenu A part

09/11/2023 Prof. Hafida ZROURI 10

<nav> Contenu <aside>

09/11/2023 Prof. Hafida ZROURI 11

09/11/2023 Prof. Hafida ZROURI 12

09/11/2023 Prof. Hafida ZROURI 13

09/11/2023 Prof. Hafida ZROURI 15

09/11/2023 Prof. Hafida ZROURI 16

09/11/2023 Prof. Hafida ZROURI 17

09/11/2023 Prof. Hafida ZROURI 18

09/11/2023 Prof. Hafida ZROURI 19

▪ Ligne de texte d’url : <input type="url">

09/11/2023 Prof. Hafida ZROURI 21

09/11/2023 Prof. Hafida ZROURI 23

09/11/2023 Prof. Hafida ZROURI 24

▪ Ligne de texte de format date et heure : <input type="datetime-local">

09/11/2023 Prof. Hafida ZROURI 25

09/11/2023 Prof. Hafida ZROURI 26

09/11/2023 Prof. Hafida ZROURI 27

09/11/2023 Prof. Hafida ZROURI 28

09/11/2023 Prof. Hafida ZROURI 29

09/11/2023 Prof. Hafida ZROURI 30

- Exemple 2 : Numéro de téléphone marocain

09/11/2023 Prof. Hafida ZROURI 32

♦ La version 3 de CSS (CSS3) apporte plusieurs nouveautés, comme

09/11/2023 Prof. Hafida ZROURI 33

09/11/2023 Prof. Hafida ZROURI 35

09/11/2023 Prof. Hafida ZROURI 36

09/11/2023 Prof. Hafida ZROURI 37

09/11/2023 Prof. Hafida ZROURI 38

09/11/2023 Prof. Hafida ZROURI 39

09/11/2023 Prof. Hafida ZROURI 41

09/11/2023 Prof. Hafida ZROURI 43

09/11/2023 Prof. Hafida ZROURI 44

09/11/2023 Prof. Hafida ZROURI 45

09/11/2023 Prof. Hafida ZROURI 46

09/11/2023 Prof. Hafida ZROURI 47

visibility Détermine si un élément est visible ou caché (hidden, visible).

09/11/2023 Prof. Hafida ZROURI 48

09/11/2023 Prof. Hafida ZROURI 49

09/11/2023 Prof. Hafida ZROURI 50

▪ Cette propriété peut pendre comme valeur :

▪ Remarque : Il est souvent utile de définir box-sizing à border-box aux éléments.

09/11/2023 Prof. Hafida ZROURI 51

<div class="content-box">Exemple de content-box</div> <br>

09/11/2023 Prof. Hafida ZROURI 52

x=50px y=50px x=100px y=50px x=50px y=100px

▪ Il est possible de spécifier indépendamment un angle pour chaque extrémité.

09/11/2023 Prof. Hafida ZROURI 55

09/11/2023 Prof. Hafida ZROURI 56

09/11/2023 Prof. Hafida ZROURI 57

09/11/2023 Prof. Hafida ZROURI 58

09/11/2023 Prof. Hafida ZROURI 59