style

Exercices de style

Nous allons créer un modèle de page (Voir aperçu)

  • Cette page sera constituée de plusieurs blocs.
  • Ces blocs seront correctement positionnés les uns par rapport aux autres.
  • Ces blocs seront stylisés : couleurs, fonds, polices, etc

Les blocs seront déclarés dans une page html :

  • Un bandeau d'entête qui contiendra un logo, un bandeau (animé ou pas), le nom du site, ...
  • Un contenu central qui pourra être subdivisé en plusieurs autres blocs.
  • Un pied de page qui contiendra des liens : CGU, contact, raison sociale, etc.

Apprendre à apprendre :

  • Les réponses ne sont pas données ! 😕
  • Vous devrez faire vos propres recherches dans vos notes, sur internet, ...

Exercice 1 :

  1. Créer le fichier www\exe001\style\style.html
  2. Créer le fichier www\exe001\style\css\style.css
  3. Ouvrir ces 2 fichiers dans sublime text, côte à côte (Menu > View > Layout > Columns 2) ou (Alt + Maj + 2).
  4. Dans style.html, écrire la structure html de base (Dans sublime Text, faire ! suivi de Tab).
  5. Modifier le titre ('Styles'), déclarer la feuille de style (balise link) : <link rel="stylesheet" href="css/style.css">
  6. Dans le body, créer 3 blocs superposés contenant respectivement les textes suivants :
    1. Entête
    2. Corps
    3. Pied de page
  7. Éditer la feuille de style pour obtenir le résultat suivant :
    1. Couleurs de fond différentes, semi-transparentes.
    2. Police de caractères : Arial, Helvetica, sans-serif
    3. Padding de 10px dans les blocs pour éviter que le texte ne touche les bords.

style01


Remarque importante :

Tous les navigateurs ne se comportent pas de la même manière à l'interprétation du code css.

Peut-être remarquerez-vous une marge indésirable tout autour ...

Pour corriger cela et pour avoir un code 'cross-browser', c'est à dire qui se comporte de la même manière sur tous les navigateurs, il faudra placer en première ligne de votre css un 'reset'

Cela se réalise par l'importation d'un fichier nommé 'reset.css' :

  1. Créez le fichier reset.css vous-même ou téléchargez celui-ci.
  2. Copiez-le en www\css\reset.css. Vous remarquez que ce dossier 'css'  est placé à la racine 'www', tout en haut, au même niveau que le dossier 'exe001'. Il est facilement visible par toute la hiérarchie descendante.
  3. En première ligne de votre fichier css, copiez : @import '../../../css/reset.css';
  4. Vous remarquerez que la marge indésirable a disparu.

Rappel sur l'adressage relatif d'un fichier par rapport à un autre :

  • A quoi correspondent les ../../../ dans cet import ?
  • La convention d'écriture ../ signifie : "faire une marche arrière", c'est à dire "Aller dans le dossier parent".
  • Pour construire le chemin relatif :
    • Nous partons de www\exe001\style\css\style.css
    • Pour aller à www\css\reset.css
    • Une première marche arrière (../) nous emmène dans le dossier www\exe001\style
    • Une deuxième marche arrière (../) nous emmène dans le dossier www\exe001
    • Une troisième marche arrière (../) nous emmène dans le dossier www
    • Une marche avant (vers css/) nous emmène dans le dossier www\css
    • Nous y sommes ! On indique alors le nom du fichier (reset.css)

Exercice 2 :

Éditer la feuille de style pour obtenir le résultat suivant :

  • Réduire la largeur de l'ensemble, par exemple 1000px.

style02


Exercice 3 :

  • Centrer la page
    • Trouver 2 méthodes, choisir la plus simple.

style03


Exercice 4 :

Aligner la page à droite

style04


Exercice 5 :

Marges :

  • Adopter le même style que pour l'exercice 3 : 1000px et centré.
  • Éviter que les blocs se touchent :
    • Les espacer de 10px.
    • Marge en haut de la page de 10px.

style05


Exercice 6 :

Arrondir les angles des blocs, de 6px.

style06


Exercice 7 :

Mettre une ombre, vers le sud-est, à 45°

style07  coins


Exercice 8:

Blocs imbriqués :

  • Retirer le texte du corps.
  • Placer 2 blocs côte à côte dans le corps :
    • Les identifier par 'menu' et 'contenu'.
    • Largeurs : 15% (menu), 10px (marge), et le reste (contenu).
    • Hauteurs différentes, au choix.
    • Coins arrondis, ombrés.

style08

0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *