SNT - Seconde - le web avec CSS
Les Chapitres de ce cours
Cliquez sur le lien du chapitre de cours à consulter:
- Le site W3C sur le CSS
- Les balises de type block et inline
- Les bordures
- Les marges
- Les dimensions
- Les classes et les ID
- Les pseudo classes
- Les balises de structures
Les balises de type block et inline
Il y a plusieurs sortes de balises en html:
- les balises de type block comme
( <div>, <p>, <h1>, <h2>, etc..)s'affichent dans une boite rectangulaire de dimensions réglables et elles se positionnent par défaut les unes en dessous des autres.
Exemple de code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> balises blocks </title>
<!-- ici le style est directement incorporé dans la page web --!>
<style>
h1 { border: 2px solid red;}
p { border: 2px solid red;}
</style>
</head>
<body>
<h1> balise bloc: un gros titre </h1>
<h1> balise bloc:un autre gros titre </h1>
<p> balise bloc: un paragraphe </p>
</body>
</html>
Le rendu:
Vous remarquerez que par défaut:
- le rectangle occupe toute la largeur de son conteneur.
Le conteneur peut être la fenêtre comme ci-dessus en gris
ou une balise qui encadre celle dont on parle.
- La hauteur du rectangle est fixée par le contenu de la balise.
- Les balises de type blocklaissent une ligne vide au dessus et en dessous.
- les balises de types inline blocks
(<img/>)s'affichent dans une boite rectangulaire de dimensions réglables et se positionnent par défaut les unes à côté des autres.
Exemple de code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>balises de types inline blocks</title>
<!-- ici le style est directement incorporé dans la page web --!>
<style>
h1 { border: 2px solid red;}
p { border: 2px solid red;}
img { border: 1px solid blue;}
</style>
</head>
<body>
<h1> balise bloc: un gros titre </h1>
<h1> balise bloc:un autre gros titre </h1>
<p> Voici deux images (in-line block): </p>
<img src="./images/girafe.jpg" alt="girafe"/>
<img src="./images/dogue.jpg" alt="chien"/>
</body>
</html>
Le rendu:
- les balises de types inline
( <a>, <span> )se positionnent par défaut les uns à côté des autres.
Exemple de code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>balises de types inline </title>
<head>
<!-- ici le style est directement incorporé dans la page web --!>
<style>
h1 { border: 2px solid red;}
p { border: 2px solid red;}
img { border: 1px solid blue;}
</style>
</head>
<body>
<h1> balise bloc: un gros titre </h1>
<h1> balise bloc:un autre gros titre </h1>
<p> Voici deux images (in-line block): </p>
<img src="./images/girafe.jpg" alt="girafe"/>
<img src="./images/dogue.jpg" alt="chien"/>
<a href="https://www.qwant.fr"> vers qwant </a>
<a href="https://fr.wikipedia.org/wiki/Baleine">Le wiki des baleines </a>
</body>
</html>
La propriété display permet de masquer l'affichage d'une balise, de transformer une balise de type block (boite rectangulaire réglable) en une balise de type inline ( et l'inverse) et de définir comment les éléments occupent l'espace. Avec cette propriété on peut, par exemple, afficher les liens (originellement de type inline) sous la forme de block rectangulaire ce qui permet de créer des zones cliquables.
Exemple de code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemples avec display </title>
<!-- ici le style est directement incorporé dans la page web --!>
<style>
h1 { border: 2px solid red; display:inline-block}
img { border: 1px solid blue; display:block}
a {
display:block;
background-color: black;
color: white;
text-align: center; /* le texte est centré dans le block*/
text-decoration: none; /* le lien n'est pas souligné */
height:50px; /* hauteur du bloc*/
width:150px; /* largeur du bloc*/
}
</style>
</head>
<body>
<p> Voici deux titres h1 avec display: inline-block</p>
<h1> balise devenue inline-bloc: un gros titre </h1>
<h1> balise devenue inline-bloc:un autre gros titre </h1>
<p> Voici deux images avec display: block</p>
<img src="./images/girafe.jpg" alt="girafe"/>
<img src="./images/dogue.jpg" alt="chien"/>
<p> Voici deux liens avec display: block</p>
<a href="https://www.qwant.fr"> vers qwant </a>
<a href="https://fr.wikipedia.org/wiki/Baleine">Le wiki des baleines </a>
</body>
</html>
Le résumé:
display: none
Donner la valeur none à la propriété display d'un élément permet de le masquer.
Display: inline-block
Donner la valeur inline-block permet d'afficher les éléments de type bloc ( <p>, <div>, etc..) les uns à la suite des autres et non les uns en dessous des autres (affichage par défaut). Ce réglage permet de créer, par exmpple, des grilles ou des colonnes de taille réglables grâce aux propriétés width et height des blocs.
display:block permet d'afficher les éléments de type inline ( <a>, <span>, etc..) les uns en dessous des autres et non les uns à la suite des autres (affichage par défaut), ainsi que de pouvoir les dimensionner
display:flex cette propriété fait que tous les enfants pourront être répartis précisemment dans l’espace qu’ils peuvent occuper. Par défaut, ils seront affichés en ligne. Voir le chapitre sur les balises de structures pour voir un exemple d'utilisation de flex: Les balises de structures
Les bordures
Les diverses propriétés qui commencent par border permettent de régler l'apparence des bordures d'un élément. La propriété border-style permet de sélectionner le style de bordure, la valeur solid donne un trait plein. La propriété border-width règle la largeur du trait, La propriété border-color règle la couleur du trait, etc..
h1 {
border-style:solid; /* trait plein */
border-width:medium; /* on pourrait aussi régler l'épaisseur du trait en pixels */
border-color:blue; /* couleur bleue */
}
Les marges
Les balises de type block possèdent des marges. Il existe deux types de marges : les marges intérieures (padding) et les marges extérieures (margin).
margin (comme padding) s'applique aux quatre côtés d'une balise de type block:
- margin-top: marge extérieure en haut.
- margin-bottom: marge extérieure en bas.
- margin-left: marge extérieure à gauche.
- margin-right: marge extérieure à droite.
Exemple:
Le html:
<body>
<h1>Les baleines</h1>
</body>
Le css:
h1 {
width: 60%; /* largeur du bloc */
margin-left: auto; /* centrage horizontal du bloc dans la fenetre*/
margin-right: auto;
margin-top: 50px; /* distance avec l’élément précédent */
background-color: #e0f7fa; /* couleur de fond bleu ciel */
padding-top: 20px; /* marge intérieure haut */
padding-bottom: 20px; /* marge intérieure bas */
padding-left: 66%; /* marge intérieure gauche (≈ 2/3) */
padding-right: 10%; /* marge intérieure à droite */
box-sizing: border-box; /* inclut le padding dans la largeur totale */
text-align: left; /* texte aligné à gauche dans le bloc */
color:navy; /* texte bleu */
}
Les dimensions
les éléments de type block ou inline-block ( paragraphe: p , titres: h , image: img , division: div ) ont des dimensions réglables. Ils possèdent une largeur et une hauteur réglables, on dispose de deux propriétés CSS pour spécifier les dimensions dans le code:
-
width: c'est la largeur du bloc, exprimée en pixels (px) ou en pourcentage (%) par rapport au conteneur ( le body ou un autre block si l'élément est dans un autre élément, un paragraphe dans une division par exemple).
-
height: c'est la hauteur du bloc, exprimée en pixels (px) ou en pourcentage (%) par rapport au conteneur ( le body ou un autre block)
Exemple de code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemple avec dimensions </title>
<!-- ici le style est directement incorporé dans la page web --!>
<style>
h1 {
border: 2px solid red;
width: 200px;
height: 200px;
margin-left: 100px;
display:inline-block}
img { border: 1px solid blue; display:block}
a {
display:block;
background-color: black;
color: white;
text-align: center; /* le texte est centré dans le block*/
text-decoration: none; /* le lien n'est pas souligné */
height:50px; /* hauteur du bloc*/
width:150px; /* largeur du bloc*/
}
</style>
</head>
<body>
<h2> Voici deux titres h1 avec display: inline-block ; width:500px ; height:100px et marge à gauche de 100px </h2>
<h1> balise devenue inline-bloc: un gros titre </h1>
<h1> balise devenue inline-bloc: un autre gros titre </h1>
<h2> Voici deux images avec display:block;</h2>
<img src="./images/girafe.jpg" alt="girafe"/>
<img src="./images/dogue.jpg" alt="chien"/>
<h2> Voici deux liens avec display:block; height:50px; width:150px;</h2>
<a href="https://www.qwant.fr"> vers qwant </a> <br/>
<a href="https://fr.wikipedia.org/wiki/Baleine">Le wiki des baleines </a>
</body>
</html>
Les classes et les ID
Comment faire pour que certains éléments soient décorés différemment des autres éléments du même type ( par exemple un paragraphe avec un texte bleu et un autre paragraphe avec un texte rouge ) ?
- l'attribut class.
- l'attribut id.
Les attributs class et id sont similaires.
Il y a cependant une différence qui est que deux éléments HTML différents ne peuvent pas avoir le même id alors que deux éléments HTML différents peuvent avoir la même class.
On donnera la même class à des éléments qui doivent avoir le même design et un id aux éléments qui ont besoin d'une décoration unique.
Exemple de code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple avec classe et ID </title>
<!-- ici le style est directement incorporé dans la page web --!>
<style>
/* id style_h1 */
#style_h1 {
border: 2px solid red;
background-color:pink;
width: 650px;
height: 100 px;
margin-left: 100px;
display:inline-block
}
/* id style2_h1 */
#style2_h1 {
border: 2px solid blue;
background-color:#e0f7fa;
color:navy;
width: 650px;
height: 100 px;
margin-left: 100px;
display:inline-block
}
/* classe style_h2 */
.style_h2 {
color:navy;
}
/* id style2_h2 */
#style2_h2 {
color:green;
}
a {
display:inline-block;
background-color: black;
color: white;
text-align: center; /* le texte est centré dans le block*/
text-decoration: none; /* le lien n'est pas souligné */
height:50px; /* hauteur du bloc*/
width:150px; /* largeur du bloc*/
}
</style>
</head>
<body>
<h2 class="style_h2"> Voici deux titres h1 avec display: inline-block ; width:500px ; height:100px et marge à gauche de 100px </h2>
<h1 id="style_h1"> balise devenue inline-bloc: un gros titre </h1>
<h1 id="style2_h1"> balise devenue inline-bloc: un autre gros titre </h1>
<h2 class="style_h2"> Voici deux images avec display:inline-block;</h2>
<img src="./images/girafe.jpg" alt="girafe"/>
<img src="./images/dogue.jpg" alt="chien"/>
<h2 id="style2_h2"> Voici deux liens avec display:inline-block; height:50px; width:150px et marge à gauche de 50px</h2>
<a href="https://www.qwant.fr"> vers qwant </a>
<a href="https://fr.wikipedia.org/wiki/Baleine">Le wiki des baleines </a>
</body>
</html>
Les peudo-classes
On va voir les pseudos-classes appliquées aux liens. Un lien possède plusieurs états qui sont sauvegardés par le navigateur, avec une pseudo classe on peut modifier l'apparence du lien.
Soit un code html avec 2 liens:<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple avant pseudo classe </title>
<style>
a:link {
color:red; /* on colore en rouge au lieu de bleu par défaut */
text-decoration:none; /* on ne veut pas de soulignement */
font-size: 1.5em /* on agandit la taille des caractères */
}
</style>
</head>
<body>
<a href="https://www.qwant.fr"> vers qwant </a> <br/>
<a href="https://fr.wikipedia.org/wiki/Baleine">Le wiki des baleines </a>
</body>
</html>
- si le lien n'a pas été cliqué, il est bleu et souligné:
- si le lien a été cliqué, il est violet et souligné:
La pseudoclasse link va permettre de modifier l’aspect des liens:
a:link {
color:red; /* on colore en rouge au lieu de bleu par défaut */
text-decoration:none; /* on ne veut pas de soulignement */
}
a:visited {
color:green;
}
La pseudoclasse hover peut être utilisée pour changer l'apparence lors de survol.
Ci-dessous quand on le survolle, le lien devient rose, souligné et sa taille double (2em):
a:hover {
color:pink;
text-decoration:underline;
font-size: 2em;
}
Dans la pratique, il est fréquent d’associer certaines pseudoclasses. Par exemple si on veut que les liens apparaissent identiques cliqués ou pas, on peut coder:
a:link, a:visited {
color:purple;
text-decoration :none;
}
Les balises de structures
Les balises neutres de structure <div> </div> et <span> </span> servent à regrouper des éléments pour leur appliquer un style visuel. Elles sont dites neutres parce qu'elles ne font rien d'autres qu'encadrer d'autres balises, cependant elles permettent des styles impossibles à appliquer sans elles.
- la balise inline
<span>: sert à encadrer un contenu que l'on veut in-line.
Exemple:
Le html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemples display</title>
<!-- ici le style est directement incorporé dans la page web --!>
<style>
span {
background-color:#e0f7fa;
color:navy;
}
</style>
</head>
<body>
<span> bonjour </span> <span style="font-size:2em;background-color:pink; color:red"> à tout le </span> <span> monde </span>
</body>
</html>
Remarque: vous pouvez constater que si on définit un style pour le contenu d'une balise ici <span>, ce style est appliqué à toutes les balises <span>. Si une balise <span> a son style définit directement dans la balise c'est le style dans la balise qui s'appplique.
- la balise block
<div>: sert à encadrer un contenu que l'on veut organiser en blocks ( en grilles ou en colonnes avec par exemples )
Exemple:
Le html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Exemples div </title>
<!-- ici le style est directement incorporé dans la page web --!>
<style>
/* couleur de fond de la fenêtre */
body {
background-color:#80D0D0;"
}
/* le div qui contient tous les autres div */
#parent {
display:flex;
justify-content:space-between;
}
/* ce div positionne l'image et le titre h3 */
.conteneur {
background-color:#e0f7fa;
width:30%;
margin:auto;
padding:20px 0; /* marge interne symétrique */
text-align:center; /* le titre reste centré */
}
/* ce div positionne l'image */
.zone-image {
display:flex;
justify-content:center;
align-items:center;
padding:40px 0; /* espace haut/bas identique */
}
.zone-image img {
max-width:100%;
height:auto;
}
h3 {
color:navy;
font-size:2em;
}
h2 {
background-color:pink;
color:red;
}
</style>
</head>
<body>
<div id="parent">
<div class="conteneur">
<h3>Ceci est une girafe:</h3>
<div class="zone-image">
<img src="./images/girafe.jpg" alt="girafe">
</div>
</div>
<div>
<h2> je suis un texte coincé entre deux images </h2>
</div>
<div class="conteneur">
<h3>Ceci est un chien:</h3>
<div class="zone-image">
<img src="./images/dogue.jpg" alt="chien">
</div>
</div>
</div>
</body>
</html>
Le rendu:
Explications:
- Le div parent (type flex) gère l’alignement des enfants directs (3 div), leur direction (row, column), leur distribution (space-between, etc.)
- Le div conteneur (type block) empile les éléments verticalement, il ne gère pas d’alignement horizontal/vertical avancé.
- le div zone-image (type flex) peut centrer ses enfants horizontalement ET verticalement, peut répartir l’espace, peut changer la direction (row / column)
Dans le conteneur bleu:
Le parent flex organise 3 colonnes.
Le conteneur bleu organise son titre h3 + sa zone image.
La zone image organise l’image verticalement et horizontalement. Sans display:flex sur zone-image, on ne peux pas centrer verticalement l’image.
