- tout en minuscules
- notation snake case (un underscore entre les mots composant un nom)
Exemple : ceci_est_un_nom_de_fichier_correct.jpg
<html></html>
: délimite le HTML de la page<head></head>
: contient les réglages de la page web<title></title>
: contient le titre de la page (affiché dans l'onglet du navigateur)<meta charset="UTF-8">
: définit l'encodage des caractères de la page<body></body>
: contient le corps de la page (affiché dans le navigateur)<div></div>
: permet de délimiter les différentes parties de la page- par défaut de type
block
- prend toute la largeur de la balise parent (dû au type
block
)
- par défaut de type
<link ...>
: lien vers un document externe dont la page a besoin pour fonctionnertype="text/css"
: le document est formatté en CSShref="..."
: le chemin d'accès au fichier
<header></header>
: section d'introduction d'un article, d'une autre section ou du document entier<section></section>
: section générique regroupant un même sujet, une même fonctionnalité<main></main>
: représente le contenu principal duBODY
du document ou de l'application, doit être unique<footer></footer>
: section de conclusion d'une section ou d'un article, voire du document entier<img>
: insère une imagesrc="chemin/image.png"
: chemin vers l'imagealt="texte"
: texte qui remplacera l'image si elle ne parvient pas à charger et qui est lu par les lecteurs d'écrans des aveugles et mal voyants
<form></form>
: délimite un formulaire, contenant des zones de saisie<input>
: zone de saisietype="text"
: la zone de saisie permet de contenir un peu de textetype="password"
: la zone de saisie permet de contenir un mot de passeplaceholder="texte"
: texte d'aide à la saisie affiché dans la zone de saisie (il disparaît quand l'utilisateur commence à écrire)name="texte"
: nom sous lequel on pourra récupérer les données qui étaient écrites dans la zone de saisie
<button></button>
: boutontype="submit"
: au clic, s'il est dans un formulaire, le bouton enverra le formulaire et tout ce qui est dedans
<span></span>
: contient du texte- sert à délimiter une partie de texte particulière
- n'est pas un
BLOCK
donc ne prend pas toute la largeur de la page - est de type
INLINE
, sa largeur et la hauteur dépendent de son contenu - balise ouvrante :
<span>
- balise fermante :
</span>
- CSS permet de réécrire des règles déjà écrites pour une balise
- mettre les fichiers CSS dans l'ordre de réécriture des règles CSS dans le
HEAD
(doncreset.css
toujours en premier)
truc
: sans caractère spécial, cible les balises<truc></truc>
<truc></truc>
#truc
: avec le#
, cible les balises portant l'ID
truc
<div id="truc"></div>
.truc
: avec le.
, cible les balises portant laCLASS
truc
<div class="truc"></div>
selecteur_1 selecteur_2
: cible tous les élémentsselecteur_2
enfants (directs ou indirects) d'un élémentselecteur_1
- exemple :
#element_1 #element_2
- exemple :
<div id="element_1" class="grand-parent">
<div class="parent">
<div id="element_2" class="enfant">élément ciblé</div>
<div class="enfant">élément non ciblé</div>
</div>
</div>
selecteur_1 > selecteur_2
: cible tous les élémentsselecteur_2
directement enfants deselecteur_1
- exemple :
#element_1 > #element_2
- exemple :
<div id="element_1" class="parent">
<div id="element_2" class="enfant">élément ciblé</div>
<div class="enfant">élément non ciblé</div>
</div>
selecteur_1 + selecteur_2
: cible tous les élémentsselecteur_2
suivant directement un élémentselecteur_1
- exemple :
#element_1 + #element_2
- exemple :
<div class="parent">
<div id="element_1" class="enfant">élément non ciblé</div>
<div id="element_2" class="enfant">élément ciblé</div>
</div>
background-color
: couleur d'arrière plan d'un élémentwidth
: largeur d'un élémentmargin
: marges autour d'un élémentpropriete-left
: propriété gauche d'un élément (fonctionne aussi avec-top
,-right
et-bottom
)padding
: marges à l'intérieur d'un élémentborder
: bord de l'élémentcolor
: couleur du texte de l'élément30%
: largeur de l'élément définie dynamiquement en fonction de la largeur de l'élément parentfont-weight
: épaisseur de la police de caractèredisplay
: change la manière de gérer l'élémentinline-block
: les élémentsINLINE-BLOCK
s'alignent les un après les autres (alors que lesBLOCK
se placent toujours les uns en dessous des autres)inline block
considère les espaces comme devant être affichés, donc il faut elever ceux utilisés pour l'indentation
F12
pour ouvrir et fermer la console de debug
- fluide : la largeur de la page s'adapte à la largeur de la fenêtre
- centrée : la largeur de la page reste la même en toute circonstance
- responsive : l'apparence de la page change en fonction d'intervalles de largeur de fenêtre