Scribd
Importer
56 vues62 pages

Chapitre 6 CSS

Transféré par

yazasi.automation
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
56 vues62 pages

Chapitre 6 CSS

Transféré par

yazasi.automation
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 62

CHAPITRE 6 : CSS

1
HTML, CSS, JAVASCRIPT
Décomposer la conception d’un site web en 3 couches

2
CSS CASCADING STYLES SHEETS

3
INTRODUCTION
▪ Les feuilles de style en cascade CSS (Cascading Style Sheets) est un
langage informatique qui sert à décrire la présentation des
documents HTML, XHTML et XML. Les standards définissant CSS sont
publiés par le W3C (World Wide Web Consortium).
▪ L’un des objectifs majeurs des feuilles de style CSS est de séparer la
structure d’un document de ses styles de présentation.

4
INTRODUCTION
▪ un ensemble de règles qui indiquent au navigateur
▪ comment il doit afficher les différents éléments de la page (design)
▪ comment ces éléments se positionnent les uns par rapport aux autres (layout).

5
HISTORIQUE
1989 HTML 1.0

1991 HTML 2.0


Mélange du contenu et de la présentation
dans HTML balise <b>, <i>…
1995 HTML 3
1996 HTML 3.2 CSS1: 1ére recommandation officielle du
W3C
1998 HTML 4.0 CSS2: extension du concept des feuilles de
1999 HTML 4.01 styles

2000 XHTML 1.0

2002 CSS2.1: quelques ajustements

2012 HTML 5 CSS3: animations, effets textuels, transformations


2D/3D…
6
AVANTAGES
▪ La structure du document et la présentation peuvent être gérées dans des fichiers
séparés.
▪ La conception d’un document se fait dans un premier temps sans se soucier de la
présentation, ce qui permet d’être plus efficace.
▪ Dans le cas d’un site web, la présentation est uniformisée : les documents (pages
HTML) font référence aux mêmes feuilles de styles. Cette caractéristique permet
de plus une remise en forme rapide de l’aspect visuel.
▪ Un même document peut donner le choix entre plusieurs feuilles de style, par
exemple une pour l’impression et une pour la lecture à l’écran.
▪ Le code HTML est considérablement réduit en taille et en complexité, puisqu’il ne
contient plus de balises ni d’attributs de présentation.

7
COMMENT AJOUTER CSS À UNE PAGE
HTML?
▪ 3 manières de définir des styles

▪ inline CSS : directement dans les éléments HTML de la page


▪ CSS internes : en utilisant des balises <style> dans un document HTML
▪ CSS externes : en liant au document HTML, une feuille de style (fichier.css)
externe

8
CSS INLINE
▪ Style inline défini directement dans une balise à l'aide d'un attribut style

<html>
<head>
<title>CSS inline</title>
<meta charset="utf-8" />
</head>

<body>
<h1>
l’attribut style
Valeur de l’attribut style
Titre sans style
</h1>
<h1 style="color:blue; background: yellow;padding: 4px;border:solid 3px green;">
Titre avec style
</h1>
<h1> Propriété CSS Valeur • mélange structure et présentation,
Titre sans style • ne s'applique qu'à une seule
</h1> balise
</body>
</html>
9
▪
STYLE INTERNE
Styles définis dans un élément style placé dans l'en tête (head) du document

Propriét
Règle de style é
Valeur
Sélecteur: indique les
éléments concernés par la règle

Meilleure séparation du contenu et de la présentation :


styles du document localisés en un seul endroit
Selon le sélecteur utilisé un même style peut être
appliqué à un ou plusieurs éléments du document

Styles utilisables uniquement à l'intérieur du document


où ils sont définis
10
STYLE EXTERNE
▪ Styles définis dans un élément style placé dans l'en tête (head) du document

Style externe.html

Style.css

Autre page web.html


Style externe.html

Séparation du contenu (fichier


.html) et de la présentation (fichier
.css)
un même style peut être appliqué
à un ou plusieurs éléments du
document
Possibilité de partager les styles
11
Autre page web.html entre plusieurs documents
STYLE EXTERNE
▪ La balise <link>
▪ attribut rel : relation entre le document et le document lié (stylesheet, icon, licence…)
▪ attribut href : la localisation du document lié
▪ attribut type : le type de média du document lié

