Mise en forme - CSS

02 - mes styles, je les met ou?

Publié le mercredi 3 octobre 2012 15:06 - Mis à jour le jeudi 18 octobre 2012 13:59

Maintenant que l'on a survolé ensemble la methode d'écriture du html et la possibilité de mettre des attributs de "style", amusons nous un peu avec. Le style s'applique donc sur une zone délimitée par des balises html comme précédement avec les balises [span]....[/span] mais on pourrait aussi bien le faire pour des balises autres comme[p] .... [/p] ou [a]...[/a], etc...

La balise [a] permet de faire un lien, par exemple si j'écrit :
[a href=http://www.google.fr]google[/a]
cela va me donner : google
(pour vérifier le code source, vous pouvez a tout moment dans l'ENT demander a le voir en cliquant sur le bouton "source".

Maintenant, personnellement je ne suis pas fan de la couleur violette du lien ni du fait qu'il soit souligné. Je peux utiliser l'attribu style pour préciser mon choix. par exemple je souhaite que le lien soit toujours là mais qu'ilsoit mentionné en bleu et qu'il ne soit pas souligné.

si j'écrit : [a style="color: blue; text-decoration: none" href="http://www.google.fr"]google[/a]
cela va me donner : google

 Personnellement je trouve cela plus beau, pas vous?

on peut ainsi faire des liens qui n'ont pas l'apparence classique des liens dans l'ENT, en en choisissant les paramètres. Tout comme nous n'avons pas fait le tour complet des balises HTML, nous n'avont pas non plus fait le tour des balises CSS. Néanmoins nous avons vu qu'il était possible de modifier l'apparence d'un lien. Vous me direz surement : "et si je dois changer l'apparence de tous les liens d'une page ou d'une partie de page, je dois retapper les styles pour chaque lien???" C'est une question fort pertinante et les créateurs des languages du web se sont posés la même et ont apporté non pas une mais deux solutions.

On peut :

  • stocker tous les styles dans un fichier et le donner au navigateur avant qu'il ne commence a afficher la page, solution malheureusement inutile pour nous (sauf erreur de ma part) car il lit notre article et l'affiche dans la page...
  • de stocker tous les styles utilisés en début de fichier html, et là ca nous concerne directement, sous conditon de les stocker entre les balises [style] et [/style]

Nous verrons sur l'article suivant ce que cela peut donner mais en attendant, voici la syntaxe :

[style]

a {
      color: blue;
      text-decoration: none;
}
a:hover {
      color : red;
      text-decoration: none;
}

[/style]

ce style sera appliqué sur le prochain article, il précise que les liens apparaissent non soulignés, en bleu pour tous les liens et en rouge pour celui qui est sous le curseur de la souris.

Pièces jointes

À télécharger

 / 1
Catégories
  • fonctionnement