3 - Rappels sur le CSS

⏪

⏬

⏩

1 - Couleurs

2 - Création

3 - remplissage

4 - Classes

5 - div span

6 - width height

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

<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-12-14

Documents de cours : open document ou pdf

Résumé : Version HTML ou imprimable ou PDF (couleur ou gris)

1 - Les couleurs et leurs codes

⇩ ⇧ ⤊

Si on zoome sur une image :

Le zoom

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;

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

L'intensité de chaque couleur est caractérisée par une valeur comprise entre 0 et 255

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);"

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 numérique RBG vue juste au dessus plutôt que de taper directement le nom d'une couleur.

<!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) :

Nom	Int. R	Int. G	Int. B	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 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

minimum avec 0 (aucune intensité, sous-pixel noir)
maximum avec FF (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 donc le bleu à FF et les autres à 00.

Si on veut du jaune pur et intense, il suffit d'écrire ceci :

style=background-color:#FFFF00;"

On met donc rouge et vert à FF et le bleu à 00.

Si on veut du blanc pur et intense, il suffit d'écrire ceci :

style=background-color:#FFFFFF;"

On met donc toutes les intensités au maximum hexadécimal.

Si on veut du noir pur et intense, il suffit d'écrire ceci :

style=background-color:#000000;"

On met donc toutes les intensités au minimum hexadécimal.

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 entre

Le minimum : 00 (0 en décimal)
Le maximum : FF (255 en décimal).

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.

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 % :

Minimum 0% (0 en décimal et en hexadécimal)
Maximum 100% (255 en décimal ou FF en hexadécimal)

Pour du vert contenant un peu de rouge et de bleu, on obtient ainsi

style="background-color:rgb(20%,70%,30%);"

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.

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° Réaliser les tâches suivantes :

Créer un nouveau répertoire nommé vraicss,
Créez et enregistrez un nouveau document sous le nom style_1.css (gardez le fichier totalement vide pour l'instant) avec votre éditeur de code. Précisez bien un encodage UTF-8 et que le langage est le CSS.

Vous devriez avoir cela dans votre répertoire de travail :

📁 vraicss

📄 style_1.css

07° Créer et enregistrer un fichier HTML nommé ma_page.html en utilisant le code ci-dessous.

On notera la présence d'une nouvelle balise nommée <link>. Elle est contenue dans la balise <head> qui contient les indications hors contenu pur qu'on veut fournir au navigateur.

<!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>

Notez la ligne 7 : dans la balise <head>, on indique avec une balise <link> d'aller lire du CSS dans le fichier nommé style_1.css.

Vous devriez avoir deux fichiers au même endroit. Ils peuvent donc "se trouver" juste àl 'aide d'une adresse relative composée du nom du fichier à trouver.

📁 vraicss

📄 ma_page.html

📄 style_1.css

08° Créer et enregister, sous le nom page2.html, le nouveau code HTML fourni ci-dessous. On notera que la balise <link> pointe le même fichier CSS.

<!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 présent donc le fichier style_1.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

📄 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. Pourquoi ? Tout simplement car notre ichier CSS est vide : il ne contient aucune règle d'affichage.

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 :

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 : 

En CSS : /* Commentaires */

✎ 10° Deux étapes :

Rajouter le code ci-dessous dans votre fichier CSS. Sauvegarder. Visualiser le résultat dans le navigateur Web. Si vous ne comprennez pas pourquoi certaines couleurs ont changé et par d'autres, pensez à faire appel à l'enseignant.

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

Rajouter ensuite les noms des balises body, header, nav, main et footer dans le CSS et définir 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

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 :

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 ?

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

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

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

Avec text-align: right; : on voit que les lignes affichées fnissent totalement à droite.

Avec text-align: justify; : cette fois, on commence à gauche et on finit à droite. Comment ? En jouant sur les espaces entre les mots.

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

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 :

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

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

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

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

⏪

⏫

⏩