Langage coté client: CSS
- Le langage CSS
Le langage CSS sert à appliquer un style visuel à une page web, il va permettre de colorer, positionner, appliquer des effets visuels, etc..
- Exercice 2.1
Créer une autre page web comme lors de la Mise en place avec le code html ci-dessous
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Page HTML</title>
<link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<header class="entete">
<h1 class="niveau1">Entête</h1>
<nav>
<a href="page1.html"> page 1</a>
<br/>
<a href="page2.html"> page 2</a>
</nav>
</header>
<main>
<section id="section1">
<h2>Section 1</h2>
<p>Bla bla bla</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Blo blo blo</p>
</section>
</main>
<footer>
Pied de page
</footer>
</body>
</html>
Créer le fichier de style mystyle.css et régler les sélecteurs de balises pour obtenir le rendu ci-dessous
Voir éventuellement la partie Ressources chapitre CSS pour apprendre comment coder les éléments.
- Exercice 2.2
Écrire les styles et les sélecteurs CSS pour le code HTML ci-dessous, vous trouverez dans les commentaires ce qui est demandé au niveau du CSS. Vous ne devez pas modifier le code HTML !
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Css selector</title>
</head>
<body>
<header class="topPage">
<nav>
<ul>
<!-- mettre tous les li en display:inline-block et list-style-type:none -->
<!-- modifier text-decoration, le mettre à none sur toutes les balises a -->
<!-- et modifier la couleur des liens : color:#99F; -->
<li><a href="#" title="Css selector 1">liens 1</a></li>
<li><a href="#" title="Css selector 2">liens 2</a></li>
<li><a href="#" title="Css selector 3">liens 3</a></li>
<li><a href="#" title="Css selector 4">liens 4</a></li>
<li><a href="#" title="Css selector 5">liens 5</a></li>
</ul>
</nav>
</header>
<section>
<header>
<!-- au passage de la souris sur header, souligner le titre h1.-->
<h1>Titre</h1>
<h4>Chapeau</h4>
</header>
<!-- sélectionner chaque article et appliquer une couleur de fond -->
<article>
<!-- mettre un fond gainsboro au header de tous les articles -->
<header>
<span> Ecrit le 02/04/2024 </span>
</header>
<!-- mettre le texte de ce h3 en steelblue -->
<!-- mettre la première lettre de chaque h3 dans un article, en majuscule -->
<!-- modifier line-height: 0; de chaque h3, pour optimiser l'espace. -->
<h3>sous-titre</h3>
<p> blabalabaalallalalalbalalalal</p>
<!-- mettre un fond gainsboro au footer (comme le header) de tous les articles -->
<footer>
<span> Auteur : Mobilette</span>
</footer>
</article>
<article>
<header>
<span> Écrit le 02/04/2024</span>
</header>
<!-- mettre le texte de ce h3 en rouge →
<!-- mettre la première lettre de chaque h3 dans un article en majuscule -->
<h3>sous-titre 2 </h3>
<p>blabalabaalallalalalbalalalal</p>
<!-- mettre ce style :
display:inline-block;
width:50px;
height:50px;
margin:10px;
padding:10px;
à toutes les div dont la classe commence par box_ avec une couleur d'arrière-plan au choix -->
<div class="box_1">1</div>
<div class="box_2">2</div>
<div class="box_3">3</div>
<!-- idem pour toutes les div dont la classe commence par megaBox_ mais avec des dimensions de 80px de côté. Et toujours une couleur
d'arrière-plan au choix. -->
<div class="megaBox_1">1</div><div class="megaBox_2">2
</div><div class="megaBox_3">3</div>
<footer>
<span>Auteur: Louis Stiti</span>
</footer>
</article>
</section>
<footer>
<!-- appliquer à cette balise nav le style text-align:center; -->
<nav>
<ul>
<!-- mettre tous les li en display:inline-block et list-style-type:none -->
<!-- modifier text-decoration, le mettre à none sur toutes les balises a -->
<!-- et modifier la couleur des liens : color:#999; -->
<li><a href="#" title="Css selector 6">liens 6</a></li>
<li><a href="#" title="Css selector 7">liens 7</a></li>
<li><a href="#" title="Css selector 8">liens 8</a></li>
</ul>
</nav>
</footer>
</body>
</html>
- Exercice 2.3
On vous donne un morceau de code html à intégrer dans un squelette de page web, modifier le CSS pour obtenir le bandeau ci-dessous qui propose 4 liens hypertextes (boutons de navigation) vers les sites web de Pronote, Qwant, Pix et Gmail:
Vous devrez rechercher les fonctionnalités CSS dans le dossier ressources ou sur le web .
<div id="conteneur-global">
<div class="contenu">
Pronote
</div>
<div class="contenu">
Qwant
</div>
<div class="contenu">
Pix
</div>
<div class="contenu">
Gmail
</div>
</div>
Le CSS avec deux classes à compléter:
#conteneur-global {
background-color:steelblue;
display:flex;
justify-content: space-around;
position: fixed;
top: 50px;
left:5%;
width: 90%;
right:5%
}
.contenu{
background-color:gainsboro;
padding: 10px;
margin: 10px 10px 10px 10px;
font-family: Arial;
font-size: 18px;
font-weight:bold;
border : 3px grey solid ;
width:100px;
}
Créé avec HelpNDoc Personal Edition: Générer facilement des livres électroniques Kindle