6 - Plus de propriétés CSS

⏪

⏬

⏩

1 - propriétés texte

2 - Classes

3 - div span

4 - combinaison

Cette page est un vieux truc que je n'ai pas encore intégré réellement au site actuel.

Nous avons vu dans la partie précédente les bases de l’HTML (notion de balises et organisation basique d’une page).

De la même façon, nous avons fait une première approche des modifications d’affichage via le CSS.

Vous avez vu deux façons de rajouter des modifications via le CSS:

En rajoutant style="color:black;" dans la balise de l'élément à modifier : cela peut être pratique dans certains cas particuliers (comme sur les exemples qui vous sont donnés plus bas, les buts étant justement d'appliquer ce code précis au texte d'exemple.

En créant un fichier CSS à part de la page html : cela permet de modifier les 100 pages d'un site à partir d'un code unique plutôt que de modifier les 100 pages une à une.

En réalité, il existe également la possibilité d'insérer le code CSS dans le code html. Il s'agit donc d'une méthode hybride entre les deux précédentes : on peut modifier la façon d'afficher les paragraphes sur une page avec un code unique qu'on place dans une balise <style>. Néanmoins, on perd la possibilité d'avoir un site uniforme. Cette méthode ne sera pas abordée plus que cela ici.

Par contre, nous ne savons toujours pas comment différencier les affichages des paragraphes dans l’en-tête et dans section par exemple. Pas plus que nous ne savons comment changer l’espace entre deux paraphrases autrement qu’en utilisant la balise orpheline <br> directement dans le fichier html.

Logiciel nécessaire pour l'activité : Atom ou Notepad++ (Windows) ou Notepaddd (Linux)

MODE COURS (cacher les questions)

1 - Les propriétés liées au texte lui même

⇩ ⇧ ⤊

Autre propriété importante: 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.

01° Reprendre le code de la page HTML ci-dessous. Créer ensuite un fichier CSS nommé style_1.css (à cause de la ligne 6) permettant de faire ceci :

Les titres centrés
Les listes en alignement à droite
Les paragraphes justifiés

Pour bien voir ces derniers, le mieux est d’avoir plusieurs lignes.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Plus de propriétés CSS</title>
        <link rel="stylesheet" href="style_1.css" />
    </head>
    <body>
        <header>
            <h3>Le titre de mon site</h3>
            <p>La phrase est située dans mon header</p>
        </header>
        <nav>
            <ul>
                <li>Accueil</li>
                <li>Partie 1</li>
                <li>Partie 2</li>
            </ul>
        </nav>
        <main>
            <h1>C'est ici que commence ma section, mon article.</h1>
            <br />
            <p>Nous allons pouvoir faire ici de très longues phrases
            puisque c'est la partie la plus encombrante
            de la page habituellement.</p>
            <p>J'en profite pour vous montrer comment utiliser la balise
            strong pour <strong>renforcer</strong> une partie d'un texte.</p>
            <p>Il est également possible d'utiliser la <em>balise em</em>, ce
            n'est pas très compliqué...</p>
            <h3>Ceci est une partie assez importante.</h3>
            <h4>Ou un titre moins important</h4>
            <h6>Jusqu'au degré 6, mais si vous avez besoin de 6 degrés de titres imbriqués,
            c'est certainement que vous avez un peu <mark>abusé</mark> dans la structuration
            de votre présentation.</h6>
            <p>Exemple de liste non ordonnée : les éléments composant un atome sont</p>
            <ul>
                <li>Proton(s)</li>
                <li>Neutron(s)</li>
                <li>Electron(s)</li>
            </ul>
            <p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p>
            <ol>
                <li>On équilibre le carbone C</li>
                <li>On équilibre l’hydrogène</li>
                <li>On équilbre l’oxygène</li>
            </ol>
        </main>
        <footer>
            <p>Pour contacter le webmaster, on met son adresse ici. Pour l'instant, il
            préfère rester discret car le contenu n'est pas très conséquent.</p>
        </footer>
    </body>
</html>

Correction ?

...CORRECTION...

Voici le code CSS :

1
2
3

h1,h2,h3,h4,h5,h6 { text-align: center; }
li { text-align: right; }
p { text-align: justify; }

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

02° Pourriez-vous demander de souligner tous les titres h1 et h2 ?

Correction ?

...CORRECTION...

Voici le code CSS :

h1,h2,h3,h4,h5,h6 { text-align: center; }
h1,h2 { text-decoration: underline; }
li { text-align: right; }
p { text-align: justify; }

