CSS
CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments d une page HTML Eléments = parties de la structure d une page : titres, paragraphes, listes, tableaux, images, etc. Attention : essayez de toujours séparer la mise en forme du contenu HTML d une page web!
CSS - ressources http://www.w3.org/style/css/ http://www.w3schools.com/ http://www.yoyodesign.org/doc/w3c/css1/ http://www.yoyodesign.org/doc/w3c/css2/cover.html http://openweb.eu.org/css/ http://css.alsacreations.com/ http://csszengarden.com/
Syntaxe des règles CSS 3 éléments : déclaration sélecteur {propriété: valeur} sélecteur = définit l élément sur lequel s appliquent la ou les propriétés définies entre les accolades (classe, identifiant, balise) propriété = l attribut à changer valeur = la nouvelle valeur de l attribut Exemple : p {color: blue}
Définition d un style Dans un ou plusieurs fichiers.css - feuille de style externe A l intérieur d une page HTML (dans la balise head) feuille de style interne A l intérieur d une balise HTML (in-line)
CSS Quel style va être utilisé s il existe plusieurs styles définis pour le même élément HTML? Priorité Le style par défaut du navigateur Feuille de style externe Feuille de style interne Style à l intérieur d une balise HTML (in-line)
Les bases du code HTML Préparer un document de travail Commençons par un document minimaliste : <html> <head> <title>document sans titre</title> </head> <body> <h1>ceci est le titre principal</h1> <h2>titre secondaire no 1</h2> <p>ceci est le texte du premier paragraphe</p> <h2>titre secondaire no 2</h2> <p>ceci est le texte du second paragraphe</p> <cite> Nous naissons tous fous. Quelques-uns le demeurent. (Samuel Beckett, 1906-1989) </cite> </body> </html> Copiez le texte ci-dessus (Pomme+C sur Mac)
Les bases du code HTML Préparer un document de travail Ouvrez Kompozer Ouvrez une nouvelle page (Fichier > Nouveau > Document vide > Ouvrir) Sélectionnez l'onglet Source (en bas à gauche de la fenêtre) Supprimez tout le texte préexistant Collez le texte HTML Retournez à l'onglet Normal Enregistrez le document sous le nom test.html Observez la page Coté source, tous les caractères ont la même taille par contre coté Normal (ce qui s'affiche aussi dans le navigateur), les caractères ont des tailles différentes. Le HTML permet donc de modifier l'apparence de mon fichier texte.
Les bases du code HTML Quelques balises HTML - rappel Les balises <head>head = tête, en anglais et </head> (prononcer " fin head ") définissent les limites de l'entête du document, cependant que les balises <body>body = corps, en anglais et </body> (" fin body ") définissent les limites du corps du texte La première ligne du corps du document est le titre principal qui apparaît sur la page: elle est au format " Header1= en-tête, en anglais 1 ", ou " Titre de niveau 1 ". Les balises HTML qui définissent ce format sont <h1> et </h1> (" fin h1 ") Deux lignes sont au format " Header 2 ", ou " Titre de niveau 2 ". Les balises HTML correspondantes sont <h2> et </h2> La paire de balises <cite> et </cite> sert à délimiter une citation. Les autres lignes sont au format de " paragraphe " défini par les balises <p> et </p>
Les bases du code HTML Modifions nos premières balises Observez attentivement l'ensemble du texte au format HTML dans l'onglet Source. Modifiez une balise <h2> en <h1> et la balise </h2> correspondante en </h1> ; Visualisez l'effet en mode Normal Veillez à modifier aussi la balise de fin, au risque de constater des effets imprévisibles. Un grand nombre de balises HTML doivent être utilisées par paires. Il est important de respecter ces paires : à toute balise " ouvrante " doit correspondre une balise " fermante ". Modifiez maintenant une balise <p> en <h2> et la balise </p> correspondante en </h2> et visualiser l'effet en mode Normal. Recomposez ensuite le document selon sa forme initiale
Définition d'un style Les balises HTML dans le document servent à indiquer la structure du document : en-tête (<head>), corps du document (<body>), titre de premier niveau (<h1>), titre de second niveau (<h2>), paragraphe (<p>), citation (<cite>),... Dans ce cas, il s'agit d'une présentation " par défaut " des différentes structures de la page web.
Définition d'un style La mise en forme du texte se fera avec l'éditeur de styles de KompoZer, un outil nommé CaScadeS. Dans la barre d'outils de KompoZer, cliquez sur le bouton qui active l'éditeur de styles. Vous pouvez aussi appuyer sur la touche F11 pour ouvrir cet outil. Ensuite, cliquez sur le petit bouton situé en haut et à gauche pour permettre la création d'une nouvelle règle de style. La zone Feuilles et règles à gauche est vide; les onglets de la partie droite de la fenêtre sont inactifs. C'est normal.
Définition d'un style Définition d'un style pour les titres de premier niveau Définissons maintenant une mise en forme pour le titre de premier niveau: h1. Vérifiez que l'éditeur CaScadeS est toujours disponible pour la création d'une Nouvelle règle de style Dans la zone de saisie actuellement vide, indiquez la balise h1 Cliquez ensuite sur le bouton Créer la règle de style. Dans la zone Feuilles et règles, il fait mention d'une règle pour les titres h1 Dans la zone Feuilles et règles, sélectionnez le sélecteur h1 Sélectionnez l'onglet Texte qui peut maintenant être activé. Dans la zone Couleur, indiquez red Regardez votre page HTML, le titre est rouge
Définition d'un style Définition d'un style pour les titres de 2ème niveau En utilisant la même méthode, définissez, pour les titres de niveau 2 (h2) : la couleur verte (green) pour les caractères la couleur jaune (yellow) pour le fond Vérifier que les couleurs sont appliquées immédiatement dans la page Enregistrer le document
Définition d'un style Question? Quelle est la balise qui définit le corps du texte, dans une page HTML? 1. <h1> 2. <h2> 3. <head> 4. <body> En utilisant la même méthode que ci-dessus, définissez une couleur de fond fuchsia (attention à l'orthographe) pour le fond du corps du texte, vérifier puis enregistrer
Où se cachent les styles? Le code HTML est une structure relativement simple qui ne contient que du texte brut. Comment une couleur de caractères ou une couleur de fond peuventelles être indiquées dans ce texte? Allez en coulisse vous comprendrez!!! Vérifiez que la page test.html est toujours ouverte. Si nécessaire, ouvrez-la ou activez l'onglet correspondant. Activez l'onglet Source de la page test.html. Dans cette page, repèrez les modifications opérées depuis la définition des mises en formes des éléments h1, h2 et body. L'ensemble est inclus dans une zone limitée par les deux balises style.
Où se cachent les styles? Modifions notre premier style Modifiez color: red en color: blue pour la balise h1 Retournez dans l'onglet Normal et visualisez le résultat obtenu Modifiez color: green en color: red pour la balise h2 Pouvez-vous prévoir le résultat? Modifiez finalement background-color: fuchsia en background-color: blue pour la balise body Vérifiez que le résultat est conforme à ce que vous attendiez Quel serait, l'effet de la règle cite {color : green} si on l'introduisait dans votre document de travail? 1. Aucun effet 2. Le document serait entouré d'un cadre vert 3. Le fond de la page prendrait la couleur verte 4. La citation de Samuel Beckett prendrait la couleur verte. Vérifiez votre réponse avec votre fichier
Où se cachent les styles? Ouvrez votre premier site Pour chaque titre redéfinissez un style La balise font ne doit plus apparaître Enregistrez
Annexe - propriétés CSS Définir les couleurs Texte Arrière plan
Définir les couleurs Noms de couleurs : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, orange (orange - seulement pour CSS 2.1) (source : http://fr.wikipedia.org/wiki/couleurs_du_web) Couleur Valeur Couleur Valeur Couleur Valeur Couleur Valeur aqua / cyan (bleu eau, cyan) #00FFFF green (vert) #008000 navy (bleu marine) #000080 silver (argent) #C0C0C0 black (noir) #000000 gray (gris) #808080 olive (olive) #808000 teal (sarcelle) #008080 blue (bleu) #0000FF lime (vert citron) #00FF00 purple (violet) #800080 white (blanc) #FFFFFF fuchsia / magenta (fuchsia) #FF00FF maroon (marron) #800000 red (rouge) #FF0000 yellow (jaune) #FFFF00
Définir les couleurs Nombres hexadécimaux 16 millions de couleurs (256x256x256) #RRGGBB avec R, G, B de 0 à F Exemple : #FFFFFF blanc, #000000 noir Nombres hexadécimaux abrégés 4096 couleurs (16x16x16) #RGB avec R, G, B de 0 à F Exemple : #6C3 = #66CC33 Valeurs RGB color : rgb(125, 200, 56) Pourcentages RGB (pourcentage du maximum admis 255) color : rgb(50%, 100%, 30%) transparent pour un arrière plan transparent
Propriétés CSS - Texte color définit la couleur du texte Valeurs : couleur direction définit la direction du texte (CSS2) Valeurs : ltr ou rtl letter-spacing augmente ou diminue l espace entre les caractères Valeurs : normal, taille line-height - définit la distance entre les lignes Valeurs : normal, nombre, taille, % text-align définit l alignement du texte dans le cadre d un élément Valeurs : left, right, center, justify text-decoration ajoute une «décoration» au texte Valeurs : none, underline, overline, line-through, blink
Propriétés CSS - 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
Propriétés CSS - 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
Exercice Ajoutez une image d'arrière-plan à votre page. 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