1 - D'autres propriétés sur le texte éditables en CSS

⇩ ⇧ ⤊

Pour voir d’autres propriétés : CSS w3schools (lien externe)

Les exemples suivants ne seront pas testés lors d'exercices. A vous de voir si vous voulez les intégrer et les tester.

Parfois, on désire avoir un texte en majuscule ou en minuscule ou mettre la première lettre des mots en majuscule. Dans ce cas, il faut passer par le text-transform.

Quelques exemples avec Lorem ipsum dolor sit amet.

text-transform: uppercase; donne Lorem ipsum dolor sit amet.

text-transform: lowercase;qui donne Lorem ipsum dolor sit amet.

text-transform: capitalize; qui donne Lorem ipsum dolor sit amet.

Si vous voulez de petites majuscules à la place des minuscules, font-variant est fait pour vous :

font-variant: small-caps; qui donne Lorem ipsum dolor sit amet.

font-variant: normal; qui donne Lorem ipsum dolor sit amet.

La tabulation de la première ligne d’un texte se fait avec la propriété text-indent. Vous devez noter de combien de pixels vous voulez décaler la première ligne en pixels (px). Pour décaler la première ligne de 75 px :

text-indent: 75px;, Ca donne un résultat du type :

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 aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Ne placez pas d'espace entre le 75 et px.

L’espace (line-height) entre deux paragraphes dépend de la taille de la police utilisée. On donne un espacement fonction de celle-ci. Normal revient à la valeur par défaut de l’agent utilisateur (le navigateur) qui le fixe souvent à 1.2 en fonction du type de la police. Lorsqu'on fournit juste un nombre, sans unité, le navigateur l'interpréte comme la largeur relative à la police utilisée.

Pour placer un espace correspondant à la hauteur d'une ligne entre deux paragrahes : line-height: 1; qui donne sur plusieurs paragraphes :

Pour placer l'équivalent de trois hauteurs de lignes line-height: 3; qui donne sur plusieurs paragraphes :

On utilise plutôt des unités relatives, des unités qui dépendent de la taille d'autres éléments :

Comme vous commencez juste le CSS, nous garderons les unités les plus simples à comprendre, bien qu'elles ne soient pas les plus adaptées lorsqu'on veut réellement concevoir un site adapté aux différents supports (ordinateurs, smartphones, tablettes ...)

2 - Les bordures

⇩ ⇧ ⤊

Les bordures sont les éléments qui permettent d'entourer une balise.

Par exemple : 

border:1px dotted black; qui donne Lorem ipsum dolor sit amet.

Pour tout savoir sur les bordures, il suffit d'aller chercher l'information au bon endroit : CSS w3schools : les bordures par exemple.

Commençons par l'allure de la bordure : il s'agit de la propriété border-style.

Les formes non symétriques peuvent permettre de donner l'illusion d'un appui sur une touche ou autre. Vous pourrez voir sur les sites CSS qu'il existe également une valeur none permettant de rendre la bordure invisible comme avec hidden... Cela permet à un script d'agir de façon dynamique sur la forme d'un site.

On peut modifier le style directement avec la propriété border-style ou en le précisant dans la définition de la propriété border (voir ci-dessous).

En réalité, la valeur de border-style est la seule propriété réellement indispensable à la création d'une bordure. Si vous ne précisez rien pour la couleur et l'épaisseur, le navigateur prendra la valeur par défaut. Je présente ci-dessous deux façons de présenter le style complet de la bordure :

1. on inclut les différents changements dans la propriété border

border:3px dotted red;

2. on change la couleur directement avec la propriété border-color et l'épaisseur avec la propriété border-width.

border-style:dotted;

border-color: red;

border-width: 3px;

Voici quelques autres exemples :

Nous verrons qu'on peut rendre les éléments CSS interactifs : voilà un exemple qui vous montrer l'effet outset vers inset lorsqu'on passe au dessous de la bordure avec la souris.

Effet léger :

Effet plus visible : le même clavier mais avec cette fois une bordure solid fixe mais une couleur de fond variable :

Pour réaliser cela, il faut utiliser l'un des selectors du CSS, à savoir le hover qui permet de modifier le CSS d'un élément qu'on survole avec la souris.

Pour tout savoir sur les selectors, il suffit d'aller chercher l'information au bon endroit : CSS w3schools : Les selectors

02° Utiliser hover pour modifier l'un des aspects de votre page (bordure, couleur ou autre) lorsqu'on passe dessus. La documentation se trouve sur le site plus haut : il faut trouver hover dans le tableau, cliquer dessus et on arrive à des exemples d'utilisation plutôt explicites. Il faudra par contre créer une class attribuée à(aux) éléments que vous voulez modifier.

Le plus beau, c'est qu'on peut ne définir des styles de bordures que pour le haut (top), le bas (bottom), la gauche (left) ou la droite (right). Un exemple pratique visible en passant la souris sur les paragraphes : on va modifier la bordure invisible des paragraphes.

Voilà le code du menu ci-dessus, ce qui nous permettra de faire une sorte de correction de la question 02 :

