Pages

quizz

balise area

https://vincennes1900.blogspot.fr/2017/12/les-sites-historiques-de-pathe.html

Quizz

quizz

Quizz

révision Sélecteurs




Niveau avancé :
position and Co

display

float

la notion de conteneur !
absolute

display : de base

en action !

CAS contrait d'utilisation des selecteurs

Code source

Étudions le fichier suivant Source ( voir détails )

Améliorations du code

Nous pouvons observer que nous avons factorisé les propriétés communes dans une même classe item et utilisé une classe spécifique "word" et "ppt" pour définir l'image de l'icône. 

 Cette conception facilite la maintenance du code.


Mais, comment modifier le css pour réduire le code HTML à 
<body>
 <div class="window">
<div class="titlebar">
...
</div>
<div class="contents">
<a href="pos/pos.doc"> posit</a> 
<a href="position.html"> bloc</a> 
<a href="bureau/bur.doc"> bureau</a> 
<a href="imprimer/index.html">Impression</a> 
<a href="menu/menu.ppt"> Menu </a> 
<a href="dir">Folder </a> 
<a href="page/page.doc"> page </a> 
<a href="newpage.html"> page tout en 1</a> 
<a href="lien/lien.html"> liens </a>
</div>
<a href="cour.ppt"> cour </a>
</div>
</body>

Les sélecteurs de base ! HOW TO

Nous allons revenir sur plusieurs sélecteurs.

First-child



Le comportement est celui attendu.

JS Bin

First-of-type


JS Bin

Pour comprendre la différence entre ces deux sélecteurs, il suffirait d'introduire une balise </br> pour modifier l’arborescence.

JS Bin
JS Bin

Attention au comportement de JSbin.


Il s’avère nécessaire de lancer  Run with JS  pour obtenir le résultat attendu.

JS Bin

Attention : 

écrire la règle
/*test 5*/

:not(:last-child){
  color : red;
}

le résultat n'est pas celui attendu : vérifier avec F12, le type du dernier enfant.

:first-child

Objectif

L'utilisation des speudo-classes first (lire le commentaire) est particulièrement efficace dans la construction de menu. Elle permet de distinguer le premier élément de la liste et de lui affecter un style particulier.

 La figure ci-dessus montre le résultat de l'application d'un bord arrondi au lien du premier élément de la liste du menu.
nav li:first-child a {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 0;
}

Fichier pour tester les selecteurs

Fichier Test


Entraînez vous ( ici )

Test : selector

JS Bin on jsbin.com

Quizz !

A. La balise <img> est une balise

  1. block-img
  2. in-line
  3. show
  4. visible-block

B. Les balises <p> <h1> <a> sont

  1. des balises in-line
  2. des balises blocs
  3. une balise est de type iblocs
  4. deux balises sont de type blocs

C. Une balise p peut contenir une balise

  1.  des balises in-line
  2.  des balises bloc
  3.  la balise <p>
  4.  autre

D. une expression est elle invalide?

  1.  <div><ul><ul><li></li></ul></ul></div>
  2.  <ul><li><ul></ul></li></ul><div></div>
  3.  <div><ul><li><ul></ul></li></ul></div>

E. Quelle est la syntaxe correcte pour insérer un lien hypertexte ?

  1. <a name="http://www.w3schools.com">W3Schools.com</a>
  2. <a url="http://www.w3schools.com">W3Schools.com</a>
  3. <a href="http://www.w3schools.com">W3Schools</a>
  4. <a>http://www.w3schools.com</a>

F. Entre quelles autres balises les balises <link> se trouvent-elles ?

  1. <body> </body>
  2. <head> </head>
  3. <title> </title>
  4. <script> </script>

G. Quelle balise permet d’aller à la ligne ?

  1. <b>
  2. <b />
  3. <br>
  4. <br />

H. Comment insérer une image ?

  1. <img src = "image.png">
  2. <img href = "image.png">
  3. <a img = "image.png">
  4. <div img = "image.png">
Inscription à : Articles (Atom)