semaine 10
Cours | Cours FLEX : après le placement vient le temps de la flexibilité QCM à 8H30 |
TD/ DM | |
QCM | 8H30 sur e-campus |
QCM
Pour révision du QCM du 31
La question suivante est inspirée des exemples de Mozilla.
Pour télécharger ces exemples : vidéo
@Sans modifier le HTML :
| <ul> | ||
| <li><a href="">Home</a></li> | ||
| <li><a href="">Category</a></li> | ||
| <li><a href="">Sub-Category</a></li> | ||
| <li><span aria-current="page">Product</span></li> | ||
|
Pour comprendre la différence entre inline et inline-block, je vous propose d'écrire :
li {
display:inline;
border:1px solid;
width:200px;
}
et ensuite
li {
display:inline-block;
border:1px solid;
width:200px;
}
Nous verrons l'intérêt de donner, comme sur l'exemple de Mozilla, au conteneur ul la propriété display:flex.
@Qui sélectionne le dernier p
- .Y.Z
- p ~ p + p ~ p
- p.YZ
- p
- #last.Z
- div ~ article :nth-of-type(4)
- article > p#last\.Z
- p.last-child
Bonnes réponses :
1. sélectionne les balises de classe Y et Z donc le dernier p
2. le dernier p a un précédent p qui a un précédent immédiat p qui a un précédent p
6. le dernier p est en 4 position dans un article qui a un div comme précédent.
7. recherche du dernier p par son identifiant last.Z (attention au .)
Pour
3. il faudrait que la classe du dernier p soit class="YZ"
5) cela sélectionnerait un id de nom #last avec la classe Z, la bonne écriture est #last\.Z. Il faut éviter des noms d’identifiant avec un point, sinon, il faut les echapper par l'utilisation de \.
8) la bonne réponse serait p:last-child et non p de classe last-child.
@<li>Item 1</li>
<li data-code="codeA">Item 2</li>
<li data-code="codeA codeB">Item 3</li>
<li data-code="codeAB">Item 4</li>
Quel sélecteur d'attribut permet de sélectionner les items possédant l'attribut data-code="codeA" ( à savoir les Item = 2 et 3)
La réponse est [data-code~="codeA"]
si vous mettez [data-code*="codeA"], nous aurions également item4.
li[data-code="codeA"] ne sélectionne que Item2.
Entrainement :Auto-revision
GitHub
🆒How to : Après avoir cloné https://github.com/mdn/css-examples.git .
🔩Lancez le server sur /learn/selectors/attribute.html.
Vous testerez, par exemple, votre compréhension des sélecteurs d'attribut.
Correction : menu déroulant
Correction
Voici un exemple de code pour le projet : menu déroulant.
💥Travail personnel
Modifier le CSS pour afficher des menus doublement imbriqués puis modifiez le CSS.
https://codepen.io/dupontcodepen/pen/oNYGGWB
first-chid : how to
En cours, j'ai insisté sur le fait que les sélecteurs doivent répondre à une problématique précise.
Nous allons découvrir l'intérêt de disposer du sélecteur first-child
L'utilisation des speudo-classes first 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 premier <a> 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;}
Semaine 7
Un point sur le TD menu :
Nous avons mis l'accent la semaine dernière sur les prérequis indispensables au projet.
Nous devons être capable d'analyser la problématique et de déterminer les techniques utiles au projet.
Nous devrions être capable d'implémenter le code HTML et CSS.
Inscription à :
Articles (Atom)