Code HTML:

Code CSS:

3 - Gestion de l'écartement (espace externe) : margin

⇩ ⇧ ⤊

Vous avez dû remarquer que votre affichage de bordure ne donne pas exactement le résultat attendu par rapport à ce qui apparaît ici.

Testons le code suivant (on intègre le css dans le html pour aller plus vite) ;

Cela donne :

On voit donc qu'on affiche trois balises RGB sur un fond noir. Le fond noir a disparu sous les trois autres balises par contre.

Faisons la même chose avec une balise div incluant trois balises p 

On obtient 

C'est presque la même chose mais cette fois, on voit le fond noir : chaque balise p est séparée de la suivante par un espace fixe.

Pourquoi ?

A cause des propriétés par défaut du navigateur. Chaque navigateur a les siennes pour chaque balises sémantique mais typiquement, tous mettent une zone de "transition", écartement après une balise p. On appelle cela la propriété margin. Cette propriété définit donc l'espace à placer entre cette balise et celles qui l'entourent. On parlera ici d'écartement ou de marge externe.

Si on veut que les balises p ne possèdent pas de margin, on applique margin: 0px;.

03° Modifiez les styles des p précedents pour avoir des marges de 0px et 30px. Vous devriez avoir les résultats affichés ci-dessous.

Avec 0 px

Avec 30 px

On voit bien ici que le fond noir est visible car on laisse 30 pixels à gauche, à droite, en haut et en bas entre les balises <p>. Pourquoi ne voit-on pas de noir avant la première et après la troisième ? Simplement parce que le noir est dû à la balise <div>. Or la balise <div> est ici le parent, la balise-conteneur qui contient les trois autres. Les trois autres se placent à l'intérieur de la <div>.

Pour la première balise <p>, il n'y a donc pas de présente avant elle dans le conteneur <div>. Par contre, il y a bien 30 px entre le premier paragraphe et le paragraphe "Avec 30 px".

Si on force le trait avec 150 px, on voit bien les écartements de 150 px.

Un tour sur le site habituel CSS w3schools : margin, permet de se rendre compte qu'on peut différencier les réglages des écartements dans les 4 directions :

• Au dessus de la balise avec la propriété margin-top
• A gauche de la balise avec la propriété margin-left
• A droite de la balise avec la propriété margin-right
• En dessous de la balise avec la propriété margin-bottom

Et si on veut centrer ? Est-on obligé de calculer combien d'espace on place à gauche et à droite à la main ? Non. Il suffit d'utiliser la valeur auto. Par contre, le navigateur a besoin de la largeur totale de votre élément pour savoir comment le centrer. Il faudra donc lui transmettre la largeur voulue pour votre balise à l'aide de la propriété width.

Dernière valeur possible pour les marges : inherit, ce qui veut dire qu'on utilise la valeur de la propriété définie dans la balise qui contient la balise concernée.

Au fait, width peut également avoir comme valeur un pourcentage : width: 50%; est valide. Cela veut dire que la balise possède 50% de la largeur disponible, à savoir 50% du conteneur de votre balise.

4 - Gestion de l'espace interne : padding

⇩ ⇧ ⤊

Nous allons voir comment "élargir" le fond de l'élément qui nous intéresse. En effet, margin permet d'écarter la balise concernée des autres. Nous allons voir maintenant la propriété padding qui va permettre de repousser l'espace de l'élément concerné.

Voilà un premier exemple :

1 2 3 4 5

<div style="background-color:black;"> <div style="background-color:red; margin:auto; width:150px;">Balise div rouge</div> <div style="background-color:green; margin:auto; width:150px; padding:150px;">Balise div verte</div> <div style="background-color:blue; margin:auto; width:150px;">Balise div bleue</div> </div>

Rouge

Vert

Bleu

On crée donc 3 div de largeur 150 pixels (width: 150px;). Mais la balise div vert possède une propriété padding de 150 pixels : padding: 150 px;.

On voit donc qu'autour du texte de la balise centrale, il y a bien un fond vert de 150 pixels à gauche par rapport au rectangle rouge ou bleu.

De la même façon, on retrouve 150 pixels de fond vert en plus à droite par rapport aux balises rouges et bleues.

Au dessus et en dessous du texte de la balise verte, on a également 150 pixels.

On voit donc que padding agit un peu comme une marge interne qu'on peut repousser pour que le fond de la balise occupe plus d'espace.

On rajoute maintenant une propriété margin pour bien faire la différence avec padding.

Rouge

Vert

Bleu

J'ai obtenu cette présentation avec le code suivant :

1 2 3 4 5

<div style="background-color:black;"> <div style="background-color:red; margin:auto; width:150px;">Balise div rouge</div> <div style="background-color:green; margin:auto; width:150px; padding:50px; margin-top:25px; margin-top:25px; ">Balise div verte</div> <div style="background-color:blue; margin:auto; width:150px;">Balise div bleue</div> </div>

Si on doit le résumer sur un schéma :

Voilà, c'est aussi simple que cela. La hauteur totale de notre balise est donc la somme de

