Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices

Transcription

1 Dreamweaver CSS

2 Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices

3 CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments d une page HTML Définition d un style : A l intérieur d une balise HTML A l intérieur d une page HTML (dans la balise head) feuille de style interne Dans un ou plusieurs fichiers.css - feuille de style externe

4 CSS Quel style va être utilisé s il existe plusieurs styles définis pour le même élément HTML? Priorité Style à l intérieur d une balise HTML (in-line) Feuille de style interne Feuille de style externe Le style par défaut du navigateur

6 Syntaxe CSS 3 éléments : déclaration sélecteur {propriété: valeur} sélecteur = l élément sur lequel s appliquent la ou les propriétés définies entre les accolades propriété = l attribut à changer valeur = la nouvelle valeur de l attribut Exemple : p { } color: blue;

7 Syntaxe CSS Si la valeur contient plusieurs mots mettez-les entre " " Exemple : p {font-family: "sans serif"} Si vous voulez spécifier plusieurs propriétés, séparez-les par des «;». (Pour la lisibilité mettez une propriété par ligne.) Exemple : p { } text-align:center; color:red; Pour grouper plusieurs sélecteurs séparez-les par «,» Exemple : h1,h2,h3,h4,h5,h6 {color: green}

9 Insérer une feuille de style Feuille de style externe <head> <link rel="stylesheet" type="text/css" href="monstyle.css" /> </head> Le navigateur lit la feuille de style et l applique pour la mise en forme du document La feuille de style est un fichier texte Peut être éditée avec n importe quel éditeur A l extension.css

10 Insérer une feuille de style Feuille de style interne <head> <style type="text/css"> hr {color: blue;} p {margin-left: 25px;} body {background-image: url("images/test.gif");} </style> </head>

11 Insérer une feuille de style Style à l intérieur d une balise HTML (in-line) <p style="color: blue; margin-left: 25px;"> Un paragraphe </p>

12 Feuilles de style multiples Si pour une balise certaines propriétés ont été spécifiées dans plusieurs feuilles de style, les valeurs seront héritées de la feuille de style la plus spécifique Exemple : Dans une feuille de style externe : h3 { color: red; text-align: left; font-size: 8pt; } Dans une feuille de style interne : h3 { text-align: right; font-size: 20pt; } Quelles seront les propriétés de la balise h3?

13 Sélecteurs Noms de balises Classes Sélecteurs d identification

14 Sélecteur - Nom de balise Le sélecteur est le nom d une balise HTML sans les caractères "<"et ">" Exemple : h1{color:blue;}

15 Sélecteur - Classe Définition CSS avec la syntaxe suivante :.nomclasse {propriété: valeur;} Application des propriétés de la classe : Attribut HTML : class = nomclasse Exemple : définir dans un document 2 types de paragraphes : un aligné à droite et l autre centré.right {text-align: right;}.center {text-align: center;} Utilisation : <p class="right"> Paragraphe aligné à droite. </p> <p class="center"> Paragraphe centré. </p>

16 Sélecteur - Classe Pour appliquer plus d une classe par élément HTML, définissez les classes :.centrer {text-align: center;}.gras {font-weight: bold;} Utilisation : <p class="centrer gras"> Paragraphe centré en gras. </p>

