Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

©BAKONGA JB Page 1 sur 9 Chapitre 3 : Production des feuilles de style Compéten

©BAKONGA JB Page 1 sur 9 Chapitre 3 : Production des feuilles de style Compétences visées : Savoir comment insérer les styles, Savoir comment appliquer les styles, Faire une mise en forme générale d’une page Web Leçon 17 : Utilisation de l’attribut "style" dans une balise Compétences visées : Ajouter un attribut style dans une balise html, Ajouter à un document html un style pour changer le background du document, Ajouter à une page html une propriété de style pour changer la couleur du texte. Introduction Le CSS (Cascading Style Sheets) est un langage qui permet de réaliser la mise en forme et le graphisme de la page Web. Si le HTML s’occupe de créer le fond ou le contenu, le CSS s’occupe de la mise en forme et donne au contenu l’apparence qu’on souhaite. I. Utilités et avantages du CSS - Séparation du contenu et de la mise en forme. - Cohésion de la présentation tout au long du site avec les feuilles de style externes. - Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et cela en quelques lignes plutôt que de devoir changer un grand nombre de balises. - Un "langage" neuf, compréhensible, simple et logique par rapport au Html et à ses différentes versions. - Une façon d'écriture concise et nette par rapport au Html qui devient vite fouillis. - Réduire le temps de chargement des pages. - Palier certaines insuffisances du langage Html (contrôle des polices, contrôle de la distance entre les lignes, contrôle des marges et des indentations (sans devoir utiliser de tableaux ou de balise <DD>...) et ainsi augmenter la créativité des écrivains du Web. - Permettre le positionnement au pixel près du texte et/ou des images sans passer par les "layers" exclusifs à Netscape 4.0. II. Fonctions du CSS dans un document HTML La feuille de styles va vous permettre de définir autant de styles que vous souhaitez et que vous pourrez alors appliquer à l’ensemble des pages web de votre site. En outre, la feuille de styles vous permettra de décider de la couleur, de la taille, de la police, de vos hyperliens, aidera à la réalisation d’une partie de l’ergonomie de votre site web, etc. III. Ou placer le code CSS dans un document HTML On peut écrire le code CSS dans trois endroits du fichier HTML: dans les balises, dans l’entête "head" et dans un fichier CSS externe. Dans le cadre de cette leçon nous n’aborderons que le premier cas. IV. Insertion du code CSS dans les balises du fichier html 1. Syntaxe Avec cette méthode, un attribut "style" doit être ajouté à chaque balise dont on aimerait effectuer la mise en forme du contenu. ©BAKONGA JB Page 2 sur 9 Sa syntaxe est la suivante : <balise style="propriété1 : valeur1; propriété2 : valeur2 ; … ;"> Ou : - Propriété représente un effet de style que l’on veut appliquer à la balise. Il peut s’agir de couleur, la taille, la police, … - Valeur : à chaque propriété il faut associer une valeur. Exemple "blue" pour la propriété "color". Remarque : - Les propriétés de style sont entourées par des doubles côtes " ". - Le couple "propriété de style/valeur" est séparé par un double-point (:). - Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;). - Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur". - On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs par des virgules. <H3 style ="font-family: Arial, Helvetica, sans-serif"> 2. Exemples Code CSS Signification <p style="font-style:italic;">Ce paragraphe est en italique</p> L’attribut style mets le paragraphe en italique <p style="Background-color : red ;"> le fond du paragraphe est rouge </ > L’attribut style ajoute au paragraphe une couleur de fond rouge <p style="color : blue font-style:italic;">Ce paragraphe est bleu et italique</p> L’attribut style mets le paragraphe en bleu et en italique Conclusion : cette méthode est très simple mais on retrouve les mêmes inconvénients que l’utilisation des mises en page dans le document. On ne sait pas comment faire le lien entre les propriétés et les objets sur lesquels elles portent. Elle est la moins recommandée. Exercice d’intégration 1. À quoi sert l’attribut "style" ? Donner la syntaxe de cet attribut ? 2. ©BAKONGA JB Page 3 sur 9 Leçon 18 : Utilisation de la balise "style" dans la section "head" Compétences visées : Insérer un attribut style dans la section ‘head’ du fichier html pour modifier le style de toutes les balises de la page. Modifier un style à l’intérieur d’un paragraphe ou appliquer un style différent à des morceaux de paragraphes. Appliquer un même style à plusieurs paragraphes sans devoir répéter les éléments de style. Introduction Cette méthode consiste à insérer le code CSS directement dans une balise <style>…</style> à l’intérieure de l’entête du fichier html c’est-à-dire à l’intérieure de la balise <head>…</head>. Pour y parvenir il faut d’abord connaitre la structure ou syntaxe d’une feuille de style et ensuite l’appliquer soit à une balise, soit à plusieurs balises, soit à un sélecteur, puis l’insérer dans une balise <style>…</style> et enfin mettre l’ensemble à l’intérieure de la balise <head>…</head>. 1. Structure de base d’une feuille de style et d’une balise "STYLE" 1.1. D’une feuille de style La structure de base d’un code CSS est la suivante : Elément { Propriété : valeur ; Propriété : valeur ; Propriété : valeur ; } Où : - Elément peut être une balise, un ensemble de balise ou un sélecteur - Propriété représente un effet de style que l’on veut appliquer à Elément. Il peut s’agir de couleur, la taille, la police, … - Valeur : à chaque propriété il faut associer une valeur. Exemple "blue" pour la propriété "color". Remarque : - Les feuilles de style portent sur des balises principalement et quelques autres éléments comme par exemple A:link pour un lien non-visité et A:visited pour un lien visité. Comme balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY... - Les propriétés de style sont entourées par des "{" et pas des [ou des parenthèses. - Le couple "propriété de style/valeur" est séparé par un double-point (:). - Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;). - Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur". - L'espace entre propriétés de style et valeur n'est pas obligatoire mais aide fortement à la lisibilité du code source. - Pour la lisibilité toujours, vous pouvez écrire vos styles sur plusieurs lignes : H3 {font-family: Arial; font-style: italic; font-color: green} ©BAKONGA JB Page 4 sur 9 - On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs par des virgules. H3 {font-family: Arial, Helvetica, sans-serif} - On peut attribuer un même style à plusieurs balises (séparées par des virgules). H1, H2, H3 {font-family: Arial; font-style: italic} 1.2. D’une balise "style" La structure de base d’une balise "style" dans la section HEAD est la suivante : <STYLE type="text/css">  </STYLE> • La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style. • L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css). Pour l'instant, il s'agit de la seule possibilité mais on peut prévoir à l'avenir d'autres versions de ce "langage". • La balise Html de commentaires  empêche que les browsers qui ne connaissent pas les feuilles de style, tentent d'interpréter ces instructions. Les informations à l'intérieur des tags de commentaires seront ignorées par ces browsers. • Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention désormais classique (C, C++, Javascript...) de /* commentaires */. 2. Appliquer un style à une balise Ici, Elément est une balise. La syntaxe est la suivante : Syntaxe Exemple Signification Balise { Propriété : valeur ; Propriété : valeur ; ………. } <head> <style type = “text/css”> <!-- P { Color : blue ; Font-size : 12px ; Background-color :pink; } -- > </style> </head> Ce code permet de mettre le texte de tous les paragraphes en bleu avec une taille de 12 pixels et une couleur de fond pink. balise { Background-image : url("nom de l’image") ; } <head> <style> body { Background-image : url("maphoto.jpg") ; } </style> </head> Ce code insère une image de fond dans le document web 3. Appliquer un style à plusieurs balises Ici, Elément est plusieurs balises. La syntaxe est la suivante : ©BAKONGA JB Page 5 sur 9 Syntaxe Exemple Signification Balise1, Balise1, … { Propriété : valeur ; Propriété : valeur ; ………. } <head> <style> P,h1 { Color : blue ; Font-size : 12px ; } </style> </head> Ce code permet de mettre le texte de tous les paragraphes et titre de niveau 1 en bleu avec une taille de 12 pixels. 4. Appliquer uploads/s3/ cours-css 2 .pdf