CSS

Propriétés CSS : comprendre les différentes propriétés et leurs valeurs

Propriétés CSS : Comprendre les différentes propriétés et leurs valeurs


Les propriétés CSS sont des instructions qui contrôlent l'apparence et le comportement des éléments HTML sur une page Web. Chaque propriété a différentes valeurs que vous pouvez spécifier pour obtenir l'effet visuel désiré.


1. Propriétés de texte :


  • color: Définit la couleur du texte.
  • font-family: Spécifie la police de caractères.
  • font-size: Définit la taille de la police.
  • font-weight: Détermine l'épaisseur de la police (normal, bold, etc.).
  • text-align: Aligne le texte à gauche, à droite, au centre ou justifié.


Exemple :


p { 
  color: blue; 
  font-family: Arial, sans-serif; 
  font-size: 16px; 
  font-weight: bold; 
  text-align: center; 
}


2. Propriétés de fond :


  • background-color: Définit la couleur de fond.
  • background-image: Spécifie une image de fond.
  • background-repeat: Contrôle la répétition de l'image de fond (repeat, no-repeat, etc.).
  • background-position: Détermine la position de l'image de fond.
  • background-size: Spécifie la taille de l'image de fond.


Exemple :


div { 
  background-color: #f0f0f0; 
  background-image: url('background.jpg'); 
  background-repeat: no-repeat; 
  background-position: center; 
  background-size: cover; 
}


3. Propriétés de mise en page :


  • margin: Définit l'espace autour de l'élément.
  • padding: Définit l'espace à l'intérieur de l'élément.
  • width: Spécifie la largeur de l'élément.
  • height: Définit la hauteur de l'élément.
  • display: Contrôle le type d'affichage de l'élément (block, inline, etc.).


Exemple :


div { 
  margin: 10px; 
  padding: 20px; 
  width: 300px; 
  height: 200px; 
  display: block; 
}


4. Propriétés de bordure :


  • border-style: Spécifie le style de la bordure (solid, dashed, etc.).
  • border-color: Définit la couleur de la bordure.
  • border-width: Détermine l'épaisseur de la bordure.


Exemple :


div { 
  border-style: solid; 
  border-color: black; 
  border-width: 2px; 
}


5. Propriétés d'animation :


  • animation-name: Spécifie le nom de l'animation.
  • animation-duration: Définit la durée de l'animation.
  • animation-delay: Détermine le délai avant le début de l'animation.
  • animation-iteration-count: Contrôle le nombre de répétitions de l'animation.
  • animation-timing-function: Spécifie la fonction de temporisation de l'animation.


Exemple :


div { 
  animation-name: slide; 
  animation-duration: 3s; 
  animation-delay: 1s; 
  animation-iteration-count: infinite; 
  animation-timing-function: ease-in-out; 
}


En utilisant ces propriétés CSS et leurs valeurs, vous pouvez contrôler précisément l'apparence et le comportement des éléments HTML sur votre page Web.

662 vues
Posté le 23 février 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
2 686 vues
Se connecter en PHP
Nous allons dans cette vidéo créer un formulaire PHP afin de nous connecter à notre site web.Pour cela nous allons utiliser la combinaison mail + mot de passe afin de nous connecter.Nous allons...
Créer son site de rencontres
328 vues
Opérateurs arithmétiques (+, -, *, /, %)
Les opérateurs arithmétiques sont utilisés en PHP pour effectuer des opérations mathématiques sur des variables et des valeurs. Voici les opérateurs arithmétiques de base en PHP :1. Addition...
PHP
15 292 vues
Connexion PHP
Après avoir créé notre formulaire d'inscription il nous faut créer un formulaire de connexion afin que nos futurs utilisateurs puissent se connecter au site une fois...
Créer son site
16 156 vues
Première page (index.php)
Pour commencer à développer notre site nous avons besoin de créer une nouvelle page que l'on appellera index.php. Cette page fera office de page d'accueil car lorsque vous allez...
Créer son site
4 778 vues
Comment débute-t-on ?
Maintenant que vous savez qu'elles sont les différents langages web à utiliser pour développer un site, vous devez certainement vous demander "Alors, comment développe-t-on un site...
Créer son site
2 545 vues
Supprimer un ami
Nous allons repartir sur notre page voir_profil.php afin de compléter le code ci-dessous.<form method="post">   <?php     if(!isset($relation['id'])){   ?>  ...
Créer son site
1 987 vues
Utilisation de l'instruction SQL INSERT INTO pour ajouter des données à une table
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
325 vues
Utilisation de gradients, ombres et transitions pour des effets visuels
Utilisation de Gradients, Ombres et Transitions pour des Effets VisuelsEn CSS, vous pouvez utiliser des gradients, des ombres et des transitions pour ajouter des effets visuels attrayants à vos...
CSS
Publicité
Cette pub permet au site de vivre ...