Feuille de styles

Avant d’aborder la feuille de styles, il est important de noter qu’un site web se compose d’un ou plusieurs fichiers html et bien souvent d’une seule feuille de styles qui regroupera les styles pour l’ensemble du site. Cette notion impose de penser en permanence aux répercussions possibles.

Dossiers & Fichiers

Il n’y a pas des règles pour organiser son site web, néanmoins quelques dossiers deviennent rapidement indispensables.

legende
Une façon d’organiser les fichiers

Chemins

Première remarque, la page d’accueil du site se nomme index.html (parfois default est accepté), on trouvera aussi des sites basés sur d’autres langages avec index.php pour du php, cela permet de masquer vos fichiers à l’ouverture du dossier ou site.

À retenir : Si votre site en HTML est en ligne, la page principale doit se nommer index.html (probablement dans un dossier www ou httpdocs).
site sans index.html
sans index.html, on peut voir les fichiers ou une page 403 Forbidden

Mon site se situe dans un dossier public_html, si vous devez déplacer ou copier votre projet, il faudra le faire sur l’ensemble des éléments du dossier en conservant la structure, c’est valable sur votre machine ou vers une autre machine ou un serveur. Ici, j’ai un dossier sources avec la maquette, vous n’êtes pas obligé de mettre celle-ci en ligne.

sur Windows
  file:///C:/Users/benoit/public_html/
sur les autres machines
  file:///Users/benoit/public_html/
serveur local Brackets
  http://127.0.0.1:50149/index.html
serveur local Mamp, Wamp, Lamp
  http://localhost:8888/
serveur en ligne
  http://www.exemple.com/
 
accéder à une image
  file:///Users/benoit/public_html/css/img/logo.svg
  http://localhost:8888/css/img/logo.svg
  http://www.exemple.com/css/img/logo.svg

En pratique

Ces 2 chemins fonctionnent sur votre ordinateur :

<img src="file:///Users/benoit/public_html/css/img/logo.svg" alt="logo"/>
<img src="http://localhost:8888/css/img/logo.svg" alt="logo"/>

Celui-ci fonctionne si vous avez accès à Internet sur votre ordinateur et sur votre site (sous réserve que l’image soit toujours en ligne), on parle de chemin absolu :

<img src="http://www.exemple.com/css/img/logo.svg" alt="logo"/>

En général on pointera vers nos fichiers ou pages internes à l’aide de chemins relatifs.
<img src="upload/musee-logo.png" alt="logo du musée" />

Vous trouverez des . et .. dans certains liens relatifs :
  • ./ (ou rien) correspond au dossier du fichier en lecture ;
  • ../ correspond au dossier parent ;
  • / correspond au dossier racine du site.

Le cache

Une notion importante, avant de s’afficher sur votre écran tous les fichiers vont s’écrire sur votre disque dur, une copie plus ou moins temporaire. Une image ou une feuille CSS chargée sur la première page de votre site n’est pas rechargée sur la deuxième page, elle passe par le cache.

avec l’inspecteur, sur l'onglet network on peut surveiller le cache du site
avec l’inspecteur de Chrome, sur l’onglet network on peut surveiller le cache