Aidez-moi, je ne comprends pas la philosophie CSS !

Aidez-moi, je ne comprends pas la philosophie CSS ! - HTML/CSS - Programmation

Marsh Posté le 18-04-2005 à 14:20:32    

Hello,
 
soucieux de rendre mon site le plus compliant, j'ai été ici et là lire les tutos CSS et je retombe toujours sur le même problème.
 
J'ai besoin d'une police Verdana, un coup j'ai besoin de Verdana en blanc, un autre coup Verdana en blanc et gras, après Verdana en blanc, gras et centré... :pt1cable: Je ne vais pas me faire 50 styles pour changer/ajouter un attribut quand même ?!
 
J'ai lu des articles sur l'héritage mais je n'arrive pas à rendre ça concret dans ma CSS, voici où j'en suis :
 

Code :
  1. /* Feuille de style Apelec 2005 */
  2. /* 18/04/2005 */
  4. /* Corps du document */
  5. body {
  6. background-image: url(../images/fonds/fond1.gif);
  7. font-family: Verdana, Arial, Helvetica, sans-serif;
  8. }
  10. /* Lien */
  11. a {
  12. text-decoration: none;
  13. color: White;
  14. }
  16. /* Lien survolé */
  17. a:hover
  18. {
  19. text-decoration: underline;
  20. color: White;
  21. }
  23. /* Lien de petite taille */
  24. a.petit{
  25. font-size: 0.8em;
  26. }
  28. /* Paragraphe */
  29. p {
  30. font-weight: bold;
  31. color: White;
  32. }
  34. /* Paragraphe centré */
  35. p.centre
  36. {
  37. text-align: center;
  38. }
  40. .texte_petit
  41. {
  42. font-size: 0.8em;
  43. color: White;
  44. }
  46. .texte_petit_centre{
  47. text-align: center;
  48. font-size: 0.8em;
  49. color: White;
  50. }
  52. table {
  53. margin-left: auto;
  54. margin-right: auto;
  55. border-spacing: 0px;
  56. border-width: 0px;
  57. border-collapse: collapse;
  58. }
  60. td {
  61. padding: 0px;
  62. }


 
Est-ce que c'est bien commencé déjà ? Merci. :hello:
 
Le problème se situe principalement pour mes ".texte_petit_centre", je ne vais pas faire un style ".texte_petit_centre_gras" quand même, si ?!


Message édité par Master_Jul le 18-04-2005 à 14:31:38
Reply

Marsh Posté le 18-04-2005 à 14:20:32   

Reply

Marsh Posté le 18-04-2005 à 14:38:07    

Code :
  1. .petit{
  2.     font-size: 0.8em;
  3. }
  5. /* Paragraphe centré */
  6. .centre
  7. {
  8.     text-align: center;
  9. }


 

Code :
  1. <span class="petit centre">petit texte centréw</p>


 
:spamafote:


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 18-04-2005 à 14:43:25    

Ca sert à rien un text-align center dans un span qu'est pas en display block ;)

Reply

Marsh Posté le 18-04-2005 à 14:46:51    

effectivement :jap:
 
c'etait juste pour lui donner le principe pour affecter plusieurs classes a un element...


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 18-04-2005 à 14:54:33    

La philosophie des CSS, c'est de séparer le contenu/l'information (HTML) et la manière dont cette information est présentée (CSS).
 
Tout d'abord, celà veut dire qu'à quelques (rares) exceptions près le HTML n'est pas censé contenir la moindre information de présentation/style.
Ca veut dire naturellement pas de <font>, <i> ou <u>, mais également pas de classes "petit" ou d'id "centre".
Les classes et les ids doivent décrire le rôle des éléments, leur sens, leur signification dans la logique de la page (menu, lien_livre, footer, signature).
 
Ensuite, il faut utiliser les balises (HTML) dédiées. Par exemple quand un mot ou une expression est important et qu'il faut appuyer dessus, on va utiliser <em> (emphasis, mettre l'emphase sur) et <strong> qu'on stylera ensuite selon nos besoins. Pour un titre ou un sous titre, on utilisera les "headers" h1 à h6, que l'on stylera là encore par la suite l'apparence "par défaut" étant aisément modifiable elle n'a aucune importance.
 
Enfin seulement on met au point le CSS en accédant aux éléments directement (a, em, h1), via leur classe (.classe) ou leur id (#id). Et on peut faire jouer la cascade.
 
La cascade, c'est la capacité à accéder au contenu via le contenant.
 
Par exemple si j'ai une liste et que je veux accéder aux "li" de cette liste

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


Je peux donner une classe à chaque "li", ce qui me force à écrire beaucoup de classes inutiles, ou alors je donne un id à mon UL, ce qui a comme résultat

<ul id="bou">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


et j'accède à mes LI par

#bou li { /*style_des_li*/ }


 
Donc des classes comme "petit" ou "centre" n'ont que peu de sens puisqu'il désignent la manière dont le lien sera affiché dès le fichier HTML, ce qui supprime une grande partie de l'intérêt des CSS.
Pour voir les avantages de bien séparer le contenu (HTML) et la présentation (CSS), voir CSS Zen Garden


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 18-04-2005 à 15:17:16    

Merci beaucoup pour vos réponses. Vous avez répondu exactement à mes interrogations. :)  
 
Bonne journée !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed