Rappel CSS

Identification

Infoforall

3 - Rappels sur le CSS


Nous avons déjà revu deux propriétés CSS :

  • background-color pour choisir la couleur de fond.
  • color pour choisir la couleur du texte.

Pour l'instant, le code CSS était placé directement dans le code HTML à l'aide de l'attribut style.

En voici quelques exemples

7 8 11 14 21
<body style="background-color:grey;"> <header style="background-color:red;"> <nav style="background-color:blue;"> <main style="background-color:green;"> <footer style="background-color:yellow;">

Nous allons voir comment placer ces codes en dehors du HTML en lui-même.

Logiciels : Il faudra utiliser un éditeur de code. On propose ici d'utiliser Atom produit par Githhub, aujourd'hui possédé par Google, ou Notepad ++ (Notepadqq sur Linux). Sublim Text est également une alternative de qualité.

Evaluation ✎ : 01-10

1 - Les couleurs et leurs codes

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 (ce qu’on a fait juste au dessus avec red, green, yellow …) : background-color:green; fonctionne très bien.

La deuxième façon est de donner les intensités RGB :

Couleurs RGB en décimal

votre écran est composé de pixels. Et chaque pixel se décompose en trois parties :

  • Une partie qui brille en Rouge / Red
  • Une partie qui brille en Vert / Green
  • Une partie qui brille en Bleu / Blue

Chaque couleur peut-être plus ou moins intense de 0 (aucune intensité, sous-pixel noir) à 255 (la couleur la plus intense).

Si on veut du rouge pur et intense, il suffit d'écrire ceci : style="background-color:rgb(255,0,0);".

Si on veut du vert pur et intense, il suffit d'écrire ceci : style="background-color:rgb(0,255,0);".

Si on veut du bleu pur et intense, il suffit d'écrire ceci : style="background-color:rgb(0,0,255);".

Il s'agit d'une synthèse de couleur additive contrairement au mélange de peintures qui est un 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);".

Si on veut du blanc, il suffit d'écrire ceci : style="background-color:rgb(255,255,255);".

Si on veut du noir, il suffit d'écrire ceci : style="background-color:rgb(0,0,0);".

✎ 01° Modifier la façon dont nous avons défini les couleurs en utiliser la méthode numérique vue juste au dessus plutôt que de taper directement le nom d'une couleur.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<!DOCTYPE html> <html lang="fr"> <head > <title>Activité CSS</title> <meta charset="UTF-8"> </head> <body style="background-color:grey;"> <header style="background-color:red;"> <h1>Mon super site</h1> </header> <nav style="background-color:blue;"> <p>Pas de menu de navigation pour le moment</p> </nav> <main style="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> <footer style="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 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);".

Voilà un court extrait des couleurs disponibles par leurs noms puis leurs codes RGB en décimal puis par un code hexadécimal (que nous allons voir juste après) :

NomInt. RInt. GInt. BExempleHexa
black000#000000
gray128128128#808080
silver192192192#C0C0C0
white255255255#FFFFFF
red25500#FF0000
maroon12800#800000
lime02550#00FF00
green01280#008000
blue00255#0000FF
navy00128#000080
aqua0255255#00FFFF
teal0128128#008080
fuchsia2550255#FF00FF
purple1280128#800080
yellow2552550#FFFF00
olive1281280#808000

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 ;

Couleurs RGB en hexadécimal

C'est le même principe qu'en décimal : on donne les trois intensités RGB dans l'ordre mais on fait précéder les valeurs par un dièse  #  pour signaler qu'il s'agit du code hexadécimal :

background-color: #RRGGBB;

On code donc les trois intensités rouge - vert - bleu à l'aide d'un nombre en utilisant l'hexadécimal plutôt que le décimal.

Chaque couleur peut-être plus ou moins intense de 0 (aucune intensité, sous-pixel noir) à 255 (la couleur la plus intense).

