HTML-CSS/11_selecteurs.html at master · allmight02/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
139
140
141
142
143
144
145
<html lang="fr">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Selecteur</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="CSS/11_selecteurs.css" />
</head>

<body>
    <!-- nav>a* -->
<nav>
    <a href="">Accueil</a>
    <a href="">Editor</a>
    <a href="">Panier</a>
    <a href="">FAQ</a>
    <a href="">Contact</a>
</nav>

    <div>
        <article>

            <p>
                <h5>
                    <strong>Aide memoire des selecteur CSS déja vus</strong>
                </h5>
                <ul>
                    <li>
                        <mark>*</mark>sélectionne TOUS les élément de la page html</li>
                        <li>
                            <mark>ma-jolie-nav</mark> sélectionne tous les élément ayant le nom class "ma-jolie-nav"
                        </li>
                        <li>
                            <mark>#mon-unique-id</mark> séléctionne toutes les éléments ayant le nom de mon id"mon-unique-id
                        </li>
                        <li>
                            <mark>div.article.aside</mark> sélectionne toutes les balises <,div><;artile>ET<,aside>
                        </li>
                        <li> <mark>nav a</mark> selectionne les liens >a< inclus /imbriques dan sla balise <,nav></li>
                        <li>
                            nav a<mark>:hover</mark>> sélectionne tous les liens de la nav et active une animation lors d'un survol de la souris
                        </li>
                </ul>
            </p>
        </article>

<main>
    <div id="c">
        <article>
            <h5><strong>Propriétes CSS utilisées dans cette page</strong></h5>
            <h6><strong>Décrivez leur usage et leurs valeurs possibles</strong></h6>
            <br>
            <ol>
                <li>background:couleur du fond de l'élément</li>
                <li>color: couleur de la police</li>
                <li>float:effet flottant</li>
                <li>height: hauteur de l'élément</li>
                <li>left: position à partir de la gauche de la fenetre</li>
                <li>line-heitght: hauteur de l'inter ligne</li>
                <li>margin : marges extérieurs</li>
                <li>padding: marges interieur </li>
                <li>position: position de l'élément dan sla page (on n'a utilisé que la valeur (fixed)pour l'instant</li>
                <li>text-align:alignement du texte</li>
                <li>text décoration : changement des valeurs héritées(ici le souligné qui est standard pour les liens sous tous les navigateurs est supprimé)</li>
                <li>top : position à partir du haut de la fenetre</li>
                <li>transition :temps de transition lors d'une animation(ici sur les liens de la barre de menus)</li>
                <li>width: largeur de l'élément par rapport à la taille de la fenetre si on indique une valeur relative(%,em...)</li>
                <li>font-family :police</li>
                <li>font-size : taille de la police</li>
            </ol>
        </article>
    </div>

    <div id="d">
<article>
    <h5>
        <strong>Propriétes CSS à rechercher</strong></h5>
    <h6>Recherchez les proprié</h6>
    <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>

</main>
<article>
    <section class="section">

        <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>
    <div class="clear"></div>


</body>
</html>