Toujours informé, toujours pour vous surprendre !
Toujours informé, toujours pour vous surprendre !
-
- M E N U -
-
Tutoriaux Music Comunauté Music And PHP Goodies Contact Certifications
- Sondage -
Comment avez-vous connu le site?
Les résultats :
| Moteur de recherche : 0% | |
| Un ami : 100% | |
| Magazine : 0% | |
| Bouche à oreille : 0% | |
| Lien depuis un autre site : 0% | |
| Pour un total de 2 vote(s) | |
|---|---|
- Publicité -
| Chapitre | Titre |
|---|---|
| 1 | Introduction |
| 2 | Le CSS c'est quoi? |
| 3 | Notepad ++ |
| 4 | Appliquer le CSS |
| 5 | Quelques balises simples |
| 6 | Mise en forme du texte |
| 7 | Les supers-propriétés |
| 8 | De la couleur! |
| 9 | Changer le fond du site! |
| 10 | La suite... |
| 11 | Fiche de ce tutorial |
Bienvenue,vous avez lu le tuto de Raz sur le (x)HTML mais vous avez vite remarqué qu'avec seulement du (x)HTML, un site web ne ressemble a RIEN!
Si par malheur vous n'avez pas encore lu le tuto de Raz sur le (x)HTML, je vous conseille de le lire avant de commencer celui-ci (sauf bien sur si vous avez appris le (x)HTML ou le HTML sur un autre site)!
Moi c'est axelorque et je compte vous enseigner le CSS. Je vous guiderai au travers des nombreuses mais utiles fonction de ce language. Vous remarquerez vite que c'est grace à son design qu'un site vit!
Je rapelle qu'il existe un forum où vous pouvez poster tous vos problemes relatifs au tutoriaux.
Tout au long de ce tutorial je considère que vous connaissez les bases du HTML (je sais, je sais, je me répète) c'est pourquoi je ne place pas le code des pages html des scripts exemples.
Mais bon, trève de plaisanteries et commencont ensemble l'apprentissage du CSS
[ Fin du chapitre : remonter ]
Tout d'abord, qu'est ce que le CSS?
Le CSS est ce qui va mettre en forme votre site. C'est grace à lui que vous avez un site avec un fond noir ou blanc, que le menu se trouve sur le coté et non au-dessus. Il est donc très pratique.
Mais où mettre le css?
Et bien il y a 3 façons de faire. Soit vous l'introduisez dans les balises grace à la balise "style"(pas utile du tout et c'est surtout très ennuyeux lorsque vous voulez faire des mises à jours). Soit vous créez une balise "style" dans la balise "head" en haut de votre pagehtml.Soit (et c'est le mieu!), vous créez une feuille de style en cascade. Cette dernière méthode est la plus utilisée et la plus appréciée vous pourrez avec celle-ci avoir plusieurs feuilles de style pour différents designs.
La méthode que vous allez apprendre est cette dernière.
Nous allons créer des fichiers supplémentaires pour ajouter du style à votre site .
Ne vous en faite pas nous n'allons pas devoir créer des fichiers compiqués puisque nous utliserons notepad ++!
[ Fin du chapitre : remonter ]
Quel programme utiliser pour réaliser vottre feuille de style CSS?
Comme pour la création de site web, nous utiliseron notepad ++. Et oui ce petit programme est capable de beaucoup et en plus il colore le code.
Alors pourquoi s'en priver!
Télécharger NotePad ++ (dernière version)
[ Fin du chapitre : remonter ]
Avant de commencer a vous donnez les balises simples, je dois d'abord vous apprendre a insérer une feulle de style dans votre page écrite en (x)HTML
Pour introduire la feuille de style, il faut ajouter une balise "link" dans "head" qui dira au script (x)HTML: "il faut que tu ailles chercher la feuille de style...". Cette ligne est celle-ci ( je met même le code minimal (x)HTML pour vous aidez ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Exemple d'utilisation de CSS externe</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/design.css" /> </head> <body> <p> Cette page comporte une feuille de style externe. C'est de loin la meilleure méthode à utiliser quand on fait du CSS. </p> </body> </html>
Essayez votre script!
=> Le script que vous venez d'essayer n'affiche rien de plus qu'une bête page (x)HTML, ce qui est totalement normal. Mais derrière,(ce que vous ne voyez pas) la page (x)HTML a cherché la feuille de style mais comme elle n'existe pas, la page affichée est la même que si on n'avait pas ajouter cette nouvelle ligne.
Explications de cette fameuse ligne:
Je ne vais pas vous détailler l'entièreté de la ligne, vous devez juste savoir que "title" donne un nom à la feuille de style et que "href" donne le chemin où doit se trouver la feuille de style ( mais vous le saviez déjà hein! )
- au cas où vous l'auriez oublier, les balises <link> se placent toujours entre les balises <head> et </head>!
Mais trève de plaisanteries, passons à quelquechose de plus sérieux
Pour donnez un style à un balise, on utilise toulours la même chose.
voila:
h1, a /*Les titres "h1" et les liens seront affectés par les valeurs ci-dessoues*/ { color: red; /*Titres et liens en rouge*/ font-size: 18px; /*Les lettres du titre et des liens auront une hauteur de 18 pixels*/ } p { color: blue; /*Texte en bleu*/ }
Essayez votre script!
- Donc on place la balise html à laquelle on veux apliquer un style. On ouvre l'accolade. On met la propriété. On tape ":". On place la valeur. on met un point-virgule. (Ce point-virgule est très important sauf lorsqu'il n'y a qu'une seule propriété à appliquer) Et enfin on n'oublie pas de refermer l'accolade!.
Si vous avez compris ca, c'est que vous êtes dans le bon.
- Pour dire d'utiliser la propriété sur plusieurs éléments différnts à la fois, on sépare les balises par une virgule suivie d'un espace.
- Cette fois pour placer des commentaires, on utilise /*..........*/ C'est encore plus utile de le faire dans un css. Moi, 90% de mes propriétés css sont commentées. Beaucoup vous diront que c'est trop et je croix qu'ils ont raison! (Pour me défendre: il y a tellement de propriétés que je ne fait pas l'effort de les retenir).
- Nottez que j'expliquerai comment utiliser la couleur plus loin dans ce tutorial.
[ Fin du chapitre : remonter ]
Comme je vous l'ai dit plus haut, le css, c'est toujours la même chose!
Par exemple, vous décidez de changer la police du texte. Et bien vous utiliser la propriété "font-size" suivie d'une valeur en pixels. 15px par exemple mais ne placez jammais d'espace entre 15 et px sinon, ca ne marchera pas!
Outre la valeur en pixels, il y a la valeur relative (pas super) avec "xx-small", "small", "medium", "xx-large" et y en a d'autres.
Il existe aussi la valeur en "em"(assez prisé) du style "1.4em". Remarquez que l'on ne met pas de virgule mais un POINT!
Et la dernière façon de faire, en %. C'est assez similaire à la façon précédente.
Il faut que vous sachier, que la méthode de taille de la police donnée en pixels, est de moins en moins utilisée, car les personnes mal voyantes ne sauront pas agrandir le texte de leur page web. Donc si vous vous soucier des autres, donnez une taille en "em", c'e'st le plus pratique.
Moi je continue à utiliser ma bonne vieille méthode du "px" par habitude 
. Sachez toutefoi que j'utilise le plus possible la méthode "em" dans mes propres scripts. Ici, c'est un tutorial et c'est plus court la méthode du "px".
Pour changer la police, qui est très moche sans css, on utilise la propriété: "font-family" suivie des plusieurs polices. "Hein!, pourquoi plusieur?" Ben oui si la personne qui regarde la page, son ordinateur ne comprend pas la première police, il essayera avec la suivante et ainsi de suite. C'est pourquoi on termine souvent avec une police dans le style: "serif" que tout le monde doit avoir sur son pc.
Notez que les noms de police en plusieurs mots sont à entourer de "" comme: "Times New Roman".
Pour aligner le texte on utilise la propriéte: "text-align" suivie de sa valeur.
Les valeurs sont:
Allez un petit script pour voir tout ca en concret!
h1 { font-family: "Arial Black", Arial, Verdana, serif; /*police en Arial Black*/ font-size: 20px; /*Les lettres du titre aura une hauteur de 20 pixels*/ text-align: center; /*Centrer le titre*/ } p { font-family: Arial, "Comic Sans MS", Verdana, serif; /*police en Arial*/ font-size: 1.2em; /*Les lettres du texte aura une hauteur de 1.2em*/ text-align: right; /*placer le texte à droite*/ }
Essayez votre script!
Je pense que ce code n'est pas bien compliquer. De plus le CSS a le bonheur de toujours avoir la même tête.
- font-family demandera a la page de se charger avec la police placée en première position, si celle-ci est absante du pc, le texte prendra la deuxiemme et ainsi de suite.
- font-size demandera cette fois au texte de prendre une valeur pour la taille de la police.
- text-align met en forme le texte en fin, une partie... Nous verrons cela au prochain chapitre.
[ Fin du chapitre : remonter ]
Allez on continue sur notre lancée!
Vous avez donc compris ce qu'effectue le CSS ( si vous n'avez toujours pas compris, lisez ce chapitre, et si vous ne comprenez toujours pas, recommencez tout le tutorial )
Bon, une propriété pas très intéressante de mise en forme: "font-style" suivi de sa valeur:
Pour le style d'écriture, on utilise "Font-weight" et sa valeur:
Note: On peu se demander pourquoi il n'ont pas fait une seule propriété pour le texte en gras, italique,... Mais ca viendra avec le prochain chapitre
Pour souligner, barrer et d'autres effet, c'est ici. On utilise la propriété: "text-decoration", suivie de sa valeur:
Vous ne vous êtes jammais demandé comment faire une tabulation das le texte pour faire commes dans une lettre manuscrite?
Et bien, c'est simple, vous utilisez la propriété: "text-indent" suivie d'une valeur en pixels (personellement, je n'utilise pas le texte indenté).
Pour travailler sur les caractères, on utilise la propriété: "text-transform", suivie de sa valeur:
Un truc simpas pour avoir des petites capitales. La propriété est : "font-variant" suivi comme d'habitude par sa valeur:
Allez je vous concocte un petit script pas trop dur qui reprend tout ce que nous avons vu durant ce chapitre. A l'attaque!
h1 { font-family: "Arial Black", Arial, Verdana, serif; /*police en Arial Black*/ text-align: center; /*Centrer le titre*/ Font-weight: bold; /*Titre en gras*/ text-decoration: underline; /*Titre souligné*/ text-transform: uppercase; /*Toutes les lettres en majuscules*/ } p { font-family: Arial, "Comic Sans MS", Verdana, serif; /*police en Arial*/ font-style: italic; /*Texte italique*/ Font-weight: lighter; /*Texte très fin*/ text-decoration: overline; /*Texte souligné*/ text-transform: capitalize; /*La première lettre de chaque mot est une majuscule*/ } a { Font-weight: bolder; /*Lien très gras*/ text-decoration: blink; /*Lien clignottant*/ font-variant: small-caps; /*Lettres: petites capitales*/ }
Essayez votre script!
=> Je ne pense pas que vous ayez besoins d'explications pour ce script vu que c'est expliqué plus haut!
- Vous remarquez donc que le CSS n'est pas quelquechose de bien compliqué et n'est donc pas une insurmontable difficulté!
[ Fin du chapitre : remonter ]
Je ne sais pas si vous l'avez remarquer, mais les propriétés CSS commancent souvent par le même mot.
Pour le moment, il y en a deux, font-... et text-... Et bien croyer le où non mais je vais vous apprendre une méthode super pour pour ne pas devoir les écrire à chaque nouvelle propriété .
Il vous suffira juste d'écrire par exemple: "font: bold, small-caps;" ( on oublie pas la virgule entre chaque valeur
) et la balise sur laquelle s'applique cette propriété sera écrite en gras avec des petites capitales
voici le code du dernier exemple si on y avait apliquer la règle de la super propriété:
h1 { font: "Arial Black", Arial, Verdana, serif, bold; /*police en Arial Black et en gras*/ text: center, underline, uppercase; /*Centrer le titre, le souligner et mettre toutes les lettres en majuscules*/ } p { font: Arial, "Comic Sans MS", Verdana, serif, lighter, italic; /*police en Arial avec le texte très fin en italique*/ text: capitalize, overline; /*La première lettre de chaque mot est une majuscule et le texte est souligné*/ } a { Font: bolder, small-caps; /*Lien très gras avec les lettres en petites capitales*/ text-decoration: blink; /*Lien clignottant, on aurait pu mettre: text: blink;*/ }
Je ne met pas de lien pour essayer ce script cette foi ci parce qu'il donne exactement le même résultat que le précédent !
Ici non plus ( comme le script précédent ) je ne voix pas de difficultés. Je pense même que de voir qu'on n'est pas obligé de connaitre par coeur "text-align", "text-decoration",... et les autres facilise l'apprentissage du CSS!
Le seul point "plus compliqué" est qu'il ne faur pa s oublier le ";" a la fin de chaque propriété.
[ Fin du chapitre : remonter ]
Je vais maintenant vous parler de quelquechose qui va radicalement changer l'apparance de vos pages web.
Allez on y va!
Jusqu'a présent, vous n'avez appris qu'a changer la police et d'autres effets sur le texte. ( je sais, ce n'est pas terrible )
Maintenant je vais vous apprendre à colorer vos texte ( encore le texte! ) et le fond du site ( chapitre suivant ). Il y a trois façons différentes pour colorer le site. On utilise la propriété "color" suivie de trois type de valeurs que voici:
La première méthode est celle qui consiste à marquer la couleur en anglais tel que: white,silver, gray, black, red, maroon.
La seconde méthode ( la plus ancienne ), consiste à plaçer une valeur en hexadécimale. L'hexadécimale était le seul language "couleur" que les ordinateurs comprennaient dans leurs débuts. N'oubliez pas la dièse ( # ) avant de placer cotre code hexadécimale .
Et la troisiemme méthode, qui consiste à plaçer une valeur rgb. C'est assez facile d'utiliser cette méthode puisque même paint sous windows possède un moyen de créer ainsi ses couleurs ( notez que cette valeur rgb ne prend une valeur que entre 1 et 255 ).
Moi personellement j'utilise la deuxiemme méthode, l'hexadécimale,
Mais comment fais-tu pour connaitre l'hexaMachinTruc?
Ne vous en faite pas, je ne suis pas fou )
. J'utilise tout simplement un petit utilitaire libre appelé "la boite à couleurs" que je met à votre disposition ici
Voici un petit exemple de code:
h1 { color: red; /*Titre rouge*/ } p { color: #7f2822 /*Texte "brun"*/ }
Essayez votre script!
Pas trop compliqué comme code j'espère.
- Bon, c'est simple, on demande que les titres h1 soient écrits en rouge ( red ) et les textes en #7f2822. N'oublier pas le "#" devant le code hexadécimal comme il ne faut pas oublier le "rgb(...,...,...)" pour la valeur reg, green, blue.
C'est bien ton truc mais comment on fait pour changer tout le fond du site? Tu avais dit qu'on le ferait!
Chapitre suivant j'ai dit !
[ Fin du chapitre : remonter ]
C'est partit, nous allons changer la couleur de fond du site, et après... eh bien vous verrez !
Mais b'abord il faut savoir à quelle balise (x)HTML on doit appliquer le CSS.
Je m'explique, si vous voulez changer la couleur de toute la page, il suffit d'appliquer la propriété "background-color" suivie de sa valeur en rgb, hexadécimale ou en mettant tout simplement le nom de la couleur en Anglais sur la balise "body". Facile quoi!
En effet, si vous aviez appliquer cette propriéte sur un mot ou sur un titre, ce n'est que le mot ou le titre qui aurait changé de couleur. Comme si vous le mettiez en fluo à l'école (ca ressemble beaucoup au surlignage).
Allez, on reprend le dernier code et on y ajoute la propriété:
body { background-color: rgb(255,242,0) /*Fond jaune*/ } h1 { color: red; /*Titre rouge*/ } p { color: #7f2822 /*Texte "brun"*/ }
Essayez votre script!
Evidement, on peut utiliser n'importe laquelle des trois façon pour ajouter de la couleur, ce deuxiemme exemple sur la couleur est très bien pour vous montrer la méthore rgb
Le code n'étant pas plus compliquer ici que sur les autre, je ne donne pas d'explication particulière, néanmoins, si vous n'avez pas compris, je vous conseille de relire le chapitre.
Maintenant, immaginons que vous vouliez une image comme fond (en jpg de préférence. C'est moins lourd que png), il suffira d'utiliser la propriété "background-image" suivie de sa valeur "url(....jpg)". Mais comme çà, ce serait trop facile,il y a d'autres valeurs à appliquer à l'image.Elles s'utilisent avec la propriété "background-attachment" et ces valeurs:
Et encore des propriétés! "OOH!,NON!" c'est pas très dur, vous verrez. On utilise comme d'habitude une propriété qui ici s'appelle "background-repeat". Voici ses valeurs:
Si vous avez utilisez un "no-repeat", il existe une propriété: "background-position" à qui vous donnez deux valeurs.
Cette propriété est rès pratique pour ajouter un petit dessin en haut à droite (donc une autre image) par exemple.
Notez que vous devez donnez une des trois valeur du tableau du dessus puis une des trois du tableau du dessous. Sinon vous pouvez utilisez une valeur en pixel en sachant que l'on s'écarte du point d'origine qui est le haut à gauche de la fenêtre du navigateur.
body { background-image: url("images/nomDeL'image.jpg"); /*image comme fond*/ background-attachment: fixed; /*Le fond restera immobile*/ color: white; /*L'écriture sera blanche pour pouvoir la lire */ }
Essayez votre script!
Le code, n'est vraiment pas complexe à comprendre et à assimiler.
- D'abord, on va chercher l'image grace à cette ligne: background-image: url("images/nomDeL\'image.jpg");
- Ensuite on lui applique un effet pour que lorsque le teste défile, le fond reste fixe d'où le "fixed".
Et voila, la première partie de ce tutorial CSS est fini. Je vous conseille maintenant d'essayer les propriétés que je vous ai apprises, ( un peu d'entrainement ne vous fera rien de mal ).
Si vous rencontrer un quelconque problème dite vous que le forum est là pour vous aider!
[ Fin du chapitre : remonter ]
La suite devrait arriver bientôt. Mais vu mon horaire plus chargé que lors de mes débuts sur le site, je ne peux pas vous dire quand je commencerai la deuxiemme partie de ce tutorial.
Avec ce dernier chapitre, je cloture ce tutorial, je n'ai pas grand chose d'autre à vous dire sauf bien sur de pratiquer un maximum. N'oublier pas que le forum est là pour vous aidez. je suis aussi très content d'avoir pu partager un peu de votre temps. A très bientôt sur Music And PHP !
Nom : Tutorial sur le CSS
Auteur : axelorque
Date de création : 15/03/2007
Dernière mise à jour : 28/03/2007
[ Remonter ]
1 visiteur(s) |
0 membre(s) online |
0.1398 sec
Last update :
06/03/2008 - 17h30
|
Version 4 |
SSL
Valid xHTML 1.1 | Valid CSS | Flux RSS | 
Monitoring internetVista® |