Si on veut du rouge pur et intense, il suffit d'écrire ceci : style=background-color:#FF0000;". On met donc le rouge à FF et les autres à 00.

Si on veut du vert pur et intense, il suffit d'écrire ceci : style="background-color:#00FF00;". On met donc le vert à FF et les autres à 00.

Si on veut du bleu pur et intense, il suffit d'écrire ceci : style="background-color:#0000FF;". On met le bleu à FF et les autres à 0.

Il s'agit d'une synthèse de couleur additive contrairement au mélange de peintures qui est un 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:#FFFF00;".

Si on veut du blanc, il suffit d'écrire ceci : style="background-color:#FFFFFF;".

Si on veut du noir, il suffit d'écrire ceci : style="background-color:#000000;".

03° Utiliser quelques unes des couleurs sous forme de code hexadécimal.

C’est la façon la plus courante de présenter une couleur en HTML.

Nous verrons dans la partie suivante comme on utilise la base 16, l'hexadécimal.

Hexadécimal version mini rikiki

Pour l'instant, on pourra se contenter de cela : les intensités sont comprises de 00 (0 en décimal) à FF (255).

On notera que les intensités suivantes sont d'autant plus fortes que la première position est proche de F : (ci-dessous, x peut prendre n'importe quelle valeur de l'ensemble 0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F)

0x < 1x < 2x < ... 8x < 9x < Ax < Bx < Cx < Dx < Ex < Fx <

Ainsi une intensité rouge FB crée un rouge plus intense que F0.

Par contre, une intensité BF est moins forte que C0.

04° Faire quelques tests de couleurs données sous forme de code hexadécimal.

Cas particulier : il est possible que les trois intensités RGB soit représentée par trois doublets 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 %, 100% représentant 255 : pour du rouge, on obtient ainsi style="background-color:rgb(20%,50%,30%);"

Vous pouvez faire un essai ou deux si vous voulez mais je pense que vous avez compris le principe.

Nous allons voir maintenant comment créer un fichier CSS. De cette façon, toutes vos pages pourront pointer vers le même fichier CSS et donc utiliser toutes les mêmes propriétés CSS.

Les fichiers HTML ont comme extension .html ou .htm.

Les fichiers CSS ont eux une extension en .css.

2 - Création des fichiers

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 !

Pour faire apparaître la barre des menus d'Atom, il faut utiliser  ALT .