17 Sélecteur d identification (ID #) Définition CSS avec la syntaxe suivante : #selecteuridentification{propriété: valeur} Application des propriétés : Attribut HTML : id = selecteuridentification Exemple #bleu {color: blue;} Ce style sera appliqué à l élément HTML qui a l identifiant «bleu». Par exemple : <div id="bleu"> </div>

19 CSS - ressources

21 Définir les couleurs Nombres hexadécimaux 16 millions de couleurs (256x256x256) #RRGGBB avec R, G, B de 0 à F Exemple : #FFFFFF blanc, # noir Nombres hexadécimaux abrégés 4096 couleurs (16x16x16) #RGB avec R, G, B de 0 à F Exemple : #6C3 = #66CC33 Noms de couleurs : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, orange transparent pour un arrière-plan transparent

22 Texte Propriétés : color définit la couleur du texte Valeurs : couleur. Exemple : p{color:blue;} direction définit la direction du texte Valeurs : ltr ou rtl. Exemple : p{direction:ltr;} letter-spacing augmente ou diminue l espace entre les caractères Valeurs : normal, taille line-height - définit la hauteur des lignes Valeurs : normal, taille, % text-align définit l alignement du texte dans le cadre d un élément HTML Valeurs : left, right, center, justify text-decoration ajoute une «décoration» au texte Valeurs : none, underline, overline, line-through, blink

23 Texte text-indent définit le retrait de la première ligne de texte dans un élément Valeurs : taille, % text-transform définit les lettres dans un élément Valeurs : none, capitalize, uppercase, lowercase white-space - définit la façon de traiter l'espace intérieur d'un élément Valeurs : normal, pre, nowrap word-spacing augmente ou diminue l espace entre les mots Valeurs : normal, taille

24 Arrière-plan background - un raccourci pour la définition de toutes les propriétés d arrièreplan dans une seule déclaration Valeurs : background-color background-image background-repeat backgroundattachment background-position background-attachment - indique si une image d arrière plan est fixe ou défile avec le reste de la page Valeurs : scroll, fixed background-color- définit la couleur d'arrière-plan d'un élément Valeurs : color-rgb, color-hex, color-name, transparent background-image définit une image d arrière-plan Valeurs : url(url), none background-position définit la position d une image d arrière-plan Valeurs : top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos background-repeat définit si/comment une image d arrière-plan est répétée Valeurs : repeat, repeat-x, repeat-y, no-repeat

25 Définir les couleurs Eviter de recourir uniquement à la couleur pour fournir une information Il faut avoir une différence suffisamment élevée entre la couleur de fond et le texte, pour que l utilisateur puisse lire le contenu du site sans effort Attention aux combinaisons de couleurs (vert+rouge pour les personnes souffrant de daltonisme)

26 «Braeburn GrannySmith dichromat sim» par w:en:user:limbicsystem» English Wikipedia. Sous licence CC BY 2.5 via Wikimedia Commons

27

28 Le contraste W3C définit des formules qui permettent de calculer les différences de luminosité et de tonalité entre les couleurs : Taux de luminosité supérieur à 4,5 : 1 : (L ) / (L ) où L1 est la luminosité relative de la couleur la plus claire L2 est la luminosité relative de la couleur la plus foncée

29 Outils de test Extension Firefox (avantage : indique les balises où le contraste de couleurs n est pas suffisant, sans avoir à introduire les codes de couleurs) US/firefox/addon/accessibility-evaluation-toolb/?src=search

31 Exercice 1 Créez une feuille de style externe (Exercice1.css) qui modifie la couleur du texte et celle de l arrière plan d une page Créez deux pages HTML avec du contenu différent (Exercice1.html et Exercice1bis.html) Appliquez la feuille de style aux deux pages Vérifiez que le contraste est suffisant

32 Exercice 2 Modifiez l exercice 1 en ajoutant des styles (texte et/ou arrière-plan) pour chaque élément de la page (titres, paragraphes, hyperliens etc.) Ajoutez une feuille de style interne et au moins un style «in-line» Testez les différents types de valeurs pour la couleur et les différentes propriétés du texte

33 Exercice 3 Testez plusieurs effets en jouant sur le défilement de l arrière-plan. Essayez plusieurs options (ex. no-repeat) Positionnez votre image à divers emplacements et essayez les options scroll et fixed

34 Exercice 4 Tests de mise en place d une image d arrière-plan Spécifiez background-repeat : no-repeat Type de valeurs : Pourcentage : background-position: 0% 0% background-position: 100% 100% background-position: 15% 75% Position : background-position: 20px 100px Mots clés : top (en haut), center, left (à gauche), right (à droite), bottom (en bas) Testez d'autres valeurs

35 Mise en forme des pages avec les CSS Adobe Dreamweaver CS3 propose la création des nouveaux documents HTML avec des mises en forme à l aide des CSS Plusieurs modèles de mise en forme sont disponibles

36 Types de colonnes Fixe La largeur de colonne est définie en pixels. La colonne n'est pas redimensionnée selon la taille du navigateur ou des paramètres de texte de l utilisateur Encadré La largeur de la colonne est définie dans une unité de mesure (em) proportionnelle à la taille du texte. La mise en page s'adapte si l utilisateur modifie les paramètres du texte, mais pas en fonction de la taille de la fenêtre du navigateur Liquide La largeur de colonne est définie en tant que pourcentage de la largeur du navigateur de l utilisateur. La mise en page s'adapte si l utilisateur augmente ou diminue la largeur de la fenêtre de son navigateur, mais pas en fonction des paramètres de texte définis par l utilisateur Hybride Les colonnes emploient une combinaison des trois options précédentes. Par exemple, la mise en page Deux colonnes hybrides, encadré à droite comprend une colonne principale qui s'adapte à la taille du navigateur et une colonne élastique, à droite, dont la taille s'adapte aux paramètres de texte du visiteur du site

37 Exercice 5 Créez une page HTML pour chaque mise en forme proposée par Dreamweaver Fichier > Nouveau Type de page : HTML CSS de mise en forme : Ajouter à l en-tête Visualisez la page sur au moins 2 navigateurs Modifiez la dimension de la fenêtre du navigateur Modifiez la taille du texte (en général une option dans le menu «Affichage» du navigateur) Regardez bien le code de chaque page, pour identifier les différentes parties et leur propriétés.