Couleurs, polices et autres attributs. Les feuilles de styles CSS. Les feuilles de style CSS. Page HTML avec fichier CSS

Transcription

1 Couleurs, polices et autres attributs Les feuilles de styles CSS Jusqu à HTML 3.2 : on utilise les attributs des balises. Exemples : <body bgcolor="white">... </body> <font color="red" face="time">... </font> Quelques soucis : Lourd et répétitif (moins vrai si on utilise un logiciel type DreamWeaver) Contrôle incomplet sur le positionnement Dao (Université d Orléans) Applications Web 43 / 132 Dao (Université d Orléans) Applications Web 44 / 132 Les feuilles de style CSS Page HTML avec fichier CSS A partir de la version 4 : on peut définir des feuilles de style : On définit globalement des instructions de mise en forme Les instructions sont rassemblées dans un document indépendant Ce document peut être associé à un ou plusieurs documents HTML Cascading Stylesheets (CSS) feuille de style en cascade <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML> <HEAD> <LINK href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <P class="changed">ce paragraphe respecte un style défini. </p> </BODY> </HTML> Dao (Université d Orléans) Applications Web 45 / 132 Dao (Université d Orléans) Applications Web 46 / 132

2 Feuilles préférées et alternatives Spécifier feuille de styles externe Une page HTML peut accepter plusieurs feuilles CSS, qui agissent suivant la règle en cascade, dans l ordre d apparition de feuilles de styles dans HEAD On peut spécifier les feuilles alternatives, ex. feuille de style pour petits écrans On peut spécifier la feuille de styles préférée parmi les alternatives On peut aussi spécifier la feuille de styles persistante qui doit être appliquée Balise LINK Attribut href indique la position de la feuille de styles Attribut type indique le langage de la feuille de styles Choix : feuille persistante : rel="stylesheet" et pas de title feuille préférée : rel="stylesheet" et title=nom de la feuille feuille alternée : rel="alternate stylesheet" et title=nom de la feuille Exemple <LINK href="mystyle.css" rel="stylesheet" type="text/css"> Dao (Université d Orléans) Applications Web 47 / 132 Dao (Université d Orléans) Applications Web 48 / 132 Commentaires Unités de taille Les commentaires sont des parties de texte qui ne sont pas interprétés Utiles car ils permettent de mettre des explications Commentaires en HTML <! > Commentaires en CSS /*... */ Unités absolues px : pixel pt : point Unités relatives (à privilégier) em : hauteur des lettres % : proportion par rapport à la taille de la fenêtre du navigateur Dao (Université d Orléans) Applications Web 49 / 132 Dao (Université d Orléans) Applications Web 50 / 132

3 Spécification de couleurs Ecriture d une feuille de style Nom prédéfini : le nom en anglais d une couleur (black, blue, green, gray, lime, olive, red,... ) Spécification RGB (Red Green Blue) : 3 composants de couleurs (rouge, vert, bleu) dont la valeur varie de 0 à 255 rouge : rgb(255,0,0) jaune : rgb(255,255,0) Code RGB en hexadécimal rouge : #FF0000 jaune : #FFFF00 Une feuille de style CSS est un ensemble de règles Chaque règle est sous forme sélecteur { propriété : valeur ; propriété : valeur ; propriété : valeur ; body { margin-left : 10%; margin-right : 10%; color : black; background : rgb(255,255,204); font-family : sans-serif; Dao (Université d Orléans) Applications Web 51 / 132 Dao (Université d Orléans) Applications Web 52 / 132 Sélecteur Application de styles Sélecteur universel : tous les balises HTML *{ color : green ; Sélecteur pour un catégorie de balises h1 { font-size : 200% ; Sélecteur pour plusieurs catégories de balises h1, h2, h3 { text-align : center ; Sélecteur pour une classe dans un catégorie de balises p.bleu { color : blue ;.stylerouge { color : red ; Sélecteur pour un identifiant particulier #mag { color : magenta ; Utilisation dans une page HTML <h1 class="stylerouge">titre rouge</h1> <p class="bleu">texte style bleu</p> Application à un ensemble d éléments : <div> </div> <div class="stylerouge"> <h2>...</h2> <p>...</p> <h3>...</h3> </div> Application à une partie d un paragraphe : <span> </span> <p class="stylerouge">ceci est rouge sauf <span id="mag">ceci est magenta</span> puis encore rouge</p> Application à un élément identifié <p id="mag">...</p> Dao (Université d Orléans) Applications Web 53 / 132 Dao (Université d Orléans) Applications Web 54 / 132

