Atelier 11 Octobre 2010
Fil Conducteur

RAPPELS SUR LE STYLAGE

Pour pouvoir progresser, il nous faut maintenant passer à l'introduction d'éléments de stylage.
Les trois possibilités :
  1. Feuille de style externe
  2. Feuille de style interne
  3. Style en ligne

RAPPELS SUR LES SÉLECTEURS

  1. Rôle des sélecteurs
  2. Syntaxe des sélecteurs
  3. Sélecteur universel
  4. Sélecteur de type
  5. Sélecteur d' id
  6. Sélecteur de class

Cinquième exercice : Introduction du style

Nous allons opter pour la feuille de style interne , dans la partie head nous allons ouvrir une balise <style type="text/css"> et y placer le sélecteur de type body et le sélecteur de class .Boites.

N'oubliez pas de fermer la balise <style>.

Remarquez l'écriture condensée de border et l'écriture condensé de la couleur, on va y revenir.

APPLICATION : Dans le code html, ouvrez deux <div> à laquelle vous attribuerez la class .Boites et une hauteur de 100px dans le style en ligne.
La balise ouvrante de ces <div> doit s'écrire <div class="Boites" style="height:100px">.

RAPPELS SUR LE RENDU DES COULEURS

Il existe deux type de notations des couleurs :
  1. La Notation par Mots Clefs
  2. La Notation RGB

Notation par Mots Clefs

  1. 17 mots-clefs normalisés : 17 couleurs fondamentales nommées par leur noms anglais et qui sont reconnues par tous les navigateurs, par exemple : yellow, green, blue, red.
  2. liste exhaustive de 140 mots-clefs + les 17 précédents, par exemple : lightgrey ou yellowgreen.
  3. Problème: cette liste n'est pas reconnue par tous les navigateurs.

Notation RGB

La palette de couleurs disponibles est une combinaison des trois couleurs fondamentales Rouge, Vert et Bleu qui peuvent prendre chacune 256 valeurs différentes.
(comme ce système a été créé par des anglophones il est noté Red, Green, Blue soit : RGB)
Les combinaisons des trois couleurs forment des triplets notés de 0 à 255 en base 10, ou plus fréquement de 00 à FF en base 16.
Il y donc 256 puissance 3 ou 16 puissance 6, soit 16 777 216 couleurs possibles.

La notation RGB peut donc s'exprimer en :

  1. Système décimal de 0 à 255
  2. Pourcentage de 0% à 100%
  3. Hexadecimal de 00 à FF

La notation hexadécimale est le système le plus pratique et le plus simple en écriture. Syntaxe : #RRGGBB. Indifféremment en majuscules ou en minuscules, mais toute la notation dans la même fonte.

  1. background-color : gray
  2. background-color : #808080
  3. ou même background : #808080

Possibilité de notation hexadécimale condensée quand chacun des trois triplets est formé d'une paire de chiffres identiques.

Exemple : #FB0 pour #FFBB00

Sixième exercice : le rendu des couleurs

APPLICATION : Dans la deuxième <div class=".Boites"> créée précédemment,( on peut supprimez la propriété de hauteur dans le style en ligne ), placez deux éléments <p> auxquels vous attribuerez respectivement en ligne, les propriétés :

RAPPELS SUR LES BORDURES

Propriétés des bordures

  • width
  • color
  • style
  • position
    • top
    • right
    • bottom
    • left

Styles des bordures

  1. none
  2. dashed
  3. dotted
  4. solid
  5. double
  6. groove
  7. ridge
  8. inset
  9. outset

Possibilité d'écriture condensée, exemple : border-top: 2px Solid #f8f090;, l'ordre d'écriture des valeurs est sans importance

Septième exercice : les bordures

Dans la feuille de style interne, créez la class .Bordures :

APPLICATION : Dans le code html, sous les deux <div> des exercices précédents, ouvrez une <div class="Boites"> dans laquelle vous placerez neufs éléments <p class="Bordures"> .
Pour chacun de ces éléments , nous compléterons dans le style en ligne la propriété border-style avec les neuf valeurs de style listées plus haut.
Exemple : <p class="Bordures" style="border-style:dashed">dashed</p>.

