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

Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.

Présentations similaires


Présentation au sujet: "Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue."— Transcription de la présentation:

1 Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue du contrôle de l'affichage d'un objet, par ex. pour du texte, la balise HTML dédiée (mais obsolète) ne permet que le contrôle de la police, de la taille et de la couleur. Modification facile du style s'il ne convient pas, soit pour une balise, soit pour toute la page HTML, où même tout le site. Lors du développement, on dissocie l'aspect contenu, de l'aspect "Apparence". Ainsi, on développe tout d'abord le 'conteneur' (balise HTML), puis on complète le 'contenu', et enfin on contrôle l'affichage.

2 Contrôle du positionnement d'un calque novos excludat iurgia finis, est vetus atque …...ponetur honeste. rien de tel que lexpérimentation et lobservation pour découvrir! Rappel: … est une 'subdivision' de la fenêtre, et peut contenir tout code HTML. Nous l'assimilerons à un calque Gestion du positionnement: attribut style de la balise div 1 2

3 Propriétés de styles et valeurs : Position Attention : écriture de la propriété, lorsqu'elle est utilisée en Javascript, HTML : z-index JS : zIndex

4

5 Propriétés de styles et valeurs : graphique Couleur : Image :

6 Propriétés de styles et valeurs : texte

7 Propriétés de styles et valeurs : marges et bordures

8 Propriétés de styles et valeurs : autres Apparence d'un élément (objet) HTML: propriété display Cette propriété décrit comment un objet HTML doit être représenté, visualisé (display) à l'écran. Les principales valeurs permises pour display sont: block inlinenone L'élément apparaît dans une nouvelle "boite", sur une nouvelle ligne Ex: les balises, L'élément est visualisé sur la même ligne que le précédent Appliquée aux balises, ils n'y aura plus de "retour à la ligne" et de saut "ligne suivante" L'élément n'est plus visualisé Apparence du curseur: propriété cursor Contrôle l'apparence du curseur, par ex. lorsque ce dernier est au-dessus d'un élément du type lien: Les valeurs permises pour cursor sont: MIE 6 : possibilité d'associer une image au curseur.Mais le format doit être de type.cur Netscape 6 semble accepter également cette propriété, mais avec une image au format.gif Exercice: rechercher plus d'info sur cette propriété cursor, compatibilité entre navigateur, procédure, conception d'image, conversion de format gif cur, … style="cursor:url(3dgno.cur)" (des curseurs sont disponibles dans le répertoire C:\WINDOWS\Cursors )

9 Déclaration du style L'attribut style s'applique à toutes les balises HTML (ou presque toutes) Via l'attribut style dans une balise HTML : Via une balise dans l'en-tête du document : Via une balise, où une feuille de style est associée au document HTML : Attributs rel (type de relation), href (source) et type (MIME) Cas particulier de la balise, attention, tous les styles ne sont pas applicable, ex.: alignement du texte!

10 feuilles de style.calque1 { position : absolute ; left : 150px ; top : 150px ; width : 300px ; height : 200px ; visibility : visible ; z-index : 1; overflow : hidden } #calque2 { position : absolute ; left : 250px ; top : 50px ; width : 300px ; height : 100px ; visibility : visible ; z-index : 2; overflow : hidden } novos excludat iurgia... honeste. rien de tel que lexpérimentation et lobservation pour découvrir! Déclaration du style dans l'entête du document HTML, la balise … 1 attributs type TYPE MIME : le contenu de la balise style est du texte d'une feuille de style, text/css Cascading Style Sheet 2 définitions possibles:.nom_style { } #nom_style { } Choix du style, dépend de la définition: class="nom_style" id="nom_style" Les paramètres sont définis entre accolades { }.

11 Distinction entre class et id

12 Déclaration du style par défaut pour une balise

13 Styles appliqués en cascade

14 Notion d'héritage de style Notion d'héritage: Chaque balise HTML hérite du style de sa balise parent. Par ex., est une balise sous-jacente à, si body est défini avec un style italic, la balise transformera un texte en gras et italique. Il s'agit alors de redéfinir le style de ! C'est la surcharge. Héritage / hiérarchie


Télécharger ppt "Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue."

Présentations similaires


Annonces Google