4 Propriétés de boîtes englobante la taille donnée en unités de taille margin-left, margin-right, margin-top, margin-bottom : width, height padding-left, padding-right, padding-top, padding-bottom Positionnement flottant : float (left, right) body { margin-left : 10%; margin-right : 10%; h1.titre { margin-left : -8%; margin-top: 8em; margin-bottom : 3em; Propriétés de couleurs et background Propriété color, la couleur est donnée soit par un nom soit par une suite de trois couleurs composantes (rouge, verte, bleue) Concernant le fond, les propriétés : background-color : couleur ou transparent background-image : none ou url("url") background-repeat : repeat, repeat-x, repeat-y, no-repeat, inherit background Exemples : body { margin-left : 10%; margin-right : 10%; color : black; background : rgb(255,255,204); Dao (Université d Orléans) Applications Web 55 / 132 Dao (Université d Orléans) Applications Web 56 / 132 Propriétés de polices Propriétés de texte font-family, ex. BODY { font-family : "new century schoolbook", serif font-style : normal, italic, oblique font-weight : normal, bold, bolder, lighter, 100,..., 900 font-size : larger, smaller, 12pt, 150%,... text-indent : 3cm, 5%,... text-align : left, right, center, justify text-decoration : underline, overline, line-through, blink letter-spacing : normal, 0.1cm,... word-spacing : normal, 1cm,... text-transform : capitalize, uppercase, lowercase Dao (Université d Orléans) Applications Web 57 / 132 Dao (Université d Orléans) Applications Web 58 / 132

5 Propriétés d encadrement Propriétés de tableau border, border-left, border-right, border-top, border-bottom : none, dotted, dashed, solid, double,... border-style, border-top-style,... border-color, border-top-color,... border-width, border-left-width,... : thin, thick, normal Exemple p.changed { padding-left: 2em; border-left: solid; border-right: none; border-top: none; border-bottom: none; border-left-width: normal; border-color: red; Balise table : des propriétés border, width Balise caption : caption-side (top, bottom) Balise tr, td, th : height, text-align, vertical-align (top, middle, bottom),... Dao (Université d Orléans) Applications Web 59 / 132 Dao (Université d Orléans) Applications Web 60 / 132 Propriétés de liens Propriétés de liste a :link styles pour liens non visités a :visited styles pour liens visités a :active styles pour liens au moment de clique a :hover styles pour liens au moment où le curseur le pose dessus Exemples : a:hover{ color:red; font-size:14pt; font-weight:bold; font-style:italic; Liste non-ordonnée list-style : square, circle, disc list-style-image : url("url") ; pour remplacer la puce par une image Liste ordonnée list-style : decimal, upper-roman, lower-alpha,... Dao (Université d Orléans) Applications Web 61 / 132 Dao (Université d Orléans) Applications Web 62 / 132

6 Positionnement flottant (1/2) à droite on veut mettre un menu jaune de taille de 20% de la page CSS :.menujaune { float : right; background-color : yellow; width : 20%; HTML <div class="menujaune">... texte dans le menu... </div> <div>... contenu de la page... </div> Positionnement flottant (2/2) on veut partitionner la page en 3 colonnes de même taille CSS :.page { float : left; width : 100%;.colonne { float : left; width : 33%; HTML <div class="page">  <div class="colonne"> texte colonne 1 </div> <div class="colonne"> texte colonne 2 </div> <div class="colonne"> texte colonne 3 </div> </div> Dao (Université d Orléans) Applications Web 63 / 132 Dao (Université d Orléans) Applications Web 64 / 132 Type de média Exemple Certaines propriétés de CSS sont définies différemment pour différents types de média : font-size peut être différent sur un écran ou pour l impression sur papier sur l écran la taille est plus grande, sans serif sur papier la taille est plus petite, avec serif Règles permettent de préciser différents styles pour différents types de média Style tel que le texte soit affiché en Verdana 16 pixels sur l écran, mais en couleur rouge et 12 pixels si la page est screen { p { font-family: verdana,sans-serif; font-size: print { p { font-size: 12px; color: red; Dao (Université d Orléans) Applications Web 65 / 132 Dao (Université d Orléans) Applications Web 66 / 132

7 Principaux types de média all : tous types de média aural : synthétiseur de son handheld : média portable print : imprimante projection : projecteur (transparents) screen : écran d ordinateur tv : télévision Les formulaires HTML Dao (Université d Orléans) Applications Web 67 / 132 Dao (Université d Orléans) Applications Web 68 / 132 Les formulaires HTML Les champs d un formulaire Côté client : L objectif d un formulaire est d offrir un ensemble de champs que l utilisateur peut remplir Le résultat est alors envoyé au serveur qui traite les informations via un script PHP pour le traitement Javascript pour du contrôle de champs Les champs à remplir se présentent sous la forme d une zone de texte d une liste de boutons dont un seul est à cocher d une liste de boutons qui sont tous sélectionnables d un menu déroulant Dao (Université d Orléans) Applications Web 69 / 132 Dao (Université d Orléans) Applications Web 70 / 132

8 La balise form La balise form ouvre le formulaire. Deux attributs principaux : action pour indiquer le nom du fichier à exécuter ou l URL d un script method qui prend la valeur "get" ou "post" selon le mode de transfert des informations au serveur GET : apparition des valeurs saisies en paramètres de l URL de la page action POST : les valeurs saisies sont transmises séparément, quantité de données possibles plus importante POST est préférée, car elle évite les très longues URL Les principales balises filles (input, select, textarea) de form sont la balises qui permettent de définir les champs qui constituent le formulaire Groupe de champs : la balise fieldset, souvent associée avec la balise legend La balise input Elle permet de construire une zone de texte et des listes de sélection grâce à son attribut type type="text" : une zone de texte type="radio" : une liste à choix unique type="checkbox" : une liste à choix multiple type="password" : un champ mot de passe type="hidden" : un champ caché type="file" : pour transmettre un fichier Dao (Université d Orléans) Applications Web 71 / 132 Dao (Université d Orléans) Applications Web 72 / 132 Zone de texte Liste à choix unique Pour une zone de texte, les autres attributs sont : name="nomphp" où nomphp sera relié au traitement PHP du formulaire value="texte par défaut", attribut optionnel et le texte devra être effacé pour être modifié size pour donner une taille à cette zone maxlength pour donner le nombre max de caractères <input type="text" name="nomprenom" size="50pxe" maxlength="10"> Il faut autant de input de type radio que de choix possibles (boutons à cocher) Les attributs associés sont : name="nomliste php " : le nom de la liste (donc commun à tous les choix) value="nomboutonphp " : pour distinguer chaque choix (le nom du bouton correspondant) checked : ne peut être présent que dans un seul input de la liste, il permet d avoir un bouton coché par défaut <input type="radio" name="civil" value="m" checked >Monsieur <input type="radio" name="civil" value="mme" >Madame <input type="radio" name="civil" value="mlle" >Mademoiselle Dao (Université d Orléans) Applications Web 73 / 132 Dao (Université d Orléans) Applications Web 74 / 132

9 Liste à choix multiple Il faut autant de input de type checkbox que de choix proposés Les attributs associés sont : name="nomlistephp []" : le nom de la liste (donc commun à tous les choix) value="nombouton php " : pour distinguer chaque choix (le nom du bouton correspondant) checked : ne peut être présent que dans un seul input de la liste, il permet d avoir un bouton coché par défaut <input type="checkbox" name="loisir[]" value="cinema" checked >Le cinéma <input type="checkbox" name="loisir[]" value="musique" > La musique <input type="checkbox" name="loisir[]" value="lecture" > La lecture <input type="checkbox" name="loisir[]" value="cuisine" > La cuisine Menu déroulant (1/2) Construit par la balise select, dont la balise fille option permet de définir les items du menu Les attributs sont : name pour le traitement PHP size pour le nombre d items du menu apparaissant dans le menu déroulant multiple dont la présence indique qu un choix multiple est possible (par la touche ctrl) multiple présent = name="nomliste php []" multiple absent = name="nomliste php " Dao (Université d Orléans) Applications Web 75 / 132 Dao (Université d Orléans) Applications Web 76 / 132 Menu déroulant (2/2) Zone de texte étendu Exemple <select name="langue[]" size=3 multiple> <option> français</option> <option> anglais </option> <option> espagnol</option> <option> chinois</option> <option> japonais</option> </select> Balise textarea : zone de texte de plusieurs lignes Les attributs principaux sont : rows pour le nombre de lignes du cadre cols pour le nombre de colonnes du cadre name="nomzonephp pour le traitement PHP <textarea name="texte" rows="5" cols="30"></textarea> Dao (Université d Orléans) Applications Web 77 / 132 Dao (Université d Orléans) Applications Web 78 / 132

10 La fermeture d un formulaire Exemple d un formulaire (1/2) Comment terminer le formulaire et déclencher l envoi des informations remplies? Encore la balise input pour définir un bouton à cliquer grâce aux attributs type="submit" value="un texte" où "un texte" apparaîtra sur le bouton créé Raffinement : création d un bouton supplémentaire qui annule tous les champs remplis type="reset" value="un texte" <form action="contact.php" method="post"> <fieldset> <legend>nous contacter</legend> <input type="radio" name="civil" value="m" checked >Monsieur <input type="radio" name="civil" value="mme" >Madame <input type="radio" name="civil" value="mlle" >Mademoiselle <br> Nom et prénom <input type="text" name="nomprenom" size="50pxe" maxlength="10"> <br> Votre commentaire <br> <textarea name="commentaire" rows="5" cols="30"> </textarea> <br> <input type="submit" value="envoyer"> <input type="reset" value="annuler"> </fieldset></form> Dao (Université d Orléans) Applications Web 79 / 132 Dao (Université d Orléans) Applications Web 80 / 132 Exemple d un formulaire (2/2) Dao (Université d Orléans) Applications Web 81 / 132