LES BASES
DU LANGAGES HTML ET CSS
OBJECTIFS
Comprendre les principes de base et la
structure d’un document HTML
Savoir mettre en forme du texte (gras,
italique, etc...)
Savoir afficher des images
Savoir construire et mettre des objets
(texte, images, etc…) dans un tableau
Savoir créer des liens vers d’autres
documents
SITES DE RÉFÉRENCE
[Link]
[Link]
[Link]
apprenez-a-creer-votre-site-web-avec-html5-et-
css3/1604361-creez-votre-premiere-page-web-en-html
[Link]
[Link]
[Link]
nformatique&c=HTML-CSS
I.
Quelques termes
importants
1.1 Internet
Réseau informatique
mondial physique
accessible au public
Composé des réseaux publics, privés, universitaires,
commerciaux, ...
1.2 www - world wide web
WWW :
• "le web"
• " la toile d'araignée
mondiale"
Ensemble des informations contenues sur les
machines du réseau et la manière de communiquer
entre elles.
Le web est une application du réseau internet parmi
d'autres (mail, messagerie instantanée, partage de
fichiers P2P, streaming vidéo, etc.).
1.3 HTML- HyperText Markup Language
Langage de balisage de " fichiers hypertextes "
(pages web)
Utilisé pour décrire des pages web
Langage de description ≠ langage de programmation !!
1.4 HTML- HyperText Markup Language
On visualise les fichiers HTML avec des navigateurs
web :
1.5 Principe de fonctionnement du Web : Client/Serveur
Un site web classique fonctionne sur un système
Cient-Serveur (voir Wikipaedia: [Link]
Client = Navigateur web
Un lien identifie de façon unique une Programme qui permet
ressource distante sur le réseau web d'interroger un serveur par un
(une application ou page web hébergée
sur un serveur web).
lien ou URL.
Requête
Lorsque qu'un lien ou URL est saisi dans le navigateur ou
lorsque qu'un lien est cliqué à partir d'une page, le
navigateur interroge le réseau par une requête.
requête
Le réseau s'occupe de trouver
le bon serveur qui contient la
ressource demandée.
Réponse
Le serveur interrogé construit une réponse et l'envoie au
client (vers le navigateur de votre ordinateur).
réponse
Flux de données qui contient
une page web.
Réponse
Le message échangé entre le client et le serveur transite sur le
réseau en utilisant un protocole HTTP ou HTTPs ('s' pour
sécurisé).
réponse
Réponse
La page web renvoyée peut être interprété par le navigateur
qui reçoit la réponse.
réponse
Réponse Le navigateur affiche la page
réponse
Contient :
• des balises HTML pour structurer l'information
• du CSS pour la mise en page et le style
• du JavaScript pour exécuter des petits traitements
"coté client" (à l'opposé des traitements exécutés
"coté serveur" lors de la préparation de la page).
II.
Présentation du
HTML
2.1 Pourquoi apprendre le HTML ?
Langage de représentation universel et unique.
Langage de représentation Transparent.
Exemple : [Link]
2.2 Qu’est-ce qu’un document HyperText ?
Les pages HTML sont du texte "enrichi".
Les liens hypertexte permettent de passer d'une page à
une autre.
2.3 Structure d’une page HTML
2.4 Un exemple de page HTML
Page vue par un codeur :
Avec un éditeur de texte
(Notepad++, Vim, Emacs,
Eclipse, etc.)
Page vue par un utilisateur:
Avec un navigateur (Firefox,
Chrome, etc.)
2.3 Un exemple de page HTML
Certains éléments, comme
<html>, <body>, <b> etc...
ne sont pas affiché sur la
page web.
Ces éléments donnent des
indications au navigateur
sur la façon d’afficher le
texte.
III.
Programmer en
HTML
Interface de développement (IDE)
L’écriture d’une page HTML s’effectue dans un Éditeur
Logiciel Libre
lien lien
Logiciels Propriétaires Online
lien
lien
lien
Dreamweaver
Editeur de texte libre générique adapté à de
nombreux langages de programmations. Il
propose notamment :
La coloration syntaxique
Les différentes parties du code (variables, fonctions, balises, etc.)
sont reconnues et colorées par l'éditeur pour rendre la lecture plus
intuitive…
La numérotation des lignes et des colonnes
repérer rapidement les erreurs indiquées par le débogueur
Un système d'autocomplétion
fermer automatiquement les balises HTML
L éditeur essaye de deviner la fin des mots que vous tapez pour
accélérer la saisie
3.1 Le HTML : un langage à balises
Pour composer une page web, on écrit du texte, et on y
insère des balises pour mettre en forme ce texte.
Un document HTML est donc composé de texte et de
balises.
Exemple de contenu de balise:
Les balises sont :
<html>, <head>, <title>,
</title>, </head>, <body>,
<h1>, </h1>, <p>, <b>,
</b>, </p>, </body>,
</html>
Une balise HTML est un élément de texte (un nom) encadré
par le caractère inférieur (<) et le caractère supérieur (>).
Exemple : <h1> (titre 1)
Une balise ouverte doit (presque) toujours être refermée.
Exemple : <h1> « du texte » </h1>
Il existe de nombreuses balises pour mettre en forme et
enrichir le texte.
Exemple : <h1>, <h2>, <i><b><u><img><video> , etc.
Le texte écrit entre la balise ouvrante et la balise fermante
est le contenu de la balise.
Exemple: Mon premier <b>paragraphe</b>,
Le terme « paragraphe » est le contenu de la balise <b>.
Exercice: Trouver le contenu de chaque balises
Contenu de la balise <head> :
<title>Le titre de la page</title>
Contenu de la balise <h1> :
Mon premier titre
Contenu de la balise <body> :
<h1>Mon premier titre</h1>,
<p>Mon premier <b>paragraphe</b></p>
3.2 Structure de base d’un document HTML
L'ensemble d’un document HTML est
contenu entre les balises <html> et </html>.
<html> Informations supplémentaires/facultatives, qui
n’apparaissent pas directement sur la page,
<head>
</head> Affiché dans la barre de titre du navigateur
Encodage des caractères
Nom de la page
<body> code des fonctions (JavaScript)…
</body>
Informations qui apparaissent directement
</html> sur la page
Les principales balises :
Correspond au texte Le contenu de cette balise ne
qui sera affiché comme correspond pas à un titre qui
titre de l’onglet. apparaîtrait directement sur la page.
heading 1 : titres principal ,
à l’intérieur de la page.
Taille de police plus grande
<h2> pour les sous-titres,
<h3> pour les titres de section,
etc...
Définit un paragraphe • <b> (bold) permet de mettre du
texte en gras.
• <i> (pour italic) .
• <em> (pour emphasis)
Référence :
[Link]
3.3 Structuration des pages
Le HTML permet de structurer les pages pour mieux
faire ressortir les titres, les sous-titres, les paragraphes,
les listes, les citations, etc
<h1> Mon titre </h1>
<h2> Un sous-titre </h2>
<p> Mon premier paragraphe est
très important </p>
<p> Le deuxième paragraphe est
plus long et il contient une
liste :
<ul>
<li> point 1</li>
<li> point 2</li>
</ul>
</p>
Code HTML Résultat sur le navigateur
3.4 Mise en forme du texte – Imbriquer les balises
Des balises de mise en forme du texte telles que <i>,
<b>, <u> permettent de mettre une partie du texte en
gras, italique, souligné,...
Exemple:
Une partie en <b> gras </b> et une en <i> italique </i>
Résultat: Une partie en gras et une en italique
Il est possible d’imbriquer les balises de mise en forme
du texte.
Exemple:
Une partie en <u><i> italique </i> et tout est souligné </u>
Résultat: Une partie en italique et tout est souligné
3.5 Attributs d’une balise
Exemple:
Magnifique hôtel
<hr width=’150px’ align=’left’/>
Vue sur le lac
L’attribut align =’left’ permet de placer le
début de la ligne à gauche de la page.
L’attribut width=’150px’ permet de définir la
largeur de la ligne à 150 pixels.
La balise <hr/> permet d’afficher des lignes horizontales
Par défaut, la ligne sera affichée sur toute la largeur de la page.
Caractéristiques d’un attribut
Un attribut a un nom (width) suivi du signe « = » et
d’une valeur (’150px’).
Les attributs d’une balise s’insèrent après le nom de la
balise et avant le chevron de fermeture (>).
Les attributs ne se placent que dans la
balise d’ouverture, jamais dans celle de fermeture.
Quand il y a plusieurs attributs, ils sont placés les uns à
la suite des autres, dans un ordre quelconque et
séparés par des espaces.
La valeur de l’attribut est entourée par des guillemets
(width="150px") ou des apostrophes (width=’150px’).
Référence :
[Link]
3.6 Structuration des fichiers
Il est important de structurer le stockage des fichiers
Le fichier de lancement du site s’intitule [Link]
Il convient de le placer dans un dossier portant le nom de
votre site (par exemple C:\monsite).
Pour lancer le site dans le navigateur, il suffit de double-
cliquer sur le fichier [Link].
3.7 Insertion d’images
Toutes les images associées aux pages du site doivent être
placées dans un dossier nommé par exemple « images ».
Différentes manières d’insérer de l’image dans le texte :
En spécifiant un chemin réduit qui, par défaut, partira du dossier
courant (C:\monsite) :
<img src='images/[Link]' alt='pacman' />
En spécifiant l’adresse internet (URL) de l’image :
<img src='images/[Link]' alt='pacman' />
En spécifiant le chemin complet à partir de la racine (plus sûr !!):
<img src='C:/monsite/images/[Link]' alt='pacman' />
Remarque:
<img src = ‘C:/monsite/images/[Link]' alt='pacman' />
Chemin d’accès du fichier image
Attribut src :
soucre
Balise <img/> :
insérer une image
Référence :
[Link]
3.8 Insertion de vidéos (HTML5)
Lancement de plusieurs vidéos les unes à la suite des autres :
Exercice: trouver les différentes balises, leur contenu et les attributs correspondants
Référence :
[Link]
3.9 Insertion de liens : sans liens, pas de web !!
La balise <a>, avec son attribut href permet de créer un
hyperlien vers une autre page (locale ou internet).
Exemple 1:
<a href="[Link] </a>
Valeur de l’attribut href : chemin
d’accès à la page /site internet
Attribut href Contenu de la balise <a></a> :
Texte ou image
Balise <a> Balise <a>
ouvrante fermante
Exemple 2:
[Link] :
... visitez <a href='[Link]'> notre site sur les canidés</a> …
... <a href='[Link] [Link] </a>
[Link] : texte
... préférer les <a href= '[Link] '>
<img src='images/tete_chat.png' /> image
</a> ...
Référence :
[Link]
3.10 Balises sans contenus
La plus part des balises ont un contenu :
Ex : <b>belle</b>
D’autres balises n’ont pas de contenu :
Ex : <hr/>, ou encore <img src=’...’/>).
Plutôt que d’écrire la balise ouvrante et la balise fermante
<hr></hr>
on fusionne ces deux balises : <hr/>
On n’écrit qu’une seule balise dans laquelle le slash se
situe à la fin de la balise :
<hr/> <img src=’...’/>
3.11 Balises <span>
La balise <span> n’a aucun effet :
Un peu de texte Un <span> peu de </span> texte
Utile pour délimiter une portion du texte entre <span> et <\span>
Mettre en forme la Modifier la portion de
portion de texte texte
(CSS) (JavaScript)
3.12. !DOCTYPE HTML
La structure globale d’un document HTML :
<!-- Marque le début du document HTML -->
<!-- Marque le début de la zone d'en-tête -->
<!-- Titre du document -->
<!-- Marque la fin de la zone d'en-tête -->
<!-- Marque le début du corps de la page -->
<!-- Marque la fin du corps de la page -->
<!-- Marque la fin du document HTML -->
<!DOCTYPE html>
<! DOCTYPE> : 1ère déclaration écrite dans un
document HTML, avant la balise <html>
<! DOCTYPE> n’est pas une balise <html>
Instruction qui permet au navigateur web de connaître la
version de HTML dans laquelle est écrite la page.
Fait référence à une DTD (Document Type Definition) –
Définition de la structure d’un document.
Spécifie les règles du HTML, de sorte que les navigateurs
affichent correctement le contenu
Voir : [Link]
[Link]
Le HTML5 ne repose pas sur le SGML (Standard
Generalized Markup Language). Il ne nécessite pas de
référence à une DTD
On valide le HTML5 avec un shéma XSD (XML Shema
Definition)
Voir : [Link]
Toujours ajouter la déclaration
<!DOCTYPE html> à un document HTML
3.13 Un document html est hiérarchique
Fils de html : head et body
Fils de body: h1et p Fils de head: title
Fils de p: b
Bilan: liste de toutes les balises HTML
[Link]
IV.
La CSS
Cascading Style Sheets
habille le HTML
4.1 A quoi sert la CSS
Les CSS (Cascading Style Sheets - feuilles de style en cascade,
forment un langage informatique qui décrit la présentation des
documents HTML.
Idée principale : Séparer le fond de la forme
Mettre en forme le texte (police, taille du texte, style, couleur ...)
Positionner, mettre en page des différents éléments de la page
4.2 La syntaxe de la CSS
Code HTML
<h1> Mon titre 1 </h1>
<p> texte texte texte ... </p>
<h1> Mon titre 2 </h1>
<p> texte texte texte ...</p>
Code CSS
h1{
background-color : #2A17B7;
color : white;
font-size : 20px;
font-family : darkmoon;
}
Ecriture générale:
La syntaxe de base de CSS est composée de 3 parties :
• un sélecteur
• une propriété sélecteur { propriété : valeur }
• une valeur
Exemple: h1 { font-size : 20px },
sélecteur propriété valeur
Tous les titres principaux du document auront une taille de
20 pixels
[Link]
Propriétés:
Si la valeur d’un attribut contient un espace, alors la
valeur de l’attribut s’écrit en guillemets :
h2 { font-family : "sans serif" }
Il est possible de définir plusieurs attributs pour un
même sélecteur. Chaque propriété sera séparée par
un point-virgule :
p {font-family:"sans serif"; font-size: 90%; color: blue}
En écrivant une propriété par ligne,
la lisibilité est meilleure :
P
{
font-family:"sans serif";
font-size: 90%;
color: blue
}
4.3 Mise en forme du texte
[Link]
Les différentes propriétés du texte sont les suivantes:
color : black, red, green, #A254FC…
text-align : center, left, right, justify
text-decoration : none, underline, overline, line-through
text-transform : uppercase, lowercase, capitalize
text-indent : nb px (positif ou négatif)
letter-spacing : nb px (positif ou négatif)
line-height : en px (pixels), em (taille police), %
direction : rtl (right to left), ltr (left to right)
word-spacing : en px (pixels), em (taille police), %
text-shadow : 3 paramètres
4.4 Gestion de la font
[Link]
Les différentes propriétés de la font sont les suivantes:
font-family : "Times New Roman", Times, serif …
font-style : normal, italic, oblique
font-size : en px (pixels), em (taille police), %
font-weight : normal, bold
font-size : vw (viewport width) – Responsive font size
font-variant : normal, small-caps
4.5 Grouper les sélecteurs
Si certaines propriétés s’appliquent à plusieurs
sélecteurs, il est possible de les grouper :
h1{
color : blue;
font-family : "sans serif"; h1,h2{
} color : blue;
font-family : "sans serif";
h2{ }
color : blue;
font-family : "sans serif";
}
4.6 Les différentes manières de placer le code CSS
[Link]
Dans les balises HTML avec l'attribut style : une
méthode lourde à éviter !!
<h1
style = "background-color : #2A17B7;
color : white;font-size : 20px;
font-family : darkmoon;">
Mon titre 1
</h1>
<p> texte texte texte ...</p>
<h1> Mon titre 2 </h1>
<p> texte textetexte ...</p>
Dans ce cas, seule la première balise est concernée.
Dans le « HEAD » en précisant les balises concernées:
une méthode à éviter aussi !!
<html>
<head>
<style>
h1{
background-color : #2A17B7;
color : white;
font-size : 3em;
font-family : darkmoon;
}
</style>
</head>
<body>
<h1> Mon titre 1 </h1>
<p> texte texte texte ... </p>
<h1> Mon titre 2 </h1>
<p> texte texte texte ... </p>
</body>
</html>
Dans ce cas, toutes les balises <h1> du document sont concernées.
Dans un fichier (par exemple : [Link]) séparé :
LA méthode à utiliser autant que possible !!
<html>
<head>
<linkrel="stylesheet”
ref="[Link]">
</head>
<body>
<h1> Mon titre 1 </h1>
<p> texte texte texte ... </p>
<h1> Mon titre 2 </h1>
<p> texte texte texte ... </p>
</body>
</html>
body{
background : white;
}
h1{
background-color : #2A17B7;
color : white;
Code CSS à enregistrer dans le
font-size : 3em;
font-family : darkmoon; fichier [Link] dans le
} dossier courant…
4.7 Les différentes types d’éléments en HTML
Les éléments de type «block »
Commence toujours sur une nouvelle ligne et prend
toute la largeur disponible dans la page
Exemple : p, div, h1, h2, ol, ul, form
peut contenir d’autres éléments de type block ainsi que
des éléments de type inline.
Les éléments de type «inline »
S’insère toujours dans la ligne où elle est placée.
Exemple : a, strong, img, span
Prennent uniquement la largeur qui leur est nécessaire
(c’est-à-dire la largeur de leur contenu).
4.8 Formater un ensemble d’éléments avec l’attribut « class »
Attribut « class » : permet de formater
plusieurs éléments de même type avec la
même mise en forme.
Exemple : sur un site de mathématique,
une mise en forme différente pour les
définitions et les théorèmes
Référence:
[Link]
HTML
<p class='definition'>
La cocotte minute est un oiseau
rapide.
</p>
<p class='theorem'>
Le carré de l'hypothénuse est
égal à quelque chose...
</p>
<p class='theorem'>
Si le A est faux, et B est
vrai,alors A ou B est vrai.
</p>
CSS
[Link]{
background-color : #EE4444;
font-style : italic;
border-style : dashed;
border-width : 1px;
margin-left : 10px;
}
[Link]{
background-color : #4444EE;
font-weight : bold;
padding : 10px;
}
4.9 Formater un élément précis avec l’attribut « id »
Attribut « id » : permet de formater un
élément précis avec une mise singulière .
Exemple : sur le site de mathématique
précédent, vous souhaitez qu’un des deux
théorèmes soit mis en valeur par un
encadrement rouge.
Référence:
[Link]
HTML
<p class='definition'>
La cocotte minute est un oiseau rapide.
</p>
<p class='theorem'>
Le carré de l'hypothénuse est égal à
quelque chose...
</p>
<p id='th_logique_1' class='theorem'>
Si le A est faux, et B est vrai,alors A
ou B est vrai.
</p>
CSS
[Link]{
background-color : #EE4444;
font-style : italic;
border-style : dashed;
border-width : 1px;
margin-left : 10px;
}
p#th_logique_1{
border-style : solid;
border-width : 4px;
border-color : red;
}
4.10 Balise div, marges et espacement
Une balise <div>, qui signifie « division du
document », est un conteneur dans lequel des
éléments sont placés pour les maintenir ensemble.
Permet de:
Appliquer un même style à un groupe d’éléments
Placer différents éléments ensembles sur une page en
utilisant les attributs class ou id.
Références:
[Link]
[Link]
Modèle de boite
Tous les éléments HTML peuvent être considérés
comme des boîtes.
Content- Le contenu de la boîte, où le texte et les images apparaissent
Padding- Efface une zone autour du contenu. Le Padding est transparent
Border- Bord autour du Padding et du Content
Margin- Efface une zone en dehors du Border. La Margin est transparente
[Link]
Exemple:
Pour ajouter de
l’espacement, on utilise
la propriété padding.
Pour ajouter une marge,
on utilise la propriété
margin.
Largeur totale : additionner la
largeur de l’aire de contenu à celles
des marges de gauche et de droite
plus celle de la bordure qu’il faudra
compter deux fois puisqu’il y en a
une à gauche et une autre à droite
Exemple:
Références :
[Link]
[Link]
[Link]
4.11 Hiérarchie dans les balises : parents et enfants
Notion d’enfant et de descendances
Enfants de
<div>
h1, p ,h2 ,p sont enfants de <div>
Notion d’enfant et de descendance
Enfants de
<p>
a, strong et em sont enfants du p dans lequel ils sont contenus
(mais pas de l’autre <p>)
Notion de parent et d’ancêtre
Parent de
<h1> <p> <h2> <p>
<div> est parent de <h1> <p> <h2> <p>
Notion de parent et d’ancêtre
Parent de
<a> <strong> <em>
<p> est parent de <a> <strong> et <em>
Notion de parent et d’ancêtre
Ancêtre de
<a> <strong> <em>
<div> est ancêtre de <a> <strong> et <em> (et de h1, p, h2, p)
Sélecteur de hiérarchie
Sélectionner <a>
descendant de <p>
Pour sélectionner <a> descendant de <p> : p a {…….}
Noter l’espace entre p et a
4.12 Le flux : placement des éléments sur une page
Le navigateur utilise le flux pour effectuer la mise
en pages des éléments HTML
Affichage des éléments (blocs) dans l’ordre de
lecture: Placement des éléments
<h1> Mon titre 1 </h1>
<p> texte texte texte ... </p>
<h1> Mon titre 2 </h1>
<p> texte texte texte ...</p>
Sens de De haut en
lecture bas de
l’écran
De gauche
à droite de
l’écran
Les éléments « in-ligne » se placent les uns à côté
des autres depuis le coin en haut à gauche jusqu’à
celui en bas à droite.
(10px) (20px)
(30px)
Référence:
[Link]
Eléments placés verticalement
4.13 Eléments flottants dans la page
Il est possible d’insérer des blocs flottants pour lesquels
l'ordre d'empilement est légèrement différent de celui du flux
normal.
Ordre de positionnement des blocs
1. L'arrière-plan et les bordures de l'élément racine du document ;
2. Les blocs qui descendent les uns à la suite des autres et qui sont situés dans
le flux normal, dans l'ordre dans lequel ils apparaissent dans le code
HTML ;
3. Les blocs flottants ;
4. Les éléments enfants positionnés, dans leur ordre d'apparition dans le code
HTML ;
Procédure: #id_flot
1. Donner un identifiant unique (id="id_flot") à {
l’élément que vous voulez faire flotter
2. Donner une largeur à cet élément, par exemple width: 200px;
200px
3. Ajouter la propriété float.
float: right;
}
4.14 Les pseudo-classes
Permettent d'affecter un style à des éléments qui ne peuvent
pas être représentés par un sélecteur habituel :
Mettre en forme un élément lorsque la WWW
sourie pointe dessus
Mettre en forme différemment les liens
visités et non-visités
Mettre en forme un élément (zone de
texte) lorsqu’il est sélectionné
[Link]
_classes.asp
Balises <a>
:active : lien actuellement sélectionné
:link: lien encore non visité
:visited: lien déjà visité
:hover: lien survolé par la sourie
Utilisation:
a:link { propriété 1; propriété 2;…}
a:visited { propriété 1; propriété 2;…}
Balises <p>
:first-letter : Apparence de la première lettre
d'un paragraphe (lettrine)
:first-line : Apparence de la première ligne
d’un paragraphe
Utilisation:
p : first-line { propriété 1; propriété 2;…}
p.classe1 : first-letter { propriété 1;
propriété 2;…}
Sur toutes les balises
:hover : peut être appliqué sur toutes les balises.
Permet de créer un effet de survol lorsque la sourie
passe sur l’élément
Exemple:
Effet de survol sur une image :
[Link]
Sur un paragraphe:
[Link]
e=trycss_pseudo-class_hover_div
[Link]
css_pseudo-class_hover_tooltip
Liens, boutons ou inputs
:focus: mettre en évidence l’élément lorsqu’on
clique dessus
Exemple:
Effet sur un bouton
[Link]
V.
Quelques applications
de la CSS
5.1 Barre de navigation
[Link]
5.2 Menu déroulant
[Link]
5.3 CSS Attribute Selector [Link]
Permettent d'affecter un style à des éléments qui ont un
attribut ou valeur d’attribut particulier :
selector [attribute]: sélection d’un élément avec un attribut spécifique.
Ex: a[target] { background-color: yellow;}
selector [attribute = "value"]: sélection d’un élément avec un attribut
spécifique. (ici "value" = _blank)
Ex: a[target = blank] { background-color: yellow;}
selector [attribute ~= "value"]: sélection d’un élément avec un attribut
qui contient un mot particulier.
Ex: [title ~= flower] {border: 5px solid yellow;}
selector [attribute |= "value"]: sélection d’un élément avec un attribut
dont le nom commence par une valeur particulière.
Ex: [class |= "top"] {background: yellow;}
« value » doit représenter un mot entier
Permettent d'affecter un style à des éléments qui ont un
attribut ou valeur d’attribut particulier :
selector [attribute ^= "value"]: sélection d’un élément avec un attribut
dont le nom commence par une valeur particulière.
Ex: [class ^= "top"] {background: yellow;}
« value » peut représenter une partie du mot
selector [attribute $= "value"]: sélection d’un élément dont l’attribut se
termine par une valeur particulière.
Ex: [class $= "test"]{background: yellow;}
selector [attribute *= "value"]: sélection d’un élément dont l’attribut se
contient une valeur particulière.
Ex: [class*="te"]{background: yellow;}
Application : Le sélecteur d’attribut est utile pour mettre en
forme des formulaires (forms) (cases à remplir avec
boutons) sans utiliser l’attribut « class » ou « id ».
Ex: [Link]
5.4 Mise en forme des formulaires (forms)
Les formulaires sont constitués de champs à remplir ainsi
que de boutons qui meuvent être mis en forme de façon
élégante
[Link]
[Link]
5.5 Responsive Design
Les Web responsive Design permet de mettre en forme de
façon convenable une page Web quel que soit le support ou
la taille de l’écran :
[Link]
5.6 Transitions
Les transitions en CSS permettent un changement doux et
en continu sur une certaine durée.
Les propriétés sont les suivantes:
transition:
transition-delay:
transition-duration:
transition-property:
transition-timing-function:
[Link]
Comment utiliser les Transitions ?
Pour utiliser une Transition, il faut spécifier :
La propriété CSS à laquelle vous souhaitez ajouter un effet
La durée de l’effet
Remarque :
Si la partie durée n'est pas spécifiée, la transition n'aura aucun
effet, car la valeur par défaut est 0.
Exemple: [Link]
div {
width: 100px; L'effet de transition
démarre lorsque la div:hover {
height: 100px;
propriété CSS width: 300px;
background: red; spécifiée (largeur)
transition: width 2s; }
change de valeur.
}
Modifier plusieurs valeurs de propriété de Transition
Exemple: [Link]
On ajoute un effet de transition pour la propriété width et height, avec une durée de 2
secondes pour la largeur et 4 secondes pour la hauteur.
div {
width: 100px; div:hover {
height: 100px; width: 300px;
background: red; }
transition: width 2s, height 4s;
}
Spécifier la dynamique de la transition
La propriété transition-timing-function spécifie la dynamique de
l'effet de transition.
transition-timing-function peut prendre les valeurs
suivantes :
ease - spécifie un effet de transition avec un démarrage lent, puis rapide, puis se
termine lentement (valeur par défaut)
linear - spécifie un effet de transition avec la même vitesse du début à la fin
ease-in - spécifie un effet de transition avec un démarrage lent
ease-out - spécifie un effet de transition avec fin lente
ease-in-out - spécifie un effet de transition avec un un début et une fin lents
cubic-bezier(n,n,n,n) - permet de définir vos propres valeurs dans une fonction
cubic-bezier
Exemple: [Link]
5.7 Animations
Les animations en CSS permettent d’animer les éléments
d’une page HTML sans programmation (JS, Flash).
Les propriétés sont les suivantes:
@keyframes :
animation-name :
animation-duration :
animation-delay :
[Link]
animation-iteration-count :
css/css3_animations.asp
animation-direction :
animation-timing-function :
animation-fill-mode :
animation :