Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et comentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

NOTATIONS LONG HAND VS SHORT HAND

Short hand et long hand

Vous l’avez peut être remarqué, il nous est déjà arrivé durant ce cours d’écrire une même propriété CSS de différentes façons.

En effet, en CSS, certaines propriétés peuvent être « regroupées » en une seule qui constitue leur notation short hand.

Par exemple, pour définir une bordure, nous avons deux façons de faire : soit on utilise les trois propriétés CSS border-width, border-style et border-color (notation long hand), soit on utilise la propriété border (qui correspond donc à la notation short hand) avec les valeurs des trois propriétés précédentes.

Les notations short hand ont l’avantage d’être plus rapides à écrire, de consommer moins de ressources et d’être également finalement plus lisibles. Je vous encourage donc à les utiliser.

Dans la suite de cette partie, nous allons voir quelques unes des notations short hand les plus utilisées.

La propriété CSS font

La propriété font est la notation short hand des propriétés CSS font-style, font-weight, font-size, line-height et font-family.

Notation short hand CSS font

Les notations long hand et short hand sont équivalentes

Notre titre et notre paragraphe reçoivent la même mise en forme

Essayer ce code

Comme vous pouvez le voir ci-dessus, nous devons juste donner les valeurs des différentes propriétés dans l’ordre que je vous ai donné à font pour que cette propriété fonctionne.

Faîtes bien attention à l'utilisation des notations short hand : vous devrez toujours suivre un ordre précis d'écriture des différentes valeurs.

Notez également que l'on doit ici séparer les deux valeurs en pixels par un slash.

Les propriétés CSS relatives au modèle des boîtes

Parmi les propriétés étudiées dans la partie « modèle des boîtes », il y a trois notations short hand à connaître :

  • Border qui regroupe border-width, border-style et border-color ;
  • Padding qui est la notation short hand de padding-top, padding-right, padding-bottom et padding-left ;
  • Margin qui regroupe margin-top, margin-right, margin-bottom et margin-left.

Voyons immédiatement un exemple d’utilisation de ces propriétés ensemble.

Notations short hand des propriétés CSS relatives au modèle des boites

Nous avons défini les mêmes marges et bordures

Essayer ce code

La propriété CSS background

La dernière notation short hand que vous devez connaître correspond à la propriété background.

Cette propriété va regrouper les valeurs des propriétés background-color, background-image, background-repeat, background-attachment et background-position.

Utilisation de la notation short-hand background

Background regroupe les valeurs liées au fond

Chapitre précédent

Chapitre suivant