Mise en Forme avec CSS

Transcription

1 Mise en Frme avec CSS Une feuille de style permet de définir la plice, la taille, le style (gras, italique, suligné) la culeur du texte, des liens etc. A peu près tut ce qui cncerne la présentatin d une page web Quelle différence avec une définitin manuelle des plices...? Simplicité d'utilisatin, très pratique pur changer une culeur sur tutes les pages en quelques clics. La feuille de style permet de faire en une seule fis, pur tut le site, tus les paramétrages de présentatin. Si n décide de changer la culeur des liens, il suffit de mdifier un seul fichier (la feuille de style) pur mdifier l'intégralité des pages. Il existe plusieurs techniques : La feuille de style interne : Les styles snt enregistrés dans chaque page HTML. La feuille de style externe : chaque page pintera alrs vers la feuille de style, enregistrée à la racine du site. Aucune dnnée ne sera stckée au sein de la page même. Lrsqu une page est chargée, une balise en début de page indique qu'il existe une feuille de style externe. Le chemin étant indiqué, le navigateur pré charge la feuille. Vus avez certainement cmpris que nus ptns pur cette deuxième technique. Créer un nuveau dssier de site appelé tuffit, créer la page index.htm et définir ce site (inf lcales et carte du site). Sur la page index Écrire tut le texte en restant justifié à gauche. Changer de paragraphe en appuyant sur Entrée. Le slgan sera écrit en lettres majuscules Pur le dernier paragraphe cmprtant 4 lignes, passer d une ligne à l autre en appuyant sur Shift+Entrée. Ctrl + A pur tut sélectinner et centrer Dnner la culeur de l arrière plan #CCCC Créer la feuille de style externe et l enregistrer à la racine du site (suivre Lien) 1

2 Menu Fenêtre / Style u bien clic sur la trisième icône, en bas à drite, Afficher styles permet d afficher une fenêtre dédiée aux styles. Dans la fenêtre Styles chisir dans le menu dérulant : appliquer à «Sélectin» et cliquer sur le butn Éditer. Dans la fenêtre Éditer Feuille de style, cliquer sur le butn Lien ce qui uvre la bite suivante Ajuter une feuille de style externe Dans la fenêtre Ajuter une feuille de style externe : Laisser cché «Ajuter sus» Lien Parcurir pur truver le dssier du site. Dans la fenêtre Sélectinner le fichier Feuille de style, si n enlève le filtre (dans le menu dérulant Fichiers de type, chisir Tus les fichiers) n peut vir les fichiers à la racine cmme index.htm. Dnner un nm au fichier ; ce fichier dit avir l extensin.css ; par exemple mnstyle.css. Dans le menu dérulant Fichiers de type remettre Fichiers de feuille de style [*.css]. Rajuter au besin manuellement l extensin.css Cliquer sur le butn Sélectinner La fenêtre Ajuter une feuille de style externe apparaît à nuveau avec cette fis le nm mnstyle dans le champ Fichier/URL : cliquer sur OK. 2

3 D an s la liste des styles de la bite de dialgue Éditer feuille de style, la feuille de style sélectinnée apparaît avec le mt [lien] à la suite du nm. Il ne faut surtut pas à ce niveau cliquer ni sur Terminé ni sur Nuveau Editer la feuille de style (Suivre Nuveau) Duble cliquer sur le nm de la feuille de style. Une secnde bite de dialgue prtant, dans la bande bleue du haut, le nm de la feuille de style mnstyle.css apparaît. Cmme ce fichier est vide puisque la feuille n a pas encre été éditée, n ne vit rien dans le carré blanc. Cliquer sur le butn Nuveau Dans la bite de dialgue Nuveau style chisir Type : Créer un style persnnalisé (classe). C est le seul type de style qui peut être appliqué à n imprte quel texte dans ntre dcument, quelles que sient les balises qui cntrôlent ce texte. Puis faire OK. Définir les styles (crps, titres, liens etc ) - Dnner un nm au style : ce nm dit cmmencer par un pint, n l écrit en minuscules, sans espaces, sans accents, sans caractères particuliers, par exemple :.crps10nir puis OK - La bite de dialgue Définitin du style pur.crps10nir s uvre - Chisir dans les menus dérulants la plice de caractères, la taille, l épaisseur, le style, la culeur puis OK - On se retruve dans la bite de dialgue mnstyle.css, ce qui nus permet de recliquer sur Nuveau pur créer un autre style cmme par exemple.titre24grasnir 3

4 Plice Taille Epaisseur Culeur crps Verdana 10 nrmal nir titre Verdana 24 gras nir sustitre Verdana 18 gras Ruge#CC0000 slgan Verdana 9 nrmal nir cntact Verdana 9 gras nir adresse Verdana 9 nrmal nir Lrsqu n a fini de définir les styles, Dans la fenêtre mnstyle.css, cliquer sur Enregistrer et ensuite cliquer sur Terminé Pur appliquer un style : Sélectinner le texte à mettre en frme, et dans la palette Styles faire un clic drit sur le style pur uvrir le menu cntextuel et chisir Appliquer Pur rajuter un style : Si par la suite n veut rajuter un style, dans la fenêtre Éditer feuille de style, sélectinner le fichier de la feuille, duble cliquer dessus. Quand n est dans la fenêtre mnstyle.css n vit dans le carré blanc les styles déjà définis, cliquer alrs sur le butn Nuveau etc Terminer la présentatin de ntre page en sélectinnant les 5 paragraphes de prduits en ciment pur en faire une liste à puces avec des rnds pleins. 4

5 Attacher la feuille de style externe à une nuvelle page (suivre Imprter) Dans la bite de Dialgue Ajuter feuille de style externe Ccher «Ajuter sus» : Imprter Cliquer sur Parcurir pur truver le fichier et sn adresse URL à la racine du site Fichiers de type : Tus les fichiers (pur enlever le filtre) Dans la bite de dialgue le fichier «mnstyle» apparaît à la racine (à côté du fichier index.htm) Duble clic u bien un clic et butn Sélectinner Dans la bite de dialgue Editer Feuille de style : la feuille de style apparaît «mnstyle(imprter)» et n vit en dessus le cntenu du fichier Duble cliquer dessus, ce qui fait uvrir la bite de dialgue prtant le nm «mnstyle.css» dans la bande bleue d en haut. Le cntenu du fichier s affiche alrs dans le carré blanc 5

6 Ce n est qu à ce mment là qu n peut Editer à nuveau la feuille de style pur ajuter de nuveaux styles en cliquant sur le butn Nuveau u bien n clique sur le butn Enregistrer puis sur le butn Terminé On peut alrs, dans la palette Styles, appliquer les styles par clic drit / Appliquer Si n regarde ntre répertire lcal dans Dreamweaver u bien avec l explrateur de Windws n vit bien le fichier de ntre feuille de style mnstyle.css à la racine du site, à côté du fichier index.htm 6