Et si vous vouliez changer la taille ? Et bien, il existe la propriété font-size où le mot «font» fait référence à la police de caractères.

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;

03° Mettre les titres h1, h2 et h3 respecitvement en xx-large, x-large et large.

Correction ?

...CORRECTION...

Voici le code CSS :

h1 {
    text-align: center;
    text-decoration: underline;
    font-size: xx-large;
}
 
h2 {
    text-align: center;
    text-decoration: underline;
    font-size: x-large;
}
 
h3 {
    text-align: center;
    font-size: large;
}
 
h4,h5,h6 { text-align: center; }
li { text-align: right; }
p { text-align: justify; }

Et si je veux plus gros encore ?

Et bien, il suffit de savoir que les valeurs ci-dessous sont comme les noms (yellow, green, olive ...) des couleurs : ce sont simplement des valeurs prédéfinies pratiques mais qui ne sont qu’une petite partie des couleurs disponibles.

Vous pouvez donner la valeur de la taille relative voulue à l’aide d’un facteur multiplicatif :

Pour obtenir 80% de la taille normale : font-size: 0.8em;

Pour obtenir 250% de la taille normale : font-size: 2.5em;

04° Augmenter h1 à 300% (3.0) et les paragraphes à 125% (1.25em)

Pour mettre les textes en italiques, nous avons la propriété font-style.

Ainsi, pour mettre une balise en italique : font-style: italic; avec un exemple

Pour revenir à la police normale si le CSS de la balise impose normalement de l'italique : font-style: normal; avec un exemple

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

05° Mettre les titres h1 en gras. Annuler la mise en gras de la balise strong. Pour signaler un contenu strong, on utilisera plutôt un texte rouge et souligné.

Correction ?

...CORRECTION...

h1 { font-weight:bold; }
 
strong {
    font-weight:normal;
    color:red;
}

Il nous reste à voir le classique changement de police.

Il s'agit de la commande : font-family. Ainsi font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; veut dire de commencer par tenter d'utiliser la police Impact. Si elle n'est pas connue du navigateur, tenter Arial Black puis Arial ... Les doubles parenthèses " sont utilisées sur "Arial Black" à cause de l’espace entre Arial et Black.

Voilà l'exemple de la police Impact.

Voilà l'exemple de Arial Black.

Voilà l'exemple de la police Arial.

Voilà l'exemple de la police sans-serif.

Voilà l'exemple de la police Courrier New.

06° Changer quelques polices via le CSS.

2 - 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 une classe à la balise voulue.

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 voit bien que les paragraphes 2 et 3 ont la même apparence puisqu'ils dépendent de la même classe CSS.

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

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

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

Un peu de vocabulaire :

Balise parent, balise enfant

Regardons la structure de notre div :

<div class="mon_premier_type" >
    <p>"Lorem ... laborum.</p>
    <p>"At ipsum v... varius ac, purus.</p>
    <p>"Morbi ... a,nulla..</p>
    <p>"Phasellus ...velit..</p>
</div>

On dit que la balise div est le PARENT des balises p : les balises p sont contenues dans la balise div.

De la même façon, on dit que les balises p sont les balises ENFANTS (CHILDREN en anglais) de 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

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

test html

`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; }`

4 - Combinaison de balises

⇩ ⇧ ⤊

Vous voyez, on commence à pouvoir définir ce qu'on veut, où on veut. Mais cela demande parfois de rajouter beaucoup de class="..." dans un code HTML qui n'en contenait pas à la base car on ne pensait pas aller aussi loin. Rajouter toutes ces classes peut être assez rédhibitoire.

Nous allons voir ici que nous pouvons définir de façon plus ou moins précise ce qu'on veut faire sans passer par les classes, pourvu que les modifications soient systématiques en terme de logique de présentation.

On peut par exemple vouloir un type de paragraphe pour footer, un autre type de paragraphe pour main et encore un autre pour nav.

On pourrait donc créer et utiliser trois classes. Par exemple :

<p class="p_footer"> pour les paragraphes dans la balise <footer>
<p class="p_section"> pour les paragraphes dans la balise <main>
<p class="p_nav"> pour les paragraphes dans la balise <nav>

Oui. Mais cela veut dire rajouter ces codes de class à TOUS les paragraphes des différentes classes, sans en oublier un ou se tromper dans le code de la classe. Ca semble un peu lourd comme solution !

Une solution plus harmonieuse est offerte par le CSS

