User Tools

Site Tools


frontend:css

CSS

logo

Site référence

Présentation

Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Compatibilité des navigateurs

Chaque navigateur, comme Chrome, Firefox, Safari, Edge, (et chaque version de ces navigateurs) interprète de manière différente le code CSS.

Pour être sûr qu'une propriété, une valeur ou un concept est utilisable dans le plus de navigateurs possibles (c'est surtout le nombre de gens qui importe), il faut aller sur caniuse pour vérifier la compatibilité avec les navigateurs.

On peut utiliser des toolkit qui vont préfixer notre code pour que les instructions, non comprises par les navigateurs, soient remplacer par des instructions qu'ils pourront comprendre. Il y a des site tel que Autoprefixer CSS online qui vont créer les préfixes sur notre code. Il existe aussi des extensions à VSCode tel que Autoprefixer.

Il faudra le faire à chaque fois pour être sûr de la compatibilité de notre site.

Unités de mesures

  • Absolues
  • px
  • cm, mm (pour l'impression)
  • Relatives
  • % : relative au parent
  • vw : width en pourcentage de l'espace visible, relative à la fenêtre
  • vh : height en pourcentage de l'espace visible, relative à la fenêtre
  • vmin : dimension la plus petite entre vw et vh (ex : 50vm = 50vw ou 50vh)
  • vmax : dimension la plus grande entre vw et vh (ex : 50vm = 50vw ou 50vh)
  • em : taille par rapport à la taille de la police de l'élément
  • rem : taille par rapport à la taille de la police défini dans la racine (html ou body)
  • fr : pour les grid, correspond à une fraction du parent

Polices personnalisées

Cela permet d'utiliser des polices personnalisées en les important directement à la consultation du site.

  • Utilisation
  • Grâce à
    @font-face
  • Pour gérer la façon dont le navigateur va charger les polices, swap, optional…1)
    font-display
  • On peut trouver des polices sur Google Fonts
  • Passage de la vidéo de Grafikart qui en parle

Background

Propriétés

background-color

background-image (background-repeat, background-position)

background-size

background-attachement (local*, fixed : l'image est calculée par rapport au body et elle est figée, scroll)

background-clip : pour choisir où est attachée l'image (borer, padding…)

background-origin : comment est placée l'origine de l'image (border, padding…)

linear-gradient : linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,255,255,0.5))

A savoir

Possibilité de mettre plusieurs images, la première se trouve au-dessus et ainsi de suite

Display

Block, inline et inline-block

block

S'empilent verticalement

width et height utilisables

Déclenche le passage à la ligne des éléments suivants

inline

S'empilent horizontalement

Entourent le contenu (ex : span, a, strong, em)

inline-block

C'est un inline avec en plus width et height utilisables

Flexbox

Il faut mettre display: flex; dans le conteneur pour l'utiliser dans les éléments enfants

Si le conteneur est trop petit, les éléments vont se réduire pour y rentrer

Cela casse le système de fusion des marges, chaque marge est utilisée.

Propriétés du conteneur

flex-wrap : pour le retour à la ligne : nowrap* , wrap ou wrap-reverse

justify-content : alignement dans le conteneur : flex-start* , flex-end, center, space-between, space-around ou space-evenly**

align-items : alignement vertical des élements : flex-start, flex-end, center, stretch* ou baseline

align-content : alignement vertical des lignes d'élements : flex-start, flex-end, center, stretch* ou baseline

flex-direction : direction des élements : row* , row-reverse, column, ou column-reverse

Propriétés des éléments

order : position de l'élément

align-self : alignement de l'élément

flex-grow : indique comment s'étendent les élément pour occuper l'espace restant.
Par défaut, les éléments ont 0, ils ne s'agrandissent pas.
Si on met un chiffre, l'espace restant est distribué en part correspondant à ce chiffre.

flex-shrink : indique comment s'étendent les élément pour occuper l'espace donné.
Si on met 0, l'élément n'aura pas sa largeur réduite.
Si on met un chiffre l'élément va se réduire de ce chiffre par rapport aux autres.

flex-basis : donne la largeur a utiliser pour le calcul, si l'élément a déjà une valeur prédéfini, on ne l'utilisera pas.

