Simulateur : selector

---> Inspecter pour comprendre le comportement de la régle article p:nth-child(4) { border : 1px solid red; }

<article>

<p title="Strophe1" id="st"></p>

<header>

<h1></h1>

<h2></h2>

</header>

<p class="refrain"></p>

<p title="Strophe4" id="str"></p>

<p class="refrain" id="ref4"></p>

<footer> date (1880 - 1918) </footer>

</article>

Un dessin mieux qu'un long discourt !

Flex !

Lecture

Je vous conseille l'article sur la propriété flex : ↭ https://the-echoplex.net/flexyboxes/

Simulateur

Voici un outil permettant de comprendre la notion de flex !
Vous pouvez redimensionner et modifier les valeurs.

⇶ fichier

Intégrer ce simulateur dans votre blog !

Compléter le code suivant pour obtenir

   

Mesurez la puissance de flex !

Exemple :

http://html5-demos.appspot.com/static/css/flexbox/index.html

pensez à redimensionner le bloc !

Chalenge du WE

https://duponttd.blogspot.com/2016/03/test-flex.html

Cours sur flex

Voici une référence pour une lecture attentive et compléte: https://bocoup.com/blog/dive-into-flexbox

Pour un résumé un détaillé https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flex

http://dupontcss.blogspot.com/2019/06/flex-animation.html

Simulateur du chef !

Simuler les exemples du cours flex (⇇) en utilisant un des outils

off-line

in-line2  ou in-line4

Comprenez bien la distinction des propriétés sur le parent et sur les enfants du conteneur.

Travaillez pour l'instant uniquement sur les propriétés du conteneur :

Let's play flexbox

Certains d'entre vous plébiscitent l’apprentissage par le jeu : https://flexboxfroggy.com/#fr

les multi-classes : how to

Comment fonctionne la grille dans Bootstrap ? 

Que signifie :  col-xs-12 col-sm-6 col-md-2 col-lg-8 ( doc )

Examinons d'abord le comportement des classes en redimensionnant votre fenêtre.

⇜fichier

Les classes possibles

col-xs-12 col-sm-6 col-md-2 col-lg-8

col-xs-6 col-sm-6 col-md-10 col-lg-4

La classe appliquée

Flex : Pour tout comprendre

Etudier le comportement de cette page 

Rendez vous sur le site jsfiddle (éditer)
Redimensionner la fenêtre

Ma grille

Quizz 3

Quizz 2

Après le quizz 1 ( ici ) voici une mise ne bouche !

Fin du DM1

Après trois semaine de publication, fin du délai de publication.

Blog

Bravo à plusieurs d'entre vous pour l'intégration de la vidéo !

• Regardez par exemple le code du →Blog du jour

• Inspecter le code du blog de Théo Bocquet   ↔ici pour découvrir le code pour animer le texte.

J'ai pu du coup m'inspirer du code que j'ai collé dans le HTML de cet article.

CSS.

<style>    
        .textemulticolore {
            animation-name: couleurchange;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }
        
        @keyframes couleurchange {
            0% {
                color: red;
            }
            25% {
                color: yellow;
            }
            50% {
                color: blue;
            }
            100% {
                color: green;
            }
        }
    }
 </style>

HTML

<h1 class="textemulticolore"> Mon texte à moi </h1>

mon test à moi

Emmet : Challenge

Allez dans l'éditeur : https://jsfiddle.net/ (vous devez avoir créé un compte)

Dans l'onglet HTML utiliser une seule ligne d'Emmet pour obtenir

<div class="etudiant"></div>
<p class="L1"></p>

même chose pour

<div class="prof"></div>
<div id="dupont"></div>

Contrainte : Vous ne devez pas écrire div dans vos expressions !

ㄙ Intégrer la solution de Jsfiddle dans votre blog

voici le résultat : 

CSS : C'est Super Simple !

Voici le nouveau lien pour le ⍆Cours CSS

Le cours est en découpé en trois chapitres

• Style
• Sélecteur
• Topologie

Nous allons commencer par les ↠Selecteurs, car le Style est réduit à sa plus simple expression.

Quizz

Comment obtenir le texte suivant à partir d'un code HTM ?

<p> : l'élément paragraphe

a) <h1 class="title balise"><p> : l'élément paragraphe </h1>
b) <h1>&lt;p&gt; : l'élément paragraphe</h1>
c) <h1><code class="texte"><p></code> : l'élément paragraphe</h1>
d) <h1>
      <span><</span>
        p
      <span>></span>
: l'élément paragraphe</h1>
e)<h1><span><</span>p<span>></span>: l'élément paragraphe</h1>


Si vous avez répondu correctement (verifier en collant le code dans votre éditeur HTML)
allez plus loin :