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.

746 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
3 975 vues
Afficher un topic
Afficher un topic de notre forumDans notre dossier f_forum, nous allons créer une nouvelle page topic.php. Cette page affichera le topique créé par un de vos utilisateur.Nous allons...
Créer son site
354 vues
Déclaration de fonctions
Déclaration de Fonctions en JavaScriptEn JavaScript, les fonctions sont des blocs de code réutilisables qui peuvent être appelés pour effectuer une tâche spécifique. Elles peuvent prendre des...
JS
448 vues
Comparaison avec d'autres langages de programmation
Comparaison de JavaScript avec d'autres langages de programmationJavaScript est un langage de programmation unique avec ses propres caractéristiques et particularités. Comprendre comment il se...
JS
7 128 vues
Créer une barre de recherche
IntroductionDéroulement du coursCréation d'un formulaire permettant de faire une recherche d'utilisateur via un bouton afin d'afficher les résultats.Ajouter les librairies nécessaires afin de...
Créer son site
392 vues
Boucles (for, while, do-while, foreach)
Les boucles en PHP permettent d'exécuter un bloc de code plusieurs fois, en fonction d'une condition spécifiée. Les principales boucles en PHP sont for, while, do-while et foreach. Voici un cours...
PHP
13 550 vues
Notre base de données
Avant d'entamer le développement de notre futur site il nous faut une base de données afin de pouvoir ajouter, modifier ou de supprimer des informations.Étapes...
Créer son site
2 554 vues
Téléchargement et installation de PhpMyAdmin sur un serveur local ou distant
Téléchargement et Installation de PhpMyAdmin1. Téléchargement de PhpMyAdmin :Rendez-vous sur le site officiel de PhpMyAdmin à l'adresse https://www.phpmyadmin.net/.Cliquez sur le bouton de...
SQL
3 692 vues
Création de liens hypertexte avec <a>
Création de liens hypertexte avec <a>La balise <a> (ou <a href="">) est utilisée pour créer des liens hypertexte dans une page HTML. Elle permet de lier le contenu d'une page à...
HTML
Publicité
Cette pub permet au site de vivre ...