Labo3
Exercice 1
#titre-principal{
color: violet;
}
p {
margin: 15px;
}
.alerte{
color: orange;
}
li {
background-color: lightgrey;
}
#bouton-action {
font-weight: bold;
}
Exercice 2
.conteneur p {
color: blue;
}
.sous-section > ul {
border: 1px dashed;
}
.sous-section li {
background-color: yellow;
}
.sous-section ul ul li {
color: red;
}
Exercice 3
.important + p {
color: green;
}
a[target="_blank"] {
font-weight: bold;
}
li:first-child {
color: red;
}
Exercice 4
h2 ~ p {
color: orange;
}
.special {
border: 1px dashed;
}
input:checked + label[for="check1"] {
color: red;
}
Exercice 5
<!--
Créer un document HTML simple avec un titre, un paragraphe et une image. Ajouter
un style CSS pour modifier la couleur de fond de la page.
-->
<!DOCTYPE html>
<html>
<head>
<title>Mon document HTML</title>
<style>
body {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Titre de mon document</h1>
<p>Ceci est un paragraphe de texte.</p>
<img src="https://via.placeholder.com/500x300" alt="description de l'image">
</body>
</html>
<!--
Modifier la page précédente pour y ajouter un paragraphe ainsi qu'un style CSS pour
modifier la couleur et la police du texte dans le paragraphe de texte.
-->
<!DOCTYPE html>
<html>
<head>
<title>Mon document HTML</title>
<style>
body {
background-color: #f2f2f2;
}
p {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Titre de mon document</h1>
<p>Ceci est un paragraphe de texte.</p>
<img src="chemin/vers/image.jpg" alt="description de l'image">
</body>
</html>
<!--
Modifier la page précédente pour y ajouter une liste à puces avec plusieurs éléments.
Ajouter un style CSS pour modifier la couleur et la taille de la puce.
-->
<!DOCTYPE html>
<html>
<head>
<title>Mon document HTML</title>
<style>
body {
background-color: #f2f2f2;
}
p {
color: #333;
font-family: Arial, sans-serif;
}
ul {
list-style-type: circle;
color: #666;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Titre de mon document</h1>
<p>Ceci est un paragraphe de texte.</p>
<ul>
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ul>
<img src="chemin/vers/image.jpg" alt="description de l'image">
</body>
</html>
<!--
Modifier la page précédente pour y ajouter un style CSS pour modifier la couleur et la
taille des liens hypertextes. Ajouter Ă©galement un style CSS pour modifier la couleur
de fond du texte d'un bouton.
-->
<!DOCTYPE html>
<html>
<head>
<title>Mon document HTML</title>
<style>
body {
background-color: #f2f2f2;
}
p {
color: #333;
font-family: Arial, sans-serif;
}
ul {
list-style-type: circle;
color: #666;
font-size: 16px;
}
a {
color: blue;
font-size: 20px;
}
button {
background-color: #c2c2c2;
}
</style>
</head>
<body>
<h1>Titre de mon document</h1>
<p>Ceci est un paragraphe de texte.</p>
<ul>
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ul>
<a href="#">Un lien hypertexte</a>
<button>Un bouton</button>
<img src="chemin/vers/image.jpg" alt="description de l'image">
</body>
</html>
Exercice 6
<!--
Créer un menu de navigation animé avec des transitions CSS.
Ajouter des styles pour changer la couleur et la forme des éléments de menu lorsqu'ils
sont survolés ou cliqués.
-->
<!DOCTYPE html>
<html>
<head>
<title>Mon document HTML</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px;
position: sticky;
top: 0;
z-index: 1;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
margin: 0 20px;
position: relative;
transition: all 0.3s ease;
padding-bottom: 10px;
border-bottom: 2px solid transparent;
}
nav a:hover {
color: #f7b731;
border-bottom: 2px solid #f7b731;
}
nav a.active {
color: #f7b731;
border-bottom: 2px solid #f7b731;
}
</style>
</head>
<body>
<nav>
<a href="#" class="active">Accueil</a>
<a href="#">Services</a>
<a href="#">A propos</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
Exercice 7
<!--
Utiliser des styles CSS pour créer un formulaire de contact avec des champs de
texte, des boutons et des messages de validation. Ajouter des styles pour rendre
le formulaire plus convivial et esthétique.
-->
<!DOCTYPE html>
<html>
<head>
<title>Formulaire CSS</title>
<link rel="stylesheet" href="./exercice3.css">
</head>
<body>
<form action="#" method="post">
<h2>Contactez-nous</h2>
<label for="name">Nom</label>
<input type="text" id="name" name="name" required>
<label for="email">Courriel</label>
<input type="email" id="email" name="email" required>
<label for="subject">Sujet</label>
<input type="text" id="subject" name="subject" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Envoyer</button>
</form>
</body>
</html>
form {
display: grid;
grid-template-columns: 100fr;
grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px ;
align-items: center;
justify-items: center;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
border-radius: 10px;
}
h2 {
margin-top: 0;
}
label {
font-weight: bold;
}
input,
textarea {
width: 100%;
padding: 10px;
margin: 5px 0 15px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
font-size: 16px;
}
input:focus,
textarea:focus {
outline: none;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
button {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin: 10px 0;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background-color: #2e8b57;
}
input:invalid,
textarea:invalid {
border-color: #e74c3c;
}
input:valid,
textarea:valid {
border-color: #2ecc71;
}