<CodePhenix>

Accès à GitLab
↑

Bien débuter une CSS

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:62.5%;}
body{font-size:1.6em ;}
img{max-width:100%; width:100%; display:block;}
/* RESPONSIVE */
@media screen and (min-width: 768px){
/* Tablettes */
}
@media screen and (min-width: 1024px){
/* Ordinateurs */
}

Les sélecteurs CSS

Sélecteur Description
* Cible tous les éléments.
balise Cible la balise.
#exemple Cible l'identifiant nommé (ici le nom de l'identifiant est "exemple").
.exemple Cible la classe nommée (ici le nom de la classe est "exemple").
, Permet d'ajouter un sélecteur.
balise .exemple L'espace permet de cibler les enfants
(ici on cible les enfants de la balise dont la classe est "exemple").
> Cible tous les éléments enfants.
+ Cible l'élément placé directement après.
~ Cible l'élément placé après.
:first-child Cible uniquement l'élément qui est le premier enfant.
:last-child Cible uniquement l'élément qui est le dernier enfant.
:nth-child(n) Cible l'élément enfant dont la valeur est n.
[attribut] Cible tous les éléments dont l'attribut est attribut.
[attribut="valeur"] Cible tous les éléments dont la valeur de l'attribut est valeur.
:before Créé et cible un élément qui va être placé en tant que premier enfant d'un élément. Doit contenir une propriété content.
:after Créé et cible un élément qui va être placé en tant que dernier enfant d'un élément. Doit contenir une propriété content.

Modèle d'un élément

margin et padding

Le margin correspond aux marges extérieures de l'élément, tandis que le padding correspond aux marges intérieures du contenu (elles font partie de la taille du contenu).

Liste de propriétés liées aux marges
propriété description
margin Regroupe les marges extérieures sur tous les côtés.
margin-top Définit une marge en haut.
margin-right Définit une marge sur le côté droit.
margin-bottom Définit une marge en bas.
margin-left Définit une marge sur le côté gauche.
padding Regroupe les marges intérieures sur les côtés.
padding-top Définit une marge en haut.
padding-right Définit une marge sur le côté droit.
padding-bottom Définit une marge en bas.
padding-left Définit une marge sur le côté gauche.

border et outline

Les différences des contours (outline) par rapport aux bordures (border) :

  • Les contours ne prennent pas d'espace et peuvent donc chevaucher d'autres éléments.
  • Ils ne modifient pas la taille ou la position de l'élément.
  • On ne peut pas définir un contour pour chaque bord, il est le même sur tous ses côtés.
  • Un contour ne peut pas être circulaire.

Les différents types de bordures et contours :

dashed
dotted
solid
double
ridge
groove
inset
outset
Liste de propriétés liées aux bordures
propriété description
border Regroupe les propriétés de taille, de style et de couleur sur tous les côtés.
border-width Définit la taille de la bordure.
border-style Permet de changer le style de bordure.
border-color Change la couleur de la bordure.
border-top Impacte uniquement la bordure en haut de l'élément.
border-right Impacte seulement la bordure du côté droit.
border-bottom Impacte uniquement la bordure en bas de l'élément.
border-left Impacte seulement la bordure du côté gauche.
border-radius Permet d'arrondir l'angle des bords.
border-image Définit une image comme style de bordure.
outline Regroupe les propriétés de taille, de style et de couleur des contours.
outline-width Définit la taille du contour.
outline-style Permet de changer le style du contour.
outline-color Change la couleur du contour.
outline-offset Permet de gérer l'espacement entre le contour et l'élément.

Une balise à une propriété display par défaut, elle est soit de type block soit de type inline.

