Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1597 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1050695
Master_Jul
Posté le 18-04-2005 à 14:20:32  profilanswer
 

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 */
  3. /* Corps du document */
  4. body {
  5. background-image: url(../images/fonds/fond1.gif);
  6. font-family: Verdana, Arial, Helvetica, sans-serif;
  7. }
  8. /* Lien */
  9. a {
  10. text-decoration: none;
  11. color: White;
  12. }
  13. /* Lien survolé */
  14. a:hover
  15. {
  16. text-decoration: underline;
  17. color: White;
  18. }
  19. /* Lien de petite taille */
  20. a.petit{
  21. font-size: 0.8em;
  22. }
  23. /* Paragraphe */
  24. p {
  25. font-weight: bold;
  26. color: White;
  27. }
  28. /* Paragraphe centré */
  29. p.centre
  30. {
  31. text-align: center;
  32. }
  33. .texte_petit
  34. {
  35. font-size: 0.8em;
  36. color: White;
  37. }
  38. .texte_petit_centre{
  39. text-align: center;
  40. font-size: 0.8em;
  41. color: White;
  42. }
  43. table {
  44. margin-left: auto;
  45. margin-right: auto;
  46. border-spacing: 0px;
  47. border-width: 0px;
  48. border-collapse: collapse;
  49. }
  50. td {
  51. padding: 0px;
  52. }


 
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
mood
Publicité
Posté le 18-04-2005 à 14:20:32  profilanswer
 

n°1050730
KangOl
Profil : pointeur
Posté le 18-04-2005 à 14:38:07  profilanswer
 

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


 

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


 
:spamafote:


---------------
Nos estans firs di nosse pitite patreye...
n°1050750
FlorentG
Unité de Masse
Posté le 18-04-2005 à 14:43:25  profilanswer
 

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

n°1050760
KangOl
Profil : pointeur
Posté le 18-04-2005 à 14:46:51  profilanswer
 

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


---------------
Nos estans firs di nosse pitite patreye...
n°1050783
masklinn
í dag viðrar vel til loftárása
Posté le 18-04-2005 à 14:54:33  profilanswer
 

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
n°1050819
Master_Jul
Posté le 18-04-2005 à 15:17:16  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Aidez moi svp !!! Livre d'or messages par pagesProblème CSS
(Résolu) [CSS] Forcer une chaîne à se couper (en fin de cellule)[Tomcat][CSS] Mes feuilles de style ne fonctionnent pas
[CSS]Technique reconnue pour postionner verticalement les blocs?Problème de mise en page avec CSS
[CSS] Le texte déborde du calqueaidez moi à le coder.. mon système de points.
Changer couleur de cellule en CSS[CSS] Menu déroulant --> aide please!
Plus de sujets relatifs à : Aidez-moi, je ne comprends pas la philosophie CSS !


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR