Exercices sur les sélecteurs des feuilles de style CSS3

affectation d'un style sur sélecteur de répétition nth-child

Pour cet exercice :

fichier de style externe select_style.css à produire :

table,td,th {border:solid 1px black}
 
tr:nth-child(1) {
    color:#FFF;
    background-color:#633;
}
tr:nth-child(6n+2),
tr:nth-child(6n+3),
tr:nth-child(6n+4) {
    background-color:#FCC;
}
 
tr:nth-child(6n+5) {
    background-color:#FFC;
}
 
tr:nth-child(6n+6) {
    background-color:#CFC;
}
tr:nth-child(6n+7) {
    background-color:#CCF;
}
td:nth-child(0n+2),
th:nth-child(0n+2) {
    color:#F00;
}

Fichier à produire  :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Page de présentation de différents méthodes d'application de styles CSS</title>
  <style type="text/css">
    table,td,th {border:solid 1px black}
 
    tr:nth-child(1) {
      color:#FFF;
      background-color:#633;
    }
    tr:nth-child(6n+2),
    tr:nth-child(6n+3),
    tr:nth-child(6n+4) {
      background-color:#FCC;
    }
 
    tr:nth-child(6n+5) {
      background-color:#FFC;
    }
 
    tr:nth-child(6n+6) {
      background-color:#CFC;
    }
    tr:nth-child(6n+7) {
      background-color:#CCF;
    }
    td:nth-child(0n+2),
    th:nth-child(0n+2) {
      color:#F00;
    }
  </style>
</head>
<body>
   <table>
    <?php
  $ncols   = 5;
  $nligs   = 23;
  $comment = 'res = ';
  $nl = 0;
 
  for ($l=0; $l < $nligs; $l++) {
    $nl++;
    print("<tr>\n");
    for ($c=0; $c < $ncols; $c++) {
      if ($l == 0) {
         $cell = 'th';
         $text = sprintf("col %d", $c);
      } else {
         $cell = 'td';
         $text = sprintf("%s %d,%d", $comment, $l, $c);
     }
      printf("<%s>%s</%s>\n", $cell, $text, $cell);
    }
    print("</tr>\n");
  }
?>
</body>
</html>
voir le résultat

affectation d'un style suite à un fère identifiable.

Pour cet exercice :

Fichier à produire  :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de choix des feuilles de style</title>
  <style type="text/css">
    q {background-color:#FFC}
    q.ma_classe~q {background-color:#FCC}
    em:only-child {background-color:#CFC}
  </style>
</head>
<body>
    <h1>Quelques <em>citations</em> amusantes ...</h1>
    <p>
      <q>Quand les bornes sont franchies, il n'y a plus de limite.</q> Pierre Dac.<br />
      <q>On l'a retrouvé assassiné un jour, il en est mort.</q> Hugues dans Le Grand détournement - La Classe américaine.<br />
      <q>Ma patience a des limites mais il ne faut pas exagérer.</q> Fred Williamson dans White Fire.<br />
      <q>Je vais te tuer jusqu'à ce que tu sois mort !</q> Jerry Haleva alias Saddam Hussein dans Hot Shots 2.<br />
      <q class="ma_classe">Selon l'ancien code des corsaires : celui qui crève est vaincu !</q> President Thomas -Tug- Benson dans Hot Shots 2.<br />
      <q>Ce que j'ai écrit, je l'ai écrit.</q> Ponce Pilate.<br />
      <q>Quand c'est rugueux, c'est pas lisse.</q> Jacques Lanzmann<br />
      <q>Je pense que nous sommes d'accord : le passé est révolu.</q> George W. Bush.<br />
      <q>La plupart de nos importations viennent de l'étranger.</q> George W. Bush<br />
      <q>Je vais te faire pleurer jusqu'à ce que tu pleures.</q> Jamel Debbouze dans Le Boulet.<br />
      <q>Si on n'avait pas perdu une heure et quart, on serait là depuis une heure et quart.</q> Johnny Halliday.<br />
      <q>La meilleure façon de dire la vérité, c'est de ne pas mentir.</q>
      <q>Cet homme a quitté la France depuis quinze ans et depuis quinze ans il est à l'étranger.</q>
      Charles Lemontier alias Jacques II de Chabannes de La Palice dans François Ier.<br />
    </p>
    <p><cite>ces citations proviennent de <a href="http://fr.wikipedia.org/wiki/Lapalissade">Wikipedia</a></cite></p>
 
    <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>
voir le résultat

sélecteurs de cible

Pour cet exercice :

Fichier à produire  :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de choix des feuilles de style</title>
  <style type="text/css">
    *:target {background-color:#FCC}
    p:empty {
       border:solid red 2px;
       padding:1ex;
    }
  </style>
</head>
<body>
  <h1>Rappel des verbes irréguliers <em>anglais</em> ...</h1>
 
  <p></p>
 
  <p>voici un lien sur <a href="#wind">le verbe <q>wind</q></a></p>
  <p>voici un lien sur <a href="#build">le verbe <q>build</q></a></p>
 
  <table>
    <tr><td>abide</td><td>abode</td><td>abode</td><td>demeurer</td></tr> 
    <tr><td>awake</td><td>awoke</td><td>awoken</td><td>(se) réveiller, aussi awake/awoke/awoke</td></tr>
    <tr><td>be</td><td>was/were</td><td>been</td><td>être</td></tr>
    <tr><td>bear</td><td>bore</td><td>borne</td><td>porter/supporter/soutenir</td></tr> 
    <tr><td>beat</td><td>beat</td><td>beaten</td><td>battre</td></tr> 
    <tr><td>become</td><td>became</td><td>become</td><td>devenir</td></tr> 
    <tr><td>beget</td><td>begat</td><td>begotten</td><td>engendrer, aussi beget/begot/begotten</td></tr> 
    <tr><td>begin</td><td>began</td><td>begun</td><td>commencer</td></tr> 
    <tr><td>bend</td><td>bent</td><td>bent</td><td>se courber, etc.</td></tr> 
    <tr><td>bereave</td><td>bereft</td><td>bereft</td><td>déposséder/priver</td></tr> 
    <tr><td>beseech</td><td>besought</td><td>besought</td><td>supplier</td></tr> 
    <tr><td>bet</td><td>bet</td><td>bet</td><td>parier</td></tr> 
    <tr><td>bid</td><td>bade</td><td>bidden</td><td>ordonner, etc., bid/bade/bidden ou bade ou bid</td></tr> 
    <tr><td>bind</td><td>bound</td><td>bound</td><td>lier</td></tr> 
    <tr><td>bite</td><td>bit</td><td>bitten</td><td>mordre</td></tr> 
    <tr><td>bleed</td><td>bled</td><td>bled</td><td>saigner</td></tr> 
    <tr><td>blow</td><td>blew</td><td>blown</td><td>souffler</td></tr> 
    <tr><td>break</td><td>broke</td><td>broken</td><td>casser</td></tr> 
    <tr><td>breed</td><td>bred</td><td>bred</td><td>élever</td></tr> 
    <tr><td>bring</td><td>brought</td><td>brought</td><td>apporter</td></tr> 
    <tr id="build"><td>build</td><td>built</td><td>built</td><td>construire</td></tr> 
    <tr><td>burn</td><td>burnt</td><td>burnt</td><td>brûler</td></tr> 
    <tr><td>burst</td><td>burst</td><td>burst</td><td>éclater</td></tr> 
    <tr><td>buy</td><td>bought</td><td>bought</td><td>acheter</td></tr> 
    <tr><td>cast</td><td>cast</td><td>cast</td><td>jeter, etc.</td></tr> 
    <tr><td>catch</td><td>caught</td><td>caught</td><td>attraper</td></tr> 
    <tr><td>chide</td><td>chid</td><td>chidden</td><td>gronder/réprimander, aussi chide/chid/chid</td></tr> 
    <tr><td>choose</td><td>chose</td><td>chosen</td><td>choisir</td></tr> 
    <tr><td>cleave</td><td>cleft</td><td>cleft</td><td>fendre/coller, aussi cleave/clove/clove</td></tr> 
    <tr><td>cling</td><td>clung</td><td>clung</td><td>se cramponner</td></tr> 
    <tr><td>come</td><td>came</td><td>come</td><td>venir</td></tr> 
    <tr><td>cost</td><td>cost</td><td>cost</td><td>coûter</td></tr> 
    <tr><td>creep</td><td>crept</td><td>crept</td><td>ramper/se glisser/se hérisser</td></tr> 
    <tr><td>crow</td><td>crew</td><td>crowed</td><td>chanter (un coq)/jubiler</td></tr> 
    <tr><td>cut</td><td>cut</td><td>cut</td><td>couper</td></tr> 
    <tr><td>deal</td><td>dealt</td><td>dealt</td><td>distribuer/traiter</td></tr> 
    <tr><td>dig</td><td>dug</td><td>dug</td><td>bêcher</td></tr> 
    <tr><td>do</td><td>did</td><td>done</td><td>faire</td></tr> 
    <tr><td>draw</td><td>drew</td><td>drawn</td><td>tirer/dessiner</td></tr> 
    <tr><td>dream</td><td>dreamt</td><td>dreamt</td><td>rêver</td></tr> 
    <tr><td>drink</td><td>drank</td><td>drunk</td><td>boire</td></tr> 
    <tr><td>drive</td><td>drove</td><td>driven</td><td>conduire</td></tr> 
    <tr><td>dwell</td><td>dwelt</td><td>dwelt</td><td>habiter/rester</td></tr> 
    <tr><td>eat</td><td>ate</td><td>eaten</td><td>manger</td></tr> 
    <tr><td>fall</td><td>fell</td><td>fallen</td><td>tomber</td></tr> 
    <tr><td>feed</td><td>fed</td><td>fed</td><td>nourrir</td></tr> 
    <tr><td>feel</td><td>felt</td><td>felt</td><td>(se) sentir</td></tr> 
    <tr><td>fight</td><td>fought</td><td>fought</td><td>combattre</td></tr> 
    <tr><td>find</td><td>found</td><td>found</td><td>trouver</td></tr> 
    <tr><td>flee</td><td>fled</td><td>fled</td><td>fuir</td></tr> 
    <tr><td>fling</td><td>flung</td><td>flung</td><td>jeter</td></tr> 
    <tr><td>fly</td><td>flew</td><td>flown</td><td>voler</td></tr> 
    <tr><td>forbid</td><td>forbade</td><td>forbidden</td><td>interdire</td></tr> 
    <tr><td>forget</td><td>forgot</td><td>forgotten</td><td>oublier</td></tr> 
    <tr><td>forgive</td><td>forgave</td><td>forgiven</td><td>pardonner</td></tr> 
    <tr><td>forsake</td><td>forsook</td><td>forsaken</td><td>abandonner</td></tr> 
    <tr><td>freeze</td><td>froze</td><td>frozen</td><td>geler</td></tr> 
    <tr><td>get</td><td>got</td><td>got</td><td>obtenir</td></tr> 
    <tr><td>gird</td><td>girt</td><td>girt</td><td>ceindre</td></tr> 
    <tr><td>give</td><td>gave</td><td>given</td><td>donner</td></tr> 
    <tr><td>go</td><td>went</td><td>gone</td><td>aller</td></tr> 
    <tr><td>grind</td><td>ground</td><td>ground</td><td>broyer/moudre</td></tr> 
    <tr><td>grow</td><td>grew</td><td>grown</td><td>cultiver/pousser/grandir</td></tr> 
    <tr><td>hang</td><td>hung</td><td>hung</td><td>pendre, régulier si c&apos;est une forme d&apos;exécution</td></tr> 
    <tr><td>have</td><td>had</td><td>had</td><td>avoir</td></tr> 
    <tr><td>hear</td><td>heard</td><td>heard</td><td>entendre</td></tr> 
    <tr><td>heave</td><td>hove</td><td>hove</td><td>lever, etc.</td></tr> 
    <tr><td>hew</td><td>hewed</td><td>hewn</td><td>couper/tailler</td></tr> 
    <tr><td>hide</td><td>hid</td><td>hidden</td><td>(se) cacher, ou hide/hid/hid</td></tr> 
    <tr><td>hit</td><td>hit</td><td>hit</td><td>frapper</td></tr> 
    <tr><td>hold</td><td>held</td><td>held</td><td>tenir</td></tr> 
    <tr><td>hurt</td><td>hurt</td><td>hurt</td><td>nuire</td></tr> 
    <tr><td>keep</td><td>kept</td><td>kept</td><td>garder</td></tr> 
    <tr><td>kneel</td><td>knelt</td><td>knelt</td><td>s&apos;agenouiller</td></tr> 
    <tr><td>knit</td><td>knit</td><td>knit</td><td>tricoter</td></tr> 
    <tr><td>know</td><td>knew</td><td>known</td><td>savoir/connaître</td></tr> 
    <tr><td>lay</td><td>laid</td><td>laid</td><td>étendre/coucher, etc.</td></tr> 
    <tr><td>lead</td><td>led</td><td>led</td><td>mener</td></tr> 
    <tr><td>lean</td><td>leant</td><td>leant</td><td>pencher</td></tr> 
    <tr><td>leap</td><td>leapt</td><td>leapt</td><td>sauter/bondir</td></tr> 
    <tr><td>learn</td><td>learnt</td><td>learnt</td><td>apprendre</td></tr> 
    <tr><td>leave</td><td>left</td><td>left</td><td>quitter/laisser</td></tr> 
    <tr><td>lend</td><td>lent</td><td>lent</td><td>prêter</td></tr> 
    <tr><td>let</td><td>let</td><td>let</td><td>laisser/louer</td></tr> 
    <tr><td>lie</td><td>lay</td><td>lain</td><td>reposer/être couché, régulier lorsqu&apos;il signifie &apos;mentir&apos;</td></tr> 
    <tr><td>light</td><td>lit</td><td>lit</td><td>allumer</td></tr> 
    <tr><td>lose</td><td>lost</td><td>lost</td><td>perdre</td></tr> 
    <tr><td>make</td><td>made</td><td>made</td><td>faire</td></tr> 
    <tr><td>mean</td><td>meant</td><td>meant</td><td>vouloir dire/signifier</td></tr> 
    <tr><td>meet</td><td>met</td><td>met</td><td>rencontrer</td></tr> 
    <tr><td>mow</td><td>mowed</td><td>mown</td><td>faucher/tondre</td></tr> 
    <tr><td>pay</td><td>paid</td><td>paid</td><td>payer</td></tr> 
    <tr><td>prove</td><td>proved</td><td>proven</td><td>prouver, régulier d&apos;ordinaire</td></tr> 
    <tr><td>put</td><td>put</td><td>put</td><td>mettre</td></tr> 
    <tr><td>quit</td><td>quit</td><td>quit</td><td>quitter/abandonner</td></tr> 
    <tr><td>read</td><td>read</td><td>read</td><td>lire</td></tr> 
    <tr><td>rend</td><td>rent</td><td>rent</td><td>déchirer</td></tr> 
    <tr><td>rid</td><td>rid</td><td>ridden</td><td>se débarrasser, aussi rid/ridded/rid</td></tr> 
    <tr><td>ride</td><td>rode</td><td>ridden</td><td>monter (cheval, etc.)</td></tr> 
    <tr><td>ring</td><td>rang</td><td>rung</td><td>sonner/résonner</td></tr> 
    <tr><td>rise</td><td>rose</td><td>risen</td><td>se lever</td></tr> 
    <tr><td>run</td><td>ran</td><td>run</td><td>courir</td></tr> 
    <tr><td>saw</td><td>sawed</td><td>sawn</td><td>scier</td></tr> 
    <tr><td>say</td><td>said</td><td>said</td><td>dire</td></tr> 
    <tr><td>see</td><td>saw</td><td>seen</td><td>voir</td></tr> 
    <tr><td>seek</td><td>sought</td><td>sought</td><td>chercher</td></tr> 
    <tr><td>sell</td><td>sold</td><td>sold</td><td>vendre</td></tr> 
    <tr><td>send</td><td>sent</td><td>sent</td><td>envoyer</td></tr> 
    <tr><td>set</td><td>set</td><td>set</td><td>mettre, etc.</td></tr> 
    <tr><td>sew</td><td>sewed</td><td>sewn</td><td>coudre</td></tr> 
    <tr><td>shake</td><td>shook</td><td>shaken</td><td>secouer</td></tr> 
    <tr><td>shear</td><td>sheared</td><td>shorn</td><td>tondre</td></tr> 
    <tr><td>shed</td><td>shed</td><td>shed</td><td>perdre (feuilles)/laisser tomber (larmes/sang), etc.</td></tr> 
    <tr><td>shine</td><td>shone</td><td>shone</td><td>briller</td></tr> 
    <tr><td>shoe</td><td>shod</td><td>shod</td><td>chausser</td></tr> 
    <tr><td>shoot</td><td>shot</td><td>shot</td><td>tirer/tuer par balle/filmer, etc.</td></tr> 
    <tr><td>show</td><td>showed</td><td>shown</td><td>montrer</td></tr> 
    <tr><td>shrink</td><td>shrank</td><td>shrunk</td><td>(se) contracter/(se) rétrécir, aussi shrink/shrunk/shrunk</td></tr> 
    <tr><td>shrive</td><td>shrove</td><td>shriven</td><td>absoudre</td></tr> 
    <tr><td>shut</td><td>shut</td><td>shut</td><td>fermer</td></tr> 
    <tr><td>sing</td><td>sang</td><td>sung</td><td>chanter</td></tr> 
    <tr><td>sink</td><td>sank</td><td>sunk</td><td>enfoncer/couler, etc., aussi sink/sunk/sunk</td></tr> 
    <tr><td>sit</td><td>sat</td><td>sat</td><td>s&apos;asseoir, etc.</td></tr> 
    <tr><td>slay</td><td>slew</td><td>slain</td><td>tuer</td></tr> 
    <tr><td>sleep</td><td>slept</td><td>slept</td><td>dormir</td></tr> 
    <tr><td>slide</td><td>slid</td><td>slid</td><td>glisser</td></tr> 
    <tr><td>sling</td><td>slung</td><td>slung</td><td>lancer</td></tr> 
    <tr><td>slink</td><td>slunk</td><td>slunk</td><td>aller furtivement</td></tr> 
    <tr><td>slit</td><td>slit</td><td>slit</td><td>(se) fendre</td></tr> 
    <tr><td>smell</td><td>smelt</td><td>smelt</td><td>sentir/flairer</td></tr> 
    <tr><td>smite</td><td>smote</td><td>smitten</td><td>frapper/vaincre</td></tr> 
    <tr><td>sow</td><td>sowed</td><td>sown</td><td>semer</td></tr> 
    <tr><td>speak</td><td>spoke</td><td>spoken</td><td>parler</td></tr> 
    <tr><td>speed</td><td>sped</td><td>sped</td><td>se presser</td></tr> 
    <tr><td>spell</td><td>spelt</td><td>spelt</td><td>épeler/orthographier</td></tr> 
    <tr><td>spend</td><td>spent</td><td>spent</td><td>dépenser</td></tr> 
    <tr><td>spill</td><td>spilt</td><td>spilt</td><td>(se) renverser/(se) répandre</td></tr> 
    <tr><td>spin</td><td>span</td><td>spun</td><td>faire tourner/filer, aussi spin/spun/spun</td></tr> 
    <tr><td>spit</td><td>spat</td><td>spat</td><td>cracher, aussi spit/spit/spit</td></tr> 
    <tr><td>split</td><td>split</td><td>split</td><td>(se) fendre</td></tr> 
    <tr><td>spoil</td><td>spoilt</td><td>spoilt</td><td>abîmer/gâter, etc.</td></tr> 
    <tr><td>spread</td><td>spread</td><td>spread</td><td>étendre</td></tr> 
    <tr><td>spring</td><td>sprang</td><td>sprung</td><td>bondir, aussi spring/sprung/sprung</td></tr> 
    <tr><td>stand</td><td>stood</td><td>stood</td><td>être debout</td></tr> 
    <tr><td>stave</td><td>stove</td><td>stove</td><td>défoncer/crever</td></tr> 
    <tr><td>steal</td><td>stole</td><td>stolen</td><td>voler</td></tr> 
    <tr><td>stick</td><td>stuck</td><td>stuck</td><td>coller</td></tr> 
    <tr><td>sting</td><td>stung</td><td>stung</td><td>piquer/brûler</td></tr> 
    <tr><td>stink</td><td>stank</td><td>stunk</td><td>puer, aussi stink/stunk/stunk</td></tr> 
    <tr><td>strew</td><td>strew</td><td>strewn</td><td>semer/joncher</td></tr> 
    <tr><td>stride</td><td>strode</td><td>stridden</td><td>marcher à grands pas, aussi stride/strode/strode</td></tr> 
    <tr><td>strike</td><td>struck</td><td>struck</td><td>frapper/se mettre en grève</td></tr> 
    <tr><td>string</td><td>strung</td><td>strung</td><td>ficeler, etc.</td></tr> 
    <tr><td>strive</td><td>strove</td><td>striven</td><td>s&apos;efforcer</td></tr> 
    <tr><td>swear</td><td>swore</td><td>sworn</td><td>jurer</td></tr> 
    <tr><td>sweep</td><td>swept</td><td>swept</td><td>balayer</td></tr> 
    <tr><td>swell</td><td>swelled</td><td>swollen</td><td>gonfler</td></tr> 
    <tr><td>swim</td><td>swam</td><td>swum</td><td>nager</td></tr> 
    <tr><td>swing</td><td>swung</td><td>swung</td><td>balancer</td></tr> 
    <tr><td>take</td><td>took</td><td>taken</td><td>prendre</td></tr> 
    <tr><td>teach</td><td>taught</td><td>taught</td><td>enseigner</td></tr> 
    <tr><td>tear</td><td>tore</td><td>torn</td><td>déchirer</td></tr> 
    <tr><td>tell</td><td>told</td><td>told</td><td>raconter</td></tr> 
    <tr><td>think</td><td>thought</td><td>thought</td><td>penser</td></tr> 
    <tr><td>thrive</td><td>throve</td><td>thriven</td><td>prospérer</td></tr> 
    <tr><td>throw</td><td>threw</td><td>thrown</td><td>jeter</td></tr> 
    <tr><td>thrust</td><td>thrust</td><td>thrust</td><td>pousser</td></tr> 
    <tr><td>tread</td><td>trod</td><td>trodden</td><td>piétiner/fouler/marcher</td></tr> 
    <tr><td>understand</td><td>understood</td><td>understood</td><td>comprendre</td></tr> 
    <tr><td>wake</td><td>woke</td><td>woken</td><td>(se) réveiller/(se) ranimer, aussi wake/woke/woke; régulier s&apos;il s&apos;agit d&apos;un rite funéraire</td></tr> 
    <tr><td>wear</td><td>wore</td><td>worn</td><td>porter/user</td></tr> 
    <tr><td>weave</td><td>wove</td><td>woven</td><td>tisser/tresser/tituber</td></tr> 
    <tr><td>wed</td><td>wed</td><td>wed</td><td>épouser/marier</td></tr> 
    <tr><td>weep</td><td>wept</td><td>wept</td><td>pleurer</td></tr> 
    <tr><td>wet</td><td>wet</td><td>wet</td><td>mouiller</td></tr> 
    <tr><td>win</td><td>won</td><td>won</td><td>gagner</td></tr> 
    <tr id="wind"><td>wind</td><td>wound</td><td>wound</td><td>remonter, etc.</td></tr> 
    <tr><td>wring</td><td>wrung</td><td>wrung</td><td>tordre</td></tr> 
    <tr><td>write</td><td>wrote</td><td>written</td><td>écrire</td></tr> 
  </table>
 
    <p>voici un lien sur <a href="#wind">le verbe <q>wind</q></a></p>
    <p>voici un lien sur <a href="#build">le verbe <q>build</q></a></p>
 
    <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>
voir le résultat

sélecteurs d'éléments dans l'état indeterminé/sélectionné/activé/...

Écrire une page web présentant un formulaire dans lequels sont :

attribuer un style aux éléments indeterminés.

attribuer un style aux éléments sélectionnés.

attribuer un style aux éléments activés.

attribuer un style aux éléments inactivés.

Fichier à produire  :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de choix des feuilles de style</title>
  <style type="text/css">
    input:indeterminate {background-color:#F00}
    input:checked {background-color:#0F0}
    input:selected {background-color:#00F}
    input:enabled {background-color:#FF0}
    input:disabled {background-color:#F0F}
  </style>
</head>
<body>
    <h1>Test des des pseudoclasses état</h1>
    <form action="">
      <input type="radio" name="rd" val="v1"/>
      <input type="radio" name="rd" val="v2"/>
      <input type="radio" name="rd" val="v3"/>
      <input type="radio" name="rd" val="v4"/>
 
      <input type="checkbox" name="ck" val="v1"/>
      <input type="checkbox" name="ck" val="v2"/>
      <input type="checkbox" name="ck" val="v3"/>
      <input type="checkbox" name="ck" val="v4"/>
    </form>
    <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>
voir le résultat

sélecteurs de contenu et de sélection

Pour cet exercice :

Fichier à produire  :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de choix des feuilles de style</title>
  <style type="text/css">
    dt:contains("ad") {background-color:#CFC}
    dd:contains("ciel") {background-color:#FCC}
    dt::selection {background-color:#FF0}
    dd::selection {background-color:#F0F}
  </style>
</head>
<body>
    <h1>Petit exercice <em>de style</em> sur les contenus ...</h1>
    <dl>
      <dt>A bene placito</dt>
      <dd>À votre bon cœur ; selon votre bon plaisir. </dd>
      <dt>A bove ante, ab asino retro, a stulto undique caveto</dt>
      <dd>Prends garde au bœuf par devant, à l'âne par derrière, à l'imbécile par tous les côtés. </dd>
      <dt>A bove majore discit arare minor</dt>
      <dd>Du vieux bœuf, le jeune bœuf apprend à labourer. </dd>
      <dt>A cælo usque ad centrum</dt>
      <dd>Du ciel au centre (de la Terre). Ancien principe de droit selon lequel Cuius est solum eius est usque ad coelum et ad inferos :
	Au propriétaire du sol revient tout ce qui est jusqu'au ciel et tout ce qui est jusqu'au centre de la Terre. </dd>
      <dt>A cane non magno sæpe tenetur aper</dt>
      <dd>Souvent le sanglier est arrêté par le petit chien. Ovide, Remèdes à l'amour.</dd>
      <dt>A capite ad calcem</dt>
      <dd>De la tête au talon ; de haut en bas. En français, la locution correspondante est "De la tête aux pieds".</dd>
    </dl>
 
    <p><cite>ces citations proviennent de <a href="http://fr.wikipedia.org/wiki/Lapalissade">Wikipedia</a></cite></p>
 
    <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>
voir le résultat

sélecteurs de négation

Pour cet exercice :

Fichier à produire  :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Exemple de choix des feuilles de style</title>
  <style type="text/css">
    dt:not(.la_classe) {background-color:#FCC}
    dd:not(#mon_id) {background-color:#CFC}
  </style>
</head>
<body>
  <h1>Quelques citations <em>grecques</em>...</h1>
 
  <dl>
    <dt>Pantwn crhmatwn metron estin anqropoV (ProtagoraV)</dt>
    <dd>L'homme est la plus petite de toutes les choses</dd>
    <dt>AnqropoV fusei politikon Zwon (AristotgV)</dt>
    <dd>L'homme est par nature est animal politique</dd>
    <dt class="la_classe">NomiZw einani qeouV kai ouk eimi aqeoV - SwkrathV, Platon</dt>
    <dd id="mon_id">Je crois qu'il y a des dieux, et je ne suis pas athée.</dd>
    <dt>ZeuV frontizei brotwn</dt>
    <dd>Zeus se soucie des mortels.</dd>
    <dt>KaloV kronoV anhlwsen</dt>
    <dd>Le temps détruit la beauté</dd>
    <dt>O kronoV didaskei touV anqropouV</dt>
    <dd>Le temps enseigne les hommes</dd>
    <dt>Krinei filouV o cairoV (MhnandroV)</dt>
    <dd>C'est dans le malheur que l'on compte ses amis (l'occasion juge les amis)</dd>
  </dl>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>
voir le résultat
pages validées par Valid XHTML 1.1 CSS validé !