flex : regroupe flex-grow, flex-shrink et flex-basis (ex : flex 0 0 100px;). On peut utiliser flex: none; pour retirer la propriété flexbox à un élément

Sites à voir

Float

Valeurs

none, none ou right.

Particularités

Change le display de plusieurs éléments, voir MDN : Float

Les éléments sortent du flux, ils n'existent plus pour leur parent, cela pose des problèmes de taille car c'est celle du parent qui est prise en compte mais plus celle des éléments en eux même

On peut utiliser overflow: hidden; dans le parent pour éviter cela ou utiliser clear (left, right ou both) dans l'élément suivant dans le HTML pour reprendre le flux normal

Grid

Présentation

Le display:grid; permet de créer un maillage sur la feuille.

Les éléments peuvent se superposer

Lorsqu'une case est occupée, l'élément se place au suivant libre.

S'il manque des cases, les lignes et colonnes nécessaires sont automatiquement crées

Si l'enfant n'est pas assez grand pour sa case (en largeur ou hauteur), la case reste comme elle est.

On peut nommer les colonnes : grid-template-columns: 2fr [colonne] 8fr;, on peut alors l'appeler par son nom : grid-column-start: body;

On peut voir les grilles dans les inspecteurs Cela casse le système de fusion des marges, chaque marge est utilisée.

Propriétés du conteneur

On peut, comme pour les inline, utiliser le inline-grid, il faudra spécifier une largeur après laquelle les autres éléments viendront se mettre.

Unité

fr, c'est une fraction de l'affichage, on peut la combiner avec des px : grid-template-columns: 100px 1fr, la 1ère colonne fera 100px et la deuxième prendra tout l'espace restant

Propriétés

grid-template-rows et grid-template-columns : permet de définir le nombre de lignes et de colonnes ainsi que leur taille

ex : grid-template-columns: 20% 20% 60px; ou grid-template-columns: 1fr 1fr 3fr;

on peut aussi utiliser grid-template-columns: repeat(12, 1fr);

on peut aussi combiner grid-template-columns: repeat(12, 10% 90%); et cela fera 4 colonnes, la 1ère de 10%, la 2ème de 90%, la 3ème de 10% et la dernière de 90%) :

row-gap et column-gap : espacement entre les colonnes

grid-row-start, grid-column-start : défini dans l'enfant, indique la colonne de départ

grid-row-end, grid-column-end : défini dans l'enfant, indique la colonne de fin, on peut utiliser span pour indiquer qu'on veut étendre la colonne

On peut écrire les 2 propriétés en 1 seule ligne : grid-column: 'départ' / 'arrivée'

grid-auto-flow : la manière dont est rempli la grille (row* ou column).

grid-auto-rows et grid-auto-columns : défini la taille des lignes ou colonnes automatiquement crées en cas de besoin

grid-template-areas : permet de spécifier des zones dans le parent et de placer les éléments dans ces zones, voir sur MDN, peut alors modifier les zones dans le parents, ce qui déplacera les enfants (pour le responsive par exemple)

justify-items et aligne-items : dans le parent indique comment se place les éléments enfants

justify-content et align-content pour placer la grille

justify-self : dans les enfants pour les placer individuellement.

Fonction minmax : grid-template-rows: minmax(100px, auto) permet d'indiquer que la ligne aura une valeur minimale de 100px, sinon elle prendra toute la hauteur

Documentation

MDN : grid

CSS Tricks : A Complete Guide to Grid

@Keyframe

Définition

Animation plus complexe que transition, elle permet de gérer les propriétés lorsqu'un élément passe d'un état à l'autre, c'est à dire quand une propriété est modifiée

Il faut lui donner : un nom, un début (from ou 0%) et une fin (to ou 100%)

On peut également lui donner des étapes (début=0%, fin=100%, on peut donner des états entre les 2)

Puis il faut utiliser animation: nom-de-l'animation; et l'utiliser comme transition.

Propriétés

animation-iteration-count : pour définir le nombre de fois que doit se faire l'animation, il y a la possibilité de mettre infinite

animation-direction : pour inverser l'animation : reverse

