Embed Size (px)
Citation preview
Feuilles de styles CSSSyntaxe 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) <font> 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.
Contrôle du positionnement d'un calque
<div align="justify">novos excludat iurgia finis, est vetus atque … ...ponetur honeste.</div><div>rien de tel que l’expérimentation et l’observation pour découvrir!</div>
Rappel: <div> … </div> 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
Propriétés de styles et valeurs : Position
Attention : écriture de la propriété, lorsqu'elle est utilisée en Javascript,HTML : z-indexJS : zIndex
Propriétés de styles et valeurs : graphique
Couleur :
Image :
Propriétés de styles et valeurs : texte
Propriétés de styles et valeurs : marges et bordures
Propriétés de styles et valeurs : autresApparence 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 inline none
L'élément apparaît dans une nouvelle
"boite", sur une nouvelle ligne
Ex: les balises<h1>, <p><table>
L'élément est visualisé sur la même ligne que
le précédent
Appliquée aux balises <p>, 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é cursorContrô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:url( ) auto crosshair default pointer move e-resize ne-resize
nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help
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 .gifExercice: 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)
Déclaration du styleL'attribut style s'applique à toutes les balises HTML (ou presque toutes)
Via l'attribut style dans une balise HTML :
Via une balise <style> dans l'en-tête du document :
Via une balise <link>, 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 <span>, attention, tous les styles ne sont pas applicable, ex.: alignement du texte!
<html><head><title>feuilles de style</title>
<style type="text/css">
.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 }
</style>
</head><body >
<div align="justify" class="calque1">novos excludat iurgia ... honeste.</div><div id="calque2">rien de tel que l’expérimentation et l’observation pour découvrir!</div>
</body></html>
Déclaration du style dans l'entête du document HTML, la balise <style>…</style>
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 { }.
Distinction entre class et id
Déclaration du style par défaut pour une balise
Styles appliqués en cascade
Notion d'héritage de style
Notion d'héritage: Chaque balise HTML hérite du style de sa balise parent.Par ex., <b> est une balise sous-jacente à <body>, si body est défini avec un style italic, la balise <b> transformera un texte en gras et italique. Il s'agit alors de redéfinir le style de <b>! C'est la surcharge.
Héritage / hiérarchie