06° Créez et enregistrez un nouveau document (vide pour l'instant) avec Notepad++, Notepadqq ou Atom. Précisez bien un encodage UTF-8 et que le langage est le CSS. Enregistrer le fichier sous le nom style_1.css.

Après l'avoir créé, vous devriez avoir cela dans votre répertoire de travail :

📁 votre dossier de travail

📄 ma_page.html

📄 style_1.css

07° Créer et enregistrer un nouveau fichier, cette fois de type HTML en utilisant le code suivant. Vérifiez bien que dans la balise head le fichier CSS indiqué dans la balise soit bien nommé style_1.css.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>CSS à part (page 1)</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <header> <h3>Premiers pas à un CSS à part (page 1)</h3> <p>La phrase est située dans mon header</p> </header> <nav> <p>Retour à l'accueil</p> </nav> <main> <h1>Page 1 de l'article.</h1> <p>C'est ici que commence vraiment l'article.</p> <h2>Partie A</h2> <p>Blabla.</p> <h2>Partie B</h2> <p>Blabla.</p> </main> <footer> <p>Pour contacter le webmaster</p> </footer> </body> </html>

08° Créer et enregister sous un autre nom le nouveau code HTML fourni ci-dessous pour modéliser une autre page de votre site. On notera que la balise <link> pointe le même fichier CSS.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>CSS à part (page 2)</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <header> <h3>Premiers pas à un CSS à part (page 2)</h3> <p>La phrase est située dans mon header</p> </header> <nav> <p>Retour à l'accueil</p> </nav> <main> <h1>Page 2 de l'article</h1> <p>Blabla d'introduction.</p> <h2>Partie C</h2> <p>Blabla.</p> <h2>Partie D</h2> <p>Blabla.</p> </main> <footer> <p>Pour contacter le webmaster</p> </footer> </body> </html>

Vous avez donc désormais deux pages HTML pointant vers le même fichier css nommé style_1.css. Si on modifie le code css cela va donc automatiquement modifier la forme sur les deux pages. L’uniformité entre les différentes pages est ainsi garantie.

📁 votre dossier de travail

📄 ma_page.html

📄 la_page_2.html

📄 style_1.css

09° Ouvrir vos deux pages HTML dans le navigateur. Les couleurs doivent avoir totalement disparues : nous sommes revenus aux modes par défaut pour lesquelles la couleur de fond est toujours le blanc.

La structure est posée. Il reste à remettre un peu de couleur sur les pages.

3 - Remplissage du fichier CSS

Dans le fichier HTML, nous avons appliqué le CSS directement dans une balise. Il n'était donc pas nécessaire de préciser sur quelle balise Nous allons devoir préciser sur quelle balise la couleur de fond (background-color) doit s’appliquer.

Codification CSS

Les indications liées à la modification de l'apparence des balises devront être notées dans le fichier CSS ( ici le fichier style_1.css).

La codification est la suivante si on veut par exemple avoir un menu de navigation colorée  :

1 2 3 4
nav /* Voilà un commentaire : c'est ici qu'on modifie la forme de nav */ { background-color:#AAAA00; }

Ici, on voit que nous allons modifier la façon dont les balises <nav> vont être affichées : au vu des intensités Rouge et Verte, on voit que nous désirons une teinte jaunatre.

Attention, il suffit de noter le nom du type de balises : il ne faut pas noter les signes < et >.

On remarquera l’utilisation des accolades ou brackets { et } pour signaler le début et la fin des informations de forme s’appliquant à la balise précisée en début d’accolades.

Sur ces balises, nous allons définir une propriété CSS (couleur de fond, background-color) à la valeur #AAAA00.

On code la fin de l’instruction par un point-virgule, ne l’oubliez pas.

J’ai rajouté tout de suite la façon de faire des commentaires. Résumons la façon de faire des commentaires :

En Python : # Commentaires

En HTML : <!-- Commentaires -->

En CSS : /* Commentaires */

✎ 10° Rajouter les noms des balises body, header, nav, main et footer dans le CSS et définissez un ensemble de propriétés-couleurs de fond (via la propriété background-color) et de couleur de texte (via la propriété color) qui ne vous fera pas trop mal aux yeux.

Vous pouvez faire une recherche sur un moteur de recherche de façon à trouver un site d'infographie présentant des méthodes de choix de couleurs adaptées. Il y a plein de sites de ce genre.

Codification 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 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; }
Apparence du code CSS

Comme pour le HTML, le CSS ne lit pas les sauts de lignes et les 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é.

On aurait très bien pu simplement noter sur la question précédente :

1
body { color:rgb(100,100,100); }

11° Imposer maintenant que le texte des paragraphes (uniquement le texte des paragraphes) soit jaune.

...CORRECTION...

1
p { color:yellow; }

4 - Les classes

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 ?

Utilisation des classes

La méthode consiste à appliquer un attribut classe ayant la même valeur aux balises qu'on veut voir afficher à l'identique.

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> <p class="mon_premier_type">Paragraphe 2 : Ce paragraphe devra être différent du premier.</p> <p class="mon_premier_type">Paragraphe 3 : Ce troisième paragraphe s'affiche comme le précédent.</p> <p class="mon_second_type">Paragraphe 4 : Ce paragraphe devra être d'un autre type encore.</p>

Dans le fichier CSS, on aurait un code de ce type par exemple :

1 2 3 4 5 6 7 8 9 10
.mon_premier_type { font-style: italic; background-color: grey; color : white; } .mon_second_type { text-decoration : line-through; background-color: silver; }

On notera que le nom de la classe dans le CSS est précédé d'un point.

On voit bien que les paragraphes 2 et 3 ont la même apparence puisqu'ils dépendent de la même classe CSS.

12° Recréer cet affichage ou une variante de votre invention (en utilisant au moins deux classes différentes) sur votre propre page HTML.

Les classes constituent l'un des grands outils de flexibilité du CSS.

Voici quelques propriétés CSS que vous pourriez utiliser

text-align

Propriété importante pour avoir un rendu correct : l’alignement ou text-align. C’est à dire : Place-t-on l’élément en l’alignant à gauche, en le centrant ou en l’alignant à droite. Ou le texte est-il justifié  ?

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, on commence à gauche et on finit à 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.

text-decoration

Propriété suivante : le soulignement ou text-decoration. On trouve 4 valeurs pour cette propriété :

Aucune soulignement : text-decoration: none;

Ce qui donne Lorem ipsum dolor sit amet, consectetur adipiscing elit

Soulignement (normal) : text-decoration: underline;

Ce qui donne Lorem ipsum dolor sit amet, consectetur adipiscing elit

Surlignement (ligne au dessus du texte, pas en dessous) : text-decoration: overline;.

Ce qui donne Lorem ipsum dolor sit amet, consectetur adipiscing elit

Trait à travers le texte : text-decoration: line-through;.

Ce qui donne Lorem ipsum dolor sit amet, consectetur adipiscing elit

font-size

Du plus petit au plus grand, nous avons  :

  • Très petit : font-size: xx-small;
  • Plus petit : font-size: x-small ;
  • Petit : font-size: small ;
  • Moyen : font-size: medium ;
  • Grand : font-size: large;
  • Plus grand : font-size: x-large;
  • Très grand : font-size: xx-large;
font-weight

Pour le gras, il y a la propriété font-weight.

Pour mettre le texte de la balise en gras, il faut utiliser : font-weight: bold; avec un exemple

pour forcer une balise normalement en gras, il faut utiliser cette valeur de la propriété : font-weight: normal; avec un exemple

Parfois néanmoins, on veut uniquement modifier une vingtaine de paragraphes qui se suivent. Placer une classe dans chaque paragraphe semble un peu long...

5 - Classes et balises génériques

Balises génériques div et span

On peut englober plusieurs balises à l'aide d'une balise dite générique, car elle ne dispose pas de signification précise en terme de contenu (contrairement à <body>, <nav> ...)

L'intérêt ? Les propriétés CSS de la balise-conteneur générique vont s'appliquer sur les balises contenues dans le conteneur. Ainsi, si on englobe 20 paragraphes dans une balise conteneur, les 20 paragrahes vont subir les propriétés CSS du conteneur. Inutile d'affecter une classe aux 20 paragraphes.

Si on veut créer une balise générique de type block (avec passage à la ligne; comme p, h1...), on utilise <div> et </div> pour englober les autres.

Si on veut créer une balise générique de type inline (sans passage à la ligne; comme strong, em...), on utilise <span> et </span> pour englober les autres.

Utilisation de div

Une balise-conteneur <div> est une balise block. Elle peut donc contenir n'importe quelle balise, block ou inline.

Exemple : on veut 4 paragraphes à la suite réagissant de même façon.

On peut créer une balise <div> de classe mon_premier_type, on peut écrire dans le HTML :

1 2 3 4 5 6 7 8
<div class="mon_premier_type" > <p>"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.</p> <p>"At ipsum vitae est lacinia tincidunt. Maecenas elit orci,gravida ut, molestie non, venenatis vel, lorem. Sedlacinia. Suspendisse potenti. Sed ultricies cursuslectus. In id magna sit amet nibh suspicit euismod.Integer enim. Donec sapien ante, accumsan ut,sodales commodo, auctor quis, lacus. Maecenas a elitlacinia urna posuere sodales. Curabitur pede pede,molestie id, blandit vitae, varius ac, purus. Mauris atipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel,lorem. Sed lacinia. Suspendisse potenti. Sed ultrucies cursus lectus. In id magna sit amet nibhsuspicit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctorquis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id,blandit vitae, varius ac, purus.</p> <p>"Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodaleseget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementumpurus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin alorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus.Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a,nulla..</p> <p>"Phasellus placerat purus vel mi. In hac habitasse platea dictumst. Donec aliquam porta odio. Ut facilisis. Donec ornareipsum ut massa. In tellus tellus, imperdiet ac, accumsan at, aliquam vitae, velit..</p> </div>

On voit que c'est la balise div qui porte la classe. Toutes les balises contenues dans la balise div subissent donc les modifications de mise en page. Pratique.

Voilà ce que cela donne en utilisant la classe définie dans la partie 2.

"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.

"At ipsum vitae est lacinia tincidunt. Maecenas elit orci,gravida ut, molestie non, venenatis vel, lorem. Sedlacinia. Suspendisse potenti. Sed ultricies cursuslectus. In id magna sit amet nibh suspicit euismod.Integer enim. Donec sapien ante, accumsan ut,sodales commodo, auctor quis, lacus. Maecenas a elitlacinia urna posuere sodales. Curabitur pede pede,molestie id, blandit vitae, varius ac, purus. Mauris atipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel,lorem. Sed lacinia. Suspendisse potenti. Sed ultrucies cursus lectus. In id magna sit amet nibhsuspicit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctorquis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id,blandit vitae, varius ac, purus.

"Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodaleseget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementumpurus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin alorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus.Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a,nulla..

"Phasellus placerat purus vel mi. In hac habitasse platea dictumst. Donec aliquam porta odio. Ut facilisis. Donec ornareipsum ut massa. In tellus tellus, imperdiet ac, accumsan at, aliquam vitae, velit..

13° Rajouter le test précédent sur votre propre page de façon à parvenir à imposer une uniformité de forme à plusieurs balises en utilisant la méthode de la balise div : il faut inclure vos balises dans la balise div et définir une classe sur la balise div.

C'est bien beau tout ça mais la balise 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 la balise <span>.

Utilisation de span

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 <span class="mon_premier_type">sit amet, consectetur adipiscing</span> elit, sed do eiusmod</p>

Cela donne ceci en faisant li lien avec le CSS précédentt :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

Ces deux balises couplées aux classes permettent de faire beaucoup de choses

14° On voudrait avoir les trois premiers mots et les trois derniers mots d'un paragraphe en vert. Il faudra utiliser une classe et deux spans.

Vous pouvez utiliser le code ci-dessous pour votre paragraphe :

1
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>

Il faudra le modifier en rajoutant les balises span autour des mots voulus.

Reste ensuite à définir la classe CSS.

...CORRECTION...

Dans HTML :

1
<p><span class="trois_mots">Lorem ipsum dolor</span> sit amet, consectetur adipiscing elit, <span class="trois_mots">sed do eiusmod</span></p>

Le CSS :

1
.trois_mots { color:#00FF00; }

6 - Width et height

Dernière propriété bien pratique pour réaliser des interfaces.

Il existe beaucoup de sites très bien réalisés pour décrire ces propriétés CSS.

Allez donc voir width (largeur) sur le site de w3school.

Pensez à lire le texte et à cliquez sur TRY YOURSELF pour aboutir sur la page interactive.

Idem pour la propriété heigth (hauteur) : site de w3school.

Il y a encore beaucoup de subtilités à connaitre sur le htlm ou le css. Mais vous en savez maintenant assez pour parvenir à réaliser des pages justes correctes. Reste à voir comment les rendre dynamiques avec le javascript.

Activité publiée le 11 12 2019
Dernière modification : 13 04 2020
Auteur : ows. h.