html-css/11_selecteur.html at master · lanitro/html-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>selecteur</title>
    <link rel="stylesheet" href="css/11_selecteur.css">
</head>
<body>
    <!--nav>a*5-->
    <nav>
        <a href="">accueil</a>
        <a href="">editor</a>
        <a href="">panier</a>
        <a href="">FAQ</a>
        <a href="">contact</a>
    </nav>
    <div>
<article>

    <h4><strong>aide memoire des selecteurs CSS déja vus</strong></h4>

    <p>

    <ul>


        <li><mark>*</mark> selectionne tous les elements de la page HTML</li>
        <li><mark>.ma-jolie-nav</mark>selectionne tous les elements ayant le nom ayant le nom de class "ma-jolie-nav</li>
        <li> <mark>#mon-unique-id</mark>selectionne tout les éléments ayant le nom de mon id "mon-unique-id"</li>
        <li><mark>nav a</mark>selectionne les liens a inclus/imbriqué dans la balise  nav </li>
        <li>nav a: <mark>hover</mark> selectionne tous les tous les liens de la nav et active une animation lors du survol de la souris</li>
    </ul>
    </p>
    </article>

    <div id="mauve">
        <article class="b1">
            <p>
                <strong>proprieté CSS utilisé dans cette page</strong>
                <p>
                    <strong>decrivez leur usages et leurs valeurs possible</strong>
                </p>

                <ol>
                    <li>background: couleur du fond de l'element</li>
                    <li> color: couleur de la police</li>
                    <li>float: effet flottant</li>
                    <li>font-family: police</li>
                    <li>font-size: taille de la police</li>
                    <li>height: hauteur de l'element</li>
                    <li>left: position a partir de la gauche de la fenetre</li>
                    <li>line height: hauteur de l'interligne</li>
                    <li>margin: marge exterieur</li>
                    <li>padding: marge interieur</li>
                    <li>position: position de l'element dans la page (on a utilisé que la valeur (fixed) pour l'instant</li>
                    <li>text-align: alignement du texte</li>
                    <li>text-decoration: changement des valeurs herités (ici le souligné qui est standard pour les liens sous tous les
                        navigateurs est supprimé)</li>
                    <li>top: position a partir du haut de la fenetre</li>
                    <li>transition: temps de transition lors d'une animation (ici sur les liens de la barre de menu)</li>
                    <li>width: largeur de l'element par rapport a la taille de la fenetre si on indique une valeur relative (%, em)</li>

                </ol>


            </p>
        </article>

        <article class="b2">

            <p>
                <strong>proprieté CSS a rechercher</strong>
            </p>

            <p>
                <strong>rechercher les propriétés ci-dessous, faites des test avec sur cette page depuis la console de debuggage pour tester
                    les valeurs qu'elles peuvent prendre</strong>
            </p>


            <ol>
                <li>font-weight:</li>
                <li>letter-spacing:</li>
                <li>word-spacing:</li>
                <li>text-shadow:</li>
                <li>background-image:</li>
                <li>background-size:</li>
                <li>opacity:</li>
                <li>border-style:</li>
                <li>box-shadow:</li>
                <li>list-style-image:</li>
                <li>border</li>
                <li>border-radius</li>
                <li>border-width:</li>
                <li>font-variant:</li>
                <li>background-color:</li>
                <li>!important:</li>
            </ol>

        </article>
        <div class="clear"></div>
    </div>
<article>
<section class="container container4">
    <h3>Pour aller plus loin en CSS, quelques pistes...</h3>
    <ul>
        <li>
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN le site officiel</a>
        </li>
        <li>
            <a href="https://tympanus.net/codrops/">Codrops, références, tutos...</a>
        </li>
        <li>
            <a href="https://flukeout.github.io/">Jeu avec les sélecteurs CSS</a>
        </li>
        <li>
            <a href="http://flexboxfroggy.com/">Un autre jeu sur le système des "Flexbox"</a>
        </li>
        <li>
            <a href="http://viewportsizes.com/">Différentes tailles d'écrans</a>
        </li>
        <li>
            <a href="http://fr.learnlayout.com/">Tutos simples en français</a>
        </li>
        <li>
            <a href="https://purecss.io">Encore des tutos</a>
        </li>
        <li>
            <a href="https://www.w3c.org/Style/CSS/learning">Le site du W3C (partie CSS)</a>
        </li>
    </ul>
</section>
</article>
    </div>
</body>
</html>