Ma sémantique est mauvaise :(

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Vano, 17 Février 2006.

  1. Vano
    Vano Nouveau WRInaute
    Inscrit:
    18 Octobre 2005
    Messages:
    4
    J'aime reçus:
    0
    Salut à tous !

    Encore recemment, je faisais de grandes feuilles de style CSS ou chaque type de police, tableau etait défini. Sous la forme d'un .arial_12_blanc_gras, etc.. ce qui me faisait des feuilles de style très lourdes. Ma méthode est apparemment mauvaise, il faut utiliser "p" "h1" et compagnie !

    Je trouve en effet que ce système est plus logique, mais comment faire pour définir certaines polices spécifiques ? Pour un texte que je voudrais en vert au lieu du bleu de la couleur de police par défaut, j'aurais donc 2 CSS : "p" avec les infos type de font, taille et ".vert" avec la couleur ?

    Merci ! :)
     
  2. Oncle Tom
    Oncle Tom WRInaute impliqué
    Inscrit:
    31 Mars 2003
    Messages:
    720
    J'aime reçus:
    0
    Il est fortement déconseillé de nommer les classes et les ID de style avec des "contenus". Une classe '.vert' c'est très mauvais car le jour où tu voudras changer de couleur, avec une classe .vert{ color:red; } t'auras pas l'air malin.

    Les #id permettent de découper "géographiquement" une page pour y appliquer des styles différents. Les classes elles sont utilisées pour altérer certaines balises seulement.

    Tu peux très bien avoir plusieurs classes par balise:
    Code:
    /* style par défaut des paragraphes */
    p{
    text-align:justify;
    margin:10px 0;
    }
    
    p.important{
    border:1px solid #000;
    padding:10px;
    }
    
     
  3. Photoshop user
    Photoshop user WRInaute impliqué
    Inscrit:
    8 Décembre 2004
    Messages:
    863
    J'aime reçus:
    0
    Oui, je pense comme The Jedi
    Pense à la structure de ta page dans le (x)html et rajoute juste les conséquences en terme de police, bold, etc dans le css
     
  4. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 933
    J'aime reçus:
    4
    plus simplement,

    dans ton css:

    Code:
    body { font-family: Arial; color: #000000; }
    
    .rouge { color: #FF0000; }
    
    .vert_gras { color: #00FF00; font-weight: bold; }
    
    .bleu_souligne { color: #0000FF; text-decoration: underline }
    
    et dans ton code html:

    Code:
    <body>
    
    texte à mettre en noir, parfois en <span class="red">rouge</span>, parfois en <span class="vert_gras">vert et en gras</span> voire même dans les cas extrèmes en <span class="bleu_souligne">bleu, souligné !</span>
    
    </body>
    
    Résultat:

    texte à mettre en noir, parfois en rouge, parfois en vert et en gras voire même dans les cas extrèmes en bleu, souligné !

    ...et si comme le souligne The Jedi, ces classes sont rattachées à certains types de textes, tu ne les nomme pas par leur contenu, mais par leur fonction:

    .accroche {}
    .discret {}
    .evidence {}
    .sketuveux {}

    ce qui te permet de faire des modifications plus saines ;)

    @+
     
  5. oberon
    oberon WRInaute discret
    Inscrit:
    26 Septembre 2003
    Messages:
    150
    J'aime reçus:
    0
    Je soulignerais en plus que la "classite aigue" est une erreur classique de débutants qu'on a tous faite. Je me souviens encore de mes premières feuilles de styles et de mon html avec des classes de partout...

    Le mieux est de très bien structurer son sdocument, parceque dans les faits on veut toujours styler différemment des zones de la page ou des types d'éléments.

    Il faut donc avoir des trucs comme :

    <div id="menu">
    <ul><li><a>item1</a></li>...</ul>
    </div>

    et styler par rapport à la cascade plutôt que de mettre des classes:

    #menu li {}

    Ca te permettra d'avoir un code html plus léger et une fds organisée selon la structure du document.
     
Chargement...
Similar Threads - sémantique mauvaise Forum Date
WordPress Cocon sémantique et CMS : liens menu et footer Référencement Google 18 Novembre 2019
Cocon sémantique : avis sur cocon.se Référencement Google 9 Novembre 2019
Maillage cocon sémantique Débuter en référencement 24 Septembre 2019
Balisage sémantique itemprop name / description multilingue Référencement Google 26 Juillet 2019
Fonctionnement de la méthode cocon sémantique Référencement Google 31 Mai 2019
Cocon sémantique : comment faire les liens entre les pages ? Techniques avancées de référencement 4 Mai 2019
URL cocon sémantique Débuter en référencement 10 Janvier 2019
Blog et/ou cocons sémantiques pour SEO ecommerce ? Demandes d'avis et de conseils sur vos sites 19 Octobre 2018
Elaboration d'un maillage sémantique Débuter en référencement 1 Octobre 2018
SEO - Etude Sémantique Débuter en référencement 14 Décembre 2017
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice