Le CSS(Cascading Style Sheets) permet la mise en place d'un style global pour un site, ce qui évite de répéter des balises sur les pages du contenu et ainsi ne pas surcharger le code. Il offre aussi la possibilité de donner un coup de jeune au site en modifiant son style sans toucher à son contenu. Nous allons décortiquer le style de cette page point par point afin que vous puissiez vous l'appropriez et la modifier à volonté.
Dans un premier temps il faut indiquer dans la partie "head" de la page la feuille de code qu'il va utiliser, on rentre alors:
Dans la partie href vous pouvez placer le nom de votre fichier CSS. Ce sera la seule partie de la page html que l'on changera par la suite dans les différents exemples de modifications. Dans le body de votre page html placez vos textes entre balises <p></p><H1></H1><H2></H2>... dont on définira le style dans le fichier CSS. Et pour délimiter des conteneurs (fonction décrite plus bas) on utilise:
Il faut maintenant mettre en page car sans fichier CSS la page donnerait cela: Exemple
Les conteneurs sont des partions de la page pouvant accueillir le contenu et permettant de structurer la page. Tous les conteneurs de cette page sont inclus dans un conteneur général que l'on ouvre en début du body et on ferme juste avant de fermer la balise body, ainsi tous les autres conteneurs sont inclus dans ce conteneur initial. Pour cette page le conteneur général s'appelle "conteneur". On le défini par ce code dans le fichier CSS:
Ce bloc est celui du milieu, on le définie par sa largeur (width) exprimer en pixel (px).
Margin définit la position du cadre dans la page le premier chiffre place le cadre par rapport à la hauteur et le deuxième par rapport à l'horizontal.
Le texte est aligné à gauche grâce à la fonction text-align.
Border crée la bordure du cadre épaisse de 2pixel (px), à trait plein (solid), #ab4 définie sa couleur.
Et enfin le background est une couleur #fff.
Pour montrer l'importance de ce code voici une page avec le code ainsi modifié: Exemple
Comme on peut le voir avec cette exemple seul le conteneur central est modifié, car les conteneurs qu'il contient ont toujours le même code CSS. Pour cette page il existe six conteneurs inclus dans le conteneur général: le h1#header, le menu, le contenu, lebloccode, lebloccodecentre et le footer. Le h1#header contient la photo en haut du conteneur général il se lit ainsi dans le code CSS:
Peu de choses sont définies dans ce conteneur: - sa hauteur de 250 px (sa largeur n'étant pas donnée il prend les dimension que lui impose le conteneur général grâce au paramètre suivant) - l'espace entre ce conteneur et le général (ici il est nul) - et enfin l'image de fond grâce à la fonction background: url donne entre ses parenthèses la localisation de l'image, la fonction no-repeat permet a l'image de ne pas ce répétée et les indications left top définissent les positions de l'image à prendre car ici la totalité de l'image n'est pas affichée seul le coin en haut à gauche l'est. Pour montrer l'importance de ce code voici une page avec le code ainsi modifié: Exemple
Le conteneur menu définie les liens permettant de naviguer plus vite dans la page juste en dessous de l'image du header. Dans un premier temps il se détermine comme une liste par son ul devant le #menu. Sont code CSS est le suivant:
Bon je pense que vous l'aurez compris on définit sa hauteur qui est de 24 pixels. Sa distance vis à vis du bloc général est nulle comme l'indique le marging. Mais une nouvelle notion arrive le padding il définit la distance entre le bord du conteneur et ce qu'il contient. Et enfin on indique qu'aucune puces prédéfinie de liste ne sera appliqué par le terme none dans la fonction list-style-type. Si vous avez eu la curiosité d'avoir regarder le fichier corps.css (ceux que je vous recommande grandement) vous remarquerez que plusieurs styles se nomme partiellement ul#menu mais je vous expliquerais cela dans le prochain chapitre sur les styles. Pour montrer l'importance de ce code voici un page avec le code ainsi modifié: Exemple
Le contenu n'est pas définie par beaucoup de ligne car le plus important pour cette partie les styles de texte sont plus important on ne définie donc que la position à l'intérieur du conteneur général, on laisse une ligne au cas où vous voudriez rajouter une image en fond.
Pour rajouter une photo il suffit de placer son lien entre les parenthèses, comme dans l'exemple suivant: Exemple, ayant ce style:
Les blocs nommés lebloccode et lebloccodecentre correspondent aux conteneurs dans lesquels je vous place les codes. Le bloccodecentre est le même que le bloccode sauf que l'on centre le texte plutôt que l'aligner à gauche. Le bloccode se définie ainsi:
Ici tout y est défini la bordure par border, la couleur de fond mais aussi les caracteristiques du texte: la police: font-family ici c'est arial , la couleur font-color ici c'est le noir, la taille font-size 16 pixels, l'alignement text-align, ici à gauche et l'écart entre le texte et le bord gauche padding-left ici de 2 pixels. Pour illustrer ces importances nous allons modifier la page ainsi: Exemple
Enfin le footer permet d'inserer une signature, vous pouvez le voir ici il s'écrit ainsi en CSS:
Si vous avez bien suivit jusqu'ici le conteneur ne sera pas écarté du conteneur général, grâce a margin: 0. Le texte sera décalé de dix pixels sur la droite grâce à padding-right. Line-height définit la hauteur d'une ligne contenant du texte (il ne définit pas la taille du texte qui sera centré en hauteur). Le texte est aligné à droite et la couleur correspond au vert clair. Vous connaissez le topo changeons tout ça pour visualiser un peu mieux les choses.Exemple
En voila finit avec les conteneurs mais à eux seuls ils ne donnent pas tout le style à la page, ils ne font que la partitioner en lui donnant que quelques catéristiques. Voici la page sans les styles complémentaires. Egayons tous cela avec du style!!!
Le style va donner forme à votre texte à l'intérieur de chacun des conteneurs, et vous permettra même de changer le style d'un conteneur à l'autre. Certains styles s'appliquent à toute la page ils se définissent selon un code préconçut, on les places dans body dans le code CSS, le body est définit ainsi pour cette page.
C'est le style général de la page margin, padding je vous explique plus voir plus haut, texte-align: center permet de centrer le bloc général sur internet explorer (il est inutile pour cette fonction sur modzila firefox). Font est le plus interessant il définit la taille du texte ainsi que les polices qui seront utilisées dans la page. Enfin background définit le fond d'écran (le rouge qui est caché au centre par le conteneur général qui lui a un fond blanc). Voila ce qui est pour le général court non? Mais il ne permet pas tout voici la démonstration j'ai retiré dans cette page. Bon maintenant établissons le menu. Dans un premier temps on va placer les liens dans des petits blocs les uns à la gauche des autres grâce à ce code:
La catégorie li montre comment se caractérisent la liste en modifiant ses caractéristiques pré-établies en html. Float les amènent à se mettre les uns à la suite des autres en partant de la gauche et le texte est centré. Voici l'évolution qu'il vient de ce passer on est passé deça à ça. Bien mais un peu trop collé alors arrangeons cela. Voici la grosse définition du menu:
Le a qui suit le li ne pas oublier les espaces) définit le style de tous les liens contennus dans la liste (comme tous nos titres sont des liens cela correspond à tout le menu). On définit la largeur avec width, la hauteur de la ligne (et non du texte) avec line-height, la taille du texte avec font size, on met le texte en gras avec font-weight: bold, on définit l'espace entre les lettres avec letter-spacing, la couleur du texte avec color, il se comporte comme des block grâce à display, on ne lui applique aucune décorations et on va créer un bordure à droite afin de les séparer elle sera de 5px, solide et de couleur verte. Voyons ce que cela donne ici. C'est déjà plus beau maintenant ajoutons un petit effet lorsque l'on passe la souris par dessus afin d'animer un peu la page.
On définit grâce au a:hover la réaction du texte lorsqu' il est survolé par la souris, à ce moment là on choisit que le texte change de couleur et que le fond devienne celui d'une image choisie. Voilà notre menu terminé ici. Maintenant occupons-nous du contenu enlevons les titres par défaut.
Normalement vous devriez tout comprendre à ce moment du TD résumons brievement dans l'ordre on établit la position du texte à 25pixels à gauche du conteneur, une hauteur de ligne de 25 pixels, la taille du texte, sa couleur, et on définit une bordure en bas d'un pixel, d'un trait plein et de couleur verte. Et voilà le résultat . Il y a aussi un h3 mais je vous laisse le découvrir par vous même... On régularise les balises <p> grâce au code suivant:
La fonction text-align dispose le texte d'un coté ou d'un autre (right ou left) ici justify indique qu'ils sont alignés des deux cotés. Text indent définie l'écart de la première ligne de paragraphe. Et enfin line height vous le connaissez déjà. Voilà nos paragraphes mis en page ici . Et voila plus qu'un tout petit détail changeons les liens soulignés bleus par défaut ce qui ne va pas du tout avec notre page nous allons alors les changer ainsi:
Voila nos liens de cette couleur mais tant qu'on y est mettons aussi une couleur au survole:
Et voila pas besoin de vous redirigez vous êtes sur cette page où tout a été fait!!!! maintenant à vous de jouer téléchargez le fichier css , et copiez le fichier html en regardant le code source de cette page et modifiez le fichier CSS sans toucher au contenu pour créer un style à vous.
Retour