Cascading Style Sheets (CSS) - Mémo

 

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. Nous allons aborder dans cet article la plupart des commandes du langage CSS.

 

1. Insertion d'une feuille de style

<link rel="stylesheet" href="style.css">

 

2. Meta viewport (responsive)

<meta name="viewport" content="width=device-width, initial-scale=1">

 

3. Sélecteurs

select-a,
select-b,
select-father > child,
sélecteur-ancestor heir {
  prop-1 : valeur;
  prop-2 : valeur;
}

.my-class {
}

my-html-node {
}

#my-id{
}

 

 

4. Propriétés de l’élément

.example {
  padding: 40px;
  border: 2px solid #e40;
  margin: 11px 12px 13px 14px;
}

Valeurs possibles pour les propriétées margin et padding :

• valeur : les 4 marges identiques
• haut = bas & droite = gauche
• haut, droite = gauche & bas
• haut, droite, bas et gauche

 

 5. Unités

5.1 Unités absolues

 

5.2 Unités relatives

 

6. Variables

:root {
  --main-bg-color: brown;
}

.element {
  background-color: var(--main-bg-color);
}

 

7. Pseudo-classes

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

Par exemple, la pseudo-classe ":hover", permettra d'appliquer une mise en forme spécifique quand l'utilisateur survole l'élément ciblé par le sélecteur.

 

Liste des pseudo-classes standards : https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes#liste_des_pseudo-classes_standards

 

8. Opérateurs

Exemple : La règle concerne les moniteurs de plus de 500px de large et les médias printables en couleur.

@media screen and (min-width : 500px), print and (color) {
  div {
    border : solid 2px black;
  }
}

 

9. Médias

La règle @media permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média.

@media (max-width: 500px) {
  .article {
    display: none;
  }
}

 

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries

 

 10. Calculs

La fonction "calc()" permet de réaliser des opérations mathématiques en CSS.

div {
    width: calc(100% - 20px);
    padding: 10px;
}

 

11. Mise en page avec display

11.1 Block

.item {
  display:block;
}

 

11.2 Inline block

.item {
  display:inline-block;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/display

 

11.3 Flex

 11.3.1 Flex simple

.parent {
  display:flex;
}

 

*avec margin-left : auto

 

11.3.2 Flex avec space-between

.parent {
  display:flex;
  justify-content:space-between;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/justify-content

 

11.3.3 Flex avec flex-wrap

.parent {
  display:flex;
  flex-wrap:wrap;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap

 

11.3.4 Flex avec flex-direction

.parent {
  display:flex;
  flex-direction:column;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/flex-direction

 

12. Général

12.1 Box-sizing et flex

Calcul simplifié de la taille des blocs

body {
  box-sizing: border-box;
}

*,*::before,*::after {
  width: 100%;
  border: solid #5B6DCD 10px;
  padding: 5px;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing

 

12.2 Mobile

p{
  color: #333;
}

@media (min-width:640px){ 
  .article p {
    columns: 3;
  } 
}

@media (min-width:960px){ 
  .article p {
    columns: 4;
  } 
}

 

12.3 Margin auto

Centrer un élément verticalement :

.element {
  width: 1000px;
  margin: 0 auto;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/margin

 

13. Nouveauté CSS 3

13.1 @font-face

Définition et chargement d'une typographie

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/font-family

 

13.2 border-radius

Définition des coins arrondis pour la bordure d'un élément.

border-radius: 30px;
border-radius: 25% 10%;
border-radius: 10% 30% 50% 70%;
border-radius: 10% / 50%;
border-radius: 10px 100px / 120px;
border-radius: 50% 20% / 10% 40%;

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/border-radius

 

13.3 box-shadow

Ajout d'ombres à la boîte d'un élément via une liste d'ombres. Une liste d'ombre est séparée par des virgules.

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Une liste d'ombres, séparées par des virgules */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow

 

13.4 gradient

Le type de donnée CSS "gradient" permet de représenter une "image" contenant un dégradé entre deux ou plusieurs couleurs.

background: linear-gradient(#f69d3c, #3f87a6); # Dégradé linéaire
background: radial-gradient(#f69d3c, #3f87a6); # Dégradé radiaux
background: repeating-linear-gradient(#f69d3c, #3f87a6 50px); # Dégradé linéaire répété
background: repeating-radial-gradient(#f69d3c, #3f87a6 50px); # Dégradé radiaux répété
background: conic-gradient(#f69d3c, #3f87a6); # Dégradé conique

Outil : https://cssgradient.io/

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/gradient

 

13.5 opacity

Transparence d'un élément.

/* Totalement transparent  */
opacity: 1;
opacity: 1.0;

/* Légèrement transparent */
opacity: 0.6;

/* Complètement transparent */
opacity: 0.0;
opacity: 0;

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/opacity

 

13.6 text-shadow

Obrage d'un text.

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Utiliser les défauts pour la couleur et le rayon de flou */
text-shadow: 5px 10px;

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/text-shadow

 

13.7 transform

transform modifie l'espace de coordonnées utilisé pour la mise en forme visuelle

transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(120px, 50%);
transform: scale(2, 0.5);
transform: rotate(0.5turn);
transform: skew(10deg, 10deg);
transform: scale(0.5) translate(-100%, -100%);

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/transform

 

13.8 transition

/* nom de la propriété | durée */
transition: margin-right 4s;

/* nom de la propriété | durée | retard */
transition: margin-right 4s 1s;

/* nom | durée | fonction */
transition: margin-right 4s ease-in-out;

/* nom | durée | fonction | retard */
transition: margin-right 4s ease-in-out 1s;

/* S'applique à deux propriétés */
transition: margin-right 4s, color 1s;

/* S'applique à toutes les propriétés modifiées */
transition: all 0.5s ease-out;

# Exemple de transition
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Pour plus d'information : https://developer.mozilla.org/fr/docs/Web/CSS/transition

 

14. Mise en forme du texte

 

15. Arriere-plan

 

16. Positionnement et tailles

 

17. Espacement & bordures

 

18. Propriétés des listes

 

19. Propriétés des tableaux

 

20. Autres propriétés

 

Pour aller plus loin :

• https://developer.mozilla.org/fr/docs/Web/CSS/At-rule
• https://www.alsacreations.com/actu/lire/1734-le-w3c-etend-la-portee-de-css-important.html

 

Outils :

• Génération de code CSS3 : http://www.agenciesranked.com/createcss3/
• Tague et organise les Googles Fonts : http://katydecorah.com/font-library/#!/
• Pré-visualiser la lisibilité de des typos : https://typesetwith.me/
• Apprendre les sélecteurs : https://flukeout.github.io/
• Outil pour création d'animation de chargement : https://tobiasahlin.com/spinkit/
• Outil pour calculer la largeur en % d’un élément depuis sa taille en PX : https://www.webdesignrankings.com/resources/rqrwd/
• Outil pour calculer la taille en EM depuis la taille en PX : https://www.webdesignrankings.com/resources/px-em/