Université Saad Dahlab de Blida

Faculté des sciences

Département de mathématiques

BENAISSI Sellami
[Link]@[Link]
1. Définition CSS
2. Principe de CSS
3. intégrer du CSS dans HTML
4. Les feuilles de style externes
5. Les feuilles de style internes
6. Les feuilles de style Inline
7. la syntaxe de CSS
8. Règle CSS
9. Sélecteurs CSS
10. Le modèle CSS-Box
11. Les principales propriétés de CSS
12. Les liens avec CSS
13. Les tables avec CSS
14. Commentaires en CSS
1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Définition CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

CSS « Cascading Style Sheets »En « »Ar «Les

feuilles de styles en cascade» Fr , forment un langage qui permet de
gérer la présentation des documents HTML et XML. elles constituent
un moyen pour séparer structure et mise en page d'un site web.

CSS « Cascading Style Sheets »

Apprendre les bases de CSS est vraiment très simple. CSS est très déclaratif, sans surprises majeures, ne
propose aucune logique opérationnelle ou autres structures de langage complexes. Toute la puissance du
langage repose justement sur sa simplicité : à partir de déclarations très basiques, il est possible de
construire des systèmes plus complexes qui restent accessibles à l’édition par d’autres développeurs.

Programmation Avancée pour le Web CSS 3

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

CSS 1 le 17 décembre 1996

CSS 2 mai 1998

CSS 2.1 juillet 2007

CSS 3 Le développement commence dès 1999,

Programmation Avancée pour le Web CSS 4

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Principe de CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Séparation de la forme et du fond

Programmation Avancée pour le Web CSS 5

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Principe de CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Présentation selon le média

Programmation Avancée pour le Web CSS 6

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Bibliothèques CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Bootstrap

Programmation Avancée pour le Web CSS 7

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

intégrer du CSS dans HTML

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

1) Une feuille de style externe

2) Une feuille de style interne

3) Un style défini directement dans la balise (inline style)

Programmation Avancée pour le Web CSS 8

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les feuilles de style Inline

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Le style CSS Inline est utilisé pour une balise HTML spécifique. L’attribut <style> est utilisé
pour mettre en forme une balise HTML en particulier.

<!DOCTYPE html>
<html lang=“ar">
<head>
</head>
<body>
<h2 style="color:red;">sous-titre1</h2>
<img src=’[Link]’ style=’position:absolute; top:50px; left:60px’>
[…]
<h2>sous-titre2</h2>
[…]
</body>
</html>

Programmation Avancée pour le Web CSS 9

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les feuilles de style Inline

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Avantages des CSS Inline :

 Utile si vous souhaitez tester et prévisualiser des modifications.
 Utile pour les changements rapides.
 Réduit les requêtes HTTP.

Inconvénients du CSS Inline :

 Le CSS inline doit être appliqué à chaque élément.

Programmation Avancée pour le Web CSS 10

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les feuilles de style internes

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Si le style est appliqué à un seul document HTML, il est possible de définir le style
directement dans la partie <head> du document HTML, à l’aide de la balise <style> :

<!DOCTYPE html>
<html lang=“ar">
<head>
<style>
h2 {
color: #ff0000;
font-size: 19px;
text-align: center;
}
</style>
</head>
<body>
<h2>sous-titre1</h2>
[…]
<h2>sous-titre2</h2>
[…]
</body>
</html>

Programmation Avancée pour le Web CSS 11

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les feuilles de style internes

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Avantages des CSS interne:

 Seule une page est affectée par la feuille de style.
 Les classes et les ID peuvent être utilisés par la feuille de style interne.
 Il n’est pas nécessaire de télécharger plusieurs fichiers. HTML et CSS
peuvent être dans le même fichier.

Inconvénients du CSS interne:

 Augmentation du temps de chargement de la page.

 Il affecte une seule page – ce n’est pas utile si vous souhaitez utiliser le
même style CSS sur plusieurs documents.

Programmation Avancée pour le Web CSS 12

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les feuilles de style externes

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Le moyen le plus pratique d’ajouter un style CSS à votre document Web, est de le lier à un
fichier externe .css . De cette façon, toutes les modifications apportées à un fichier CSS
externe seront visibles globalement sur votre site Web.
La balise <link>, à écrire dans la partie <head> du document HTML permet de lier la feuille
de style au document HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="[Link]"/>
<title>Exemple html et css</title>
</head>
<body>
… … …. [Link]
</html>