animation-fill-mode : pour indiquer la valeur a prendre à la fin de l'animation : none* (valeurs appliquées par défaut), forwards (valeurs appliquées à la fin de l'animation), backwards (valeurs appliquées au début de l'animation) ou both (valeurs appliquées au début et à la fin de l'animation)

animation-play-state : mettre en pause une animation

Tutoriels de Grafikart à étudier

@media

Définition

Permet de prévoir des propriétés selon différents affichage (all, print, screen et speech)

Règles à utiliser

Il faudra créer au maximum 3 affichages différents : Mobile, Tablette et Bureau

Il faut voir la largeur du conteneur et voir par rapport aux largeurs des différents écrans

Conditions sur les caractéristiques du média (voir MDN)

Exemples : width, height, aspect-ratio, orientation, …

Opérateurs logiques

and : permet de combiner plusieurs requêtes média en une seule,il faut que chacune des sous-requêtes soit vraie pour que la requête soit vraie.
not : pour obtenir le résultat opposé d'une requête média.
only : pour appliquer un style uniquement si l'intégralité de la requête est vérifiée.
, : pour combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie true, toute la requête combinée renverra true. En ce sens, l'opérateur , agit comme un opérateur booléen or.

Exemples

@media (max-width: 1250px) { … } = permet d'appliquer des styles à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 1250px

@media (hover: hover) { … } = requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments

Vérification avec l'inspecteur

Il y a possibilité de voir dans le navigateur différents affichages smartphones

Polices personnalisées

Définition

Cela permet d'utiliser des polices personnalisées en les important directement à la consultation du site.

Utilisation

@font-face Il y a des polices sur Google Fonts

Il existe font-display** : pour gérer la façon dont le navigateur va charger les polices, swap, optional…

A voir

Passage de la vidéo de Grafikart qui en parle

Position

static

Pas de positionnement particulier

fixed

Fixé à la fenêtre

les éléments sortent du flux, ils n'existent plus pour leur parent, cela pose des problème de taille car c'est celle du parent qui est prise en compte mais plus celle des éléments en eux même

absolute

Positionné par rapport à la fenêtre ou au premier parent en relative ou absolute

utilisation pour positionner de : top, bottom, left et right

les éléments sortent du flux, ils n'existent plus pour leur parent, cela pose des problème de taille car c'est celle du parent qui est prise en compte mais plus celle des éléments en eux même

relative

Change le comportement des enfants en absolute : l'enfant se positionne par rapport au parent relative

utilisation pour décaler de : top, bottom, left et right

sticky

Comportement : static jusqu'à ce qu'il sorte de la fenêtre, puis fixed jusqu'à ce que son parent sorte de la fenêtre, puis il disparaît en suivant son parent

utilisation de z-index

L'empilement se fait suivant la position dans le code html, c'est le dernier élément écrit qui apparaît au-dessus

On peut changer l'ordre d'empilement avec z-index plus l'élément à un z-index élevé plus il va être au-dessus

Exemples à voir

Pseudos classes

Définition

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration.

Syntaxe

  sélecteur:pseudo-classe {
  propriété: valeur;
  }

On peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.

Liste des pseudo-classes standards non expérimentales