Type image au format png

12
STYLE EXTERNE Une page peut avoir plusieurs feuilles de
style associées avec possibilité d'avoir
des feuilles externes au site

integrity (Subresource Integrity ou SRI)


permet aux navigateurs de vérifier que les
fichiers téléchargés n'ont pas subi de
manipulation inattendue.
crossorigin indique si la ressource doit être
récupérée avec une requête CORS (Cross-
Origin Resource Sharing ou partage des
ressources entre origines multiples).

13
Les styles issus des différentes feuilles de style se combinent
PRINCIPE
Il est par exemple possible de ne décrire que la structure d’un document en HTML :

<html>
<head>
<title>Un titre de document</title>
<link rel="stylesheet" type="text/css" href="feuille.css" />
</head>
<body>
<h1>Un titre de niveau 1 (en bleu)</h1>
<p>Un paragraphe (en rouge)</p>
</body>
</html>

La déclaration d'une feuille de style CSS se fait dans l'en-tête (partie <head>) du document
HTML avec la balise <link>.
14
PRINCIPE
On décrire toute la présentation dans une feuille de style CSS séparée :

h1 { color: blue; border: solid 1px black; }


p { color: red; border: dashed 1px black; }

On obtient l’affichage suivant dans un navigateur :

15
SYNTAXE CSS
▪ Un jeu de règles (qualifié aussi de "règle") se compose d’un sélecteur suivi par un
bloc de déclaration délimité par des accolades ({}).
▪ Une déclaration est constituée d’une propriété, suivie du caractère deux-points (:) puis
d’une valeur.

Les multiples déclarations qui se rapportent à un même sélecteur sont séparées par des points-
virgules ( ;).
• sélecteur : identifie les éléments HTML de la page web auxquels la règle de style est appliqué
• propriété : désigne au navigateur ce qu'il faut modifier 16
• valeur : désigne au navigateur le changement à effectuer
LES DIFFÉRENTS TYPES DE SÉLECTEURS
sélecteur { propriété: valeur ; … }

Les sélecteurs sont utilisé pour sélectionner (trouver) les éléments HTML que l'on veut styler
• Les sélecteurs peuvent être regroupé selon 5 catégories

