4. Sélecteurs pour HTML

Exemple 4-1: Quelques usages de div

• http://tecfa.unige.ch/guides/css/ex/simple-div-span.html

<div style="color: blue">

      <h1>L'influence d'un div tag qui aime le bleu</h1>

      <P>

           	bla bla bla

      </P>

</div>

Exemple 4-2: Faire des backgrounds

• http://tecfa.unige.ch/guides/css/ex/simple-div2.html

    <style>

      div.important {

        background: rgb(204,204,255);

        padding: 0.5em; border: none;

      }

    </style>

Exemple 4-3: Simple utilisation d'un sélecteur contextuel

• http://tecfa.unige.ch/guides/css/ex/simple-css5.html

   <STYLE type="text/css">

      <!--

      P strong 	{color: red;}

      -->

    </STYLE>

......

   <P>

      Ceci est un paragraph avec un <strong> strong modifié </strong>.

En d'autres terme cela permet de redéfinir de façon simple le rendering

de certaines balises "logiques" comme <em> ou <strong>.

    </P>

A. Pseudo-éléments

• permettent d'identifier des éléments non-balisés (comme la première lettre ou la première ligne)
• Marche avec les navigateurs IE 5.5 (à confirmer) et Mozilla

Exemple 4-4: Pseudo-sélecteurs

• http://tecfa.unige.ch/guides/css/ex/pseudo-selectors.html

    <style>

      P:first-letter { font-size: 500%; color: green }

      P:first-line { color: green }

    </style>

B. Pseudo-classes

• Pour rendre plus difficile les liens:

A:link { color : white }

A:visited { color : yellow }

A:active {color : red }

A. Les sélecteurs "class"

• Mécanisme puissant pour:
• définir de classes de contenu (indépendamment des balises)
• pour différencier plusieurs variantes d'une même balise

Exemple 4-5: Classes dans une simple feuille de style

• http://tecfa.unige.ch/guides/css/ex/simple-css2.html

 <STYLE type="text/css">

   P.intro 	{color: blue; margin-left: 4em; margin-right: 2em;}

   .default  {margin-left: 2em;}	

  </STYLE>

......

 <p class="intro">

      Après des années de bricolage infâme ....

    </p>

<p class="default">

   bla bla

</p>

<pre class="default">

   notre classe default marche partout, même pour un para préformaté

</pre>