Pseudo classe définition
active Permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un feedback indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.
checked Représente n'importe quel bouton radio (‹input type=“radio”>), case à cocher (‹input type=“checkbox”>) ou option (‹option> d'un élément ‹select>) qui est coché ou activé (on). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe :checked ne s'applique plus à l'élément en question.
default Représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).
defined Représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur et également les éléments personnalisés (custom elements) ayant correctement été définis
disabled Permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.
empty Correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS avec content n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).
enabled Permet de cibler un élément activé. Un élément est activé s'il peut être sélectionné, si on peut cliquer dessus ou si on peut y saisir du texte ou y passer le focus (un élément peut également être dans un état désactivé).
first Liée à la règle @page décrit la mise en forme de la première page lors de l'impression d'un document.
first-child Permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.
first-of-type Permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).
focus Permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).
focus-within S'applique à tous les éléments pour lesquels la pseudo-classe :focus s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du Shadow DOM. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire).
host Permet de cibler l'hôte d'un shadow DOM contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (custom element) depuis l'intérieur du shadow DOM.
host() permet de sélectionner l'hôte du shadow DOM contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.
Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction :host(). Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser :host-context().
hover Permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.
indeterminate Permet de cibler un élément de formulaire dont l'état est indéterminé.
in-range cible un élément ‹input> lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs min et max.
invalid Cible tout élément ‹input> pour lequel la validation du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur à identifier et à corriger les erreurs.
lang() Permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.
last-child Permet de cibler un élément qui est le dernier enfant de son parent.
last-of-type Cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.
left Liée à la règle @page, permet de cibler les pages de gauche lors d'une impression. Ceci permet de mettre en forme spécifiquement les pages de gauche.
link Permet de sélectionner les liens à l'intérieur d'éléments. Elle sélectionnera tout lien n'ayant pas été visité, même ceux qui seraient déjà mis en forme via des sélecteurs utilisant d'autres pseudo-classes comme :hover, :active ou :visited.
not() Est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.
nth-child() Permet de cibler un élément qui possède an+b-1 éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières n et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.
nth-last-child() Permet de cibler les éléments qui possèdent an+b-1 nœud frères qui les suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0. Avec CSS3, il était nécessaire que l'élément ciblé ait un élément parent, cette restriction a été levée en CSS4.
nth-last-of-type() Permet de cibler des éléments qui possèdent an+b-1 nœud frères étant les mêmes éléments à partir de la fin de l'arbre et qui ont le même élément parent (l'indice n sera incrémenté à partir de 0). Autrement dit, la pseudo-classe parcourra les éléments d'un type donné en partant de la fin de l'élément parent, selon le motif passé en argument.
nth-of-type() Correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.
only-child Représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que :first-child:last-child ou :nth-child(1):nth-last-child(1), mais avec une spécificité inférieure.
only-of-type Permet de cibler un élément qui ne possède aucun nœud frère du même type pour un même élément parent (par exemple, sélectionner le seul élément d'un

).
optional Permet de cibler les éléments ‹input> ou ‹textarea> pour lesquels l'attribut required n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.
out-of-range Cible un élément ‹input> lorsque la valeur de son attribut value est en dehors de l'intervalle autorisé par les attributs min et max attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.
read-only Permet de cibler un élément que l'utilisateur ne peut pas modifier (l'élément est en lecture seule).
read-write Permet de cibler un élément lorsque celui-ci peut être édité par l'utilisateur (par exemple les champs texte d'un formulaire ou les éléments ‹textarea>).
required Permet de cibler un élément ‹input> pour lequel l'attribut required est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.
right Liée à la règle @page, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite.
root permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, :root ciblera donc l'élément ‹html> et aura le même comportement que le sélecteur html mais sa spécificité sera plus forte.
scope Correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs.
target Permet de cibler l'unique élément (s'il existe) dont l'attribut id correspond au fragment d'identifiant de l'URI du document.
valid Permet de cibler tout élément ‹input> ou ‹form> dont la validation du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.
visited Permet de modifier l'aspect d'un lien après que l'utilisateur l'a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.

Il existe d'autres pseudo classes qui sont expérimentales et donc pas forcément compatibles avec tout les navigateurs.

Pseudos éléments

Sert à sélectionner une partie d'un élément en utilisant :: (ou :) puis after, before, first-letter, first-line, …

after et before : crée un pseudo-élément qui sera le premier ou le dernier enfant de l'élément ciblé. Avec la propriété content permet de rajouter des caractères avant ou après un élément.

counter : créer des listes avec des numéros par exemple

data- : donner une valeur

attr() : récupérer une valeur

On peut également les combiner avec des pseudos classes : :first-child:before

Sélecteurs

Définition

Les sélecteurs sont des modèles utilisés pour sélectionner l'élément que vous voulez styliser.

Syntaxe de définition des valeurs

La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété

Les types de composants

Les mots-clés génériques

