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.

466 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 850 vues
Gestion des demandes
Nous allons maintenant nous attaquer à la gestion des demandes d'amis. Pour cela vous allez créer une nouvelle page que nous allons appeler demandes-amis.php.Dans cette nouvelle page, dans un...
Créer son site
15 126 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
4 305 vues
Le langage CSS
Le CSS permet de concevoir le design de votre site web. Le CSS agit sur des éléments HTML.On peut intégrer le CSS de deux façons :Directement sur les éléments de votre HTML,Mettre le...
Créer son site
3 531 vues
Créer un topic
Créer un topicDans notre dossier **f_forum**, nous allons créer une nouvelle page creer_topic.php. Cette page permettra à vos utilisateurs de pouvoir créer un topic afin de demande de l'aide,...
Créer son site
3 163 vues
Faire une demande d'ami
Maintenant que notre base de données est créée, nous allons nous attaquer à la partie visuelle de notre système d'amis.Pour commencer nous allons créer notre formulaire pour faire une demande...
Créer son site
322 vues
Comprendre les concepts de marge, bordure, rembourrage et largeur/hauteur
Dans CSS, la mise en page des éléments est souvent influencée par quatre concepts clés : la marge, la bordure, le rembourrage et la largeur/hauteur. Comprendre ces concepts est essentiel pour...
CSS
3 776 vues
Notre base de données
Avant de commencer notre cours pour créer notre système d'amis, nous allons commencer par créer notre table de relation.Pour cela nous avons besoin d'un demandeur et d'un receveur.Le demandeur est...
Créer son site
4 134 vues
Créer sa première page
Attention ! ⚠️ À partir de ce cours je ne détaillerais plus comme le cours précédent.À la place il sera expliqué ce que la vidéo va vous apporter et .. comme toujours le code sera...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...