Institut Supérieur Des études Technologiques De Kairouan
Support de Cours
Programmation Web 1
Mr Allani Abderrahim
Année Universitaire 2022-2023 1
PLAN
Chapitre I : Notions de base- Comment fonctionne le Web ?
Chapitre II : Le Langage HTML
Chapitre III : Les feuilles de style en cascade CSS
Chapitre IV : Le Langage JavaScript
21
Objectif
L’objectif de ce cours est de se familiariser avec
certaines notions, technologies et langages de
création de sites Web :
32
Chapitre III : Les feuilles de style en cascade CSS
Cascading Style Sheets
4 3
Les feuilles de style en cascade CSS
Cascading Style Sheets
Objectifs
Connaître l’utilité des feuilles de style en cascade CSS3
Utiliser des feuilles de style externes
Utiliser les sélecteurs CSS
5 4
Les feuilles de style CSS- Cascading Style Sheets
1. Présentation des CSS
2. Les versions de CSS
3. Où placer le code CSS?
4. Un style pour une balise
5. Appliquer un style CSS: class et id
6. Un style CSS spécifique à une balise
7. Balises <div> </div> et <span> </span>
8. Sélecteurs css avancés
9. Pseudo-éléments
10. Styles de présentation des caractères
11. Arrière plan
12. Bordures
13. Position et dimensions
14. Positionnement flottant
15. Positionnement avec display
16. Liste UL avec images
17. Google Fonts
18. Responsive web design
6 5
Présentation des CSS
Page d'accueil sur les feuilles de style CSS sur consortium W3:
[Link]
”Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts,
colors, spacing) to Web documents.” (Octobre 2015)
Les feuilles de style permettent de :
Dissocier le contenu de la page de sa présentation graphique
Contrôler plus précisément qu'en HTML la présentation de la page
Taille et police de caractères, couleur, bordure, fond, position, …
Les propriétés CSS sont héritées en cascade : si vous donnez un style à un élément,
tous les sous-éléments héritent le même style.
Exactement comme pour HTML, les feuilles de style CSS sont également
normalisées par le consortium W3. Il s'agit donc d'un standard librement
utilisable, clairement documenté et indépendant de toute firme.
Validation du code CSS
[Link] 7 6
Présentation des CSS
Validation du code CSS- Octobre 2015 8 7
[Link]
Le même contenu HTML avec différentes présentations avec
Présentation des CSS différentes feuilles de style CSS- Octobre 2023
[Link]
AVEC CSS
SANS CSS
8
Les versions de CSS
CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases
de ce langage qui permet de présenter sa page web, comme les couleurs, les
marges, les polices de caractères, etc.
CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de
CSS rajoute de nombreuses options. On peut désormais utiliser des techniques
de positionnement très précises, qui nous permettent d'afficher des éléments où
on le souhaite sur la page.
CSS 3 : c'est la dernière version, qui apporte des fonctionnalités
particulièrement attendues comme les bordures arrondies, les dégradés,
les ombres, etc.
Pour voir si les fonctionnalités CSS sont disponibles sur certains navigateurs, il
faudra consulter [Link] et
[Link] css3/
CSS3- Les nouveautés
[Link] 10 9
Présentation des CSS
Un fichier CSS commun à tous les documents HTML5
Une mise à jour du site plus facile avec un résultat uniforme
Code CSS:
selector {
property: value;
property: value;
property: value;
….
} 10
Où placer le code CSS?
Faire un lien vers une feuille de style externe (fichier texte avec l'extension .css):
Recommandation
<head>
<title>titre de la page</title>
<link rel="stylesheet" href="../../CSS/[Link]" />
</head>
NB: Vous pouvez référencer plusieurs fichiers CSS dans une page HTML.
Définir le style dans l'en-tête de la page dans la balise <style></style> (non
recommandé) :
<head>
<style>
h1, h2, h3
{
color: red;
}
</style>
</head>
Utiliser l'attribut style: (non recommandé)
<div style="font-size: 12px; color: green;">texte</div> 14
La déclaration de style CSS3
Une règle CSS est caractérisée par deux principaux éléments
• Un sélecteur, utilisé pour cibler les éléments HTML à mettre en forme dans nos pages
web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine
dans la façon de cibler les éléments. ;
• Une déclaration de style, définie entre accolades, permettant de préciser le style à
appliquer aux balises sélectionnées.
La déclaration est elle-même constituée :
d'une ou plusieurs propriété(s), suivie du caractère « : » (double point),
d'une ou plusieurs valeur(s) associée(s) à chaque propriété, entourée de guillemets s'il
s'agit de plusieurs mots ou séparés par des virgules s'il y en a plusieurs, suivie d'un point
virgule.
11
La déclaration de style CSS3
1412
La déclaration de style CSS3
• La valeur identifie la nature de l’effet de style souhaité.
• La valeur s’exprime par un mot-clé, un pourcentage, une grandeur en fonction de
la propriété à laquelle elle est assignée.
• Une déclaration de style se termine toujours par un point-virgule.
• Il est possible de définir plusieurs déclarations de style pour un sélecteur.
Exemple:
sélecteur { propriété1 : valeur ; propriété2 : valeur ;}
1513
Un style pour une balise…
Pour appliquer le style à toutes les balises automatiquement, il faudra
redéfinir la présentation par défaut de la balise (style générique).
Pour redéfinir les attributs de présentation d'une balise HTML, on indique :
La balise concernée
Puis entre accolades : les attributs CSS séparés par un point virgule
Dans le fichier HTML:
<p>Mon premier paragraphe</p>
Dans le fichier CSS:
<p>Mon second paragraphe</p>
p <p>Mon troisième paragraphe</p>
<p>Mon quatrième paragraphe</p>
{ Résultat:
color:green;
}
1615
Appliquer un style CSS: class et id
Pour ne pas appliquer le style à toutes les balises automatiquement, on peut utiliser
les attributs HTML
l'attribut class (Chaque élément a le droit à une seul attribut class sinon l’erreur
Duplicate attribute class sera signalée par le validateur)
l'attribut id (un seul id unique est autorisé dans une page, sinon l’erreur Duplicate ID sera
signalée par le validateur).
Dans le fichier CSS: Dans le fichier HTML:
.parableu
<p id="parared">Mon premier paragraphe</p>
<p class="parableu">Mon second paragraphe</p>
<p>Mon troisième paragraphe</p>
{ <p class="parableu">Mon quatrième
color:blue; paragraphe</p>
} Résultat:
#parared
{
color:red;
} 16
Un style CSS spécifique à une balise
Le style ne sera appliqué qu’à la balise avec laquelle il a
été mis en place.
Dans le fichier CSS: Dans le fichier HTML:
.bleu <h1 class="bleu">Titre1</h1>
{ <p class="bleu">Mon premier paragraphe</p>
<hr />
color:blue; <h1 class="vert">Titre1</h1>
} <p class="vert">Mon second paragraphe</p>
Résultat:
[Link]
{
color:green;
}
17
Balises <div> </div> et <span> </span>
Dans le fichier CSS: Dans le fichier HTML:
<div class="marron">Mon texte</div>
.marron { <div class="vertgras">Mon texte</div>
color: brown; <p>Texte normal<span class="vertgras">texte vert et
gras</span>Texte normal</p>
} <p class="marron">Texte marron<span class="vertgras">texte
vert et gras</span>Texte marron</p>
<p class="vertgras">texte vert et gras <span
.vertgras{ class="marron">texte gras et marron </span>texte vert et
gras</p>
font-weight:
Résultat:
bold;
font-size:
20px;
color: green;
}
NB: Un enfant hériter des styles CSS d'un parent. 18
Utiliser plusieurs classes CSS
Dans le fichier CSS:
.vert{
color:green;
}
.bordure{
border: 1px solid green;
}
Dans le fichier HTML:
<p class="bordure vert">Bonjour</p>
Résultat: 2019
Sélecteurs css avancés
* : sélecteur universel, cible toutes les balises
*{
color:yellow;
}
A, B: cible les balises A et B (code CSS en facteur)
Exp: h1, h2 {color: red;}
A B : une balise contenue dans une autre, Exp: h2 em:
tous les em dans h2 Dans le fichier HTML:
Dans le fichier CSS: <h2>Cours <em>HTML5</em></h2>
h2 em /*em dans H2 */
{
<p>Cours <em>HTML5</em></p>
color: grey;
} Résultat:
20
Sélecteurs css avancés
A + B : une balise qui en suit une autre, Exp: h3+p: une
balise p qui suivent h3.
Dans le fichier CSS: Dans le fichier HTML:
h3+p <h3>le Titre </h3>
{ <p>Mon premier paragraphe</p>
color: #00CCFF <p>Mon second paragraphe</p>
} Résultat:
Balise[attribut] : une balise qui possède un attribut
Dans le fichier CSS: Dans le fichier HTML:
a[title] <a href="#" title="Hello">Lien avec titre </a>
{ Résultat:
color:rgb(255,34,145);
}
Pour plus d’infos: [Link] 2221
[Link]#selectors
Sélecteurs css avancés
Balise[attribut="value"]: une balise qui possède un attribut="value"
Exemple: Agrandir le texte dans un input de type text
Dans le fichier CSS:
input[type="text"] {
font-size:40px;
width:250px;
}
Dans le fichier HTML:
<label for="champ4">Votre nom</label>
<input type="text" id="champ4" required>
Résultat:
2322
Pseudo-classes
Une pseudo-classe est utilisée pour définir un état spécial d’un
élément. selector:pseudo-class {
property:value;
/* unvisited link */
} a:link { color: #FF0000;}
/* visited link */
Par exemple, les différents états d’un a:visited { color: #00FF00;}
/* mouse over link */
lien (doivent figurer dans cet ordre) a:hover { color: #FF00FF;}
/* selected link */
a:active { color: #0000FF;}
Ou encore le premier paragraphe dans une liste de
paragraphes, par exemple: p:first-child.
Pour plus de détails, consulter:
[Link]
[Link]
2423
Pseudo-classes
Exemple1 : Créer un style général de liens hypertexte permettant de souligner le lien quand
nous positionnons la souris sur ce lien. Le lien est de couleur vert foncé puis vert clair.
a:link {color: #006600;text-decoration: none;}
a:hover {color: #339900;text-decoration: underline;}
Exemple2 : Créer un style de liens hypertexte visités gris, souligné avec ligne en haut
et bleu pour les liens actifs.
a:visited {color: grey;}
a:active {color: blue;text-decoration: underline overline;}
24
Pseudo-classes
Valider la saisie dans un champ de formulaire.
Lors de l’envoi du contenu du formulaire
Solution: Validation lors de la saisie, avec un
encadrement en couleur (avec :valid et :invalid)
:valid {
box-shadow: 0 0 2px 1px green;
}
2625
Pseudo-éléments
Les pseudo-éléments sont utilisés pour donner un style à des
parties spéciales d’un élément.
Un pseudo-élément est un mot-clé ajouté à un sélecteur qui
permet de mettre en forme certaines parties de l'élément ciblé
par la règle.
Exemple : le premier caractère ::first-letter ou la première ligne
::first-line ou encore insérer un contenu avant ::before ou après
::after le contenu d’un élément. Cela peut concerner aussi la
sélection avec ::selection
selector::pseudo-element {
property:value;
}
26
Pseudo-éléments
Exemple : insérer une image avant un heading de niveau 1
h1::before {
content: url("images/[Link]");
}
<h1>Mon premier titre h1</h1>
Pour plus de détails, consulter:
[Link]
27
CSS Fonts
The CSS font properties define the font family, boldness, size, and
the style of a text.
Difference Between Serif and Sans-serif Fonts
CSS Font Families
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
Generic family Font family Description
Serif Times New Roman Serif fonts have small lines at the ends on some
Georgia characters
Sans-serif Arial "Sans" means without - these fonts do not have
Verdana the lines at the ends of characters
Monospace Courier New All monospace characters have the same width
Lucida Console
2928
Source : [Link]
Styles de présentation des caractères
Police-font-family : nom de police spécifique, comme Garamond ou Arial, ou une
famille plus large qui inclut différentes polices, par exemple « serif ».
{ font-family: Arial, Helvetica, sans-serif;}
{ font-family: "Times New Roman", Times, serif; }
generic-family : "serif", "sans-serif", "cursive", "fantasy", "monospace".
Taille- font-size : xx-small, x-small, small, medium, large, x-large, xx-large, larger,
smaller ou taille en pixels (px), points (pt), em, pourcentage (%)
{font-size: 12px ;}
[Link]
The em size unit is recommended by the W3C.1em is equal to the current font size.
The default text size in browsers is 16px. So, the default size of 1em is 16px.
[Link]
Style- font-style : normal, italic, oblique
{font-style: italic ;}
Gras- font-weight : normal, bold, bolder, lighter ou valeur de 100 à 900
{font-weight : bolder ;}
[Link]
3029
Noms des couleurs HTML
Couleur- color : nom ou valeur hexadécimale ou rgb(R,G,B) de la couleur
{color: green ;}
3130
Couleurs en hexadécimal : PALETTE WEB-SAFE
FFFFFF CCCCCC 999999 666666 333333 000000 FFCC00 FF9900 FF6600 FF3300
99CC00 CC9900 FFCC33 FFCC66 FF9966 FF6633 CC3300 CC0033
CCFF00 CCFF33 333300 666600 999900 CCCC00 FFFF00 CC9933 CC6633 330000 660000 990000 CC0000 FF0000 FF3366 FF0033
99FF00 CCFF66 99CC33 666633 999933 CCCC33 FFFF33 996600 993300 663333 993333 CC3333 FF3333 CC3366 FF6699 FF0066
66FF00 99FF66 66CC33 669900 999966 CCCC66 FFFF66 996633 663300 996666 CC6666 FF6666 990033 CC3399 FF66CC FF0099
33FF00 66FF33 339900 66CC00 99FF33 CCCC99 FFFF99 CC9966 CC6600 CC9999 FF9999 FF3399 CC0066 990066 FF33CC FF00CC
00CC00 33CC00 336600 669933 99CC66 CCFF99 FFFFCC FFCC99 FF9933 FFCCCC FF99CC CC6699 993366 660033 CC0099 330033
33CC33 66CC66 00FF00 33FF33 66FF66 99FF99 CCFFCC CC99CC 996699 993399 990099 663366 660066
006600 336633 009900 339933 669966 99CC99 FFCCFF FF99FF FF66FF FF33FF FF00FF CC66CC CC33CC
003300 00CC33 006633 339966 66CC99 99FFCC CCFFFF 3399FF 99CCFF CCCCFF CC99FF 9966CC 663399 330066 9900CC CC00CC
00FF33 33FF66 009933 00CC66 33FF99 99FFFF 99CCCC 0066CC 6699CC 9999FF 9999CC 9933FF 6600CC 660099 CC33FF CC00FF
00FF66 66FF99 33CC66 009966 66FFFF 66CCCC 669999 003366 336699 6666FF 6666CC 666699 330099 9933CC CC66FF 9900FF
00FF99 66FFCC 33CC99 33FFFF 33CCCC 339999 336666 006699 003399 3333FF 3333CC 333399 333366 6633CC 9966FF 6600FF
00FFCC 33FFCC 00FFFF 00CCCC 009999 006666 003333 3399CC 3366CC 0000FF 0000CC 000099 000066 000033 6633FF 3300FF
00CC99 0099CC 33CCFF 66CCFF 6699FF 3366FF 0033CC 3300CC
00CCFF 0099FF 0066FF 0033FF
A consulter: [Link]
[Link] 31
Couleurs en rgb
Rgb est l'abréviation de "red, green, blue" soit en français "rouge, vert, bleu.
3332
rgb accepte 3 valeurs entières comprises entre 0 et 255.
Styles de présentation des caractères
Casse- text-transform: capitalize, uppercase, lowercase
{text-transform: uppercase; }
Soulignement- text-decoration: underline, overline, line-through, none;
Transparence:
opacity: 0-1
{background-color: black; color: white; opacity: 0.1;}
NB: 0 étant totalement transparent et 1 totalement opaque.
[Link]
Rgba:
{background-color: rgba(255,0,0,0.5); }
NB: rgba est l'abréviation de "red, green, blue, alpha" soit en français "rouge, vert,
bleu, transparence". rgba accepte 3 valeurs entières comprises entre 0 et 255 et
une valeur entre 0 (transparent) et 1 (opaque).
33
Arrière plan
Couleur d'arrière-plan- background-color : couleur
{background-color : #333333}
Image d’arrière-plan- background-image : URL du fichier
{background-image : url(“images/[Link]”);}
Image fixe ou défilante- background-attachment : fixed, scroll
{background-attachment:fixed;}
Répétition de l’arrière-plan- background-repeat : repeat , no-repeat, repeat-x,
repeat-y {background-repeat : no-repeat}
Position de l’arrière-plan- background-position : center, left, right et top, bottom,
center (2 valeurs: position horizontale et position verticale)
{background-position : center top}
Background peut combiner plusieurs propriétés : background-image, background-
repeat, background-attachment et background-position.
background: url("[Link]") fixed no-repeat top right;
Plusieurs images de fond: CSS3-
background: url("../images/[Link]") no-repeat top right fixed,
url("../images/[Link]"); 3534
Arrière plan (exemple à tester)
body{
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Source :
[Link]
3635
Les propriétés des listes
List-style-type : Sortes de marqueurs
Cette propriété permet de déterminer l’apparence de la puce ou le style de numérotation
de la liste.
List-style-type : disc, circle, square, decimal, decimal-leading-zero, upper-roman,
lower-roman, upper-alpha, lower-alpha, etc.
disc; Cercle plein.
circle; Cercle vide.
square; Carré.
decimal; Soit 1, 2, 3, etc.
decimal-leading-zero; Soit 01, 02, 03, etc.
upper-roman; Soit I, II, III, etc.
lower-roman; Soit i, ii, iii, etc.
upper-alpha; Soit A, B, C, etc.
lower-alpha; Soit a, b, c, etc. 3736
Liste UL avec images
La propriété CSS list-style-image permet de mettre une
image à la place de la puce.
{ list-style-image: URL(« ../images/[Link] »); } (ou none)
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Liens intéressants</a></li>
<li><a href="#">Contact</a></li>
</ul>
ul
{
list-style-image: url("../images/[Link]");
}
3837
Bordures border-style, border-width, border-color
border-top, border-bottom, border-left, border-right
border
Le style de bordure :
none : pas de bordure (par défaut) ;
solid : un trait simple ;
dotted : pointillés ;
dashed : tirets ;
double : bordure double ;
groove : en relief ;
ridge : autre effet relief ;
inset : effet 3D global enfoncé ;
outset : effet 3D global surélevé.
La largeur : largeur de la bordure. Une valeur en pixels (2px).
La couleur : couleur de la bordure.
Exp: border: 3px green dashed;
3938
Bordures arrondies et ombres (CSS3)
Bordures arrondies
border-radius: 15px;
border-radius: 5px 10px 15px 20px;
Ombres des boîtes
box-shadow:
1. le décalage horizontal de l'ombre ;
2. le décalage vertical de l'ombre ;
3. l'adoucissement du dégradé ;
4. la couleur de l'ombre.
box-shadow: 5px 10px 10px green;
Ombres des textes
text-shadow: 5px 10px 10px green;
4039
Boites et positionnement
• L’élément boîte est une notion importante en CSS.
• Cet élément boîte est aussi appelé un conteneur ou un bloc (block).
• Le W3C définit un élément boîte comme une zone rectangulaire
constituée :
d’un contenu,
d’une marge intérieure (padding),
d’une bordure (border),
et d’une marge extérieure (margin).
4140
Boites et positionnement
Marge intérieure- padding-left (ou -right, -top, -bottom) : valeur
en pixels (px), points (pt) ou …{padding-left : 10px}
ou encore padding: top right bottom left (avec 4 valeurs) ou
encore padding: topbottom rightleft (avec 2 valeurs)
Consulter: [Link]
Marge extérieure- margin-left (ou -right, -top, -bottom) : valeur en
pixels (px), points (pt) ou …{margin-right: 10px}
ou encore margin: top right bottom left (avec 4 valeurs)
ou encore margin : topbottom rightleft (avec 2 valeurs)
Retrait de la première ligne- text-indent : valeur en pixels (px), points
(pt) ou … {text-indent: 20px}
4241
Boites et positionnement
Précisons que :
• Le contenu peut être, par exemple, le texte d’un paragraphe.
• Celui ci est entouré d’un espace allant du texte aux bordures du cadre,
que l’on appellera la marge intérieure ou interne.
• Les bordures du cadre (facultatives).
• Un espace entourant le tout, appelé marge extérieure ou externe.
• Les feuilles de style vont reprendre et étendre cette notion de boîte
pour donner au concepteur le contrôle total de la marge intérieure et
extérieure et de la bordure.
• Avec les feuilles de style CSS, on pourra, par exemple, régler
distinctement :
Les quatre marges extérieures et ce dans toutes les directions,
Les quatre bordures (dimension, style, couleur),
Les quatre marges intérieures et ce dans toutes les directions,
Les dimensions (largeur et hauteur) du contenu.
4342
Boites et positionnement
La source principale de confusion est que, après avoir précisé la largeur
et/ou la hauteur du contenu, on n’a pas explicitement défini la dimension
totale de l’élément boîte, qui comprend la dimension du contenu, la
marge intérieure, la dimension de la bordure et la marge extérieure.
Ainsi, la propriété width appliquée au contenu (le petit rectangle central)
n’est qu’un élément de la dimension de l’élément boîte, il faut y ajouter
la marge intérieure, la bordure et la marge extérieure pour obtenir
l’espace total réel de l’élément boîte.
C’est bien entendu la même chose pour la hauteur déterminée par la
propriété height.
La dimension totale de l’élément boîte se calcule donc ainsi :
contenu + marges intérieures + bordures + marges extérieures.
4443
Boites et positionnement
Soit une boîte avec les propriétés suivantes :
largeur de contenu 200 pixels,
marge intérieure 20 pixels,
bordure d’une largeur de 10 pixels,
marge extérieure 20 pixels.
La largeur de l’élément boîte est donc bien, dans notre exemple, de
300 pixels qui se décomposent ainsi (de gauche à droite) :
20 pixels de marge extérieure + 10 pixels pour la bordure + 20 pixels de
marge intérieure + 200 pixels de contenu + 20 pixels de marge
intérieure + 10 pixels de bordure + 20 pixels de marge extérieure.
Le total est bien de 300 pixels.
4544
Position et dimensions
Position:
static,
relative,
fixed,
absolute.
static par défaut
Consulter: [Link]
Hauteur et largeur- {height:50px;width: 50%;}
4645
Position et dimensions
Alignement horizontal- text-align : left, right, center, justify {text-align:
center}
Alignement vertical-vertical-align : baseline, top, bottom, middle, …
{vertical-align: bottom }
[Link]
Hauteur de la ligne (espacement entre les lignes)- line-height: valeur en
pixels (px), en points (pt), pourcentage {line-height: 70%}
Espacement des lettres- letter-spacing: normal ou valeur en points (pt)
{letter-spacing: 2pt}
Centrer des blocs- width:valeur et margin:auto {width: 50%; margin: auto;}
Barres de défilement automatiques (le bloc ne peut contenir tout le texte)
{Overflow:auto}. Autres valeurs de Overflow: visible, Hidden
Consulter : [Link]
32
4746
Positionnement flottant
Positionnement flottant: Un élément peut avoir une position flottante à droite ou à gauche, float admet
les valeurs "left", "right" ou "none". Utile dans le cas d’une présentation en colonnes. Le texte
« enveloppe » alors l’élément.
<img src="../../images/[Link]" alt="Suivre"
class="image"/>
<p>I've seen the Future. …</p>
<p >I've seen the Future…</p>
.image{float:left;} /*l’image à gauche du texte*/
La propriété clear :sert à contrôler le comportement des éléments qui viennent après
les éléments flottants dans le document. Par défaut, les éléments à suivre remontent
pour combler l'espace disponible libéré lorsqu'une boîte flotte d'un côté.
<img src="../../images/[Link]" alt="Suivre"
class="image"/>
<p>I've seen the Future. … </p>
<p class="libre">I've seen the Future. ..</p>
.image{float:left;}
.libre{clear:both;} 4847
Positionnement avec display
display permet de spécifier la manière dont un élément est affiché.
none, l’élément ne sera pas affiché.
inline, spécifie un positionnement de type inline. Le flux inclus remplit la largeur
nécessaire uniquement
block, spécifie un positionnement de type bloc. Le flux de bloc remplit la largeur
disponible
<h2>Positionnement avec display: inline</h2> .inlinedisplay {display: inline;}
<p class="inlinedisplay">Mon premier paragraphe</p> .blockdisplay {display: block;}
<p class="inlinedisplay">Mon second paragraphe</p>
<hr />
<h2>Positionnement avec display: block</h2>
<p>Un paragraphe avec un span<span
class="blockdisplay">MON SPAN</span>
positionné avec block</p>
48
Positionnement avec display
display permet de spécifier la manière dont un élément est affiché.
inline-block:
Le contenu du conteneur sera présenté avec un positionnemment de type
block, alors que le conteneur sera présenté avec un positionnemment de type
inline.
<h2>Positionnement avec display: inline-block</h2> .inlineblock
<p class="inlineblock">Mon premier paragraphe</p> {
<p class="inlineblock">Mon second paragraphe</p> display: inline-block;
<hr /> border: solid 2px blue ;
<div class="inlineblock"> }
<p>Mon premier paragraphe</p>
<p>Mon second paragraphe</p>
</div>
<div class="inlineblock">
<p>Mon premier paragraphe</p>
<p>Mon second paragraphe</p>
</div>
49
Positionnement avec display- Exemple 1
<nav>
<ul>
<li> <a href="#">Accueil</a> </li>
<li> <a href="HTML/[Link]">Liste des livres</a> </li>
<li> <a href="HTML/[Link]">Recherche</a> </li>
<li> <a href="HTML/[Link]">Evaluation</a> </li>
<li> <a href="HTML/[Link]">Contact</a> </li>
</ul>
</nav>
nav ul{
list-style-type: none;
}
nav ul li{
display: inline;
} 5150
Positionnement avec display- Exemple 2
<nav>
<ul class="menu">
<li> <a href="#">Accueil</a> </li>
<li> <a href="HTML/[Link]">Liste des livres</a> </li>
<li> <a href="HTML/[Link]">Recherche</a> </li>
<li> <a href="HTML/[Link]">Evaluation</a> </li>
<li> <a href="HTML/[Link]">Contact</a> </li>
</ul>
.menu li{
</nav> display: inline;
background-color:#EEE;
border: 1px solid;
border-color: #F3F3F3 #BBB #BBB #F3F3F3;
margin: 3px;
padding:.5em;
} 5251
Google Fonts-
Plus de polices avec [Link]
5353
Google Fonts-
Plus de polices avec [Link]
5452
Google Fonts-
Plus de polices avec [Link]
5553
Google Fonts
Exemple:
Dans le fichier CSS
@import url('[Link]
.googleFonts
{
font-family: 'Lobster', cursive;
}
Dans le fichier HTML
<h1 class="googleFonts">Une nouvelle police de google Fonts </h1>
Résultat
5655
Responsive web design
Le Web à l'heure actuelle.
Source :
[Link]
is-the-web/ Le Web de demain. Source :
[Link]
A lire [Link]
5756
Responsive web design
5857
A consulter [Link]
Responsive web design
C'est une technique de réalisation de sites web, qui permet de faire des sites qui
s'adaptent automatiquement à l'espace disponible sur l'écran.
En général, on se base sur la largeur de l'écran pour déterminer comment les
éléments du site doivent s'afficher.
[Link]
web-design
Exemple
@media screen and (max-width: 767 px)
{
/* Définir le code CSS qui sera utilisé */
}
5958