Avantages des CSS externes:

1) Taille des pages HTML réduite et structure plus propre.
2) Vitesse de chargement plus rapide.
3) Le même fichier .css est utilisé sur plusieurs pages.

Programmation Avancée pour le Web CSS 13

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les feuilles de style externes

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

<link rel="stylesheet" href="[Link]">

L’élément <link> contient les attributs obligatoires rel et href et peux optionnellement
être complété par les attributs type et media.

Attributs de
Description
l’élément link
L’attribut rel définit le type de relation de l‘élément. La valeur stylesheet (feuille de
rel style) spécifie qu’une feuille de style doit être incluse.
href L’attribut href fait référence au fichier à inclure comme feuille de style.
L’attribut facultatif type décrit le type de média du fichier à inclure, dans le cas de CSS
type « text/css ».
L’attribut media permet aux administrateurs de sites Web de définir que la feuille de
style référencée ne doit être utilisée que pour un support de sortie spécifique. Ceci
media permet de fournir différentes feuilles de style pour différents appareils. Les valeurs
possibles sont par exemple screen (écran) ou print (impression).

Programmation Avancée pour le Web CSS 14

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

la syntaxe de CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

La syntaxe de base d’une règle CSS est composée de 3 parties :

Sélecteur { Propriété : Valeur;}

Programmation Avancée pour le Web CSS 15

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

la syntaxe de CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Sélecteur

Règle = Sélecteur + bloc de déclarations

Valeur
p{ Propriété

color: #ff0000;

bloc de déclarations
font-family: 'Helvetica Neue', sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
} déclaration = Propriété + Valeur

On peut regrouper plusieurs déclarations en les séparant par des points-virgules,

Programmation Avancée pour le Web CSS 16
1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Règle CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Sélecteur { Propriété : Valeur;}

Un sélecteur correspond à une balise HTML (<p>, <h1>, etc...) et la propriété est un attribut dont on
veut changer la valeur.

Exemple : h1 {font-size:100px}
Dans cet exemple, tous les titres principaux (<h1>) du document auront une taille de 100 pixels. Si la
valeur d’un attribut contient un espace, alors la valeur de l’attribut s’écrit en guillemets :

h1 {font-family:"sans serif"}
Il est possible de définir plusieurs attributs pour un même sélecteur. Dans ce cas, chaque propriété
sera séparée par un point-virgule :
p {font-family:"sans serif"; font-size: 90%; color: blue}
Programmation Avancée pour le Web CSS 17
1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Sélecteurs CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Le sélecteur indique l’élément sur lequel vont s’appliquer les déclarations CSS.
Des sélecteurs possibles :
Sélecteur Exemple designation
Element H1 Sélecteur simple. sélecteurs types
Element, Element H1,H2,H3 Groupe de sélecteurs.
Element Element TABLE P Eléments imbriqués.
Element > Element TD>P Sélecteur d'enfants directs.
Element+Element P+P Eléments consécutifs
[Link] [Link] Sous-classe.
.class .Important Sous-classe indépendante.
Element#Id P#Ligne12 Sélection par balise et Id.
#Id #Ligne12 Sélection par Id seul.
:Pseudo-élément :First-Letter Pseudo-élément
Element[attribut=value] P[Align=Center] Eléments avec critère.
Element[attribut] TD[Rowspan] Elément avec présence d'un attribut.
* * Sélecteur universel

Programmation Avancée pour le Web CSS 18

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Sélecteurs CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Exemples

h1 {font-size:100px}
h1, h2, h3 { font-weight: normal; }
h1 + p {
color: blue;
font-size: 18px;
}
ul.MyClass1 + p { color: #f0f; text-indent: 30px;}
#logo {
padding: 5px ;
border-radius: 10px ;
}

Programmation Avancée pour le Web CSS 19

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Sélecteurs CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

les sélecteurs d'attributs: permettent de cibler une balise par la

valeur d'un de ses attributs.

selector [attribute] { property:value; }