Combinaison de conditions CSS

On peut fournir une succession de balises à la suite, séparées par des espaces.

Ainsi footer p veut dire : appliquer le CSS sur les balises p contenues dans la balise footer.

Il faut donc lire la succession à l'envers pour comprendre sur quoi on agit.

Avec le cas des paragraphes gérés de façon différente :

footer p { ... insérer ici votre code CSS ...} permet de modifier les propriétés des paragraphes contenues dans footer.

nav p { ... insérer ici votre code CSS ...} permet de modifier les propriétés des paragraphes contenues dans nav.

section p { ... insérer ici votre code CSS ...} permet de modifier les propriétés des paragraphes contenues dans section.

Mais cela marche aussi avec les classes :

footer .mon_premier_type { ... insérer ici votre code CSS ...} permet de modifier les propriétés des paragraphes contenues dans footer.

Cela veut ainsi dire qu'on agit sur les classes mon_premier_type contenues dans une balise footer.

Exemple : on veut des paragraphes en blanc sur fond noir dans header, en noir sur fond silver dans main et en vert sur fond jaune dans nav :

header p {
    background-color: black;
    color : white;
}
 
main p {
    background-color: white;
    color : black;
}
 
nav p {
    background-color: yellow;
    color : green;
}

10° Reprendre l'exemple générique de la page donnée ci-dessous. Remplacer le CSS pour le CSS ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Plus de propriétés CSS</title>
        <link rel="stylesheet" href="style_1.css" />
    </head>
    <body>
        <header>
            <h3>Le titre de mon site</h3>
            <p>La phrase est située dans mon header</p>
        </header>
        <nav>
            <ul>
                <li>Accueil</li>
                <li>Partie 1</li>
                <li>Partie 2</li>
            </ul>
        </nav>
        <main>
            <h1>C'est ici que commence ma section, mon article.</h1>
            <br />
            <p>Nous allons pouvoir faire ici de très longues phrases
            puisque c'est la partie la plus encombrante
            de la page habituellement.</p>
            <p>J'en profite pour vous montrer comment utiliser la balise
            strong pour <strong>renforcer</strong> une partie d'un texte.</p>
            <p>Il est également possible d'utiliser la <em>balise em</em>, ce
            n'est pas très compliqué...</p>
            <h3>Ceci est une partie assez importante.</h3>
            <h4>Ou un titre moins important</h4>
            <h6>Jusqu'au degré 6, mais si vous avez besoin de 6 degrés de titres imbriqués,
            c'est certainement que vous avez un peu <mark>abusé</mark> dans la structuration
            de votre présentation.</h6>
            <p>Exemple de liste non ordonnée : les éléments composant un atome sont</p>
            <ul>
                <li>Proton(s)</li>
                <li>Neutron(s)</li>
                <li>Electron(s)</li>
            </ul>
            <p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p>
            <ol>
                <li>On équilibre le carbone C</li>
                <li>On équilibre l’hydrogène</li>
                <li>On équilbre l’oxygène</li>
            </ol>
        </main>
        <footer>
            <p>Pour contacter le <mark>webmaster</mark>, on met son adresse ici. Pour l'instant, il
            préfère rester discret car le contenu n'est pas très conséquent.</p>
        </footer>
    </body>
</html>