▪ Sélecteurs simples
sélectionnent des éléments selon leur type, leur id ou leur classe
▪ Sélecteurs combinés
sélectionnent des éléments selon leur situation dans l'arbre défini par l'imbrication des éléments
▪ Sélecteurs de pseudo-classe
sélectionnent des éléments en fonction de l'état dans lequel ils se trouvent
▪ Sélecteurs de pseudo-élément
sélectionnent et stylent une partie d'un élément
▪ Sélecteurs d'attributs
sélectionnent un élément selon la présence ou la valeur d'un attribut
17
SÉLECTEURS SIMPLES forme générale
balise { déclaration; ... }
Sélecteur de balise (ou d'éléments) style s'appliquant à tous
les éléments correspondant à une balise HTML donnée

Le style s'applique à
tous les éléments de
type h2

18
SÉLECTEUR SIMPLE forme générale
.nomDeClass { déclaration; ... }
Sélecteur de classe style nommé pouvant être associé à
n'importe quel élément à l'aide d'un attribut class

attribut class peut être


porté par toute balise ->
possibilité d'appliquer
une même classe de
style à des éléments de 19
balises différentes
SÉLECTEUR SIMPLE forme générale
.nomDeClass { déclaration; ... }
Sélecteur de classe style nommé pouvant être associé à
n'importe quel élément à l'aide d'un attribut class
possibilité d'appliquer à un même élément plusieurs classes de style
différentes

20
SÉLECTEUR SIMPLE forme générale
.nomDeClass { déclaration; ... }
Sélecteur de classe style nommé pouvant être associé à
n'importe quel élément à l'aide d'un attribut class
possibilité de restreindre une classe à un type d'élément. Le nom de la classe est préfixé par le nom de la
balise

cette règle de style ne


s'applique qu'aux éléments h3
ayant un attribut class avec la 21
valeur renforce
SÉLECTEUR SIMPLE forme générale
#identificateur{ déclaration; ... }
Sélecteur d'identificateur style associé à un élément unique
identifié par un attribut id
• attribut id désignant l'élément à styler et défini dans sa balise ouvrante
• doit être unique dans le document HTML

• renforcement : utilisable par plusieurs éléments -> sélecteur de classe


22
• résumé : un seul résumé dans le document ->sélecteur d'identificateur
GROUPEMENT DE SÉLECTEURS forme générale
Groupement de sélecteurs permet d'associer une même Selecteur1, selecteur2,…{ déclaration; ... }
règle de style à plusieurs sélecteurs

23
LIMITES DES SÉLECTEURS SIMPLE
▪ problème : comment associer un style à des éléments en fonction de leur situation dans
l'arborescence ?
ex : particulariser les liens hypertexte de division de
navigation(par exemple leur donner une couleur de
fond vert clair)

24
LIMITES DES SÉLECTEURS SIMPLE
▪ problème : comment associer un style à des éléments en fonction de leur situation dans
l'arborescence ?
ex : particulariser les liens hypertexte de division de Avec les style simple
navigation(par exemple leur donner une couleur de 1-Définir une classe pour ces liens
fond vert clair)

2-ajouter un attribut class="navigation" à


chacun des éléments a concernés

Lourd et potentiellement source d'erreurs

25
LES DIFFÉRENTS TYPES DE SÉLECTEURS
sélecteur { propriété: valeur ; … }

Les sélecteurs sont utilisé pour sélectionner (trouver) les éléments HTML que l'on veut styler
• Les sélecteurs peuvent être regroupé selon 5 catégories

▪ Sélecteurs simples
sélectionnent des éléments selon leur type, leur id ou leur classe
▪ Sélecteurs combinés
sélectionnent des éléments selon leur situation dans l'arbre défini par l'imbrication des éléments
▪ Sélecteurs de pseudo-classe
sélectionnent des éléments en fonction de l'état dans lequel ils se trouvent
▪ Sélecteurs de pseudo-élément
sélectionnent et stylent une partie d'un élément
▪ Sélecteurs d'attributs
sélectionnent un élément selon la présence ou la valeur d'un attribut
26
SÉLECTEURS COMBINÉS Relation enfant de (child) :
▪ rappel : arbre des éléments et relations entre éléments
<div> p est enfant de div
<h1>titre</h1> em est enfant de p
<h2>un sous titre</h2>
<p>un paragraphe avec Relation descendant de :
<em>des mots importants</em> un nœud x est descendant d'un nœud y si x est enfant de y ou
pour terminer avec une image est enfant d'un enfant de y
<img src="logo.gif" alt="un logo">.
p est descendant de div
</p>
<h3>titre niveau 3</h3> em est descendant de p et div
</div>
Relation 1er frère suivant (adjacent sibling) :
div
p est le 1er frère suivant de h2
h1 div Nœud racine
img est le 1er frère suivant de em
h2

p Relation frère suivant (general sibling) :


em h1 h2 p h3 Nœud un nœud x est frère suivant d'un nœud y si x est 1er frère
de y ou est 1er frère d'un frère suivant de y
img p est le frère suivant de h1 et h2
h3 em img Nœud feuille img est le frère suivant de em 27
SÉLECTEURS COMBINÉS
Forme générale
Selecteur1 combinateur selecteur2 { déclaration ; ... }

cible (sélectionne) parmi les éléments sélectionnés par sélecteur2


uniquement ceux qui ont une relation définie par le combinateur avec un
élément sélectionné par selecteur1
4 combinateurs possibles :
• (space) : descendant
• > : descendant direct ou enfant
• ~ : 1er frère suivant
• + : frère suivant 28
SÉLECTEURS COMBINÉS
problème : comment associer un style à des éléments en fonction de leur situation dans l'arborescence ?
ex : particulariser les liens hypertexte de division de navigation (par
exemple leur donner une couleur de fond vert clair)
En utilisant combinateur descendant

Faciliter d’utilisation

29
SÉLECTEURS COMBINÉS
Possibilité de combiner des sélecteurs descendants
sélecteur1 sélecteur2 … sélecteur n { déclaration ; … }
s'applique à tout élément désigné par sélecteurn qui descend (directement ou indirectement) d'un élément
désigné par sélecteurn-1 … qui descend d'un élément désigné par sélecteur2 qui descend d'un élément désigné
par sélecteur1

30
SÉLECTEURS COMBINÉS
Sélecteur de nœuds enfants
sélecteur1 > sélecteur2 { déclaration ; déclaration }
s'applique à tout élément désigné par sélecteur2 dont le parent direct est un élément désigné par sélecteur1

31
SÉLECTEURS COMBINÉS
Sélecteur de nœuds enfants
sélecteur1 > sélecteur2 { déclaration ; déclaration }
s'applique à tout élément désigné par sélecteur2 dont le parent direct est un élément désigné par sélecteur1

32
SÉLECTEURS COMBINÉS
Combinaisons de sélecteurs sélecteur descendant Enfant

Comment je peut
colorée le fond

33
SÉLECTEURS COMBINÉS
Combinaisons de sélecteurs sélecteur descendant Enfant

sélecteur

descendant

Comment je peut
colorée le fond

Enfant 34
SÉLECTEURS COMBINÉS
Sélecteur de nœuds adjacents

sélecteur1 + sélecteur2 { déclaration ; déclaration }


s'applique à tout élément désigné par sélecteur2 dont le frère directement précédent dans le flux
du balisage de la page HTML est un élément désigné par sélecteur1

35
SÉLECTEURS COMBINÉS
Sélecteur de nœuds frère

sélecteur1 ~ sélecteur2 { déclaration ; déclaration }


s'applique à tout élément désigné par sélecteur2 dont un frère précédent dans le flux du balisage de
la page HTML est un élément désigné par sélecteur1

36
LES DIFFÉRENTS TYPES DE SÉLECTEURS
sélecteur { propriété: valeur ; … }

Les sélecteurs sont utilisé pour sélectionner (trouver) les éléments HTML que l'on veut styler
• Les sélecteurs peuvent être regroupé selon 5 catégories

▪ Sélecteurs simples
sélectionnent des éléments selon leur type, leur id ou leur classe
▪ Sélecteurs combinés
sélectionnent des éléments selon leur situation dans l'arbre défini par l'imbrication des éléments
▪ Sélecteurs de pseudo-classe
sélectionnent des éléments en fonction de l'état dans lequel ils se trouvent
▪ Sélecteurs de pseudo-élément
sélectionnent et stylent une partie d'un élément
▪ Sélecteurs d'attributs
sélectionnent un élément selon la présence ou la valeur d'un attribut
37
SÉLECTEURS DE PSEUDO-CLASSES
portent sur des éléments existants dans le code source du document et auxquels on peut accéder
par des caractéristiques autres que leur nom, attribut ou contenu.
sélecteur : pseudo-classe{ déclaration ; déclaration }

– structurelles : :first-child, :last-child, :nth-child(n) ….


– d’ancres :link et :visited
– dynamiques :hover, :active et :focus

38
LES DIFFÉRENTS TYPES DE SÉLECTEURS
sélecteur { propriété: valeur ; … }

Les sélecteurs sont utilisé pour sélectionner (trouver) les éléments HTML que l'on veut styler
• Les sélecteurs peuvent être regroupé selon 5 catégories

▪ Sélecteurs simples
sélectionnent des éléments selon leur type, leur id ou leur classe
▪ Sélecteurs combinés
sélectionnent des éléments selon leur situation dans l'arbre défini par l'imbrication des éléments
▪ Sélecteurs de pseudo-classe
sélectionnent des éléments en fonction de l'état dans lequel ils se trouvent
▪ Sélecteurs de pseudo-élément
sélectionnent et stylent une partie d'un élément
▪ Sélecteurs d'attributs
sélectionnent un élément selon la présence ou la valeur d'un attribut
39
SÉLECTEURS DE PSEUDO-ELEMENTS
permettent de donner un style à un contenu n’apparaissant pas dans le code source du document
comme étant un élément.
sélecteur : : pseudoElt{ déclaration ; déclaration }
Examples
• ::first-line
• ::first-letter
• ::before
• ::after
• ::selection
• …

40
LES DIFFÉRENTS TYPES DE SÉLECTEURS
sélecteur { propriété: valeur ; … }

Les sélecteurs sont utilisé pour sélectionner (trouver) les éléments HTML que l'on veut styler
• Les sélecteurs peuvent être regroupé selon 5 catégories

▪ Sélecteurs simples
sélectionnent des éléments selon leur type, leur id ou leur classe
▪ Sélecteurs combinés
sélectionnent des éléments selon leur situation dans l'arbre défini par l'imbrication des éléments
▪ Sélecteurs de pseudo-classe
sélectionnent des éléments en fonction de l'état dans lequel ils se trouvent
▪ Sélecteurs de pseudo-élément
sélectionnent et stylent une partie d'un élément
▪ Sélecteurs d'attributs
sélectionnent un élément selon la présence ou la valeur d'un attribut
41
SÉLECTEURS D’ATTRIBUT
Permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un
attribut

42
SÉLECTEUR UNIVERSEL
Sélecteur universel (*) sélectionne tous les éléments de la page

43
PROPAGATION DES STYLES DANS L’ARBRE
DES ÉLÉMENTS body racine

h1 h2 p h3 Classe div1

div p

44
PROPAGATION DES STYLES DANS L’ARBRE
DES ÉLÉMENTS body racine

h1 h2 p h3 Classe div1

div p Classe p1

45
CONFLIT CSS
Que se passe-t-il si plusieurs règles de style rentrent en conflit
(concernent une même propriété) ?
• 1er cas : une même classe CSS définit 2 fois avec une propriété en conflit

Quand tout est égal (même sélecteur, même propriété)


la dernière déclaration écrase les précédentes

46
CONFLIT CSS
Que se passe-t-il si plusieurs règles de style rentrent en conflit
(concernent une même propriété) ?
• 1er cas : une même classe CSS définit 2 fois avec une propriété en conflit
Quand tout est égal (même sélecteur, même propriété)
la dernière déclaration écrase les précédentes
Les conflits sont résolus propriété par propriété
• La déclaration border: solid 1px red de la 1 ère règle est conservée
• La déclaration color: red de la 1ère règle est remplacée celle de la 2ème règle

47
CONFLIT CSS
2ème cas : deux classes CSS différentes avec une propriété en conflit

la propriété color est définie dans deux règles dont les


sélecteurs (.surligne et .title) ont la même spécificité :
c’est la dernière déclaration qui écrase les autres

48
CONFLIT CSS
• 3ème cas : conflit entre plusieurs classes

Le sélecteur .surligne.title est plus spécifique que les autres (il ne


sélectionnera que les éléments ayant les deux classes), la propriété
color de cette règle écrase les déclarations des autres règles

49
LES RÈGLES DE STYLES
calcul de la spécificité d'une règle se style
Le sélecteur de classe .titre est plus spécifique que le sélecteur de
balise (tag). La propriété color de cette règle écrase celle de la
1 règle h1.

10 De manière générale une règle de style associée à un sélecteur de


classe est considéré comme plus spécifique qu’une règle de style
associée à un sélecteur de balise.

Une manière de déterminer la spécificité et de lui attribuer un poids :


• 10 si sélecteur de classe,
• 1 si sélecteur de balise.
La spécificité la plus grande l’emporte

50
LES RÈGLES DE STYLES
calcul de la spécificité d'une règle se style

Le sélecteur h1.title est plus spécifique que le sélecteur de classe


(tag) 11 .titre.
11

Spécificité de .titre = 10 (.titre classe)


10
Spécificité de h1.titre = Spécificité de .titre = 10 (.titre classe) 1 (h1 tag) + 10 (.titre
classe)

51
LES RÈGLES DE STYLES
calcul de la spécificité d'une règle se style

Le sélecteur alert.titre est plus spécifique que le sélecteur de


11 h1.titre lui même plus spécifique que le sélecteur .titre

20
Spécificité de .titre = 10 (.titre classe)
10
Spécificité de h1.titre = Spécificité de .titre = 10 (.titre classe) 1 (h1 tag) + 10
(.titre classe)

Spécificité de .alert.titre = 10 (.alert tag) + 10 (.titre classe)

52
LES RÈGLES DE STYLES
calcul de la spécificité d'une règle se style

100 Un sélecteur d’identifiant est plus spécifique que des sélecteurs de


classe eux-mêmes plus spécifiques que des sélecteurs de balises
11
Spécificité de .titre = 10 (.titre classe)
20
Spécificité de h1.titre = Spécificité de .titre = 10 (.titre classe) 1 (h1 tag) + 10 (.titre
10 classe)

Spécificité de .alert.titre = 10 (.alert tag) + 10 (.titre classe)


Spécificité de #le-titre = 100 (# id)

53
LES RÈGLES DE STYLES
calcul de la spécificité d'une règle se style

100 Une propriété avec !important est plus spécifique que toutes les
autres
11

1000

10

! important # id . class <tag>

54
PRIORITÉ DES RÈGLES
Si deux règles de style pouvant s'appliquer à un élément ont des déclarations
contradictoires, celles de la deuxième (dernière règle rencontrée) remplacent celles de
la première (la précédente) sauf si la première a un degré de priorité (c.a.d. de
spécificité) supérieur à la deuxième

Règle de calcul de degré de priorité (spécificité) : x1 x2 x3 x4


• x1 : 1 si style en ligne ou !important, 0 sinon
• x2 : nombre d’identifiants (#xxx) dans le sélecteur
• x3 : nombre de classes (.xxx) dans le sélecteur
• x4 : nombre d’éléments (tag) séparés par des espaces dans le sélecteur
55
LES DIMENSIONS DES BOITES
boîte rectangulaire matérialisant un élément composée de 3 parties :
• son contenu (contenu de l'élément : texte, image… autres éléments…)
• un cadre
• une bordure
• un marge interne (marge entre le contenu et la bordure)
• une marge externe
• marge entre le cadre et les boîtes matérialisant les éléments adjacents
dans le flux Marge externe
bordure
Marge interne

contenu

56
LES DIMENSIONS DES BOITES
La taille du contenu, le cadre et la marge externe d'une boîte peuvent
être contrôlés par des propriétés CSS.
Contenu Marge interne bordure Marge externe
Largeur et épaisseur Type, épaisseur épaisseur
hauteur et couleur
padding margin
Border-style
Width Border-width
height Border-color
Marge externe
bordure Border-width-top
Marge interne

Margin-left Width, height


contenu
padding-bottom

57
LES DIMENSIONS DES BOITES
• dimensions d'une boîte induites par son contenu + trois périmètres (margin, border ,
padding).
• margin, border, padding pas obligatoires
• valeurs par défaut
• 0 pour éléments en ligne et
• border = 0, margin et padding dépendent du navigateur pour les éléments bloc
-> fixer dans les feuilles de style CSS pour rendu indépendant du navigateur
Marge externe
bordure Border-width-top
Marge interne

Margin-left Width, height


contenu
padding-bottom

58
LES DIMENSIONS DES BOITES
Margin-top

Border-top

Padding-top

Margin- Border- Padding-


left left left contenu Padding-
right
Border-
right
Margin-
right

Padding-bottom

Border-bottom

Margin-bottom
59
STYLE DES BORDURES
• Bordures et arrière plan
• Possibilité d'entourer les éléments et de les doter d'un
arrière-plan (couleur, image)
• Propriétés
• border-style style applicable à tous les
• border-width épaisseur bords ou de chaque
côté
• border-color couleur
• background-color couleur arrière plan
• background-image image d'arrière plan
60
STYLE DES BORDURES
• border-style: <val> tous les côtés
• border-style
• border-style: <val1> <val2>
Dotted
• <val1> côtés horizontaux
Dashed
• <val2> côtés verticaux
Double
• border-style: <val1> <val2> <val3>
Groove • <val1> côté horizontal haut
Valeurs possibles
hidden • <val2> côtés verticaux
Inset • <val3> côté horizontal bas
none • possibilité de spécifier chaque côté
outset • border-left-style
• border-right-style
Ridge
• border-top-style
Solid • border-bottom-style 61
STYLE DES BORDURES
• border-width
• valeur numérique ex: border-width:5px (5 pixels)
• mots clés thin meduim thick

• border-color
• valeur numérique
• hexadécimale : #00ffff ou #0ff
• rgb : rgb(0,255,255) ou rgb(0,100%,100%)
• mot clé : cyan

62

Vous aimerez peut-être aussi