Contenu
display
Paramètres de la propriété display
display description
block L'élément prend 100% de la largeur de son élément parent.
inline L'élément prend la largeur égale à la taille de son contenu uniquement. Il est impossible de lui préciser une taille.
inline-block L'élément prend la largeur de son contenu. Mais il est possible de lui préciser une taille.
flex Élément de type block dont les enfants sont placés de manière flexible en fonction d'autres propriétés données.
inline-flex Élément de type inline dont les enfants sont flexibles.
table Élément de type block dont les enfants vont se comporter comme les cellules d'un tableau.
inline-table Élément de type inline dont les enfants vont se comporter comme les cellules d'un tableau.
grid Élément de type block dont les enfants vont se comporter comme une grille.
inline-grid Élément de type inline dont les enfants vont se comporter comme une grille.
none L'élément ne s'affiche pas.

liste des propriétés liées aux tailles
propriété description
width Définit la largeur.
min-width Définit une largeur minimum.
max-width Définit une largeur maximum.
height Définit la hauteur.
min-height Définit une hauteur minimum.
max-height Définit une hauteur maximum.
margin-top margin-left
border-top border-left
padding-top padding-left
Contenu
padding-bottom padding-right
border-bottom border-right
margin-bottom margin-right

Positionnement des éléments

Les différentes propriétés liées au display: flex; se mettent sur le parent (le conteneur) dont on souhaite aligner les enfants.

1
2
3
flex-direction
justify-content
align-items
flex-wrap
align-content

Doit avoir une propriété flex-wrap: wrap ou wrap-reverse

propriété description
flex-direction Place les éléments en ligne ou en column et gère leurs directions.
justify-content Change l'alignement horizontal des éléments.
align-items Change l'alignement vertical des éléments.
flex-wrap Gère le passage à la lige des éléments.
align-content Gère l'alignement sur plusieurs lignes.
flex-flow Regroupe les propriétés flex-direction et flex-wrap.
place-content Regroupe les propriétés align-content et justify-content.

le flux

Contenu
position
Paramètres pour la propriété position
position description
static Valeur par défaut d'un élément, il est positionné, selon son flux dans la page.
relative Positionné de manière static mais peut être décalé de sa position d'origine.
absolute Sort du flux, il est positionné de manière absolue par rapport à la page.
fixed Positionné de manière absolue, mais fixé par rapport à l'écran.
sticky Garde sa place dans le flux, mais va rester fixé à son emplacement.

La propriété z-index permet de changer le niveau d'empilement des éléments dans la page. Plus sa valeur est importante plus il se placera devant les autres éléments. Cette propriété fonctionne uniquement sur les éléments qui ont une position.

Exemple :

z-index : 3;
z-index : 2;
z-index : 1;

Les états d'un élément

sélecteur description
:hover Cible l'élément qui est survolé par le curseur de la souris.
:active Cible un élément au moment où il est cliqué.
:link Cible un élément de type lien qui n'a pas été visité.
:target Cible un élément de type lien qui vient d'être cliqué.
:visited Cible un élément de type lien qui a été visité.
:focus Cible l'élément de type input dans lequel le curseur de la souris est placé.
:checked Cible l'élément de type input qui est checké ou sélectionné.

Le fond d'un élément

background-repeat
background-position
background-size

Les propriétés liés au fond

