IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Feuilles de style>Déclaration Méthodes pour définir des styles Il est possible de définir des styles à.

Présentation au sujet: "IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Feuilles de style>Déclaration Méthodes pour définir des styles Il est possible de définir des styles à."— Transcription de la présentation:

1 IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Feuilles de style>Déclaration Méthodes pour définir des styles Il est possible de définir des styles à trois niveaux: - pour un élément isolé d'un fichier HTML - pour l'ensemble d'un fichier HTML - pour un ensemble de pages HTML En cas de conflit de styles définis, c'est la déclaration la plus spécifique qui sera appliquée Définir des formats spécifiques Il est possible de déclarer le style d'un élément dans le corps du document

2 IUT SRC Année 2004/2005Antonio Capobianco 2 HTML>Feuilles de style Définir des formats pour un fichier html On effectue la déclaration des formats CSS applicables au fichier courant dans l'entête du document <!-- /* … ici sont définis les formats …*/ --> Définir un format global Il est possible de définir un fichier contenant les spécifications de style à appliquer à plusieurs fichiers HTML Dans ce cas on ne déclare dans l'entête du document que le chemin du fichier css

3 IUT SRC Année 2004/2005Antonio Capobianco 3 HTML>Feuilles de style>Définition pour des médias séparés Définir des formats pour différents médias Syntaxe HTML pour des fichiers CSS On ajoute l'attribut média dans la bannière d'appel du fichier CSS Types de médias media="all" Le fichier CSS s'applique à tous les types de médias. media="aural" Le fichier CSS s'applique à des systèmes de restitution vocale media="braille" Le fichier CSS s'applique à des sorties avec une "ligne Braille" media="embossed" Le fichier CSS s'applique à des imprimantes en Braille media="handheld" Le fichier CSS s'applique à l'affichage sur des ordinateurs de poche media="print" Le fichier CSS s'applique à l'impression sur papier. media="projection" Le fichier CSS s'applique à la projection de données avec des rétroprojecteurs media="screen" Le fichier CSS s'applique à l'affichage à l'écran. media="tv"

4 IUT SRC Année 2004/2005Antonio Capobianco 4 HTML>Feuilles de style>Définition pour des médias séparés Syntaxe CSS pour des fichiers CSS Il existe une syntaxe propre aux feuilles de style CSS <!-- @import url (impression.css) print; @import url (normal.css) screen, handled; --> Syntaxe pour des passages de style <!-- @media print { /*… définition des formats d'impression …*/} @media screen, handled {/*… définition des formats à l'écran …*/} -->

5 IUT SRC Année 2004/2005Antonio Capobianco 5 HTML>Feuilles de style>Définir des styles Construction de formats globaux Il s'agit de définir les propriétés des éléments HTML présents dans un document Syntaxe sélecteur {définitons} Exemple h1 { color:red; font-size:36pt; } ! Il est préférable d'éviter les espaces dans les définitions des propriétés des éléments de style, bien que ceux-ci soient normalement autorisés (cela peut entraîner des problèmes avec certains navigateurs)

6 IUT SRC Année 2004/2005Antonio Capobianco 6 HTML>Feuilles de style>Définir des styles Définir des formats pour les repères HTML imbriqués Il est possible de définir une apparence spécifique pour un élément HTML imbriqué dans l'élément courant Exemple h1 { color:red; font-size:36pt; } h1 i { color:blue; font-style:normal; } Remarque : il existe d'autres syntaxes, spécifiques au CSS2.0 pour définir les propriétés d'éléments imbriqués

