La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Xavier Tannier Cascading Style Sheets (CSS)

Présentations similaires


Présentation au sujet: "Xavier Tannier Cascading Style Sheets (CSS)"— Transcription de la présentation:

1 Xavier Tannier Cascading Style Sheets (CSS)

2 Programmation Web CSS Xavier Tannier Objectifs Pré-requis : – (X)HTML Contenu : – Les bases de CSS – Un condensé rapide de CSS 3 2

3 Programmation Web CSS Xavier Tannier Principes de base Séparation de la forme et du fond : – (X)HTML pour la structure et le contenu – CSS pour la mise en forme – Permet d'appliquer des styles différents au même document (par exemple, visualisation à l'écran ou impression) – Permet surtout d'appliquer le même style à de nombreux documents ! Recommandation du W3C Pour le projet On n'utilisera que les fonctionnalités qui marchent bien dans les principaux navigateurs 3

4 Programmation Web CSS Xavier Tannier Où mettre le code CSS ? Dans le fichier HTML : – – Mot en emphase À l'extérieur (beaucoup mieux !) – 4

5 Programmation Web Xavier Tannier CSS CSS : Syntaxe 5 Introduction (X)HTML Les bases Rappels de XML Les balises CSS HTML /* sélecteur { attribut: valeur } */ body { background: black; font-family: Arial, Verdana; } /* sélecteur universel */ * { color: #cccccc; } /* sélecteur multiple */ h1, h2, h3 { font-style: italic; font-family: Georgia, sans-serif; } /* sélecteur unique */ h3 { color: red; }

6 Programmation Web Xavier Tannier CSS Les sélecteurs de classe 6 body { background: #111111; color: #cccccc; } p.citation { text-align: center; color: white; border-style: solid; }.normal { font-size: 120%; } Comme le disait Napoléon : Du haut de ces pyramides, 40 siècles vous contemplent CSS HTML

7 Programmation Web Xavier Tannier CSS Les sélecteurs didentifiant 7 body { background: black; color: white; } p#citation { width: 50%; border-style: solid; background: blue; } #normal { font-size: 120%; } Comme le disait Napoléon : Et il vous suffira de dire : "J'étais à Austerlitz" pour que l'on vous réponde : "Voilà un brave !" CSS HTML

8 Programmation Web Xavier Tannier CSS Les sélecteurs contextuels 8 /* Met les "em" en bleu dans les items */ li em { color: green; font-weight: bold; } /* diminue la taille du texte des listes imbriquées */ ul ol, ol ul, ul ul, ol ol { font-size: 80%; } Les balises : de titre d'emphase de listes : ordonnées non ordonnées de définition CSS HTML NB : "titre" est en vert mais pas "Les balises"

9 Programmation Web Xavier Tannier CSS Les pseudo-éléments et les pseudo-classes 9 /* Met la 1ère lettre de chaque paragraphe en très gros */ p:first-letter { font-size: 250%; } /* Colore les liens en rouge */ a:link { color: red; text-decoration: none; } Comme le disait Napoléon : Le doute est l'ennemi des grandes entreprises CSS HTML

10 Programmation Web CSS Xavier Tannier Les pseudo-éléments et les pseudo-classes Pseudo-éléments – :first-letterpremière lettre de l'élément – :first-linepremière ligne de l'élément – :beforeinsérer un contenu avant l'élément – :after insérer un contenu après l'élément Pseudo-classes – :linklien – :visitedlien déjà visité – :hoverélément survolé – :focusélément ayant le focus – :activelien activé (cliqué) 10 à utiliser dans cet ordre ! (cf règles de cascades)

11 Programmation Web CSS Xavier Tannier "div" et "span" Balises génériques pour appliquer un style à une portion de texte qui na pas sémantique particulière (titre, liste, paragraphe,…) div définit un bloc de texte (block-level element) : boîte rectangulaire, retour à ligne à la fin. span définit un morceau de texte à lintérieur dun bloc (inline element) : boîte colle au texte, pas de div dans un span ! Ce site répertorie des citations de Napoléon Bonaparte.

12 Programmation Web CSS Xavier Tannier Positionnement Positionnement normal : static Le navigateur positionne les éléments en fonction de leurs types (block-level ou inline) et de leurs ordres dapparition dans le code source de la page 12 Ici se trouve le menu Ce site répertorie des citations de Napoléon Bonaparte.

13 Programmation Web CSS Xavier Tannier Positionnement (relatif) Décalage par rapport au positionnement static 13 Ceci est un exemple avec du texte en haut et du texte en bas CSS HTML span.haut { position: relative; bottom: 8px; background-color: #ffff00; } span.bas { position: relative; bottom: -8px; background-color: #5555ff; }

14 Programmation Web CSS Xavier Tannier Positionnement (absolu) Position arbitraire. Lordre dans le code source na plus dimportance Pour le positionnement des autres éléments : comme sil nexistait pas 14 Ici se trouve le menu Ce site répertorie des citations de Napoléon Bonaparte. div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { position: absolute; bottom: 10px; right: 10px; border-style: dashed; border-color: red; } CSS HTML en pourcentage, c'est encore mieux...

15 Programmation Web CSS Xavier Tannier Positionnement (absolu) Position arbitraire. Lordre dans le code source na plus dimportance Pour le positionnement des autres éléments : comme sil nexistait pas 15 Ce site répertorie des citations de Napoléon Bonaparte. Ici se trouve le menu div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { position: absolute; bottom: 10px; right: 10px; border-style: dashed; border-color: red; } CSS HTML

16 Programmation Web CSS Xavier Tannier Positionnement (absolu) Position arbitraire. Lordre dans le code source na plus dimportance Pour le positionnement des autres éléments : comme sil nexistait pas 16 Ce site répertorie des citations de Napoléon Bonaparte. Ici se trouve le menu Lorem ipsum... div.menu { position: absolute; top: 10px; left: 10px; border-style: dotted; } div.contenu { position: absolute; bottom: 10px; right: 10px; border-style: dashed; border-color: red; } CSS HTML

17 Programmation Web Xavier Tannier CSS Marges 17 Ici se trouve le menu Ce site répertorie des citations de Napoléon Bonaparte. div.menu { position: absolute; top: 0px; left: 0px; width: 10%; padding-top: 30px; padding-left: 2px; border-style: solid; } div.contenu { position: absolute; margin-left: 15%; border-style: solid; border-color: red; } CSS HTML marge par défaut du navigateur !

18 Programmation Web Xavier Tannier CSS Marges et bordures 18 contenu padding (marge interne) margin (marge externe) border (bordure) Bordures : – border – border-left, border-right, border-top, border-bottom Marges externes: – margin – margin-left, margin-right, margin-top, margin-bottom Marges internes : – padding – padding-left, padding-right, padding-top, padding-bottom width height Tailles : – Heightwidth – min-heightmin-width – max-heightmax-width

19 Programmation Web Xavier Tannier CSS Bordures 19 Peu important Important Vital span.i1 { border-style: dotted; border-color: #888888; border-width: thin; } span.i2 { border-style: dashed; border-color: blue; border-width: medium; } span.i3 { border-style: solid; border-color: red; border-width: thick; } HTML ou une valeur numérique CSS none, solid, dotted, dashed, double, groove, ridge, inset, outset

20 Programmation Web Xavier Tannier CSS Bordures des tableaux 20 A 1 B 2 A 1 B * { font-size: xx-large; } tr, td, table { border: 1px solid black; }.fusion { border-collapse: collapse; }.fission { border-collapse: separate; border-spacing: 2px; empty-cells: show; } CSS HTML factorisation... CSS par défaut : hide

21 Programmation Web Xavier Tannier CSS Tableaux 21 Légende en haut A 1 B Légende en bas A 1 B tr, td, table { border: 1px solid black; }.tab1 { caption-side:top; }.tab1 tr td { width: 100px; height: 50px; }.tab2 { caption-side:bottom; }.tab1 tr td { width: 200px; height: 100px; } CSS HTML

22 Programmation Web CSS Xavier Tannier Propriétés de longueur Les valeurs sous forme de pourcentage (par rapport à la valeur courante) Mais attention, tous les navigateurs ne réagissent pas de la même façon Les valeurs relatives en fonction de la police : – em : largeur du caractère 'm' pour la police courante – ex : hauteur du caractère 'x' Les valeurs relatives à l'écran – px : le nombre de pixels Les valeurs absolues : – mm, cm, in (= 2.54 cm), pt (= 1/72 in), pc (= 12 pt) – à utiliser pour un mode impression, mais pas pour l'écran ! 22

23 Programmation Web CSS Xavier Tannier Polices font-family. Police ou famille de police ( serif, sans-serif, cursive, fantasy, monospace ). Attention, les polices supportées dépendent fortement du navigateur ! Déclarez une famille générique après la police (séparées par une virgule) pour substituer une police non trouvée par une autre. font-size. Taille de la police : valeur numérique ou xx-small, x-small, small, medium, large, x-large, xx-large. font-style. Style de la police : italic, oblique, normal. font-variant. Casse des caractères : normal, small-caps. font-weight. Graisse des caractères : normal, bold, bolder, lighter. line-height. Espace interligne (ex. : 150% ou 1.5em). text-decoration. Ornement du texte : none, underline. (souligné), overline (surligné), blink (clignotant), line-through (barré). 23

24 Programmation Web CSS Xavier Tannier Espacement, alignement, indentation letter-spacing. Espacement des lettres (peut être négatif !). word-spacing. Espacement des mots. text-align. Justification et alignement : left, right, center, justify. vertical-align. Alignement vertical : baseline (défaut), top, bottom, middle, super (exposant), sub (indice), etc. text-indent. Indentation de la première ligne du texte (longueur). 24

25 Programmation Web Xavier Tannier CSS Couleurs et fond 25 Contenu Partez au soleil ! body { background-color: purple; }.contenu { color: rgb(200, 250, 0); height: 400px; background-image:url( "piece.gif" ); background-repeat: repeat; }.pub { float: right; width: 470px; height: 300px; color: white; background-image:url( "plage.jpg" ); background-repeat: no-repeat; background-position: right top; } CSS HTML no-repeat, repeat, repeat-x, repeat-y CSS ou des valeurs numériques

26 Programmation Web CSS Xavier Tannier Couleurs Couleurs prédéfinies Code RGB : rgb(150, 150, 150) ou rbg(10%, 25%, 100%) Valeur hexadécimale Outils pour faciliter la définition de nouvelles couleurs : – ColorBlender – Color Schemer – La boîte à couleurs – et beaucoup d'autres... 26

27 Programmation Web CSS Xavier Tannier Plus sur les blocs… débordement Si la hauteur d'un bloc est contrainte, le contenu peut déborder... Propriété overflow : – visible, rend visible tout ce qui dépasse. – hidden, cache tout ce qui dépasse. – scroll, met toujours une barre de défilement horizontale et verticale. – auto, met une barre de défilement horizontale ou verticale si besoin. Voir aussi : – overflow-x, overflow-y – clip (pour définir la zone visible d'un élément) – scrollbar-face-color, scrollbar-track-color, scrollbar-arrow-color, etc. (mais attention à la compatilité avec les navigateurs) 27

28 Programmation Web CSS Xavier Tannier Plus sur les blocs… flottement Un objet flottant est positionné à un endroit précis et le reste du contenu s'écoule autour de lui. Le flottement est défini par la propriété float : – left : l'écoulement se fera par la droite – right : l'écoulement se fera par la gauche – none – La propriété clear ( none, left, right, both ) empêche que l'élément ne se colle au précédent de son côté gauche, droit ou les deux. 28

29 Programmation Web Xavier Tannier CSS Plus sur les blocs… flottement 29 Les Alpes connaissent une faune sauvage diverse et variée qui a su s'adapter aux reliefs accidentés et aux altitudes extrêmes. Du pied des Alpes à son sommet le plus haut qu'est le Mont-Blanc, la faune varie suivant l'altitude. #img1 { float:left; } #img2 { float:right; } #img3 { float:left; } #img4 { float:left; clear: left; } #img5 { float:left; clear: left; } CSS HTML CSS img1 img2 img3 img4 img5

30 Programmation Web CSS Xavier Tannier Plus sur les blocs… positionnement Le positionnement est défini par la propriété position (couplée avec left, right, bottom et top) – static : left, right, bottom et top ne s'appliquent pas – relative : positionnement relatif (voir les exemples au début du cours) – absolute : positionnement absolu (voir les exemples au début du cours) – fixed : positionnement absolu par rapport à la fenêtre d'affichage (ne bouge pas si on fait défiler la page). – La propriété visibility ( visible, hidden, collapse ) permet de cacher totalement l'élément 30

31 Programmation Web CSS Xavier Tannier Règles de cascades Plusieurs sources – Vos règles CSS (CSS auteur) – Les règles CSS de lutilisateur – Les règles par défaut du navigateur Plusieurs méthodes – Pour chaque élément XHTML : attribut style="..." – Intégré dans le XHTML : balise... – Fichiers externes + balises 31 Plus prioritaire Moins prioritaire

32 Programmation Web CSS Xavier Tannier Règles de cascades Plusieurs règles pour un élément – id – class – sélecteur contextuel – nom de balise Sil y a encore des conflits : ordre de déclaration dans le code source.contenu { border-style: solid; border-color: red !important; } 32 Plus prioritaire Moins prioritaire Pseudo-classes pour les liens Sélecteur universel *

33 Programmation Web CSS Xavier Tannier Note sur le style des formulaires Traditionnellement, on utilisait des tables pour mettre en page un formulaire. Interdit en XHTML ! On utilise CSS pour la mise en page, comme pour le reste. Il est parfois utile de considérer certains éléments comme des blocs (pour les faire flotter par exemple) : label { display: block; } 33

34 Programmation Web CSS Xavier Tannier Références Les spécifications de CSS : – – Des livres : – HTML et XHTML : La Référence, OReilly – CSS : La Référence, OReilly 34

35 CSS 3 35

36 Programmation Web CSS Xavier Tannier CSS 3 De nouvelles fonctionnalités et de nouveaux attributs Souvent spécifique à un navigateur – -moz-transform (pour les navigateurs Mozilla : Firefox) – -webkit-transform (pour les navigateurs WebKit : Safari et Chrome) – -o-transform (pour Opéra) – -ms-transform (pour Internet Explorer) Des prises en compte très variables selon les navigateurs – Implémentations réalisées ou pas – Interprétations parfois variables À manipuler avec précautions Tous les détails :

37 Programmation Web CSS Xavier Tannier CSS 3 : quoi de neuf ? Bordures : – Coins arrondis – Ombres – Bordures avec une image Fonds : – Taille modifiable – Fonds multiples Effets textuels : – Ombres – Césures de mots

38 Programmation Web CSS Xavier Tannier CSS 3 : quoi de neuf ? Polices de caractères : – Utiliser nimporte quelle police True Type, OpenType (tous sauf IE) ou Embedded OpenType (IE seulement) – À utiliser avec précaution et bien vérifier le rendu sur tous les navigateurs Transformations 2D : – Translation – Rotation – Taille – Torsion – Etc. Transformations 3D : – Mêmes effets mais sur 3 dimensions

39 Programmation Web CSS Xavier Tannier CSS 3 : quoi de neuf ? Transitions, animations : – Changements chronométrés de valeurs dattributs Multi-colonnes : – Texte sur plusieurs colonnes Interface utilisateur : – Éléments redimensionnables – etc.


Télécharger ppt "Xavier Tannier Cascading Style Sheets (CSS)"

Présentations similaires


Annonces Google