Ils sont définis implicitement (auto, smaller, ease-in, inherit, initial, unset.

Les littéraux

Ils sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire (/, , ).

Les types de données

Ils sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification (background

Les combinateurs


- Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont obligatoires et doivent apparaître dans cet ordre.
- [ ] : permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant.
- && : toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.
- || : qu'au moins un composant doit être présent et qu'ils peuvent apparaître dans n'importe quel ordre. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.
- | les différentes options sont exclusives : seule une des options doit être présente. Généralement, cela permet de séparer différents mots-clés possibles.

Les multiplicateurs

Les multiplicateurs : c'est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.
- * : une entité peut apparaître zéro, une ou plusieurs fois. (ex : bold smaller* pourra illustrer les valeurs bold, bold smaller, bold smaller smaller, …)
- + : une entité peut apparaître une ou plusieurs fois. (ex : bold smaller+ pourra illustrer les valeurs bold smaller, bold smaller smaller, …, mais pas bold car smaller doit apparaître au moins une fois)
- ? : une entité est optionnelle et doit apparaître zéro ou une fois. (ex : bold smaller? pourra illustrer les valeurs bold ou bold smaller) - { } : encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité doit apparaître au moins A fois et au plus B fois. (ex : bold smaller {1,2} pourra illustrer les valeurs bold, bold smaller ou bold smaller smaller )
- # : une entité doit être répétée une ou plusieurs fois et que chaque occurrence est séparée par une virgule. (ex : bold smaller# pourra illustrer les valeurs bold smaller, bold smaller, smaller, …)
- ! : utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent (ex : [bold? smaller?]# pourra illustrer les valeurs bold, smaller ou bold smaller)

Documentation

MDN : Sélecteurs CSS, simples, combinateurs, pseudo-classes, pseudo-éléments.

MDN : Syntaxe de définition des valeurs

W3Bai : CSS Selector Référence

Spécificité

Définition

La spécificité permet d'indiquer au navigateurs la valeur d'une propriétés quand celle-ci à plusieurs valeurs possibles.

Pour cela, il existe une hiérarchie dans les sélecteurs permettant de calculer la propriété à utiliser. La valeur de la propriété avec le plus grand nombre de point sera utilisée. On peut utiliser des calculateurs (par exemple Specificity Calculator).

La hiérarchie est la suivante : 100 points pour un style en ligne (dans le HTML), 10 points pour une classe et 1 point pour un élément

Astuce

Si on met des classes partout, toutes valent 10 poins, alors c'est l'ordre dans le CSS qui importe et on n'a plus besoin de l'utiliser (sauf peut-être avec les pseudos éléments

!important

C'est une règle qui permet d'outrepasser la spécificité, il faut s'en servir le moins possible. Pour l'utiliser, il faut l'ajouter à la fin de la valeur de la propriété (par exemple : color: #000000!important;)

Texte

Propriétés

font-family : Nom de la police

font-size : Taille du texte

font-weight : normal, bold, light…

font-style : normal, italic

text-align : ne s'applique qu'aux inline et inline-block

text-decoration : soulignement

text-transform : casse

white-space : Utilisé pour décrire la façon dont les blancs sont gérés au sein de l'élément : normal, nowrap,…

Transition

Animation lorsqu'un élément passe d'un état à l'autre : Efficace pour les survols d'éléments

transition-property : la propriété qu'on veut surveiller, on peut mettre all et none également

transition-duration : la durée de l'animation

transition-timing-function : manière dont l'animation se comporte : linear, ease-in, ease-in-out… Il y a aussi cubic-bezier (qu'on peut créer en inspectant la page dans le navigateur)

transition-delay : indique le delay avant de lancer l'animation

exemple : transition: color 1s; indique qu'il faut faire le changement de couleur en 1s

Transform

Valeurs

translate : déplacer une élément par rapport aux axes X et Y.

scale : modifier la taille d'un élément

rotate : faire tourner n élément

skew : déformer un élément

Plus

Si on veut changer le centre de la transformation, il y a transform-origin

Pour utiliser les propriétés 3D, il faut définir la perspective et le perspective-origin si on veut. Voir la perspective sur MDN.

Visuels

J'ai créé un page spéciale pour les transformations géométriques et les filtres avec des visuels pour une plus grande clarté : Filtres et Géométrie

1)
Non supporté par tous les navigateurs
frontend/css.txt · Last modified: 2020/09/16 10:35 (external edit)