Remarquez que j'abandonne l'expérience avec color : transparent, car apparemment, si cette valeur est reconnue par firefox, elle n'est pas conforme au w3c.

Attention : À l'exception des styles solid et double le rendu des autres styles est différent selon les navigateurs.

RAPPEL : Dimensions des éléments block

De l'extérieur vers l'intérieur de l'élément, elles se composent de :

D'après le modèle standard (celui du W3C), la largeur et la hauteur apparente d'une boîte sont égales à la somme de :

Possibilité d'écriture condensée des propriétés des margin et padding, dans l'ordre : top, right, bottom, left.

Possibilité d'attribuer des valeurs négatives aux margin et aux padding ce qui permet entre autre des recouvrements d'éléments comme on le verra plus loin.

Huitième exercice : Dimensions des éléments block

Nous allons créer la class .Bloc :

Nous allons en profiter pour créer avec NotePad une feuille de style externe que nous appellerons styleAtelierCss2.css et dans laquelle nous transfèrerons tous les éléments de style que nous avions auparavant placés dans la feuille de style interne de la page, feuille de style interne que nous supprimerons.

Au passage, rappel sur l'écriture des commentaires :

APPLICATION 1 : Dans le code html, sous les <div> précédentes, ouvrez une <div class="Boites"> dans laquelle vous placerez 3 éléments <p class="Bloc">.

APPLICATION 2 : Sous la <div> précédente, Ouvrez une <div class="Boites"> dans laquelle vous placerez 3 éléments <p class="Bloc">.
Dans les deux éléments du bas, on élimine padding et bordure par l'attribut en ligne style="padding : 0; border : none" ce qui met en évidence le dimensionnement brut des éléments <p>.
Remarquons que le padding de l'élément parent et le margin de l'élément enfant s'ajoutent, mais que les margin des éléments frères fusionnent.

RAPPEL : Centrage horizontal des éléments html

Cette technique de centrage est adapté aux éléments positionnés dans le flux courant. Elle permet de centrer tout bloc dans son conteneur en attribuant à ses marges gauche et droite la valeur auto.
Pour que cela fonctionne il est indispensable de préciser la largeur du bloc à centrer.

APPLICATION : Dans le code html, sous les <div> précédentes, ouvrez une <div class="Boites"> dans laquelle vous placerez 1'élément <p class="Bloc">. L'élément à une largeur width de 800px.

Par l'attribut style en ligne, on donnera à cet élément des marges verticales de 20px et des marges horizontales auto, ceci pourrait s'écrire

soit dans sa forme condensée : margin:20px auto;

RAPPEL : La profondeur

HTML et CSS permettent de travailler sur différents niveaux de profondeurs qui se superposent à la manière de calques, comme dans PhotoShop. Ainsi en jouant sur les valeurs des marges des éléments, on peut amener différents blocs à se superposer.
Par défaut, en cas de chevauchement entre éléments, c'est le dernier élément déclaré dans le code html qui s'affiche par dessus les éléments qui le précèdent.

L'explication logique est, que le dernier élément arrivé dans le code est le dernier affiché sur l'écran donc l'équivalent du calque supérieur de Photoshop.

APPLICATION 1 : Dans le code html, sous les <div> précédentes, ouvrez une <div class="Boites"> dans laquelle vous placerez 3 éléments <p class="Bloc">.

Copiez le bloc <div> précédent avec ses trois éléments <p> collez l'ensemble sous le premier bloc <div> .
Inversez les positions des blocs <p> dans le code.

APPLICATION 2 : Créer un effet d'ombre.
Dans la feuille de style interne créez les class .Ombre et .Lumière

Dans le code html, sous les <div> précédentes, ouvrez une <div class="Boites"> dans laquelle vous placerez 2 éléments <p>.

RAPPEL : La propriété z-index

La propriété z-index qui s'applique uniquement aux éléments positionnés (relative , absolute ou fixed ) permet de gérer les superpositions des éléments indépendamment de leur profondeur par défaut. C'est l'élément positionné doté du z-index le plus élevé qui se superpose aux autres.

APPLICATION : Dans le code html, copiez le bloc <div> précédent avec ses deux éléments <p> collez l'ensemble sous le premier bloc <div>.