Color :
color: Définit la couleur du texte.
background-color: Définit la couleur de fond.
background-image: Définit une image de fond.
opacity: Définit la transparence de l'élément.
Typographie :
font-family: Définit la police de caractères.
font-size: Définit la taille de la police.
font-weight: Définit l'épaisseur de la police (gras, normal, etc.).
text-align: Aligne le texte horizontalement (gauche, droite, centré, justifié).
line-height: Définit la hauteur de ligne.
Mise en forme du texte :
text-decoration: Définit la décoration du texte (souligné, barré, etc.).
text-transform: Transforme le texte en majuscules, minuscules, ou en capitales initiales.
letter-spacing: Définit l'espacement entre les lettres.
word-spacing: Définit l'espacement entre les mots.
Mise en forme des bordures :
border: Définit une bordure autour de l'élément.
border-width: Définit l'épaisseur de la bordure.
border-color: Définit la couleur de la bordure.
border-radius: Définit le rayon de courbure des coins de la bordure.
Mise en forme de la mise en page :
margin: Définit les marges extérieures de l'élément.
padding: Définit les marges intérieures de l'élément.
width: Définit la largeur de l'élément.
height: Définit la hauteur de l'élément.
display: Définit le type d'affichage de l'élément (block, inline, flex, etc.).
Positionnement :
position: Définit le type de positionnement (relative, absolue, fixe, statique).
top, bottom, left, right: Définit la position de l'élément par rapport à son conteneur positionné.
Flexbox et Grid :
display: flex: Active le modèle de disposition flexbox pour un conteneur.
display: grid: Active le modèle de disposition grid pour un conteneur.
Diverses propriétés flexbox et grid pour contrôler le positionnement et la dimension des éléments
enfants.
Animations et transitions :
transition: Définit une transition pour les changements de propriétés CSS.
animation: Définit une animation personnalisée.
Autres :
opacity: Définit la transparence de l'élément.
overflow: Définit le comportement du contenu dépassant les dimensions de l'élément.
z-index: Définit l'empilement de l'élément dans la dimension z (profondeur).
Exercice CSS - Création d'une fiche de contact
Description : Dans cet exercice, vous allez créer une mise en page CSS pour une fiche
de contact. La fiche de contact doit inclure les éléments suivants :
1. Un titre indiquant "Fiche de contact".
2. Un formulaire avec des champs pour saisir le nom, le prénom, l'e-mail et un
message.
3. Les champs du formulaire doivent être alignés verticalement.
4. Les champs de saisie doivent avoir une largeur de 100% et être espacés
uniformément.
5. Le bouton "Envoyer" doit être centré et avoir une couleur de fond bleue et du
texte blanc.
6. La fiche de contact doit être centrée horizontalement sur la page et avoir une
largeur de 80% de la largeur de la fenêtre du navigateur.
7. Ajoutez des styles pour rendre la fiche de contact attrayante et conviviale.
Consignes :
Utilisez un fichier HTML pour structurer votre page et inclure le formulaire.
Utilisez un fichier CSS pour styliser la fiche de contact en utilisant les sélecteurs
appropriés.
Essayez d'utiliser des sélecteurs de classe ou d'ID pour cibler spécifiquement
les éléments que vous souhaitez styliser.
Testez votre mise en page dans différents navigateurs pour vous assurer
qu'elle est compatible.
Bonus :
Ajoutez des effets de survol sur le bouton "Envoyer" pour le rendre plus
interactif.
Utilisez des polices Google Fonts pour améliorer l'apparence de votre texte.
Ajoutez une image de fond ou des bordures décoratives pour embellir la fiche
de contact.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>fiche</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>fiche de contact</h1>
<form name="fiche " action="/submit" method="post" class="form" >
<label for="nom" class="label" >nom:</label>
<input type="text" id="nom" name="nom" required class="input" >
<br>
<label for="prenom" class="label">prenom:</label>
<input type="text" id="prnom" name="prenom" class="input"
required > <br>
<label for="e-mail" class="label">e-mail:</label>
<input type="email" id="e-mail" name="e-mail" class="input"
required > <br>
<label for="message" class="label">message:</label>
<input type="text" id="message" name="message"class="input"
required > <br>
<button type="submit" class="button">soumetre</button>
</form>
</body>
</html>
* styles.css */
h1 {
text-align: center;
color: #333;
}
.form {
max-width: 400px; /* Définit la largeur maximale du formulaire */
margin: 0 auto; /* Centre le formulaire horizontalement sur la page */
}
.label {
display: block; /* Affiche les étiquettes sur une ligne séparée */
margin-bottom: 5px; /* Ajoute un espace en bas des étiquettes */
color: #666; /* Couleur du texte pour les étiquettes */
}
.input {
width: 100%; /* Remplit la largeur de leur conteneur */
padding: 10px; /* Ajoute un remplissage de 10 pixels à l'intérieur des
champs */
border: 1px solid #ccc; /* Ajoute une bordure de 1 pixel solide avec une
couleur grise */
border-radius: 5px; /* Arrondit les coins des champs */
margin-bottom: 10px; /* Ajoute un espace en bas des champs */
box-sizing: border-box; /* Assure que la largeur inclut le padding et la
bordure */
}
.button {
width: 100%; /* Remplit la largeur de son conteneur */
padding: 10px; /* Ajoute un remplissage de 10 pixels au bouton */
background-color: #007bff; /* Couleur de fond bleue pour le bouton */
color: #fff; /* Couleur du texte blanc pour le bouton */
border: none; /* Supprime la bordure du bouton */
border-radius: 5px; /* Arrondit les coins du bouton */
cursor: pointer; /* Change le curseur en pointeur au survol du bouton */
transition: background-color 0.3s; /* Ajoute une transition en douceur
pour le changement de couleur de fond */
}
.button:hover {
background-color: #0056b3; /* Change la couleur de fond en bleu plus foncé
au survol */
}