7 IUT SRC Année 2004/2005Antonio Capobianco 7 HTML>Feuilles de style>Définir des styles Définir des formats liés à l'attribut On peut contraindre la mise en forme en fonction des attributs employés dans la déclaration d'un élément Syntaxe élément [ attribut ] {mise en forme} -> si l'attribut est utilisé dans la déclaration de l'élément, appliquer la mise en forme qui suit élément [ attribut = valeur ] {mise en forme} -> si l'attribut a la valeur spécifiée, appliquer la mise en forme qui suit élément [ attribut ~= valeur ] {mise en forme} -> si l'attribut contient dans sa déclaration la valeur spécifiée, appliquer la mise en forme qui suit * [ attribut |= valeur ] {mise en forme} -> tout attribut contenant dans sa déclaration une valeur du type de la valeur spécifiée Exemple: h1 [align] {color: #33FF33;}

8 IUT SRC Année 2004/2005Antonio Capobianco 8 HTML>Feuilles de style>Définir des styles Définir des formats pour les classes En utilisant l'attribut class on peut créer des variantes d'éléments Déclaration de classe : h1 { font-family: Arial; font-size=24pt; font-weight:normal; } Définition d'une classe spécifique pour un élément h1.arriereplan { background-color:#FFFF00 } Définition générale de classe *.arriereplan { background-color:#FF00FF }.extra { background-color:#FF99FF } Appel de la classe : ….

9 IUT SRC Année 2004/2005Antonio Capobianco 9 HTML>Feuilles de style>Définir des styles Éléments div et span Ces deux éléments sont spécifiquement conçus pour être formatés par des CSS. Ils ne possèdent aucune propriété particulière, sinon de pouvoir contenir d'autres éléments de bloc. div introduit un passage à la ligne alors que span n'en introduit aucun. Ils permettent ainsi de définir des styles pour des éléments logiques tels que des paragraphes, des titres, etc… Exemple: Texte de la partie …../div-span.html

10 IUT SRC Année 2004/2005Antonio Capobianco 10 HTML>Feuilles de style>Définir des styles Définir des formats indépendants On peut de la même façon utiliser les attributs universel id pour définir des styles à utiliser dans le corps du document Exemple : #cadrerouge { position:absolute; top:130px; left:30px; width:320px; padding:10px; margin:0px; border:4px solid #EE0000; } Le cadre rouge./FormatsIndé.html Il est également possible de définir des formats indépendants liés à une balise donnée (depuis CSS 2.0). Dans ce cas le format n'est appliqué que s'il est appelé en lien avec la balise considérée Exemple : h1#titre { font-family:Arial,sans-serif; font-size:24pt; font-weight:normal; color:green;} Le titre en vert

11 IUT SRC Année 2004/2005Antonio Capobianco 11 HTML>Feuilles de style>Définir des styles Définir des pseudo-formats Il servent à définir des composantes qu'il est impossible d'exprimer dans le langage HTML courant Pseudo-formats pour les liens : :link, :visited, :hover, :active, :focus (lors de la déclaration des pseudo-formats, respecter cet ordre) :link = pour les liens aux pages qui n'ont pas encore été visitées :visited = pour les liens aux pages qui ont déjà été visitées :hover =pour les liens sur lesquels l'utilisateur passe avec la souris :active = pour les liens en train d'être cliqués :focus = pour les liens qui deviennent actifs (focus) par exemple lors d'une "recherche" par tabulateur Exemple : … a:link { color:#EE0000; text-decoration:none; font-weight:bold; } a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; } a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; } a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }…

12 IUT SRC Année 2004/2005Antonio Capobianco 12 HTML>Feuilles de style>Définir des styles Définir des pseudo-formats Pseudo-formats pour les paragraphes : :first-line, :first-letter, :first-child :first-line = la première ligne de l'élément reçoit les propriétés CSS :first-letter = la première lettre du texte reçoit les propriétés CSS :first-child = le premier élément « enfant »* de l'élément reçoit les propriétés CSS Exemple : … p:first-line { font-weight:bold } p:first-letter { font-size:300%; color:red } p:first-child { background-color:#C0C0C0; } … PseudoParagraphe.htm * Le premier paragraphe du bloc courant

13 IUT SRC Année 2004/2005Antonio Capobianco 13 HTML>Feuilles de style>Définir des styles Définir des pseudo-formats Pseudo-formats pour génération de texte: :before, :after :before = contenu qui doit être inséré avant le contenu noté pour l'élément :after = contenu qui doit être inséré après le contenu noté pour l'élément Exemple : td.Prix:before { content:"Prix: "; } td.Prix:after { content:",- EUR"; } td.Produit:before { content:url(list_style_image.gif)" "; } td.Produit:after { content:" "attr(title); } Explications: url(list_style_image.gif) " " → On ajoute en début de cellule une image suivie d’un espace " "attr(title) → On ajoute en fin de cellule un espace puis, si un attribut title est défini dans la cellule courante (i.e. Dans la balise td) on le rajoute à la fin du texte

14 IUT SRC Année 2004/2005Antonio Capobianco 14 HTML>Feuilles de style>Formatage d'éléments HTML Formater directement des éléments HTML Il est possible d'utiliser directement les commandes des CSS pour formater un élément dans le corps du document HTML. Les mentions de formatage s'appliquent alors pour le passage de validité du repère HTML concerné. Exemple : <p style="background-color:#808040; color:#D8FD02; font-family:'Century Schoolbook', serif; font-size:24pt; letter-spacing:3px; padding:40px; border:double 4px;" title="Citation de Francis Picabia"> Notre tête est ronde pour que la pensée puisse changer de direction! FormatageDirect.htm FormatageDirect.htm

15 IUT SRC Année 2004/2005Antonio Capobianco 15 HTML>Feuilles de style>Formatage d'éléments HTML Formatage de polices font-family Famille de police font-styleStyle de police font-variant Variante de police (majuscule, minuscule) font-sizeTaille de police font-weightGraisse de police word-spacing Espace des mots letter-spacing Espace des signes text-decoration Décoration du texte text-transform Transformation du texte colorCouleur du texte

16 IUT SRC Année 2004/2005Antonio Capobianco 16 HTML>Feuilles de style>Formatage d'éléments HTML Font-family Font-style Valeurs : italic, oblique, normal Font-size Valeurs : numériques ou relatives (small, large, etc…) Font-weight Valeurs : bold, bolder, lighter,…, 100, …, 900 Font-variant Valeurs : small-caps, normal

17 IUT SRC Année 2004/2005Antonio Capobianco 17 HTML>Feuilles de style>Formatage d'éléments HTML Word-spacing Letter-spacing Text-decoration Valeurs : underline, overline, line-through, blink, none Text-transform Valeurs : capitalize, uppercase, lowercase, none Color Text-shadow

18 IUT SRC Année 2004/2005Antonio Capobianco 18 HTML>Feuilles de style>Alignement Alignement et contrôle de paragraphe Les propriétés d'alignement recouvrent : la justification des paragraphes, le retrait, l'interligne, l'interruption du flux de texte, etc… Retrait du texte : text-indent Permet de contrôler le retrait de la première lignedu paragraphe Interligne : line-height Permet de contrôler l'espacement entre les lignes Alignement vertical : vertical-align Les valeurs que peut prendre vertical-align sont: top = aligner en haut. Middle, bottom, baseline, sub (mettre en indice), super (mettre en exposant), text-top, text-bottom

19 IUT SRC Année 2004/2005Antonio Capobianco 19 HTML>Feuilles de style>Alignement Alignement horizontal : text-align Permet de contrôler la justification du texte. Cet attribut peut prendre les valeurs: left, right, center, justify Césure : white-space Permet de contrôler les retours à la ligne dans l'affichage. Cet attribut peut prendre les valeurs: normal, pre, nowrap.

20 IUT SRC Année 2004/2005Antonio Capobianco 20 HTML>Feuilles de style>Marges et espaces Marges et espaces On peut contrôler l'espacement entre les paragraphes, ou entre un paragraphe et l'élément parent qui le contient Marge haute : margin-top Fixe la marge supérieure ou l'espace supérieur d'un élément avec celui qui le précède. Appliqué à l'élément body, la mention margin-top détermine l'espace séparant le contenu du haut de la fenêtre Marge basse : margin-bottom Fixe la marge inférieure ou l'espace inférieur d'un élément avec celui qui le suit. Marge gauche : margin-left Marge droite : margin-right !

21 IUT SRC Année 2004/2005Antonio Capobianco 21 HTML>Feuilles de style>Marges et espaces Mention de marges générale : margin Cette commande permet de spécifier toutes les marges citées précédemment. Il suffit de passer en argument les valeurs numériques des marges, dans l'ordre suivant : 1 = haut; 2 = droite; 3 = bas; 4 = gauche..typeA { margin: 1cm 2cm; background-color:#FFFF99; }.typeB { margin: 1cm 2cm 3cm; background-color:#99FFFF; }.typeC { margin: 1cm 2cm 3cm 4cm; background-color:#FF99FF; }./Margin.htm

22 IUT SRC Année 2004/2005Antonio Capobianco 22 HTML>Feuilles de style>Marges et espaces Espaces intérieurs On entend par espace intérieur l'espace imposé entre un contenu et le bord de l'élément qui le contient (un paragraphe p, une section div, etc… La syntaxe reprend celle définie pour les marges, avec la mention padding. Espace intérieur haut : padding-top Espace intérieur bas : padding-bottom Espace intérieur : padding-left Espace intérieur : padding-right Mention générale: padding./Padding-bottom.htm

23 IUT SRC Année 2004/2005Antonio Capobianco 23 HTML>Feuilles de style>Bordures Généralités sur les bordures On peut appliquer une bordure sur tout élément de bloc, ou tout élément qui crée un paragraphe distinct: p, div, table, td, tr, blockquote, h[1-6], etc… La syntaxe reprend celle définie pour les marges, avec la mention padding. Épaisseur de la bordure : border[-top, -left, -right, -bottom]-width Valeurs : thin, medium, thick, valeurs numériques. Couleur de la bordure : border[-top, -left, -right, -bottom]-color Style de la bordure : border[-top, -left, -right, -bottom]-style Valeurs : none, dotted (pointillés), dashed (tirets), solid (pleine), double, groove (relief), ridge (3D), inset (rentrante), outset (sortante). Bordure : border[-top, -left, -right, -bottom] Cette mention résume les précédentes en spécifiant les mentions d'épaisseur, de style et de couleur

24 IUT SRC Année 2004/2005Antonio Capobianco 24 HTML>Feuilles de style>Arrière plan Généralités Les mentions de définition des images et couleurs d'arrière plan peuvent s'appliquer à tout le document (body), à un bloc (h[1-6], p, blockquote, pre,dix, table, td, tr,…) ou à des passages de texte distincts (span, b, strng, etc…). Couleur de fond : background-color Permet de spécifier une couleur d'arrière-plan. Image de fond : background-image Permet de spécifier une image d'arrière plan propre à des éléments HTML distincts. Par défaut, le graphique d'arrière plan est répété sur l'ensemble de l'espace mis à sa disposition

25 IUT SRC Année 2004/2005Antonio Capobianco 25 HTML>Feuilles de style>Arrière plan Effet de répétition : background-repeat Cette commande permet de contrôler l'effet de répétition d'un graphique d'arrière-plan incorporé avec la commande background-image. <div style="background-image:url(arrireplan.jpg); background-repeat:repeat-x;)"> Valeurs : repeat, repeat-x (sur une ligne), repeat-y (sur une colonne), no-repeat Effet de filigrane : background-attachment Pour des éléments longs, l'image de fond peut se déplacer en fonction du défilement. <div style="background-image:url(arrireplan.jpg); background-repeat:repeat-x; background-attachment:fixed;"> Valeurs : scroll (défile avec le texte), fixed (image fixe)./background-attachment.htm

26 IUT SRC Année 2004/2005Antonio Capobianco 26 HTML>Feuilles de style>Arrière plan Position d'arrière-plan : background position Cette mention n'est intéressante que si vous imposez grâce à la mention background-repeat que l'arrière plan ne soit affiché qu'une fois. Cette mention permet de fixer la position de l'arrière-plan dans l'élément HTML. <div style="background-image:url(arrireplan.jpg); background-repeat:no-repeat; background-position: 30px 20px;"> Valeurs également possibles: top, center, middle, bottom, left, right Arrière-plan : background Cette mention regroupe toutes les mentions différentes (choix du graphique, effet de répétition, effet de filigrane et position). L'ordre de déclaration n'a pas d'incidence.

27 IUT SRC Année 2004/2005Antonio Capobianco 27 HTML>Feuilles de style>Formatage de liste Formatage de listes Les mentions de formatage de listes s'appliquent aux repères ul et ol. Ces mentions, contrairement aux mentions de formatage de liste classiques, sont considérées comme valides par le W3C (les mentions classiques sont en cours d'abandon). Type de représentation : list-style-type Permet de spécifier le spécifier le type de puces et de numérotation Valeurs : lower-roman, upper-roman, lower-alpha, upper-alpha, etc… Retrait des listes : list-style-position Permet de spécifier le spécifier le type de puces et de numérotation Valeurs : inside, outside list-style-position.htm

28 IUT SRC Année 2004/2005Antonio Capobianco 28 HTML>Feuilles de style>Formatage de liste Graphiques de puces personnalisés : list-style-image Permet de spécifier le spécifier le type de puces et de numérotation Représentation de liste en général : list-style Cette mention regroupe les différentes mentions possibles suivantes : list-style-type, list-style- position, list-style-image

29 IUT SRC Année 2004/2005Antonio Capobianco 29 HTML>Feuilles de style>Formatage de tableaux Formatage de tableaux Les options de formatage de police, d'alignement de paragraphe, espace intérieurs, bordures et couleurs et images d'arrière-plan s'appliquent aux éléments HTML comme table, tr, th, td, thead, col, etc… Position d'un titre de tableau : caption-side On peut préciser la position d'un éventuel titre de tableau. Cette mention est à utiliser dans la balise de définition du titre du tableau caption. Titre Valeurs : bottom, top, left, right Largeur des éléments fixe/variable : table-layout La mention CSS width permet de spécifier les largeurs de cellules. Table-layout permet de savoir si cette mention doit être respectée strictement, ou non. Valeurs : fixed (les mentions de largeur sont strictement respectées), auto (les mentions de largeur peuvent être ignorées si le contenu le nécessite).

30 IUT SRC Année 2004/2005Antonio Capobianco 30 HTML>Feuilles de style>Formatage de tableaux Modèle de bordure : border-collapse Permet de déterminer le type de liaison entre les bordures des cellules d'un tableau. Valeurs : separate, collapse Affichage des cellules vides : empty-cells Permet de fixer si les cellules vides d'un tableau doivent reevoir un quadrillage ou non. Valeurs : show, collapse Espace entre bordures : border-spacing Permet de fixer l'espace séparant les bordures de cellules les unes des autres.

31 IUT SRC Année 2004/2005Antonio Capobianco 31 HTML>Feuilles de style>Positionnement Positionnement et affichage d'éléments Des mentions relatives ou absolues permettent de positionner des éléments d'une page web de façon précise. Mode de positionnement : position Permet de fixer si le type de positionnement appliqué à un élément du document. <div style="position:absolute; … Valeurs : absolute, fixed (positionnement absolu, fixe lors du défilement), relative (positionnement relatif mesuré à partir de la position de départ de l'élément proprement dit), static (positionnement par défaut) Mentions de position : top, left, bottom, right Ces mentions permettent de spécifier un positionnement par rapport au sommet, bas, côté gauche ou droit de l'élément parent.

32 IUT SRC Année 2004/2005Antonio Capobianco 32 HTML>Feuilles de style>Positionnement Mentions de taille : width, min-width, max-width, height, min- height, max-height Permet de spécifier ls hauteurs et largeurs des éléments. Gestion des contenus : overflow Permet de définir comment des éléments intérieurs, au contenu trop important, doivent être traités. Valeurs: visible (l'élément sera agrandi), hidden (élément caché s'il dépasse les limites) scroll(élément coupé, présence de barres de navigation), auto (au choix du navigateur).

33 IUT SRC Année 2004/2005Antonio Capobianco 33 HTML>Feuilles de style>Positionnement Gestion du cours du texte : float, clear La mention float permet de faire en sorte que les élément suivants entourent l'élément actuel. Valeurs: left, right, none../float.htm La mention clear permet de poursuivre sous l'élément désiré. Valeurs: left ou right (impose pour float:left ou float:right la poursuite dessous), both, none../clear.htm Gestion des superpositions : z-index Si plusieurs éléments se superposent, cette mention permet de gérer les ordres d'affichage. L'élément avec la valeur de z-index la plus élevée est celui qui apparaît sur les autres../float.htm