CSS3 : Selon le résumé de TakiAcademy STI, CSS3 (Cascading Style Sheets 3) est un langage utilisé pour mettre en forme et styliser des pages web. Il constitue une évolution du CSS, intégrant de nouvelles fonctionnalités pour améliorer la présentation visuelle des contenus web. La spécification CSS3 permet de séparer le contenu HTML de sa présentation, facilitant ainsi la gestion et la maintenance des styles.
Langage de mise en forme : Le CSS3 est un langage de mise en forme, ce qui signifie qu’il sert à définir l’apparence visuelle des éléments d’une page web, tels que la couleur, la taille, la police, la disposition, etc. Il fonctionne en appliquant des règles de style à des éléments HTML via des sélecteurs.
Stylisation des pages web : La stylisation des pages web désigne l’ensemble des techniques et règles permettant de transformer un contenu brut en une expérience visuelle attrayante. CSS3 joue un rôle central dans cette stylisation en permettant de créer des designs modernes, dynamiques et cohérents.
CSS3 permet de séparer le contenu HTML de sa présentation visuelle. Cela signifie que le contenu (texte, images, etc.) est distinct de la manière dont il est affiché, ce qui facilite la gestion et la mise à jour du design. Par exemple, on peut modifier l’aspect visuel sans toucher au contenu HTML lui-même, en modifiant simplement le fichier CSS ou ses règles associées.
CSS3 est une évolution du CSS avec de nouvelles fonctionnalités. Par rapport aux versions antérieures, il introduit des propriétés et des modules supplémentaires, permettant des effets visuels plus sophistiqués, des animations, des transitions, des dispositions flexibles, etc. Cette évolution répond aux besoins du design web moderne, plus interactif et esthétique.
CSS3 est essentiel pour le design web moderne. Son utilisation est incontournable pour créer des interfaces attrayantes, adaptatives et cohérentes sur différents appareils et résolutions. Il constitue la base du stylisme dans le développement web contemporain.
CSS3 est le langage fondamental qui permet de transformer un contenu HTML brut en une expérience visuelle attrayante, grâce à ses nouvelles fonctionnalités et à sa capacité à séparer la présentation du contenu. Il est indispensable pour le design web moderne.
CSS inline : Le CSS inline désigne l’écriture de règles de style directement dans une balise HTML en utilisant l’attribut style. Par exemple, <p style="color: blue;">Texte</p> applique une couleur bleue uniquement à ce paragraphe. Cette méthode permet d’ajouter rapidement des styles spécifiques à un élément, mais elle complique la maintenance si elle est utilisée en excès.
CSS interne : Le CSS interne consiste à insérer des règles de style dans la section <style> située dans l’en-tête <head> d’un document HTML. Ces règles s’appliquent à tous les éléments du document selon leur sélecteur. Exemple :
<head>
<style>
p { color: red; }
</style>
</head>
Elle permet de centraliser le style pour une seule page, facilitant la modification.
CSS externe : Le CSS externe consiste à lier un fichier .css séparé au document HTML via la balise <link>. La syntaxe est :
<head>
<link rel="stylesheet" href="style.css">
</head>
Ce fichier contient toutes les règles CSS. Cette méthode est la plus utilisée car elle facilite la maintenance, la réutilisation et la cohérence du style sur plusieurs pages.
Balise <style> : La balise <style> est utilisée pour insérer des règles CSS dans la section <head> d’un document HTML. Elle permet d’écrire du CSS interne, c’est-à-dire des règles applicables uniquement à la page en cours.
Lien <link> : La balise <link> sert à relier un document HTML à un fichier CSS externe. Elle doit spécifier l’attribut rel="stylesheet" et l’attribut href pointant vers le fichier CSS. Elle facilite la gestion centralisée des styles pour plusieurs pages.
Le CSS peut être écrit directement dans une balise HTML via l'attribut style. Par exemple : <div style="background-color: yellow;">. Cette méthode est rapide pour des styles spécifiques mais peu adaptée pour des styles globaux ou réutilisables, car elle complique la maintenance en cas de modifications multiples.
Le CSS peut être placé dans l'en-tête HTML avec la balise <style>. Cette méthode permet de centraliser les règles de style pour une seule page, facilitant leur gestion et leur modification locale.
La méthode la plus utilisée pour intégrer du CSS est le fichier externe lié avec la balise <link>. Elle permet de séparer la présentation du contenu, d’assurer une cohérence stylistique sur plusieurs pages et de simplifier la maintenance.
Le CSS externe facilite la maintenance et la réutilisation du style, car une seule modification dans le fichier .css se répercute sur toutes les pages qui y sont reliées, évitant ainsi la duplication de code.
Le choix de la méthode d’intégration du CSS dépend du contexte : pour une modification rapide ou un style spécifique, le CSS inline peut suffire, mais pour une gestion efficace et cohérente sur plusieurs pages, le CSS externe lié avec <link> est la méthode privilégiée.
Règle CSS
Une règle CSS est une instruction permettant de définir des styles pour un ou plusieurs éléments HTML. Elle est composée d’un sélecteur, qui indique quels éléments seront ciblés, suivi d’un bloc de déclarations entre accolades. Ce bloc contient une ou plusieurs déclarations de style. La syntaxe doit respecter des règles précises pour que le navigateur puisse interpréter et appliquer correctement les styles.
Sélecteur
Le sélecteur désigne l’élément ou le groupe d’éléments HTML auxquels la règle CSS s’applique. Il peut s’agir d’un nom d’élément, d’une classe, d’un identifiant ou d’autres formes de ciblage. Le sélecteur précède le bloc de déclarations et détermine la portée des styles définis.
Propriété
Une propriété est une caractéristique ou un aspect du style que l’on souhaite modifier ou définir pour un ou plusieurs éléments HTML. Elle indique ce que l’on veut changer, comme la couleur, la taille, la police, etc.
Valeur
La valeur est l’information spécifique assignée à une propriété. Elle précise le paramètre du style, par exemple, une couleur hexadécimale, une taille en pixels, ou une position.
Déclaration CSS
Une déclaration CSS consiste en une propriété suivie de deux-points, puis de sa valeur, et se termine par un point-virgule. Elle constitue une unité de style dans le bloc de déclarations. Une règle CSS peut contenir plusieurs déclarations séparées par des points-virgules.
Une règle CSS est composée d’un sélecteur suivi d’un bloc de déclarations entre accolades.
Chaque déclaration doit contenir une propriété et sa valeur, séparées par deux-points, et terminée par un point-virgule. La syntaxe correcte est essentielle pour que le navigateur applique les styles. En effet, une erreur dans la syntaxe, comme un oubli de deux-points ou de point-virgule, peut empêcher l’application du style ou provoquer des erreurs d’interprétation. La structure doit respecter l’ordre et la ponctuation précis : le sélecteur, puis le bloc de déclarations, chaque déclaration étant une propriété et une valeur séparées par deux-points, et chaque déclaration terminée par un point-virgule.
Maîtriser la structure syntaxique des règles CSS, notamment la composition du sélecteur et du bloc de déclarations, est indispensable pour écrire des styles valides et efficaces. Respecter la syntaxe garantit que le navigateur pourra interpréter et appliquer correctement les styles définis.
Sélecteur universel (*) : Le sélecteur universel cible tous les éléments d’un document HTML. Il s’écrit simplement avec un astérisque (*). Par exemple, * {margin: 0;} appliquera une marge nulle à tous les éléments de la page. Ce sélecteur est utile pour appliquer des styles globaux ou réinitialiser certains styles par défaut.
Sélecteur de type (balise) : Le sélecteur de type cible tous les éléments d’un certain type ou balise HTML. Par exemple, p {color: blue;} ne stylise que les paragraphes. Il permet de cibler précisément un type d’élément sans affecter les autres.
Sélecteur d'identifiant (#id) : Ce sélecteur cible un élément unique qui possède un attribut id spécifique. Par exemple, #menu {background-color: gray;} ne s’appliquera qu’à l’élément dont l’attribut id est « menu ». L’id doit être unique dans la page, ce qui garantit une sélection précise.
Sélecteur de classe (.class) : Le sélecteur de classe cible tous les éléments qui possèdent une classe spécifique. Par exemple, .highlight {background-color: yellow;} s’appliquera à tous les éléments ayant la classe « highlight ». Il permet de regrouper plusieurs éléments sous un même style sans limiter à un seul.
Sélecteur d'attribut : Ce sélecteur cible les éléments en fonction de leurs attributs ou de leur valeur. Par exemple, input[type="text"] cible tous les champs de formulaire de type texte. Il permet une sélection précise selon des critères spécifiques liés aux attributs.
Pseudo-classe : La pseudo-classe cible un état particulier d’un élément ou une position dans la structure du document. Par exemple, a:hover s’applique lorsqu’un lien est survolé par la souris. Elle permet d’adapter le style en fonction de l’interaction ou de la position.
Le sélecteur universel (*) a pour rôle de cibler tous les éléments présents dans un document HTML. Il est souvent utilisé pour appliquer des styles globaux ou pour réinitialiser certains styles par défaut. Par exemple, * {margin: 0; padding: 0;} supprime les marges et paddings par défaut de tous les éléments.
Le sélecteur d'identifiant (#id) permet de cibler un seul élément précis grâce à son attribut id. Étant unique, il garantit une sélection très précise. Par exemple, #header {background-color: blue;} ne s’appliquera qu’à l’élément avec id="header".
Les sélecteurs peuvent être combinés pour une sélection plus fine. Par exemple, div#main.content cible un div avec l’id « main » et la classe « content ». La combinaison permet de cibler précisément un élément en utilisant plusieurs critères.
Les pseudo-classes permettent de cibler des états ou des positions spécifiques. Par exemple, :first-child cible le premier enfant d’un parent, tandis que :hover s’applique lors du passage de la souris. Elles offrent une grande flexibilité pour rendre le design interactif ou contextuel.
Plusieurs sélecteurs peuvent partager une même règle en étant séparés par des virgules. Par exemple, h1, h2, h3 {margin-bottom: 10px;} applique la même marge inférieure à tous ces titres, simplifiant la gestion des styles.
Les sélecteurs CSS permettent de cibler précisément les éléments HTML selon leur type, attribut ou état, facilitant ainsi la stylisation fine et efficace d’une page web. Leur utilisation combinée offre une grande souplesse pour répondre à des besoins spécifiques en design.
font-family
La propriété font-family définit la police de caractères utilisée pour le texte. Elle permet de spécifier une ou plusieurs familles de polices, séparées par des virgules, afin d'assurer une compatibilité en cas d'indisponibilité de la première police. Par exemple : font-family: Arial, sans-serif;. La police de caractères influence fortement l’apparence visuelle du texte et peut contribuer à l’identité graphique d’un document ou d’un site web.
font-weight
La propriété font-weight contrôle l’épaisseur du texte, c’est-à-dire la graisse ou le poids de la police. Elle peut prendre des valeurs numériques (par exemple, 400 pour normal, 700 pour gras) ou des mots-clés (ex : normal, bold). Elle permet d’accentuer ou de diminuer la visibilité du texte en jouant sur son épaisseur.
font-style
La propriété font-style permet d’appliquer un style italique ou normal au texte. La valeur italic ou oblique rend le texte en italique, tandis que normal rétablit le style standard. Elle est souvent utilisée pour mettre en évidence des citations, des termes étrangers ou des éléments spécifiques.
font-size
La propriété font-size définit la taille du texte. Elle peut être exprimée en unités absolues (ex : px, pt) ou relatives (ex : em, %, rem). La taille du texte influence sa lisibilité et son impact visuel.
font (super-propriété)
La propriété font est une propriété raccourcie qui combine plusieurs propriétés de style de police dans un ordre précis : style, poids, taille, famille, etc. Elle permet de définir rapidement l’ensemble des caractéristiques typographiques d’un texte en une seule déclaration, par exemple : font: italic bold 16px Arial;. La syntaxe doit respecter un ordre spécifique pour être valide.
text-align
La propriété text-align gère l’alignement horizontal du texte à l’intérieur de son conteneur. Elle peut prendre des valeurs telles que left, right, center, ou justify. Elle influence la présentation visuelle du texte en déterminant sa position par rapport aux marges du bloc.
La propriété font-family définit la police de caractères. Elle permet de choisir la typographie du texte, influençant son style général et son identité visuelle. On peut spécifier plusieurs familles pour assurer une compatibilité, par exemple : font-family: "Times New Roman", serif;.
La propriété font-weight contrôle l’épaisseur du texte. Elle peut prendre des valeurs numériques ou des mots-clés, permettant d’accentuer ou d’alléger la visibilité du contenu. Par exemple, font-weight: bold; ou font-weight: 700;.
La propriété font-style permet d’appliquer un style italique ou normal. Elle est utile pour distinguer certains éléments ou pour donner un style particulier au texte. Par exemple : font-style: italic;.
La propriété font combine style, poids, taille et famille dans un ordre précis. Elle facilite la définition rapide de l’apparence typographique d’un texte en regroupant plusieurs propriétés en une seule déclaration. La syntaxe doit respecter l’ordre : style, poids, taille, famille.
La propriété text-align gère l’alignement horizontal du texte. Elle permet de positionner le texte à gauche, à droite, au centre ou de le justifier, influençant la mise en page et la lisibilité.
Appliquer les propriétés font-family, font-weight, font-style, font-size, font et text-align permet de contrôler précisément l’apparence typographique et l’alignement du contenu textuel, contribuant ainsi à une présentation claire, cohérente et esthétiquement adaptée à l’objectif du document ou du site.
background-color
La propriété background-color définit la couleur de fond d'un élément. Elle permet de choisir une couleur spécifique qui apparaîtra derrière le contenu de l'élément, en remplissant tout l'espace de l'arrière-plan.
background-image
La propriété background-image permet d'ajouter une image en arrière-plan d'un élément. Elle accepte une URL ou une image définie par une autre méthode CSS, et sert à insérer une image qui sera affichée derrière le contenu de l'élément.
background-repeat
La propriété background-repeat contrôle la répétition de l'image de fond. Elle détermine si l'image doit être répétée horizontalement, verticalement, ou pas du tout, afin d'ajuster l'affichage selon l'effet désiré.
background-size
La propriété background-size ajuste la taille de l'image de fond. Elle peut prendre des valeurs telles que cover (pour couvrir toute la zone de l'élément en conservant le ratio), contain (pour contenir toute l'image dans l'élément), ou des dimensions précises (en pixels ou en pourcentage).
background (super-propriété)
La propriété background est une propriété composite qui combine plusieurs aspects de l'arrière-plan : image, couleur, répétition, position, et taille. Sa syntaxe permet de définir en une seule déclaration l'ensemble de ces caractéristiques, facilitant la gestion visuelle de l'arrière-plan.
background-color définit la couleur de fond d'un élément. Cela permet de gérer l'aspect visuel de l'arrière-plan en choisissant une couleur spécifique, que ce soit une couleur unie ou une nuance particulière. Par exemple, on peut utiliser background-color: #ff0000; pour un fond rouge.
background-image permet d'ajouter une image en arrière-plan. Elle peut être définie via une URL ou une autre méthode d'insertion d'image. Par exemple, background-image: url('image.png'); insère l'image située à cette URL derrière le contenu de l'élément.
background-repeat contrôle la répétition de l'image de fond. La valeur repeat (par défaut) répète l'image horizontalement et verticalement pour couvrir toute la zone. La valeur no-repeat empêche toute répétition, affichant l'image une seule fois. La valeur repeat-x répète uniquement horizontalement, et repeat-y uniquement verticalement.
background-size ajuste la taille de l'image de fond. La valeur cover permet à l'image de couvrir entièrement l'élément tout en conservant ses proportions, pouvant couper une partie de l'image si nécessaire. La valeur contain ajuste l'image pour qu'elle soit entièrement visible dans l'élément, en conservant ses proportions, ce qui peut laisser des espaces vides. Il est aussi possible de définir des dimensions précises, comme background-size: 100px 50px; pour une largeur de 100 pixels et une hauteur de 50 pixels.
background (super-propriété) combine image, répétition et taille avec une syntaxe spécifique. Elle permet de définir simultanément plusieurs aspects de l'arrière-plan en une seule déclaration, par exemple :
background: #ffffff url('image.png') no-repeat center/cover;
Ce qui signifie une couleur blanche, une image, sans répétition, centrée, et ajustée pour couvrir l'élément.
Gérer l'aspect visuel des fonds d'éléments consiste à combiner couleurs et images avec un contrôle précis de leur répétition, taille et position, notamment à travers la propriété background qui synthétise ces réglages pour une gestion efficace et esthétique de l'arrière-plan.
border-color
La propriété border-color définit la couleur de la bordure d’un élément. Elle permet de personnaliser visuellement la limite de l’élément en choisissant une couleur spécifique. La couleur peut être spécifiée par un nom de couleur (ex : red), un code hexadécimal (ex : #ff0000), ou une valeur RGB (ex : rgb(255,0,0)). La propriété peut également prendre plusieurs valeurs si l’on souhaite définir des couleurs différentes pour chaque côté de la bordure, en utilisant la syntaxe de la propriété border-color avec plusieurs valeurs séparées par des espaces.
border-style
La propriété border-style spécifie le style de la bordure. Elle détermine l’aspect visuel de la ligne qui encadre l’élément. Les styles possibles incluent :
border-width
La propriété border-width règle l’épaisseur de la bordure. Elle peut être exprimée en pixels (ex : 2px), en em, en rem, ou en autres unités CSS. Elle détermine la largeur de la ligne de la bordure, influençant la visibilité et la style de la limite de l’élément. La valeur peut être unique pour tous les côtés ou spécifique à chaque côté en utilisant la syntaxe avec plusieurs valeurs.
border-radius
La propriété border-radius arrondit les coins de la bordure. Elle permet de créer des coins arrondis en spécifiant un rayon en pixels ou en autres unités CSS. Par exemple, border-radius: 10px arrondira tous les coins avec un rayon de 10 pixels. Il est aussi possible de définir des rayons différents pour chaque coin en utilisant plusieurs valeurs séparées par des espaces ou des barres obliques, permettant ainsi de personnaliser la forme des coins.
border (super-propriété)
La propriété border est une super-propriété qui combine en une seule déclaration la largeur, le style et la couleur de la bordure. La syntaxe doit respecter un ordre précis :
border: [largeur] [style] [couleur];
Par exemple, border: 2px solid red; définit une bordure rouge, continue, d’une épaisseur de 2 pixels. Cette propriété simplifie la personnalisation des contours en regroupant les trois aspects essentiels dans une seule déclaration.
[largeur] [style] [couleur]. Elle facilite la personnalisation en regroupant ces trois aspects dans une seule déclaration.Personnaliser les contours des éléments en utilisant les propriétés border-color, border-style, border-width et border-radius permet d’améliorer l’esthétique et la lisibilité, en adaptant la forme, la couleur et l’épaisseur des bordures selon le rendu souhaité. La super-propriété border offre une façon simplifiée de définir rapidement tous ces aspects en une seule ligne.
list-style-type :
Selon la source, cette propriété définit le type de puce ou de numérotation utilisé dans une liste. Elle permet de choisir parmi différents styles tels que cercle, carré ou numérotation romaine. Elle influence directement l’aspect visuel de la liste en déterminant la forme du marqueur.
list-style-position :
Cette propriété détermine la position du marqueur par rapport au texte de la liste. Elle peut être placée à l’intérieur ou à l’extérieur du contenu de l’élément de liste, influençant ainsi l’aspect de la liste et sa lisibilité.
list-style-image :
Elle permet de remplacer la puce ou le numéro par une image personnalisée. La propriété accepte une URL d’image qui sera affichée à la place du marqueur classique, offrant une personnalisation avancée de l’apparence des listes.
list-style (super-propriété) :
Il s’agit d’une propriété regroupant en une seule déclaration les trois propriétés précédentes : type, position et image. Elle permet de contrôler simultanément l’ensemble de l’apparence des listes en une seule ligne, dans un ordre précis.
list-style-type définit le style de la puce ou de la numérotation, comme par exemple circle, square, ou upper-roman. Ce paramètre permet de choisir le type de marqueur utilisé pour identifier chaque élément de la liste, facilitant ainsi la différenciation visuelle et l’organisation du contenu.
list-style-position positionne le marqueur à l’intérieur ou à l’extérieur du texte. La valeur inside place le marqueur à l’intérieur de la zone de contenu, ce qui aligne le texte avec le marqueur. La valeur outside le place à l’extérieur, séparant visuellement le marqueur du texte, ce qui peut améliorer la lisibilité.
list-style-image remplace le marqueur classique par une image. La propriété accepte une URL d’image qui sera affichée à la place du symbole ou du numéro. Cela permet une personnalisation poussée pour adapter l’aspect des listes à un style graphique spécifique.
La propriété list-style combine ces trois aspects — type, position et image — en une seule déclaration. Son ordre précis est : d’abord le type, puis la position, puis l’image. Elle permet de contrôler globalement l’apparence d’une liste de façon concise et efficace.
Contrôler l’apparence des listes à l’aide de ces propriétés permet d’organiser visuellement le contenu de façon claire et esthétique, améliorant ainsi la lisibilité et la hiérarchisation de l’information. La propriété list-style offre une solution complète pour personnaliser rapidement l’aspect des listes.
table-layout : Propriété CSS qui détermine la méthode utilisée pour calculer la largeur des colonnes d’un tableau. Elle influence la façon dont le navigateur adapte la disposition du tableau en fonction de son contenu ou de valeurs fixes.
border-collapse : Propriété CSS qui contrôle la manière dont les bordures des cellules d’un tableau sont affichées. Elle permet de fusionner ou de séparer les bordures adjacentes pour une présentation plus ou moins compacte.
largeur des colonnes : Dimension horizontale des colonnes d’un tableau, pouvant être définie explicitement ou laissée à l’adaptation automatique selon la méthode choisie (auto ou fixed).
table-layout :
border-collapse :
L’utilisation de la propriété table-layout permet d’optimiser la présentation en contrôlant si la largeur des colonnes doit s’adapter au contenu ou rester fixe, facilitant ainsi la gestion de la mise en page. La propriété border-collapse influence directement l’aspect visuel des bordures, permettant de choisir entre un style fusionné ou séparé pour une meilleure lisibilité ou esthétique selon le contexte.
filter
La propriété CSS filter applique des effets visuels aux images ou autres éléments HTML. Elle permet de modifier l’apparence visuelle d’un élément en superposant divers effets, tels que le flou, la conversion en niveaux de gris, ou l’inversion des couleurs. La propriété filter peut accepter une ou plusieurs fonctions, séparées par des espaces, chacune correspondant à un effet spécifique.
blur()
La fonction blur() est une valeur de la propriété filter qui ajoute un flou gaussien à l’image. Elle prend un rayon en pixels comme paramètre, par exemple blur(5px), ce qui signifie que l’image sera floutée avec un rayon de 5 pixels. Plus le rayon est élevé, plus l’image devient floue, créant un effet de douceur ou de distorsion.
grayscale()
La fonction grayscale() convertit une image en niveaux de gris. Elle accepte un facteur compris entre 0 et 1, où 0 correspond à aucune conversion (l’image conserve ses couleurs originales) et 1 à une conversion totale en noir et blanc. Par exemple, grayscale(0.5) appliquera un effet de gris partiel, donnant une image partiellement désaturée.
invert()
La fonction invert() inverse les couleurs d’une image selon un facteur compris entre 0 et 1. Un facteur de 1 inverse complètement toutes les couleurs (les couleurs chaudes deviennent froides, etc.), tandis qu’un facteur de 0 n’apporte aucune inversion. Par exemple, invert(1) produira une image avec des couleurs totalement inversées, créant un effet de négatif.
La propriété filter permet de modifier dynamiquement l’apparence des images en appliquant des effets visuels tels que le flou, la conversion en niveaux de gris ou l’inversion des couleurs, offrant ainsi une grande flexibilité pour créer des effets visuels variés.
width
La propriété width définit la largeur d’un élément. Elle peut être exprimée en pixels (px), en pourcentage (%) ou en autres unités CSS. Elle détermine l’espace horizontal occupé par l’élément dans le flux de la page ou dans son conteneur. Par exemple, une largeur de 300px fixe l’élément à 300 pixels, tandis qu’un pourcentage, comme 50%, ajuste la largeur en fonction de la taille du conteneur parent.
height
La propriété height indique la hauteur d’un élément. Tout comme width, elle peut être exprimée en pixels, pourcentage ou autres unités. Elle contrôle l’espace vertical occupé par l’élément. La hauteur peut être fixe ou relative, selon la valeur donnée.
padding
Le padding crée un espace intérieur entre le contenu de l’élément et sa bordure. Il s’agit d’un espace intérieur qui augmente la taille visuelle de l’élément sans modifier sa dimension extérieure (si la box-sizing est par défaut). Le padding peut être défini uniformément ou séparément pour chaque côté (top, right, bottom, left). Par exemple, padding: 10px ajoute un espace de 10 pixels tout autour du contenu.
margin
Le margin correspond à l’espace extérieur entre la bordure de l’élément et les éléments voisins. Il permet de gérer l’espacement entre plusieurs éléments dans la mise en page. Comme pour le padding, il peut être défini uniformément ou pour chaque côté. Par exemple, margin: 20px crée un espace de 20 pixels autour de l’élément, séparant visuellement cet élément des autres.
box-shadow
La propriété box-shadow ajoute une ombre portée à l’élément. Elle peut être interne ou externe, selon la syntaxe utilisée. La syntaxe de base inclut la position horizontale, verticale, la diffusion, la couleur et éventuellement le flou. Par exemple, box-shadow: 2px 2px 5px rgba(0,0,0,0.3) crée une ombre portée décalée de 2 pixels à droite et en bas, avec un flou de 5 pixels et une couleur semi-transparente noire.
overflow
La propriété overflow contrôle le comportement du contenu qui dépasse la taille définie de l’élément. Elle peut prendre plusieurs valeurs :
width et height définissent les dimensions d’un élément en pixels ou pourcentage. La width détermine la largeur horizontale, tandis que la height règle la hauteur verticale. Ces propriétés peuvent être fixes ou relatives, permettant d’adapter la taille à la taille du conteneur ou à la fenêtre.
padding crée un espace intérieur entre le contenu et la bordure de l’élément. Il augmente la zone visible de l’élément sans modifier ses dimensions extérieures, sauf si la propriété box-sizing est modifiée.
margin crée un espace extérieur entre la bordure de l’élément et les autres éléments. Il sert à gérer l’espacement global dans la mise en page, en séparant visuellement les éléments.
box-shadow ajoute une ombre portée à l’élément, interne ou externe, pour donner un effet de profondeur ou de relief. La propriété accepte plusieurs paramètres pour ajuster la position, la diffusion, la couleur et la taille de l’ombre.
overflow contrôle comment le contenu débordant est géré : il peut être visible, masqué, ou faire apparaître des barres de défilement. Cela permet d’éviter que le contenu ne déborde de façon indésirable ou de gérer la visibilité du contenu excédentaire.
Gérer l’espace et les effets visuels autour des éléments avec width, height, padding, margin, box-shadow et overflow permet d’obtenir un design clair, structuré et visuellement attractif. Ces propriétés sont essentielles pour contrôler la taille, l’espacement et l’apparence des éléments dans une mise en page.
:link
La pseudo-classe :link s'applique à un lien hypertexte qui cible un lien non visité. Elle permet de définir le style visuel de ces liens avant que l'utilisateur ne clique dessus.
Exemple : a:link { color: blue; } indique que tous les liens non visités seront bleus.
:visited
La pseudo-classe :visited concerne un lien hypertexte qui a déjà été visité par l'utilisateur. Elle permet de différencier visuellement les liens déjà consultés.
Exemple : a:visited { color: purple; } indique que les liens visités seront de couleur violette.
:hover
La pseudo-classe :hover s'applique lorsqu'un utilisateur survole un élément avec la souris. Elle est souvent utilisée pour améliorer l'interactivité visuelle, notamment pour les liens.
Exemple : a:hover { color: red; } modifie la couleur du lien lors du passage de la souris.
:active
La pseudo-classe :active s'applique pendant la durée du clic sur un élément, c'est-à-dire entre le moment où l'utilisateur appuie sur le bouton de la souris et le relâchement. Elle permet de styliser l'élément en cours d'interaction.
Exemple : a:active { color: green; } indique que le lien devient vert lors du clic.
Les pseudo-classes :link, :visited, :hover et :active permettent de styliser un lien selon son état d’interaction, offrant ainsi une meilleure expérience utilisateur en différenciant visuellement les liens non visités, visités, survolés ou en cours de clic.
| Aspect | CSS2 | CSS3 | Auteur / Référence |
|---|---|---|---|
| Fonctionnalités | Mise en forme de base, sélecteurs simples | Nouvelles propriétés, modules, animations, transitions | TakiAcademy STI |
| Séparation contenu/presentation | Possible via fichiers externes | Même principe, avec davantage de modules | TakiAcademy STI |
| Méthodes d'écriture | Inline, interne, externe | Inline, interne, externe | TakiAcademy STI |
| Méthodes d'écriture CSS | Description | Avantages | Inconvénients |
|---|---|---|---|
| CSS inline | Style dans attribut style d’un élément HTML | Rapide pour styles spécifiques | Difficile à maintenir, peu réutilisable |
| CSS interne | <style> dans <head> | Centralise pour une page | Non réutilisable sur plusieurs pages |
| CSS externe | Fichier .css lié via <link> | Réutilisable, facile à maintenir | Nécessite gestion des fichiers séparés |
.) et d’ID (#) : ne pas inverser leur usage.<style>).<link>.color, font-family, font-size).background-color, background-image).border, border-radius).list-style-type, list-style-position).border-collapse, border-spacing).width, height, opacity).margin, padding, display, position).:link, :visited, :hover, :active).Тествайте знанията си по Introduction aux styles CSS3 с 9 въпроса с множество отговори с подробни корекции.
1. Quelle est la conséquence de l'utilisation de CSS3 dans la conception des pages web ?
2. Quelle est la fonction principale de CSS3 dans la conception web selon le résumé de TakiAcademy STI?
Запомнете ключовите концепции на Introduction aux styles CSS3 с 9 интерактивни флашкарти.
CSS3 — définition ?
Langage de mise en forme pour styliser les pages web.
CSS3 — définition?
Langage de stylisation pour pages web.
Méthodes d'écriture CSS
Inline, interne, externe, chacune avec ses avantages et inconvénients.
Intelligence Artificielle
Bases de données
Bases de données
Bases de données
Импортирайте курса си и AI генерира листове, тестове и флашкарти за 30 секунди.
Генератор на листове