Développement Client Web Gaël Mahé UFR math-info automne 2005
Introduction 2 langages s'intégrant dans HTML, interprétés par le navigateur : CSS = langage de style JavaScript = langage de programmation fi pages dynamiques 2
CSS Cascading Style Sheets
Intérêt de CSS Ex : <HTML> <HEAD> <TITLE> Ma page personnelle </TITLE> </HEAD <BODY> <H1> Ma vie </H1> <P> blabla </P> <H1> Mon oeuvre </H1> <P> blabla </P> </BODY> </HTML> 4
Intérêt de CSS Ex : <HTML> <HEAD> <TITLE> Ma page personnelle </TITLE> </HEAD <BODY> <H1 style="font-size:20"> Ma vie </H1> <P> blabla </P> <H1 style="font-size:20"> Mon oeuvre </H1> <P> blabla </P> </BODY> </HTML> 5
Intérêt de CSS 1) séparer le contenu et la présentation doc HTML = données structurées feuille de style CSS 2) Définir une charte graphique 3) Positionner les éléments 6
Intégration du style dans un document HTML 1) Dans l'entête, avec la balise <style> <html> <head> <style type="text/css"> règles de style </style> </head> <body>... </body> </html> 7
Intégration du style dans un document HTML 2) Via une feuille de style externe <html> <head> <title>fichier avec CSS</title> <link rel="stylesheet" type="text/css" href="style1.css" /> </head> <body>... </body> </html> fichier html règles de style fichier "style1.css" 8
Règles de style Ex : h1 {color: green; font-weight: bold} sélecteur propriété valeur 1 déclaration de style une règle = sélecteur {propriété_1:valeur_1; propriété_2:valeur_2;... propriété_n:valeur_n} définition du style = liste de règles 9
Balises de découpage du doc <div>... </div> <span>... </span> bloc délimité par des retours à la ligne (comme <p> ) bloc dans le flux du texte Ex : attention <span> danger </span> ici 10
Classes de style dans le corps du html : attention <span class=important> danger </span> ici dans les règles de style : span.important {color:red; text-decoration:blink} OU :.important {color:red; text-decoration:blink} 11
Identifiants L'attribut ID identifie de manière unique un élément html dans le corps du html : attention <span class=important ID=special> danger </span> ici dans les règles de style :.important {color:red; text-decoration:blink} #special {background-color: green} 12
Association de sélecteurs Regroupement h1, h2, h3,.bleu {color: blue} règle de style commune à h1, h2, h3 et à la classe "bleu" Intersection.bleu i {font-family: arial} règle de style valable pour le texte en italique dans un bloc de classe "bleu" 13
Pseudo-éléments Ex : <html> <head> <style type="text/css"> p:first-letter {float: left; font-size: 300%; } span {text-transform: uppercase } </style> </head> <body> <p> <span>les premiers</span> mots d'un article de journal, les voici : jdhuzd ndheouidh hofhoi iodjdjeidfeifj f,nijeic rjfr"jr'oàfjkop ckfrofkropfk koperkfopkvopevk kfrookojk lefpelkpêlkdcvpêkl kf'riopjfer dk riojerov ifjioj jkvjhnreiovjn rifj nijev iervjioev. </p> </body> </html> 14
Pseudo-classes Ex : a:visited {color :gray ;} liens visités en bleu p:hover {background-color :blue;} paragraphe sur fond bleu lors du passage de la souris 15
Quelques propriétés de style Fontes p.important {font-family: arial; font-size: 20pt; font-weight: bold; font-style: italic} OU Ex : p.important {font: arial 20pt bold italic} Arrière-plan background-color bakground-image background-repeat text-decoration none / underline / overline / line-through / blink 16
Les différentes sorties média écran / impression / synthèse vocale / braille /... <html> <head> <link rel="stylesheet" type="text/css" media="print" href="impression.css" /> <link rel="stylesheet" type="text/css" media="screen" href="ecran.css" /> <link rel="stylesheet" type="text/css" media="aural" href="son.css" /> </head> <body> <p>le corps du document sera affiché, imprimé ou entendu comme indiqué dans la feuille de style respective.<p /> </body> </html> 17
<body> <h1> le titre 1 </h1> <div class=texte> <p> 1er paragraphe... </p> <p> 2e paragraphe... </p> </div> </body> <h1> Les boîtes <div> <body> le titre 1 <p> 1er paragraphe... <p> 2e paragraphe... <h1> <body> <p> <div> <p> 18
Constituants d'une boîte CSS Propriétés CSS : dimensions : width, height arrière-plan : background-... (voir poly p. 15) dimensions : padding dimensions : margin épaisseur : border-width couleur : border-color style : border-style border 19
Placement d'une boîte Dans le CSS : <selecteur> {position: static / relative / absolute / fixed} OU <selecteur> {float: left/right} 20
Position:static (1) = position par défaut = placement dans le flux normal de la page 2 types de boîtes : 1) Boîtes en ligne : <span> <a> <img> succession horizontale Ex : CSS :.jaune { background-color: #ffff00;}.verte { background-color: #00ff00; } HTML : <span class="jaune">une boîte jaune</span> <span class="verte">une boîte verte</span> 21
Position:static (2) 2) Boîtes blocs : <h1>... <h6> <p> <div> <ul> <ol> etc succession verticale Ex : CSS :.jaune { background-color: #ffff00; }.verte { background-color: #00ff00; } HTML : <p class="jaune">une boîte jaune</p> <p class="verte">une boîte verte</p> NB : Forçage de l'affichage par display: none / inline / block 22
Position:relative (1) Placement dans le flux normal puis décalage Sens du décalage : relatif à top / bottom / right / left Amplitude du décalage : en px/pt/cm... ou en % (par rapport aux dim du conteneur Ex : CSS :.jaune {position:relative; bottom:5px; left:3em; background-color: #ffff00;} HTML : <p>lorem <span class="jaune"> boîte en position relative </span> ipsum dolor </p> 23
Ex avec boîte bloc : Position:relative (2) CSS :.rouge {position:relative; top:20px; left:20px; color:red} HTML : Texte de référence <div class=rouge> Texte décalé deux fois de 20px par rapport au texte de référence </div> 24
Position:absolute (1) Placement en dehors du flux normal Référentiel de positionnement = boîte conteneur CSS.verte { position: relative; background-color: #00ff00; width: 15em;}.jaune { position: absolute; top: 1em; right: 1em; background-color: #ffff00;} HTML <div class="verte"> <p> </p> <p class="jaune"> Boîte jaune en position absolue </p> </div> 25
Position:absolute (2) CSS.verte { position: relative; background-color: #00ff00; width: 15em; padding-right:7em}.jaune { position: absolute; top: 1em; right: 1em; width:4em; background-color: #ffff00;} HTML <div class="verte"> <p> </p> <p class="jaune"> Boîte jaune en position absolue </p> </div> 26
Position:fixed Semblable à absolute, mais référentiel = fenêtre du navigateur Exemple précédent en remplaçant "absolute" par "fixed" 27
float: left / right Placement en dehors du flux normal, le plus à gauche / à droite dans le conteneur Le contenu suivant s'écoule le long de la boîte flottante CSS :.jaune { background-color: #ffff00; float: right; width: 100px; margin: 0;}.verte { background-color: #00ff00;} HTML : <p class="jaune">une boîte jaune flottant</p> <p class="verte">une boîte verte doté d'un contenu plus long </p> 28