• Sa hauteur propre (liée au contenu de la balise)
• Sa valeur de padding (marge interne) en haut et en bas
• Sa valeur de margin (marge externe ou écartement externe) en haut et en bas
• Sa valeur de bordure en haut et en bas

Reste la question de la bordure : une bordure entoure-t-elle la marge externe (margin) ou la marge interne (padding) ? Pour le savoir, il faut tester.

Pour finir, nous allons passer à un exercice pratique : nous allons tenter de recréer un menu de navigation (sans les liens pour l'instant, ce ne sera pas le plus difficile à faire).

Nous allons partir du code HTML suivant :

Et pour le CSS  (attention au nom de votre fichier css !);:

Cela donne quelque chose comme :

Et voilà. Vous avez un beau menu de navigation. Il manque encore les liens, mais ce n'est pas le plus délicat à mettre en oeuvre. Nous verrons cela dans une autre activité.

5 - Gestion de la taille de l'élément : width et height

⇩ ⇧ ⤊

Nous avons déjà vu que width permet de gérer la largeur du bloc (block en anglais). On peut définir la largeur en pixel, en pourcentage ou en utilisant une valeur inherit.

Dernière précision : on peut choisir la hauteur d'un bloc en utilisant la propriété height.

12° Dernière modification : on veut que le menu prenne 100% de la hauteur disponible et 20% de sa largeur.

Si vous avez le temps et que vous voulez voir comment créer des effets de boutons facilement : CSS w3schools

Si vous avez encore plus de temps, vous pouvez voir l'ensemble des selectors disponibles : CSS w3schools

Pour l'instant, nous n'avons vu que first-child, last-child et hover. Mais on peut aller jusqu'à sélectionner une balise en fonction de ces attributs...

Cela méritera une activité complète sur cette façon de faire gérer certaines choses par le CSS plutôt que par Javascript.

6 - Gestion facile de la taille : box-sizing

⇩ ⇧ ⤊

Il est temps de faire un rappel concis sur toutes ces histoires de taille.

Regardons un problème que cela peut entrainer :

On utilise le code ci-dessous pour créer une balise <div> contenue dans une autre balise balise <div>.

13° Regarder le code ci-dessous qui créé une div grise de 200px sur 200px et y insère une balise fille de couleur bleu. Répondre aux questions suivantes :

Le CSS ciblant la balise div fille (ligne 32) est-il celui de la ligne 9 ou de la ligne 16 ?

Quelle est la largeur imposée sur la balise div fille de la ligne 32 (la seconde div) ?

Pourquoi noter "censée" ? Tout simplement car la balise fille n'a pas une largeur de 200px. Difficile de le voir à l'oeil nu mais voilà un zoom :

...CORRECTION...

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 36 37 38

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Taille des boxes</title> <style> main div { border: grey 1px solid; width: 200px; height: 200px; background-color:#cccccc; } main div div { border: #0a425f 10px solid; width: 100%; height: 50px; background-color:#4a829f; padding-right: 50px; margin: 0px; } </style> </head> <body> <main> <div>Balise 1 (parent) <div>Balise 2 (fille) </div> </div> </main> </body> </html>

Vous en conviendrez, c'est embếtant pour créer ce genre d'affichage sur nos pages : il faudrait systématiquement faire les calculs à la main pour gérer la valeur de largeur réelle...

Heureusement, il y a mieux :

Propriété box-sizing pour le calcul de width

Par défaut, les balises possèdent la propriété box-sizing qui est réglée sur content-box.

box-sizing: content-box;

Ce réglage implique que la propriété width règle la largeur lié au contenu de la balise.

Le calcul de la largeur réelle se fait alors de la manière suivante :

largeur_reelle = width + padding-left + padding-right + border-left + border-right

Si on crée un conteneur de 200px et qu'on rajoute une div de 100% de width avec une bordure de 20px, on obtient donc :

Il existe une deuxième valeur possible :

box-sizing: border-box;

Cette fois, la propriété width impose la largeur totale de votre balise, bordure incluse.

largeur_reelle = width

Cela implique que vous n'avez plus qu'à régler la valeur de width et la valeur de border. Le navigateur va se charger de trouver la bonne valeur à imposée à padding !

Si on utilise ce réglage, on obtient alors ceci avec les mêmes boîtes :

En résumé :

• Pour que width n'impose que la longueur du contenu : box-sizing: content-box; (valeur par défaut)
• Pour que width impose la longueur bordure incluse : box-sizing: border-box; (valeur par défaut)

...CORRECTION...

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 36 37 38

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Taille des boxes</title> <style> main div { border: grey 1px solid; width: 200px; height: 200px; background-color:#cccccc; } main div div { box-sizing: border-box; border: #0a425f 10px solid; width: 100%; height: 50px; background-color:#4a829f; padding-right: 50px; margin: 0px; } </style> </head> <body> <main> <div>Balise 1 (parent) <div>Balise 2 (fille) </div> </div> </main> </body> </html>

16° Remettre la valeur par défaut pour voir que la balise fille recommence à s'affiche hors de la balise mère.