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.

663 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
1 641 vues
Afficher les messages dans l'ordre
Dans cette vidéo on va personnaliser (un peu) l'interface des conversations avec du CSS.Nous allons également remettre les messages dans l'ordre et lors de la réception du message par le...
Créer son site de rencontres
284 vues
CSS interne : l'utilisation de balises <style> dans la section <head> du document HTML
CSS Interne : L'utilisation de balises <style> dans la section <head> du document HTMLLe CSS interne est une méthode de stylisation où les styles sont définis directement dans la...
CSS
18 000 vues
Créer un profil PHP
Après avoir créé notre page de connexion et notre page d'inscription il est temps de créer un profil pour votre utilisateur !La page profil permettra plusieurs choses ! D'éditer ses informations...
Créer son site
4 315 vues
Ajout d'images avec <img> et attributs src, alt et width
Ajout d'images avec <img> et attributs src, alt et widthLa balise <img> est utilisée pour afficher des images dans une page HTML. Elle nécessite l'utilisation de certains attributs pour...
HTML
461 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
5 040 vues
Le langage HTML
Avant de commencer cet article nous allons commencer par un rappel.Rappel : Pour développer en HTML, il faut utiliser n'importe quel éditeur de texte et enregistrer le fichier au format .html afin...
Créer son site
5 267 vues
Créer son blog
Développer son Blog de A à ZAprès avoir terminer les articles pour développer votre Forum de A à Z maintenant nous allons nous attaquer à la création d'un blog complet !Pour...
Créer son site
2 142 vues
Demande d'amis en PHP (2/3)
Dans cette deuxième vidéos nous allons développer notre système de relation d’amitié afin de faire apparaître les bons boutons en fonction de l'état de la relation entre 2 membres.
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...