Examples:
input[type=“text"] { background-color: yellow;}
a[href$=".zip" ] {color :rgb(255, 0, 255) ;}

Programmation Avancée pour le Web CSS 20

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Sélecteurs CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

les sélecteurs d'attributs:

Selector Example
l'élément A ayant comme attribut
[attribute] [target] "attribute"
[attribute=value] [target=_blank] sa valeur est égale à …

[attribute^=value] a[href^="https"] sa valeur commence par…

[attribute$=value] a[href$=".pdf"] sa valeur se termine par…

[attribute*=value] a[href*="w3schools"] sa valeur contient la chaine…

[attribute~=value] [title~=flower] valeurs séparées par des espaces

la première de ses valeurs est égale
[lang|=en] à "valeur" immédiatement suivi
[attribute|=value] d'un tiret-

Programmation Avancée pour le Web CSS 21

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Sélecteurs CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

les pseudo-classes: Une pseudo-classe est utilisé pour définir un état

particulier d'un élément

selector:pseudo-class { property:value; }
Examples:
div:hover { background-color: blue; }
p:first-child { color: blue; }
a:visited { color: #00FF00; }
article *:not(p) { color :rgb(255, 0, 0) ; }
article tr:nth-child(even){background: #F45609;}

Programmation Avancée pour le Web CSS 22

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Sélecteurs CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

les pseudo-classes

:link :active :hover :visited

:checked :disabled :enabled :focus
:empty :valid :invalid :required
:in-range :target :out-of-range :optional
:read-only :read-write :not(selector) :root
:first-child :first-of-type :last-child :last-of-type

:nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n)

:only-of-type :only-child :lang(language)

Programmation Avancée pour le Web CSS 23

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Sélecteurs CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

les pseudo-éléments: Un pseudo-élément CSS est utilisé pour styliser

les parties spécifiées d'un élément.

selector::pseudo-element { property:value; }

Examples:
h1::after { content: ‘!!!‘;}
p::first-letter { color: #ff0000;
font-size: xx-large;}
::selection { color: red;
background: yellow; }
Programmation Avancée pour le Web CSS 24
1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Sélecteurs CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

les pseudo-éléments

::after ::before

::first-letter ::first-line

::selection

Programmation Avancée pour le Web CSS 25

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Le modèle CSS-Box
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Chaque élément HTML est représenté comme une zone rectangulaire dans la
présentation Frontend d’une page Web : qu’on appelle aussi Box ou boîte. Les
caractéristiques de ces boîtes, leur flux, et leur étendue déterminent le design d’une page
Web. Chaque page peut donc être considéré comme un arrangement de diverses boîtes.

width

height

Programmation Avancée pour le Web CSS 26

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Le modèle CSS-Box
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Niveau de box
Description
model

La Content-Box représente une zone dont la taille est déterminée par la

taille du texte ou les dimensions d’un graphique. Pour les éléments au
Domaine de contenu
niveau du bloc, la hauteur et la largeur peuvent également être définies
(Content-Box)
individuellement à l’aide des propriétés height et width. Ce type de
formatage n’est pas disponible pour les éléments inline.

Ecart intérieur La Padding-Box (padding = „rembourrage“) définit l’écart entre Content-

(Padding-Box) Box et Border-Box.

Bordures (Border-
Border-Box définit les bordures
Box)

Margin-Box définit l’écart entre l’élément actuel et son élément parent ou

Ecart extérieur
voisin. Contrairement à padding ou border, la propriété margin peut
(Margin-Box)
également avoir des valeurs négatives.

Programmation Avancée pour le Web CSS 27

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 1

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• background-color: #FFCC66 | red | rgb (255,0,0);

• background-image: url("[Link]");
• background-repeat: no-repeat | repeat-x | repeat-y | repeat;
• background-attachment: scroll | fixed;
• background-position: right bottom | 2cm 3cm |50% 25% ;
• background-size: 100px 80px | contain | cover;
• background-clip: border-box | padding-box | content-box;

background: background-color | background-image | background-repeat |

background-attachment | background-position

background: #FFCC66 url("[Link]") no-repeat fixed right bottom;

Programmation Avancée pour le Web CSS 28

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 1

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• background-image: radial-gradient(shape size at position, start-color, ...,
last-color);

background-image: linear-gradient(to right, red , yellow);

background-image: linear-gradient (to right, red, orange, yellow,

green, blue, indigo, violet);

background-image: radial-gradient(red, yellow, green);

Programmation Avancée pour le Web CSS 29
1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 2

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• font-style: normal | italic | oblique;

• font-variant: normal | small-caps;
• font-weight: normal | bold;
• font-size: 30px| 12pt | 120% | 1em;
• font-family: arial, sans-serif;

font: font-style | font-variant | font-weight | font-size | font-family

<p>Lorem ipsum dolor sit amet </p> <p style="font: italic bold 30px Old English Text MT, sans-
serif;">Lorem ipsum dolor sit amet </p>

font: italic bold 30px arial, sans-serif;

Programmation Avancée pour le Web CSS 30

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 3

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Formatage de texte:
• color: #FFCC66 | red | rgb (255,0,0);
• text-indent: 30px;
• text-align: left|right|center|justify|initial|inherit;
• letter-spacing: 3px;
• line-height: 0.8;
• word-spacing: 10px;
• text-shadow: 3px 2px red;
• text-decoration: none|underline|overline|line-through|initial|inherit;
• text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
• direction: ltr|rtl|initial|inherit;
• P:first-letter { font-size: 200%; float: left }
• P:first-line { 26: font-variant : small-caps; 27: }

p {letter-spacing: 3px; text-indent: 50px;}

Programmation Avancée pour le Web CSS 31

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 4

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• border-style: dotted | dashed | solid | double | groove | ridge | inset |

outset | none | hidden ;
• border-width: 2px 10px 4px 20px | 5px | medium;
• border-color: red green blue yellow | green;
• border-radius: 5px;
border-top-style; border-right-style; border-bottom-style; border-left-style;
border-top-width; border-right- width; border-bottom- width; border-left- width;
border-top-color; border-right- color; border-bottom- color; border-left- color;

border: border-width border-style border-color|initial|inherit;

p {border: 2px solid red;border-radius: 5px;}

Programmation Avancée pour le Web CSS 32

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 4

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• border-style: dotted | dashed | solid | double | groove | ridge | inset |

outset | none | hidden ;

Programmation Avancée pour le Web CSS 33

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 4

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• border-radius: 25px;
• border-radius: 2em / 5em;
• border-radius: 2em 1em 4em / 0.5em 3em;

Programmation Avancée pour le Web CSS 34

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 4

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Programmation Avancée pour le Web CSS 35

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 5

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread

radius] [color];

Programmation Avancée pour le Web CSS 36

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 5

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• padding-top: 50px;
• padding-right: 30px;
• padding-bottom: 50px;
• padding-left: 80px;

padding: 25px 50px 75px 100px;

div {padding: 25px 50px 75px;}

Programmation Avancée pour le Web CSS 37

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les principales propriétés de CSS 6

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• margin-top: 100px;
• margin-right: 150px;
• margin-bottom: 100px;
• margin-left: 80px;

margin: 25px 50px 75px 100px|auto|initial|inherit;

h1 { margin: 0 0 50px 0;}

Programmation Avancée pour le Web CSS 38

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les liens avec CSS

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• a:link {color: blue;text-decoration:none; background-color: #f44336;

padding: 14px 25px; text-align: center; }
• a:visited {color: purple; text-decoration:none;}
• a:active {background-color: yellow;text-decoration:none;}
• a:hover {color:red;text-decoration:none;}
Les quatre états de liens sont:
a:link - un lien normal non visité
a:visited - un lien que l'utilisateur a visité
a:hover - un lien lorsque l'utilisateur passe la souris dessus
a:active - un lien au moment où il est cliqué

• a:hover DOIT venir après a:link et a:visited

• a:active DOIT venir après a:hover

Programmation Avancée pour le Web CSS 39

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les tables avec CSS

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

L'aspect d'une table HTML peut être grandement amélioré avec CSS:
• table, th, td { border: 1px solid black; }
• table { border-collapse: collapse | separate;}
• tr:hover {background-color: #f5f5f5;}
• td, th { vertical-align: middle | bottom | top;}
• th, td { padding: 15px; }
• th, td { border-bottom: 1px solid #ddd;}
• tr:nth-child(even | odd) {background-color: #f2f2f2;}
• caption { caption-side: bottom | top;}
table{ border-collapse: collapse;
width: 100%; }
table td, table th { border: 1px solid #ddd;
padding: 8px;}
table tr:nth-child(even){background-color: #f2f2f2;}
table tr:hover {background-color: #ddd;}
table th { padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;}

Programmation Avancée pour le Web CSS 40

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS Layout - Mise en page

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• Le type des boîtes peut être modifié à l’aide de la propriété display.

• Il existe trois mécanismes de positionnement de base en CSS :

 le flux normal qui joue sur les marges et remplissage,
 la flottaison, avec les éléments flottants (la propriété Float)
 et la position, par la propriété position

• display: block | inline | none ….. ;

• visibility: visible|hidden|collapse|initial|inherit;

• float: right| left | none | inherit ;

• position : absolute | relative | fixed | static | sticky;

Programmation Avancée pour le Web CSS 41

 Les transformations CSS
transform: transform-functions;

Programmation Avancée pour le Web CSS 42

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Transformation CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

La propriété de Transformation CSS transform peut prendre pour les

transformations 2D ou 3D une/des valeurs suivantes :
• translate() : fonction de Transformation CSS pour déplacer horizontalement et
verticalement un élément.
[ translateX() ; translateY() ; translateZ(); translate3d() ]
• scale() : fonction de Transformation CSS pour redimensionner horizontalement et
verticalement un élément.
[scaleX() ; scaleY() ; scaleZ (); scale3d () ]
• rotate() : fonction de Transformation CSS pour faire une rotation à un élément.
[rotateX() ; rotateY() ; rotateZ (); rotate3d() ]
• skew() : fonction de Transformation CSS pour incliner horizontalement et verticalement
un élément.
[skewX() ; skewY() ]
• none : aucune transformation, valeur par défaut.
• matrix() : fonction de Transformation CSS pour appliquer une matrice de transformation
à un élément.

Programmation Avancée pour le Web CSS 43

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Transformation CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• La propriété de Transformation CSS transform permet

de spécifier le type de transformation 2d ou 3d à appliquer sur un
élément HTML , La propriété transform vous permet de manipuler
visuellement un élément en l'inclinant, en le faisant pivoter, en le
déplaçant ou en le redimensionnant.

div {
transform : rotate(20deg);
transform : translate(20px, 10px);
transform : scale(1, 2);
transform : skew(45deg, 62deg);
transform : translate(100px) rotate(20deg) skew(45deg, 62deg) scale(1, 2);
}

Programmation Avancée pour le Web CSS 44

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Transformation CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

transform: rotate(20deg);

Programmation Avancée pour le Web CSS 45

animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript.

Les transitions CSS

transition: [property] [duration] [timing-function] [delay];

Une transition est une interpolation entre deux valeurs d'une propriété CSS.

Programmation Avancée pour le Web CSS 46

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les transitions CSS

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

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 ou :active

• soit via JavaScript.

Précédemment, ce genre de comportement n'était possible qu'avec l'usage de

JavaScript. Ce nouveau module CSS3 permet dorénavant de s'en affranchir au
profit exclusif des feuilles de style.

Programmation Avancée pour le Web CSS 47

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les transitions CSS

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Pour définir une nouvelle transition animée, il est nécessaire de préciser au

minimum : - La ou les propriété(s) à animer - La durée de l'animation

Les transitions CSS vous permettent de choisir :

1. les propriétés à animer en les listant explicitement

transition-property: all;
2. la durée de l'animation

transition-duration: 500ms;
3. la façon dont la transition s'exécutera

transition-timing-function: ease
4. le début de l'animation

transition-delay: 0s;
Programmation Avancée pour le Web CSS 48
1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les transitions CSS

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

transition-timing-function: ease

Les effets de l'interpolation

Il est possible de donner un effet à l'interpolation pour améliorer l'impact visuel de la
transition. Les effets disponibles sont :
 linear : La vitesse est constante sur toute la durée de l'animation.
 ease : Rapide sur le début et ralenti sur la fin, c'est la valeur par défaut.
 ease-in : Lent sur le début et accélère de plus en plus vers la fin.
 ease-out : Rapide sur le début et décèlere sur la fin..
 ease-in-out :Le départ et la fin sont lents, accélération puis décélération.
 steps : accélération par paliers.
 cubic-bezier : mouvement personnalisé.

Seuls les effets steps et cubic-bezier sont paramétrables

Programmation Avancée pour le Web CSS 49

 1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les transitions CSS

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS
exemples

transition: transform 450ms, background-color 300ms;

transition: background 3s steps (3, end) Os ;

.MyBox:hover{
width: 100px; height: 100px;
transition : width 5s ease-in-out 2s, height 2s
ease-in-out 2s;
}
.ma-transition{
width : 150px;
transition-property : width;
transition-duration : 2s;
transition-timing-function : ease-out;
transition-delay : 2ms;
}

Programmation Avancée pour le Web CSS 50

animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript.

Les animations CSS

animation: name duration timing-function delay iteration-count
direction fill-mode play-state;

Les CSS3 permettent désormais d'animer des éléments HTML sans aucune
utilisation de Flash ou de JavaScript. Pour animer avec les CSS3, il est nécessaire
d'utiliser, d'une part la règle CSS @keyframes, et d'autre part la propriété CSS
animation.
Programmation Avancée pour le Web CSS 51
1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les animations CSS

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

animation: name duration timing-function delay iteration-count direction

La propriété CSS animation permet d'affecter une animation créée avec la règle CSS
@keyframes à un élément HTML. Elle peut recevoir pas moins de six paramètres,
dont seuls les trois premiers sont obligatoires :

animation-name: ( nom de l'animation ) défini dans la règle CSS @keyframes

animation-duration: ( durée de l'animation ) en secondes ou millisecondes.
animation-timing-function: (effet de l'animation ) identique aux effets utilisés
pour la propriété CSS transition
animation-delay: (délai avant le déclenchement de l'animation ) en secondes
ou millisecondes
animation-iteration-count: (nombre d'itérations de l'animation) soit un chiffre
entier, soit le mot-clé « infinite » qui signifie que l'animation tourne en boucle.

Programmation Avancée pour le Web CSS 52

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les animations CSS

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Avant d'animer un élément HTML, il va falloir définir une règle CSS "@keyframes"
qui va servir à paramétrer l'animation. Cette règle CSS crée une ligne temporelle
virtuelle qui débute à la valeur 0% pour se terminer à la valeur 1OO %. Il est à noter
que la valeur 0 % peut être remplacée par la valeur "from", et la valeur 1OO % par la
valeur "to".
#div0 {
width: 100px;
animation: example 4s infinite alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
Programmation Avancée pour le Web CSS 53
 CSS Grid Layout
display: grid | inline-grid;
grid-template-columns: ... | ...;
grid-template-rows: ... | ...;
grid-template-areas: " | . | none | ..." "...";

Programmation Avancée pour le Web CSS 54

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS Layout - Mise en page

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Programmation Avancée pour le Web CSS 55

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS Layout - Mise en page

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

• CSS Grid Layout est le système de mise en page le plus

puissant disponible en CSS. C'est un système
bidimensionnel, ce qui signifie qu'il peut gérer à la fois des
colonnes et des lignes, contrairement à flexbox qui est en
grande partie un système unidimensionnel.

Programmation Avancée pour le Web CSS 56

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS Layout - Mise en page

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Depuis mars 2017, la plupart des navigateurs embarquaient une

prise en charge native et sans préfixe de CSS Grid:
• Chrome (y compris sur Android),
• Firefox,
• Safari (y compris sur iOS)
• et Opera.
• il est pris en charge par Internet Explorer 10 et 11, mais c'est
une ancienne application avec une syntaxe obsolète.

Programmation Avancée pour le Web CSS 57

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS Layout - Mise en page

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

1. Création de la grille
1. Pour commencer, vous devez définir un élément conteneur sous
forme de grille avec :
display: grid;
2. définir la taille des colonnes et des lignes avec :
grid-template-columns et grid-template-rows,
grid-template-columns: 1fr 1fr auto 50px 40px;
grid-template-rows: 25% 100px auto;
3. définir les espacements avec :
gap ou grid-gap
gap: 15px 10px;
Programmation Avancée pour le Web CSS 58
1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS Layout - Mise en page

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

1. Création de la grille
exemples

;
}

Programmation Avancée pour le Web CSS 59

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS Layout - Mise en page

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

2. Positionnement des Grid Items

1. puis placez les éléments enfants de l'élément conteneur dans la
grille avec.:
grid-column et grid-row

Ou avec grid-area
la propriété grid-column (qui est un raccourci pour grid-column-start et grid-
column-end) placée sur chacun de nos Grid Items permet tout simplement de
définir une colonne de départ / une colonne d'arrivée ou bien une plage à
occuper par le Grid Item
(NB : Les index des colonnes commencent à 1 et non à 0).

Programmation Avancée pour le Web CSS 60

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS Layout - Mise en page

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

2. Positionnement des Grid Items

exemples

Programmation Avancée pour le Web CSS 61

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

CSS Layout - Mise en page

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

{ : ;}
{ : ;}
{ : ;}
exemples

{ : ;}

{ : ;
: ;
: ;
: " “
"main main . sidebar"
"footer footer footer footer"; }

Programmation Avancée pour le Web CSS 62

 les Media-Queries
@media only screen and (max-width:800px)

Programmation Avancée pour le Web CSS 63

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

les Media-Queries
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

La règle @media est utilisé dans les requêtes des médias pour
appliquer différents styles pour différents types de supports /
périphériques.

Les requêtes médias peuvent être utilisées pour vérifier de nombreux

éléments, tels que:

largeur et hauteur de la fenêtre

largeur et hauteur de l'appareil
l'orientation (la tablette / téléphone est-elle en mode paysage ou
portrait?)
résolution

Programmation Avancée pour le Web CSS 64

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

les Media-Queries
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

L'utilisation de requêtes médias est une technique populaire pour fournir une feuille de
style personnalisée aux ordinateurs de bureau, ordinateurs portables, tablettes et
téléphones mobiles, destinés aux documents imprimés ou aux lecteurs d'écran (type de
média: impression, écran ou speech).

<link rel="stylesheet" type="text/css" href="[Link]" media="screen" />

Valeurs possibles:
• all : tous les appareils
• print : imprimantes
• speech : navigateur vocal qui lit à voix haute le texte de la page Web.
• screen : écran d'ordinateur, tablettes, smart-phones etc

Programmation Avancée pour le Web CSS 65

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

les Media-Queries
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

@media (height > 600px) {

body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {

body { line-height: 1.4; }
}

<link rel="stylesheet" media="screen and (min-width: 900px)" href="[Link]">

<link rel="stylesheet" media="screen and (max-width: 600px)" href="[Link]">

Programmation Avancée pour le Web CSS 66

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

les Media-Queries
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}

@media only screen

and (min-width: 320px)
and (max-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
body { line-height: 1.4 }
}

Programmation Avancée pour le Web CSS 67

 Les préfixes de fournisseur
-webkit- -moz- -o- -ms- -khtml-

Programmation Avancée pour le Web CSS 68

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Les préfixes de fournisseur

4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Les préfixes de fournisseur sont utilisés pour permettre la prise en charge de

la prévisualisation de nouvelles fonctionnalités CSS dont la fonctionnalité
n'est pas encore recommandée par la spécification

Prefix Browser(s)
-webkit- Google Chrome, Safari, Android Browser
-moz- Firefox
-o- Opera
-ms- Internet Explorer, Edge
-khtml- Konqueror
Exemple
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

Programmation Avancée pour le Web CSS 69

1. Définition CSS 8. Règle CSS
2. Principe de CSS 9. Sélecteurs CSS
3. intégrer du CSS dans HTML 10. Le modèle CSS-Box

Commentaires en CSS
4. Les feuilles de style externes 11. Les principales propriétés de CSS
5. Les feuilles de style internes 12. Les liens avec CSS
6. Les feuilles de style Inline 13. Les tables avec CSS
7. la syntaxe de CSS 14. Commentaires en CSS

Les commentaires en CSS sont des instructions facultatives

commençant par les caractères /* et se terminant par */

Programmation Avancée pour le Web CSS 70