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.

447 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
5 065 vues
Afficher la liste des catégories
Pour commencer nous allons créer la page maître de notre forum. C'est cette page qui contiendra les différentes catégories.Tout d'abord nous allons créer un dossier que nous...
Créer son site
300 vues
Sélection d'éléments HTML
Sélection d'Éléments HTML en JavaScriptLa sélection d'éléments HTML est une opération fondamentale en JavaScript. Cela permet d'interagir avec les éléments de la page web, de modifier leur...
JS
3 685 vues
Différencier HTML (structure) de CSS (présentation)
Différencier HTML (structure) de CSS (présentation)HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages complémentaires utilisés pour créer des sites Web, mais ils...
CSS
1 589 vues
Accepter ou refuser une demande d'amis
Nous allons enfin terminer notre système d'amis en permettant à l'utilisateur d'accepter ou de refuser une ou plusieurs demande grâce à une liste contenant toutes les demandes que l'utilisateur...
Créer son site de rencontres
8 265 vues
Barre de recherche : Complète
Barre de rechercheMaintenant que notre formulaire et que notre script sont fait, nous allons créer une nouvelle page PHP que l'on nommera recherche_utilisateur.php.Dans cette page...
Créer son site
10 482 vues
Afficher tous vos utilisateurs
Dans cet article nous allons afficher tous les utilisateurs de notre base de données afin qu'un utilisateur puisse accéder à n'importe quel profil d'un autre utilisateur par la...
Créer son site
1 885 vues
Installer SASS sur votre système
Installation de SASS sur votre système1. Installer Node.js :SASS nécessite Node.js pour fonctionner. Si vous ne l'avez pas déjà installé, téléchargez et installez Node.js à partir du site...
Sass
403 vues
Sélecteurs CSS : identifier les éléments HTML auxquels appliquer des styles
Sélecteurs CSS : Identifier les éléments HTML auxquels appliquer des stylesLes sélecteurs CSS sont des motifs qui permettent de cibler et de sélectionner des éléments HTML spécifiques afin de...
CSS
Publicité
Cette pub permet au site de vivre ...