11° On voudrait que les balises mark dans footer ne soient pas sur fond jaune (c'est déjà le cas des paragraphes) mais en rouge. Créer le code correspondant en utilisant un code comportant footer et mark séparés par un espace.

Correction ?

...CORRECTION...

1
2
3

footer mark {
    background-color: red;
}

La recherche des balises correspondantes est assez puissante car votre balise mark n'était pas directement dans footer mais dans une balise p de footer.

<footer>
    <p>Pour contacter le <mark>webmaster</mark>, on met son adresse ici. Pour l'instant, il
    préfère rester discret car le contenu n'est pas très conséquent.</p>
</footer>

On voit que footer mark modifie toutes les balises mark contenues dans footer, même celles situéss dans un titre p.

Par contre footer p mark ne modifirait que les balises mark situés dans un p de footer.

Et si on ne veut modifier uniquement le premier paragraphe après un titre ?

Sélection de la balise située juste après une autre avec +

Le sélecteur + permet de viser la balise qui suit immédiatement une autre balise.

Ainsi :

h1 + p {... code CSS ...} va viser uniquement les balises p qui suivent immédiatement une balise h1. S'il y a la moindre balise entre les deux, elles ne seront pas visées. Sur l'exemple ci-dessous, le paragraphe ne serait pas visé car il y a une balise <br> entre <h1> et <p>.

<h1>C'est ici que commence ma section, mon article.</h1>
<br />
<p>Nous allons pouvoir faire ici de très longues phrases
puisque c'est la partie la plus encombrante
de la page habituellement.</p>

Si vous voulez cibler tous les paragraphes qui suivent un autre paragraphe, on pourra ainsi noter ceci dans le CSS :

p + p {... code CSS ...}.

Attention : + n'agit que sur une succession de balises frères, pas sur les balises contenues dans une autre balise.

Balises frères

Nous avons vu les balises ayant un lien mère-fille (PARENT et CHILD). Ce lien concerne donc une relation de contenu / contenant.

On parle de balises frères lorsque deux balises se suivent immédiatement et qu'elles sont situés dans la même balise-conteneur mère :

<h1>C'est ici que commence ma section, mon article.</h1>
<br />
<p>Nous allons pouvoir faire ici de très longues phrases
puisque c'est la partie la plus encombrante
de la page habituellement.</p>
<h3>Ceci est une partie assez importante.</h3>
<h4>Ou un titre moins important</h4>
<h6>Jusqu'au degré 6
<p>Exemple de liste non ordonnée : les éléments composant un atome sont</p>
<ul>
    <li>Proton(s)</li>
    <li>Neutron(s)</li>
    <li>Electron(s)</li>
</ul>
<p>Exemple de liste ordonnée : pour équilibrer une équation de combustion</p>
<ol>
    <li>On équilibre le carbone C</li>
    <li>On équilibre l’hydrogène</li>
    <li>On équilbre l’oxygène</li>
</ol>

Ligne 3 : la balise <p> sous le premier <h1> n'a pas de relation frère puisque la balise <br> est entre les deux.

Ligne 9 : Le <p> sous le titre <h6> est bien le frère de <h6>.

Ligne 11 : Le premier <li> sous <ul> n'est pas frère mais l'enfant de <ul>.

12° Modifier le CSS qui tente de modifier tous les premiers paragraphes sous un titre (de <h1> à <h3>) pour qu'ils soient en gras, couleur de texte blanche sur fond noir. Que constatez-vous ? Est-il vraiment malin de placer des balises <br> ?

h1+p {
    background-color: black;
    color: white;
    font-weight: bold;
}
 
h2+p {
    background-color: black;
    color: white;
    font-weight: bold;
}
 
h3+p {
    background-color: black;
    color: white;
    font-weight: bold;
}

Correction ?

...CORRECTION...

Lorsqu'on place la balise <br>, le CSS ne parvient plus à agir sur la balise p qui suit pourtant le titre à l'écran.

Il va donc falloir utiliser le CSS plutôt que les balises br pour espacer le premier paragrahe du titre. Nous verrons cela plus loin.

13° Tenter de mettre en fond rouge la première ligne des listes ul. Expliquer pourquoi cela fonctionne, ou pas...

1
2
3

ul+li {
    background-color: red;
}

Correction ?

...CORRECTION...

Ceci ne peut pas fonctionner car la balise li est une balise enfant de la balise ul et pas une balise frère.

Bon, comment faire alors ? Et bien, il faut parvenir à expliquer au CSS qu'on veut cibler le premier enfant d'une balise conteneur :

Sélection de la première balise enfant

Prenons l'exemple HTML ci-dessous :

<ul>
    <li>Proton(s)</li>
    <li>Neutron(s)</li>
    <li>Electron(s)</li>
</ul>

Ici, la balise <ul> de la ligne 1 est la balise-conteneur (ou balise mère ou parent) des trois balises enfants ou filles <li>.

Si vous voulez cibler la première balise <li> de la ligne 2, il faut utiliser :

1
2
3

ul li:first-child {
    background-color: red;
}

Si vous voulez cibler la dernière balise li contenue dans une balise <ul>, il faut utiliser ceci par contre :

Sélection de la dernière balise enfant

Prenons l'exemple HTML ci-dessous :

<ul>
    <li>Proton(s)</li>
    <li>Neutron(s)</li>
    <li>Electron(s)</li>
</ul>

Si vous voulez cibler la dernière balise <li> de la ligne 4, il faut utiliser :

1
2
3

ul li:last-child {
    background-color: red;
}

14° Utiliser ces dernières connaissances pour afficher clairement le premier et le dernier item des listes, qu'elles soient ol ou ul.

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

⏪

⏫

⏩