• examiner un élément de la page et trouver son sélecteur

    Bon! Chuis pas là pour vous faire un cours de HTML/CSS, j'en serais bien incapable mais
    Vu que le sujet de l'article est "trouver un sélecteur", pour ceux qui ne savent pas ce qu'est un sélecteur,
    une rapide explication s'impose  ( les autres, vous zappez !)

    Une page web est au format  HTML = HyperText Markup Language.
    Le HTML est donc un langage qui permet d'écrire des pages internet à l'aide  de balises - en anglais: Markup-comme par exemple <p>qui indique qu'un paragraphe débute.

    Le fichier HTML = le contenu de la page web. Il détient la structure et le message à afficher mais en quelque sorte à l'état brut. 

    Ainsi, concernant la forme, les couleurs, les dimensions, le style quoi ! c'est le CSS qui s'en charge.
    CSS = Cascading Style Sheets = feuille de style en cascade.


    Le HTML,on l'a vu, assure le balisage du contenu  avec des balises du genre <p> <div id="boubou"> ou <div class="coucou> ouverture balises et </p></div> fermeture balise afin de regrouper des éléments de la page

    Le CSS, lui, il parle comme ça:

    sélecteur {
    propriété1: valeur1;
    propriété2: valeur2;
    propriétén: valeurn; }


    Mè-z alor ! ... Comment sont les relations ?  
    Au beau fixe, ne vous inquiétez pas ...
    Bon, on a dit rapide ;-) on s'y tient et on reprend notre petit exemple de paragraphe:

    Quand le html, il dit ça: <p>bla bla bla blablabla</p>  
    si on veut que le blabla s' affiche en arial rouge et de 14pixels
    le CSS, lui, il dit ça

    p{
    font-family: arial;
    font-size: 14px;
    color: red;}

    Et le navigateur, qui comprend tout et bin, il affiche le bla bla bla blablabla  en police Arial, avec la taille de 14px et en rouge, se vous plait.

    Bon, on va traverser sans se mouiller la cascade et arriver direct sur:
    Quand le html, il dit ça
    <div id="boubou">
    Pour mettre une bordure blanche de 4px d'épaisseur  autour de boubou (id),  le CSS dit
    #boubou{
    border: solid 4px white}

    et si on veut tous les coucou(class) en italique, 
    le CSS est 
    .coucou {
    font-style: italic;}

    En clair,

    Si html  <div id=“nomid“>contenu</div>
    alors CSS
    #nomid{
    propriété1: valeur1;
    propriété2: valeur2;}

    Si html  <div class=“nomclass“>contenu</div>
    alors CSS
    .nomclass{
    propriété1: valeur1;
    propriété2: valeur2;}

     

    Bon ! c'est un peu plus complexe que cela mais j'ai dit  "on fait court !"
    Pour ceux qui veulent appronfondir: http://www.yoyodesign.org/doc/w3c/css2/selector.html

    Et revenons à nos moutons:

    Pour inspecter ou examiner un élément de la page, on fait "clic droit" sur une partie de la page.

    EXEMPLE: 
    Je clique droit sur le titre du blog dans mon en tête.
    Dans la fenêtre de dialogue avec le navigateur qui vient de s'ouvrir en surimpression sur la page du blog,
    Je choisis "examiner l'élément" avec firefox ou "inspecteur l'élément " avec chrome .
    En bas de l'écran, s'ouvre l'outil du navigateur qui fait apparaitre dans la grande colonne de gauche, le html de la page à l'écran et dans la petite colonne de droite le CSS.

    Capture d'écran avec Chrome:  clic sur image pour agrandir

    examiner un élément de la page et trouver son sélecteur

     

     

     Donc comme j'ai cliqué/droit sur "le bleu lézard tests", c'est cette ligne de code html qui est surlignée.

    Dans le cas présent, il s'agit d'un lien ( puisque cliquable vers la page d'accueil) et donc le texte est entre des balises html lien c'est à dire <a>le bleu lézard tests</a>


    Cette ligne de code se trouve entourée d'une balise div ayant un attribut  id  qui porte le nom  titre_header:


    <div id="titre_header"><a href="/" rel="home">Le bleu lézard  tests personnaliser son blog </a></div>

    Ainsi, le sélecteur pour appliquer un style à ce lien est;


    #titre_header a

    (on peut vérifier la présence dans la colonne CSS de droite de ce sélecteur et du style actuel attribué).

    Autre exemple avec un module du menu1: clic sur image pour agrandir

    examiner un élément de la page et trouver son sélecteur

     

    je clique/droit sur "les menus".
    la ligne de code html surlignée m'indique que l'élément "les menus" est un attribut id qui porte le nom module_menu142132528
    Ainsi son sélecteur est
    #module_menu142132528

     

    Voili, Voilou

     

     

    Papasti a fait un superbe travail, la page sélecteur EklaBlog

    « Module de liens amis défilant molette sourisModule menu contenu caché déroulant survol souris sur le titre »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    Aucun commentaire pour le moment



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl