Important° Si vous êtes sur une machine sous Windows, pensez à aller dans affichage et demander d'afficher les extensions de fichier.
RAPPEL SUR LES PIXELS
Si on zoome sur une image :
Si on regarde de près l'un des pixels, on pourrait voir qu'il est composé de trois sous-pixels :
C'est pour cela qu'on parle de couleur RGB : on doit définir pour chaque pixel une valeur Rouge/Red, une valeur Vert/Green et une valeur Bleu/Blue.
Il existe un très grand nombre de façon de définir une couleur à l'aide du CSS.
La première façon d’imposer une couleur est d’utiliser un nom prédéfini en anglais :
background-color:green;
C'est pratique mais limité aux noms prédéfinis.
Quelques couleurs prédéfinies
Quelques couleurs disponibles par leurs noms puis leurs codes RGB décimal puis hexadécimal (avec le #)
Nom
Int. R
Int. G
Int. B
Exemple
Hexa
black
0
0
0
#000000
gray
128
128
128
#808080
silver
192
192
192
#C0C0C0
white
255
255
255
#FFFFFF
red
255
0
0
#FF0000
maroon
128
0
0
#800000
lime
0
255
0
#00FF00
green
0
128
0
#008000
blue
0
0
255
#0000FF
navy
0
0
128
#000080
aqua
0
255
255
#00FFFF
teal
0
128
128
#008080
fuchsia
255
0
255
#FF00FF
purple
128
0
128
#800080
yellow
255
255
0
#FFFF00
olive
128
128
0
#808000
La deuxième façon est de donner les intensités RGB.
1.1 Couleurs RGB en décimal
Principe
Votre écran est composé de pixels. Chaque pixel se décompose en trois sous-pixels ::
Une partie qui brille en Rouge / Red
Une partie qui brille en Vert / Green
Une partie qui brille en Bleu / Blue
L'intensité de chaque couleur est caractérisée par une valeur comprise entre 0 et 255 (un octet donc)
0 (aucune intensité, sous-pixel noir)
255 (la couleur la plus intense).
Utilisation en CSS
Si on veut du rouge pur et intense, il suffit d'écrire ceci :
style="background-color:rgb(255,0,0);"
donne l'impression de
Si on veut du vert pur et intense, il suffit d'écrire ceci :
style="background-color:rgb(0,255,0);"
donne l'impression de
Si on veut du bleu pur et intense, il suffit d'écrire ceci :
style="background-color:rgb(0,0,255);".
donne l'impression de
Il s'agit d'une synthèse de couleur additive contrairement au mélange de peintures qui est une synthèse soustractive. Cela veut dire que si vous voulez du jaune, il faut utiliser le rouge et le vert.
Si on veut du jaune pur et intense, il suffit d'écrire ceci
style="background-color:rgb(255,255,0);"
donne l'impression de
Si on veut du blanc , il suffit d'écrire ceci :
style="background-color:rgb(255,255,255);"
donne l'impression de
Si on veut du noir , il suffit d'écrire ceci :
style="background-color:rgb(0,0,0);"
donne l'impression de
✎ 01° Modifier la façon dont nous avons défini les couleurs en utiliser la méthode vue juste au dessus plutôt que de taper directement le nom d'une couleur prédéfinie.
<!DOCTYPE html><htmllang="fr"><head><title>Activité CSS</title><metacharset="UTF-8"></head><bodystyle="background-color:grey;"><headerstyle="background-color:red;"><h1>Mon super site</h1></header><navstyle="background-color:blue;"><p>Pas de menu de navigation pour le moment</p></nav><mainstyle="background-color:green;"><h1>Une page pour manipuler le CSS</h1><h2>1 Première partie</h2><p>Bla bla.</p><h2>2 Deuxième partie</h2><p>Encore du blabla.</p></main><footerstyle="background-color:yellow;"><h2>Contact</h2><p>Pour contacter le webmaster, il met normalement son adresse ici.</p><p>Pour l'instant, il préfère rester discret :</p><p>le contenu n'est pas très conséquent.</p></footer></body></html>
02° Utiliser les propositions ci-dessous (sur des balises de votre choix) pour voir les couleurs que cela représente à chaque fois :
style="background-color:rgb(100,100,100);"
style="background-color:rgb(200,200,200);"
style="background-color:rgb(200,0,0);"
style="background-color:rgb(100,0,0);"
style="background-color:rgb(50,0,0);"
style="background-color:rgb(100,100,0);"
La troisième façon de fournir une couleur est de donner le code hexa, ce qu’on appelle le code HTML : background-color: #aabbcc ;
1.2 Code RGB couleur HTML en hexadécimal
Principe R G B
On peut définir une couleur à partir des trois intensités
Rouge - Vert - Bleu (RVB en français) ou
Red - Green - Blue (RGB en anglais).
Dans le fichier CSS, on peut lire que pour h1, on a color:#333333;
#333333 veut dire qu'on a :
une intensité rouge de 33
33 pour le vert
et 33 pour le bleu.
Votre oeil reçoit un peu de rouge (33), un peu de vert (33) et un peu de bleu(33) en même quantité. Il interprète cela en gris foncé.
Valeurs possibles
De la couleur la moins intense (00) à la plus intense (FF), je vous propose de vous limiter à ceci :
Ci-dessus, x peut est n'importe quelle valeur de l'ensemble {0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F}
Ainsi une intensité rouge FB crée un rouge plus intense que F0.
Par contre, une intensité BF est moins forte que C0.
De même, une intensité B9 est moins forte que BA.
En conclusion : pour ne pas trop s'embêter avant de voir l'activité spécifique sur l'hexadécimal, on peut se concenter de doubler la lettre, ça fonctionne nécessairement aussi :
(minimum) 00 < 11 < 22 < ... 88 < 98 < AA < BB < CC < DD < EE < FF (maximum)
04° Quel code HTML hexadécimal fournir pour obtenir du blanc ? du noir du gris foncé ? du gris clair ?
R :
V :
B :
+
+
=
+
+
=
Attention, les valeurs non valides sont transformées en FF.
Cas qu'on rencontre parfois sur le Web
Inutile de l'apprendre pour la NSI.
Il est possible que les les trois intensités RGB soient représentées par trois associations de deux chiffres identiques en hexa :
La couleur #00FFFF soit 00 FF FF pourra alors être codée par #0FF.
Voyant uniquement trois chiffres, le navigateur va recréer le vrai code en doublant les nombres : #00FFFF.
05° Représenter un fond rouge sur l'une des balises en utilisant style="background-color:#F00;". Faire de même avec un fond bleu.
Une quatrième façon de fournir une couleur est de donner les composantes RGB en % :
1.4 Couleurs RGB avec des pourcentages
Principe
Votre écran est composé de pixels. Chaque pixel se décompose en trois sous-pixels ::
Une partie qui brille en Rouge / Red
Une partie qui brille en Vert / Green
Une partie qui brille en Bleu / Blue
L'intensité de chaque couleur est caractérisée par une valeur comprise entre 0 et 100 (un pourcentage donc)
0 (aucune intensité, sous-pixel noir)
100 (la couleur la plus intense).
Utilisation en CSS
Si on veut du rouge pur et intense, il suffit d'écrire ceci :
style="background-color:rgb(100%,0%,0%);"
donne l'impression de
Si on veut du vert pur et intense, il suffit d'écrire ceci :
style="background-color:rgb(0%,100%,0%);"
donne l'impression de
Si on veut du bleu pur et intense, il suffit d'écrire ceci :
style="background-color:rgb(0%,0%,100%);".
donne l'impression de
Si on veut du jaune pur et intense, il suffit d'écrire ceci
style="background-color:rgb(100%,100%,0%);"
donne l'impression de
Si on veut du blanc , il suffit d'écrire ceci :
style="background-color:rgb(100%,100%,100%);"
donne l'impression de
Si on veut du noir , il suffit d'écrire ceci :
style="background-color:rgb(0%,0%,0%);"
donne l'impression de
Pour du vert contenant un peu de rouge et de bleu, on obtient ainsi
style="background-color:rgb(20%,70%,30%);"
donne l'impression de
Vous pouvez faire un essai ou deux si vous voulez mais je pense que vous avez compris le principe. Et il n'est pas nécessaire de l'apprendre.
Nous allons maintenant créer un véritable CSS en dehors des pages HTML : cela nous permettra d'avoir le même aspect sur toutes les pages d'un même site. L'apparence sera centralisée dans un seul fichier. De cette façon, il suffit de changer la couleur dans ce fichier pour changer l'apparence de toutes les pages !
Utiliser trois des designs proposés dans les menus pour constater qu'on ne change que l'apparence : le texte reste identique mais la présentation change. Attention, la position des menus des designs changent aussi parfois. Il faut alors faire défiler la page pour le retrouver.
2.1 Principe du CSS : style de présentation
Nous obtenons une page contenant du texte et des menus permettant de changer l'apparence de la page, à savoir :
l'apparence du contenu,
la disposition du contenu
Le code à l'intérieur de l'élément <body> reste identique sur toutes ces pages si différentes !
On dit qu'on a changé le style de présentation (la forme) mais pas le fond (le contenu lui-même).
Nous allons voir dans cette activité :
qu'on fixe le contenu (le fond) via un fichier HTML
qu'on fixe l'apparence (la forme) via un fichier CSS
La seule différence entre les codes-source de ces différentes pages ? Une seule ligne située dans la balise head ! Elle indique la référence d'un lien à suivre (link en anglais) pour trouver le fameux fichier CSS :
Les fichiers d'extension .css sont des feuilles de style ("stylesheet") : il s'agit de fichiers qui contiennent des indications permettant au navigateur de savoir comment et où le concepteur de la page désire afficher le contenu des balises HTML.
07 ✔° Créer un nouveau répertoire nommé sntcss. Nous allons y placer les fichiers de cette activité.
08 ✔° Télécharger un à un les 6 fichiers suivants (à l'aide d'un clic-droit sur leurs noms et enregistrer la cible du lien sous) et les placer dans un répertoire nommé sntcss qu'il faudra créer au préalable :
Vous devriez obtenir la structure ci-dessus sur votre ordinateur.
Questions :
combien de fichier(s)-HTML trouve-t-on dans ce dossier ?
combien de fichier(s)-CSS ?
combien de fichier(s)-images ?
...CORRECTION...
3 fichiers HTML, un ficher CSS et 2 fichiers-images.
09° En regardant la disposition des différents fichiers, pourquoi les 3 fichiers HTML peuvent-ils localiser le fichier CSS en utilisant simplement une adresse RELATIVE du type href="mes_gouts.css".
...CORRECTION...
Tout simplement car ils sont situés dans le même répertoire.
📁 sntcss
📄 index.html
📄 liens_html.html
📄 liens_perso.html
📄 mes_gouts.css
🖼 html.png
🖼 python.jpg
(Rappel) 3.1 Adresses relatives et liens internes
Définition
Une adresse relative est une adresse qu'on donne par rapport à la localisation d'une autre ressource.
Une adresse relative est donc une adresse qui ne commence
ni par le nom d'un serveur
ni par le nom d'un disque dur ou d'un ordinateur
Application au Web
Imaginons que vous ayez deux pages HTML situées au même endroit.
📁 PAGES_WEB
📄 page_1.html
📄 page_2.html
Elles sont donc enregistrées dans le même répertoire nommé PAGES_WEB.
Pour créer un lien vers page_2.html depuis le code de page1.html, il suffit d'insérer une adresse relative et non pas une URL totale : on reste au même endroit, pas la peine de donner une adresse externe.
Imaginons trois fichiers (un html et deux images) placés dans le même dossier :
📁 travail
📄 ma_page.html
📄 mon_image.png
📄 mon_autre_image.png
Pour afficher les deux images à l'aide du fichier HTML ma_page.html, il suffit d'insérer ceci dans le code :
1
<imgsrc="mon_image.png">
1
<imgsrc="mon_autre_image.png">
On remarquera bien qu'il ne s'agit pas d'adresses absolues puisqu'elles ne contiennent ni nom de serveur, ni nom de disque dur.
On donne bien ici des adresses relativement à la position du fichier HTML dans laquelle se trouve cette ligne.
Comme on ne donne pas d'indication supplémentaire, cela veut dire qu'on doit chercher l'image dans le même répertoire que le fichier HTML.
10 ✔° Trois actions à réaliser :
Ouvrir vos 3 fichiers HTML dans un navigateur Web de façon à visualiser l'apparence obtenue.
Ensuite, rajoutez cette ligne à l'intérieur des balises <head>des 3 fichiers HTML.
<linkrel="stylesheet"href="mes_gouts.css">
Par exemple :
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html><html><head><metacharset="utf-8"/><title>Accueil HTML</title><linkrel="stylesheet"href="mes_gouts.css"></head><body><h1>Accueil</h1><p>Vers les liens <ahref="liens_html.html">HTML</a></p><p>Vers les liens <ahref="liens_perso.html">SNT</a></p></body></html>
Sauvegarder chaque fichier
Visualiser les nouvelles apparences obtenues.
Pas de changement dans l'apparence du site ? Pensez à demander de l'aide, ce n'est pas normal !
Moralité : nous avons réussi à créer une unité de ton sur nos trois pages en utilisant un seul fichier commun de configuration graphique : le fichier CSS (pour Cascading Style Sheets ) nommé "mes_gouts.css".
11° Faire bouger la souris sur la page pour tenter de voir s'il y a des animations.
Notre ensemble de fichiers forme un site dit statique.
Question : Statique veut-il dire que le site ne possède pas d'éléments qui bougent ?
...CORRECTION...
Statique fait référence au fait que les codes HTML et CSS sont toujours fournis à l'identique par le serveur HTTP qui les transmet. On ne peut pas enregistrer d'informations envoyées par un utilisateur sur un site statique.
Sur un site dynamique, le serveur peut recevoir des données, les enregistrer, lire des données dans sa propre base de données et renvoyer un code HTML ou CSS différents en fonction de la façon dont il a été programmé.
Comment utiliser le CSS ?
C'est relativement simple à comprendre lorsqu'on a le code sous les yeux.
3.3 Syntaxe du langage CSS
Exemple
Pour agir sur toutes les balises d'un même type, il faut juste noter son nom. Notez bien qu'en CSS, on note simplement son nom : a par exemple pour dire comment on veut agir sur toutes les balises de lien.
1
2
3
4
a{color:yellow;font-size:x-large;/* ou small, x-small, x-large, medium, ... */}
Les propriétés seront placées dans ce bloc {...} et indentées de façon à rendre le code plus clair.
Ici, on définit donc la façon dont on veut afficher les balises a :
"les textes de tous les liens seront écrits en jaune" est formulé ainsi : color:yellow;
"les textes de tous les liens sont de très grande taille" est formulé ainsi : font-size:x-large;
Généralisation
Chaque modification est donc codifiée de la même façon :
on note le nom des balises qu'on veut gérer.
on place une accolade d'ouverture
on donne le nom de la propriété suivi d'un double-point
on donne la nouvelle valeur de la propriété
on place un point-virgule pour indiquer la fin de la modification
on place une accolade de fermeture.
12 ✔° Ouvrir le fichier mes_gouts.css dans l'éditeur de texte. Observer le code pour essayer de voir pourquoi le texte des liens est assez grand et en jaune.
En voici un extrait :
1
2
3
4
a{color:yellow;font-size:x-large;/* ou small, x-small, x-large, medium, ... */}
Dernière remarque : on peut placer des commentaires en utilisant /* puis */. Le texte situé entre les deux sera alors uniquement destiné au lecteur humain du code.
13 ✌° Modifier le code pour que les liens apparaissent dans une autre couleur et avec une taille différente de celle proposée de base dans le fichier CSS.
Vous pourriez ainsi utiliser xx-large, large, medium, small, x-small, xx-small.
...CORRECTION...
1
2
3
4
a{color:orange;font-size:xx-large;/* ou small, x-small, x-large, medium, ... */}
3.4 CSS sous condition
Le CSS permet également de gérer des conditions d'états.
Par exemple, nous pouvons modifier les apparences lorsqu'on survole une balise. On utilise alors :hover derrière le nom de la balise à gérer de cette façon.
1
2
3
4
a:hover{color:yellow;font-size:x-large;/* ou small, x-small, x-large, medium, ... */}
Dans ce cas, les modifications ne seront faites qu'après survol du lien par la souris.
14° Quelle est la traduction de l'attribut background-color ? Rajouter un attribut background-color au survol des éléments a. Vous pourriez leur définir un fond rouge par exemple.
...CORRECTION...
background-color correspond à la couleur de fond.
1
2
3
4
5
a:hover{color:yellow;background-color:red;font-size:x-large;/* ou small, x-small, x-large, medium, ... */}
3.5 Sélection multiple
On peut vouloir modifier à l’identique deux balises. Imaginons qu’on veille rendre identique le header et le footer.
On peut alors écrire une seule accolade en séparant les éléments identiques par des virgules
1
2
3
4
header,footer/* Les deux auront les mêmes effets de forme */{background-color:#AAAA00;}
De la même façon, il est toujours possible de mettre plusieurs propriétés entre les accolades :
1
2
3
4
5
header,footer/* Les deux auront les mêmes effets de forme */{background-color:#AAAA00;color:#5555AA;}
3.6 Passage à la ligne dans le CSS
Comme HTML, CSS n'accorde aucune valeur sémantique aux sauts de lignes et aux espacements multiples. La présentation usuelle est de tabuler de façon à comprendre rapidement l’enchaînement des propriétés associées à la balise.
Lorsqu'une balise ne comporte pas beaucoup de propriétés, on peut également supprimer une grande partie des espaces et tabulations pour gagner en lisibilité.
Nous savons maintenant comment modifier l'affichage des paragraphes (tous) ou des titres h1 (tous). Mais comment faire pour modifier certains paragraphes, mais pas tous ?
Ici, c'est normalement totalement nouveau.
4.1 Les classes CSS
A - Attribut class en HTML
Pour afficher de la même façon une sélection précise de balises, il faut leur appliquer un attribut classe ayant la même valeur.
Voici un exemple où deux paragraphes sont affichés de la même façon alors que deux autres ont leurs propres couleurs d'affichage :
Paragraphe 1 : Ce paragraphe est affiché comme un paragraphe classique.
Paragraphe 2 : Ce paragraphe devra être différent du premier.
Paragraphe 3 : Ce troisième paragraphe s'affiche comme le précédent.
Paragraphe 4 : Ce paragraphe devra être d'un autre type encore.
Dans le fichier HTML, on aurait un code de ce type par exemple :
1
2
3
4
<p>Paragraphe 1 : Ce paragraphe est affiché comme un paragraphe classique.</p><pclass="mon_premier_type">Paragraphe 2 : Ce paragraphe devra être différent du premier.</p><pclass="mon_premier_type">Paragraphe 3 : Ce troisième paragraphe s'affiche comme le précédent.</p><pclass="mon_second_type">Paragraphe 4 : Ce paragraphe devra être d'un autre type encore.</p>
On peut donc voir que les paragraphes 2 et 3 ont la même valeur d'attribut class.
B - Agir sur les classes depuis le CSS
Pour agir sur les balises ayant cette classe depuis le fichier CSS, il faut utiliser une nouvelle syntaxe : on utilise un point suivi du nom de la classe voulue :
.mon_premier_type{} se traduit donc en CSS par "Voici les propriétés à appliquer sur toutes les balises ayant la classe "mon_premier_type".
C - Affichage de l'exemple
Le premier paragraphe n'a pas de classe : il est donc afficher comme un paragraphe normal.
Les paragraphes 2 et 3 ont la même classe : ils s'affichent de la même façon.
Le paragraphe 4 est le seul à avoir cette classe : il a son propre style d'affichage.
✎ 15° Récuperer votre fichier chanson.html.
Rajouter une balise <link> dans sa balise <head> pour signaler la présence d'un fichier CSS qu'on nommera chanson.css par exemple.
Rajouter à chacune de vos strophes une classe CSS nommée pair et impair en alternance.
Créer le fichier CSS chanson.css en lui indiquant comment afficher les balises dont la classe est pair et la façon d'afficher les balises dont la classe est impair.
Pensez à régarder les points de cours ci-dessous pour parvenir à choses un peu nouvelles ou originales.
Les classes constituent l'un des grands outils de flexibilité du CSS.
Parfois néanmoins, on veut uniquement modifier une vingtaine de paragraphes qui se suivent. Placer une classe dans chaque paragraphe semble un peu long... Comment faire cela plus rapidement ?
(Rappel) 4.2 Balise div ("block")
La balise div est une balise de type block qui n'a aucune sémantique associée. Il s'agit juste d'un conteneur capable de contenir plusieurs autres balises.
Son intérêt est donc principalement de pouvoir partager ses propriétés de fond coloré avec ses enfants.
On dit qu'elle est la balise block générique, celle qu'on utilise lorsqu'on ne sait pas quelle autre balise utiliser.
24
25
26
27
28
<divstyle="background-color:olive"><p>Bla bla.</p><p>Encore du Bla bla.</p><p>Toujours du Bla bla.</p></div>
4.3 Fournir une classe à une balise div ("block")
A - Principe
Fournir une classe avec la <div> et la faire contenir les éléments qu'on veut contrôler. Ce n'est donc vraiment la <div> qu'on veut gérer mais bien les éléments qu'elle contient.
01
02
03
04
05
06
07
08
<body><divclass="mon_effet"><p>Bla bla.</p><p>Encore du Bla bla.</p><p>Toujours du Bla bla.</p></div><p>Texte hors de la div.</p></body>
B - Imposer les propriétés de la <div> à ses enfants
C'est la règle par défaut mais, parfois, les règles CSS sont en conflit l'une par rapport à l'autre. N'étant pas des spécialistes du CSS, vous ne connaissez pas encore les règles de priorité qui permettent au navigateur de faire son choix.
Si le résultat visuel ne correspond pas à votre attente, vous pouvez forcer certaines balises à hériter de leur mère.
Il suffit d'indiquer la propriété en lui associant la valeur inherit.
01
02
03
04
05
06
07
08
<body><divclass="mon_effet"><p>Bla bla.</p><p>Encore du Bla bla.</p><p>Toujours du Bla bla.</p></div><p>Texte hors de la div.</p></body>
Ici, le CSS est clair : les paragraphes des lignes 3-4-5 hériteront des proprités de leur mère div alors que le paragraphe de la ligne 7 héritera des propriétés de la balise englobante body.
16° Repartons dans chanson.html. Entourer les deux paragraphes sous le titre (celle expliquant de quoi parle la chanson et de quel style musical elle est issue) d'une div munie d'une classe. En ne jouant que sur le CSS de cette classe, vérifier que l'apparence des paragraphes internes a bien été modifiée.
C'est bien beau tout ça mais l'élément <div> est de type block. Cela veut dire qu'à chaque fois qu'on l'utilise on passe à la ligne. On ne peut donc pas les utiliser pour modifier un bout de texte dans un paragraphe uniquement.
Pour cela, il y a <span>.
4.4 Fournir une classe à une balise span ("inline")
Une balise-conteneur <span> est une balise inline. Elle ne peut donc pas contenir n'importe quelle balise : elle ne doit contenir que des balises de type inline.
Un petit exemple pour la forme. Si dans le HTML on tape
1
<p>Lorem ipsum dolor <spanclass="mon_premier_type">sit amet, consectetur adipiscing</span> elit, sed do eiusmod</p>
Maintenant que vous avez bien compris qu'on sépare fond(html) et forme(css), vous avez également vu que c'est parfois long de devoir réaliser deux fichiers et s'assurer de la liaison...
Lorsqu'on veut juste vérifier un petit truc, on se sent parfois décourager à l'idée de devoir faire tout cela, juste pour tester.
On peut faire plus simple (mais c'est une mauvaise pratique sur une vraie réalisation).
5 Balise style pour réaliser un prototype rapide
Plutôt que de mettre le CSS dans un fichier à part (c'est bien), de mettre le CSS directement dans la balise d'entrée avec l'attribut style (c'est pas bien), on peut faire entre les deux : mettre du CSS dans une balise style située dans le HTML mais permettant d'isoler le CSS dans une zone précise. Pas top mais rapide.
<body><divclass="mon_effet"><p>Bla bla.</p><p>Encore du Bla bla.</p><p>Toujours du Bla bla.</p></div><p>Texte hors de la div.</p><style>.mon_effet{color:yellow;background-color:black;font-size:x-large;}</style></body>
text-align permet de gérer l’alignement. Place-t-on l’élément en l’alignant à gauche, en le centrant ou en l’alignant à droite. Ou le texte est-il justifié ?
Elle n'agit que sur les balises "block".
Exemples
Avec text-align: left;: on voit que les lignes affichées commencent bien à gauche.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Avec text-align: center; : on voit que chaque ligne est centrée.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Avec text-align: right; : on voit que les lignes affichées fnissent totalement à droite.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Avec text-align: justify; : cette fois, le texte est aligné à gauche et à droite. Comment ? En jouant sur les espaces entre les mots.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ces propriétés permettent de choisir la largeur d'affichage (ou la hauteur d'affichage) des balises de type block ou inline-block.
Exemples
Vous savez déjà choisir la largeur d'UNE image en utilisant un attribut dans sa balise.
Mais on peut aussi choisir la largeur de TOUTES les images en utilisant cette propriété.
Pour définir que toutes les images auront 150 px de large :
1
img{width:150px;}
Pour définir que toutes les images occuperont 50% de la largeur de leur balise-conteneur :
1
img{width:50%;}
Pour revenir à la configuration de base :
1
img{width:auto;}
6.7 Unités de mesures
Il existe beaucoup trop d'unités différentes pour les décrire toutes. En voici quelques unes des plus courantes.
Pixels : px
Il s'agit d'une unité en liaison directe avec le nombre de pixels de l'écran de l'utilisateur.
C'est celle que vous utilisez depuis le départ de ces activités normalement.
Exemple
1
img{width:150px;}
Avantage : simplicité d'utilisation.
Défaut : la diversité des tailles d'écran fait qu'il est difficile de faire une interface graphique compatible à la fois pour un écran d'ordinateur et de smartphone.
Pourcentage : %
Il s'agit d'une unité relative à la taille du conteneur de votre balise.
Exemple
1
img{width:50%;}
Si le conteneur de l'image fait 1800 pixels de large, l'image fera 900 pixels de large.
Avantage : simplicité d'utilisation et en lien avec la résolution de l'écran.
Défaut : l'affichage peut être trop petit sur les petits écrans ou bien trop grand sur les grands.
Il existe bien entendu des moyens d'encadrer ces valeurs. Voir l'activité "Plus de CSS" (en cours de réecriture).
Taille de police d'écriture de l'élément parent : em
Il s'agit d'une unité relative à la taille utilisée pour l'écriture.
Exemple
1
img{width:10em;}
Si la police est déclarée à 20 px, l'image fera 200 pixels de large (en gros 20 caractères).
Avantage : liée directement à la visibilité puisque liée à l'écriture. A éviter pour les images car le zoom peut la rendre très grande et inexploitable.
Défaut : pas intuitif.
Largeur de la fenêtre : vw
Il s'agit d'un pourcentage relatif à la largeur (width) de la fenêtre du navigateur (viewport).
Exemple
1
img{width:50vw;}
Si vous redimmensionnez la fenêtre, l'image fera toujours 50% de la largeur de la fenêtre. Dès qu'on touche à la fenêtre, la vue est donc modifiée.
Avantage : très interactif.
Défaut : ca peut mal tourner avec certains redimensionnement. A éviter pour les textes donc.
Activité publiée le 19 11 2023
Dernière modification : 19 11 2023
Auteur : ows. h.
