Inspecter
Plan
Plan
TD 5 : inspection
Apprenez à inspecter :
https://microsoftedge.github.io/Demos/devtools-css-get-started/
1-
inspecter l’élément Inspect Me!
recopier dans les inputs la valeur de data-message et la valeur du padding de la classe aloha
inspecter Add A Background Color To Me! et ajouter background-color:honeydew
3-
inspecter Add A Class To Me! et ajouter la classe color_me
4-
passez sur l’élément Hover Over Me!
Simuler un "over permanant" (la couleur doit rester bleu sans que votre souris soit sur l'élément)
5-
inspecter l’élément Change My Margin!
Donner une nouvelle valeur de marge :
element.style
- margin-left:
}
first-chid : how to
En cours et TD, 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;}
inline/block
Certains se posent la question sur la largeur des paragraphes !
Voici quelques informations.
Voici des exemples sur le comportement display:bloc
Cours 5 : inspecteur !
Nous allons apprendre cette semaine quelques astuces avec l'inspecteur !
https://tympanus.net/Tutorials/CaptionHoverEffects/index2.html
Devoir maison :
GitHub : https://github.com/dupontdenis/DM-bug
TD 4 : sélecteurs
Sélecteurs
Vidéos
https://sites.google.com/view/duponthtml/selecteurs?authuser=0
Cours
http://dupontcss.blogspot.com/p/selecteurs.html
Exemple de vidéo
Des outils sont disponibles pour simuler du CSS : Exemples
TD Sélecteurs
Représentation Interne
Soit le HTML suivant
<body>
<p class="premier">Para 1</p>
<p><em>second </em> Para 2</p>
<p id="dernier"> dernier Para</p>
<!-- je suis un commentaire -->
</body>
On peut retrouver une représentation suivante !
JS Bin
<body>
<p class="premier">Para 1</p>
<p><em>second </em> Para 2</p>
<p id="dernier"> dernier Para</p>
<!-- je suis un commentaire -->
</body>
On peut retrouver une représentation suivante !
TD 3 : les attributs
Merci de regarder la vidéo pour préparer votre TD de la semaine prochaine.
Charger l'image : https://www.ibisc.univ-evry.fr/~dupont/47.jpg
Dans le fichier HTML, vous mettrez dans la balise style de head
<head>
...
<style>
html {
scroll-behavior: smooth;
}
#partie_definition {
background-color: yellow;
}
</style>
</head>
Code du cours 3
Voici le code vue en cours
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="special">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</body>
</html>
#special li::marker {
content: '🕒';
}
DM : travail perso
Vous pouvez travailler le cours en groupe en utilisant un éditeur en cloud.
Voici un exemple : https://docs.google.com/document/d/1Qo0aQk0vLeIGjE-N-95N4iht1PF-TcSIi7hvohsdtOA/edit?usp=sharing
les catégories des balises
Les balises sont regroupées par thèmes.
Voici deux liens sur ce classement
Inscription à :
Articles (Atom)