propriété description
background Regroupe les propriétés de fond d'un élément
(dans l'ordre : color image repeat attachement position;).
background-color Change la couleur d'un fond.
background-image Permet d'afficher une image en fond.
background-repeat Gère la répétition d'une image placée en fond.
background-attachement Gère le défilement de l'image placée en fond.
background-position Gère la position de l'image placée en fond.
background-size Gère le comportement lié à la taille de l'image placée en fond.

Il est possible d'afficher plusieurs images de fond et de leur donner des propriétés différentes. Par exemple :

background-image: url(image1.png) url(image2.png);
background-size: contain, cover;
background-repeat:no-repeat;

sélecteur description
:first-letter Cible la première lettre.
:first-line Cible la première ligne.

propriété description
color Définit la couleur du texte
font-size Donne la taille au texte
font-family Change la typographie
text-align Modifie l'alignement du texte
text-decoration Définit la décoration du texte.
text-decoration-color Change la couleur de la décoration du texte.
text-transform Définit la casse du texte
font-style Change l'inclinaison du texte.
font-weight Modifie la graisse du texte
line-heiht Définie l'interlignage
text-indent Change l'indentation
text-overflow Précise l'affichage du texte lorsque celui-ci déborde de son conteneur.
text-shadow Donne une ombre au texte.

@font-face {
font-family: "myFont";
src: url(myFont.ttf);
}

Il suffira ensuite de mettre le même nom sur la propriété font-family pour appeler la typographie sur votre élément. Par exemple :

body {font-family: "myFont";}

Les couleurs

Valeur Hexadécimale : #000
Valeur RGB : rgb(0, 0, 0)

couleur nom
white
lightgray
silver
darkgray
gray
black
lightcoral
coral
salmon
crimson
orangered
tomato
red
firebrick
indianred
darkred
brown
saddlebrown
sienna
maroon
orange
darkorange
peru
sandybrown
darkgoldenrod
goldenrod
gold
palegoldenrod
yellow
yellowgreen
lime
green
teal
olive
olivedrab
palegreen
seagreen
springgreen
mediumspringgreen
mediumseagreen
lightseagreen
lightgreen
limegreen
aliceblue
paleturquoise
turquoise
aqua
lightcyan
cyan
mediumblue
slateblue
mediumslateblue
midnightblue
blue
navy
royalblue
skyblue
indigo
pink
fuchsia
mediumorchid
orchid
mediumpurpule
purple
violet
mediumvioletred
palevioletred
plum
wheat
tan
seashell
peachpuff
papayawhip
moccasin
mistyrose
oldlace
linen
lightyellow

propriété description
color Définit la couleur du texte.
text-decoration-color Change la couleur de la décoration du texte.
background-color Définit la couleur du fond.
border-color Change la couleur de la bordure.
outline-color Change la couleur du contour.

Liste des propriétés CSS

propriété description
list-style Regroupe les propriétés de type et de position de la puce.
list-style-type Change le type de puce.
list-style-image Définit une image en tant que puce de la liste.
list-style-position Permet de modifier la position de la puce.

propriété description
caption-side Change la position du titre d'un tableau.
border-collapse Permet de fusionner les bords des cellules.
border-spacing Définit l'espacement entre les bords des cellules.
table-layout Change la disposition des colonnes et des lignes d'un tableau.
empty-cells Définit l'affichage des cellules vides d'un tableau.

propriété description
visibility Change la visibilité de l'élément.
opacity Permet de régler l'opacité de l'élément.
overflow Permet la gestion d'un contenu qui déborde.

Les transitions

propriété description
transition-property Précise la propriété sur laquel la transition est appliquée.
transition-duration Détermine la durée de la transition.
transition-delay Ajoute un delay avant le début de la transition.
transition-timing-function Précise la courbe d'accélération de la tranistion.
transition Regroupe les propriétés précédentes.
Exemple
#demohover {
   /* comportement de la transition */
   transition-property: all;
   transition-duration: 2;
   /* transition: all 2s; */
}
/* Réglage de la transition */
   #demohover:hover {
   background: green;
}

Les animations

Property Description
animation-name Donne un nom à l'animation.
animation-duration Détermine la durée de l'animation.
animation-delay Ajoute un delay avant le début de l'animation.
animation-timing-function Précise la courbe d'accélération de l'animation.
animation-iteration-count Précise combiens de fois l'animation doit être lancée.
animation-direction Précise le comportement de l'animation entre deux cycles.
animation-fill-mode Précise le comportement des propriétés en début et en fin d'animation.
animation-play-state Permet de mettre en pause l'animation.
@keyframes Permet de regler l'animation en fonction de son nom avec des propriétés.
animation Regroupe les propriétés précédentes.
Exemple
#demoanim {
   /* comportement de l'animation */
   animation-direction: alternate;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-name: repeatit;
   animation-timing-function: linear;
   /* animation: repeatit 2s linear 0s infinite alternate; */
}
/* Réglage de l'animation */
@keyframes repeatit {
   from {left: 0;top:0;}
   to {left: 50%;top:50%;}
}