Les feuilles de styles

1
Les feuilles de styles

• Par Rokia Bendaoud

2
Sommaire

• Présentation
• Syntaxe générale
• Insertion du code
• Sélecteurs
• Classes
• Syntaxe
• Exemples
• Les différentes valeurs applicables

3
Introduction

• CSS  Cascading Style Sheets 
• Langage de présentation pour des documents HTML
  et XML
• Séparer le contenu de la présentation
• Homogénéisation des pages Web dun même site
• CSS2 adapté pour les pages multimédias (vidéo,
  audio, )

4
Principes

• Utilisation de règles
• Notion de cascades

5
Syntaxe générale
Valeur
Propriété
A font-family Verdana
Sélecteur
Déclaration
En HTML ltA font-family  Verdana gt
6
Insertion de code CSS (1/3)

• Dans une page HTML
• ltHEADgt
• ltSTYLE type text/css gt
• lt!--
• Définition de styles
• --gt
• lt/STYLEgt
• lt/HEADgt

7
Insertion de code CSS (2/3)

• Dans une balise HTML
• ltH1 style font-family Verdana colorredgt
• lt/H1gt
• Dans un fichier externe
• ltHEADgt
• ltLINK relstylesheet type text/css 
  href style.css gt
• lt/HEADgt

8
Insertion de code CSS (3/3)

• Ou avec import
• ltHEADgt
• lttitlegtstyle importélt/titlegt
• ltstyle type"text/css"gt
• _at_import url(styleimporte.css)
• lt/stylegt
• lt/headgt
• Il est possible d'importer plusieurs feuilles de
  style

9
Sélecteurs (1/3)

• Sélecteur multiple
• H1, h2, A font-family Verdana
• Sélecteur Universel
• font-family Verdana
• Sélecteur imbriqué
• A B font-family Verdana (appliqué si B est
  fils de A)
• Exemple p b font-family Verdana
• ltpgt coucou ltbgt je suis en Verdana lt/bgtlt/pgt
• ltbgt je suis pas en Verdana lt/bgt

10
Sélecteurs (2/3)

• Sélecteur déléments consécutifs
• A B font-family Verdana (appliqué si B
  suit A)
• Exemple i b font-family Verdana
• ltpgtltigt coucou lt/igtltbgt je suis en Verdana lt/bgtlt/pgt
• ltbgt je suis pas en Verdana lt/bgt
• Sélecteur déléments père-fils
• A gt B font-family Verdana (appliqué au fils
  de B si B est fils de A)
• Exemple p gt b font-family Verdana
• ltpgt coucou ltbgt ltigtje suis en Verdana lt/igtlt/bgtlt/pgt
• ltbgt je suis pas en Verdana lt/bgt

11
Sélecteurs (3/3)

• nom_ID style
• ltBALISE IDnom_IDgt lt/BALISEgt
• Sapplique pour un élément unique
• Déconseillé car réservé à javascript

12
Les classes

• .NomdeClasse
• Propriété de style valeur
• Propriété de style valeur
• ltA classNomdeClassegt (sapplique à tous les
  Balises)
• B.NomdeClasse
• Proriété de style valeur
• Propriété de style valeur
• ltB classNomdeClassegt (sapplique à la Balise B)

13
Les classes

• Ahover font-decoration underline
• (sapplique quand la sourit passe sur la balise)
• Aactive color FF0000
• (sapplique quand le lien est active)
• Avisited color FF0000
• (sapplique quand le lien a été activé)
• Alink color FF0000
• (sapplique quand un lien na pas été visité)
• .

14
Syntaxe (1/4) Police (font)

• font-family définit un nom de police ou une
  famille de police
• Exemple h3 font-familyArial
• font-size définit la taille de la police
  (small/ médium /)
• Exemple P font-size72pt
• font-style définit le style du texte
• Exemple h3 font-styleitalic
• font-variant définit les majuscule (Normal ou
  small-caps )
• Exemple P font-variantsmall-caps

15
Syntaxe (2/4) texte

• text-align définit l'alignement (à gauche,
  centré, ... )
• Exemple h3 text-aligncenter
• text-indent définit un retrait dans la première
  ligne
• Exemple P text-indent1cm
• text-decoration définit un attribut du texte
  (souligné, barré... )
• Exemple avisitedtext-decorationblink
• text-transform définit la casse du texte
  (minuscule, majuscule)
• Exemple P text-transformuppercase

16
Syntaxe (3/4) arrière plan(background)

• background-color définit la couleur de
  l'arriére-plan
• Exemple h3 background-color000000
• background-image définit l'image de l'arrière
  plan
• Exemple body background-imageurl(image.gif)
• background-repeat définit la façon de répéter
  l'image de l'arrière plan (repeat, no-repeat, )
• Exemple bodybackground-imageurl(image.gif)
  background-repeat repeat-4
• background-attachment définit si l'image
  l'arrière plan reste fixe avec les déplacements
  de lécran
• Exemple body background-imageurl(image.gif)
  background-attachment fixed

17
Syntaxe (4/4) Les balises DIV et SPAN en CSS

• Les balises ltdivgt et lt/divgt sont utilisées pour
  appliquer un style à un contenu
• ltdiv id"contenu"gt Ici le code HTML relatif au
  contenu..lt/divgt
• L'utilisation des balises ltspangtlt/spangt permet
  aussi d'appliquer un style CSS de type gras ou
  italique, les div permettent plutôt une mise en
  page
• ltspan class"italic"gtTexte en italiquelt/spangt

18
Commentaire

• Commentaire
• / ceci est un commentaire /

19
Les différentes valeurs applicables

• Types de mesures pour les tailles et dimensions
  Mesures absolues
• le millimètre (mm)
• le centimètre (cm)
• le pouce (in) qui vaut 25,4 mm
• le point (pt)
• le pica (pc)
• Mesures relatives utiliser
• le pourcentage ()
• la hauteur em(em)
• le pixel (px)
• L'emploi de telle ou telle unité dépendra de
  lélément concerné (une marge, une police, ..)

20
Les différentes valeurs applicables

• ltbody style"font-size 12pt"gt ltp
  style"font-size110"gt....lt/pgt lt/bodygt
• Exemple
• lthtmlgt ltheadgt lttitlegtMa pagelt/titlegt ltstyle
  type"text/css"gt
• bodybackground-imageurl(gnu.jpg)
• background-repeatno-repeat
• background-positioncentergt
• lt/stylegt lt/headgt ltbodygt lt/bodygt lt/htmlgt

21
Exercices

• Donnez le code permettant davoir cette page HTML
  

22
Exercices