CSS Flashcards
1
Q
Afficher une liste horizontalement
A
li {
float: left;
}
2
Q
Dans une table, aligner le texte de tous les titres au centre
A
th {
text-align: center;
}
2
Q
Mettre des bordures sur un tableau
A
table, th, td {
border : 1px solid blueviolet;
border-collapse : collapse;
}
3
Q
Mettre une couleur de fond sur un tableau
A
th, td {
background-color: #96D4D4;
}
4
Q
Mettre des bordures arrondies sur un tableau
A
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
5
Q
Skip the border around the table
A
Ne pas inclure “table” dans le sélecteur de CSS, dans div head div style :
th, td {
border: 1px solid black;
border-radius: 10px;
}
6
Q
Dans une table, agrandir l’espace entre le texte et la bordure
A
th, td {
padding: 15px;
}
7
Q
Dans une table, agrandir l’espace entre le texte et la bordure, mais espacer différemment en haut, à gauche, etc
A
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
8
Q
Dans une table, modifier l’espace entre les cellules
A
table {
border-spacing: 30px;
9
Q
Dans une table, sélectionner la 8e ligne
A
tr:nth-child(8) {
background-color: red;
}
10
Q
Dans une table, sélectionner les lignes impaires
A
tr:nth-child(odd) {
color: dark green;
}
11
Q
Dans une table, changer la couleur de la ligne correspondant à la cellule sur laquelle se trouve le curseur
A
tr:hover {background-color: #D6EEEE;}
12
Q
Donner à tous les divs une largeur de 300 px et les centrer
A
div {
width:300px;
margin:auto;
}
13
Q
Aligner horizontalement 3 divs, sans float mais en rendant le div inline
A
div {
width: 30%;
display: inline-block;
}
14
Q
Aligner parfaitement 3 divs avec flex
A
Div head, div style :
.mycontainer {
display: flex;
}
.mycontainer > div {
flex:1;
margin:5px;
display:flex;
}
<body>
<div class='mycontainer'>
<div> blabla </div>
<div> blabla </div>
<div> blabla </div>
</div>
</body>
15
Q
Aligner horizontalement 3 divs dans 1 div qui serve de conteneur
A
<style>
div.mycontainer {
width:100%;
overflow:auto;
}
div.mycontainer div {
width:33%;
float:left;
}
</style>
<body>
<div class="mycontainer">
<div>blabla</div>
<div>blabla</div>
<div>blabla</div>
</div>
16
Q
Changer la couleur de fond de tous les éléments de classe “papier”
A
.papier {
background-color: chartreuse;
}
17
Q
Modifier le style d’un élément par ID, où ID = réponse
A
#réponse {
background-color: chartreuse;
padding: 40px;
text-align: center;
}
18
Q
Sélectionner tous les divs dans le div de classe “tiroir”, sauf le dernier ;
leur mettre une marge de 10px sur la droite
A
div.tiroir div:not(:last-child) {
margin-right: 10px;
}
19
Q
Organise le contenu des divs de classe “armoire” :
* en grille
* de 3 collonnes
* avec un espace de 10px entre les colonnes
A
div.armoire {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
20
Q
Hover sur case de grid
A
.case :hover {
Mettre code ici
}
21
Q
Syntaxe pour effet de zoom
A
transform: scale(1.05);
22
Q
Gérer la vitesse d’un effet
A
transition: 0.3s ease;
23
Q
En cas de hover sur une case de grid :
* changer de couleur
* petit zoom
* gérer la vitesse de transition
* ombre au survol
A
.case:hover {
background-color: rgb(100, 120, 255);
transform: scale(1.05);
transition: 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
24
Si l'écran fait moins de 600px de large, faire que les blocs "nav" et "article" soient l'un au-dessus de l'autre et plus côte à côte
```
@media only screen and (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
```
25
Faire que la taille du h1 change en fonction de celle de l'écran et prenne 10% vw
```
Titre
```
26
Permettre que, après un float:left, l'élément suivant soit à la ligne
(= fin de flux=
```
```
27
Transforme un div en conteneur flexible, pour positionner ses enfants
```
```
28
Centrer les enfants d'un div flex
```
justify-content: center;
```
29
Dans un div parent flex, permet aux enfants de passer à la ligne suivante si l'espace est insuffisant
```
flex-wrap: wrap;
```
30
Dans un div parent flex, mettre un espace de 2vw entre des divs enfants alignés horizontalement
```
gap:2vw;
```
31
Descendant combinator
espace
```
div p {
background-color: yellow;
}
```
selects all p elements inside div elements
32
Child combinator
>
```
div > p {
background-color: yellow;
}
```
selects all p elements that are children of a div element
33
Next sibling combinator
+
```
div + p {
background-color: yellow;
}
```
selects the first p element that are placed immediately after div elements
34
Séléctionner les p de classe center
```
p.center {
text-align: center;
color: red;
}
```
35
Next sibling combinator
~
```
div ~ p {
background-color: yellow;
}
```
selects all p elements that are next siblings of div elements
36
CSS universal selector
*
```
* {
text-align: center;
color: blue;
}
```
TOUS les éléments HTML seront rouges et centrés
37
Image de background : répéter horizontalement
background-repeat: repeat-x
```
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
```
38
Image de background : répéter verticalement
background-repeat: repeat-y
```
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
```
39
Image de background : ne pas répéter
background-repeat: no-repeat
```
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
```
40
Image de background : spécifier la position
```
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
```
41
Image de background : fixer la position
```
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
```
42
Image de background : la faire scroller
```
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
```
43
44
Regrouper toutes les propriétés de background, c'est possible ?
Oui :
```
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
```
mais dans l'ordre :
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
45
Bordures : comment regrouper les différentes épaisseurs en une seule ligne de code ?
* 2 valeurs : top/ bottom puis côtés ;
* 4 valeurs : top right bottom left
```
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
```
46
Comment centrer automatiquement un élément dans son container ?
margin:auto;
47
Comment faire hériter une valeur d'un élément parent ?
valeur inherit
```
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
```
si le p de classe ex1 est dans un div, il va hériter la valeur de marge gauche du div
48
Si je spécifie la largeur d'un div et un padding, le padding s'ajoute à la largeur.
Comment faire pour que la largeur ne change pas mais que le contenu s'adapte ?
avec l'attribut box-padding
```
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
```
49
Est-ce que les propriétés height et width incluent les propriétés margin, padding et border ?
Non : un width à 100px et un padding à 20 vont faire un div de 140 de large
50
Quelle est la différence entre les propriétés width et max-width ?
Avec max-width, la largeur du div va s'adapter à de plus petits écrans ; avec seulement width, le navigateur proposera une barre de scroll horizontal
51
Styliser les p de class outl pour leur mettre un outline gris
```
p.ex3 {
border: 2px solid black;
outline-color: grey;
}
```
52
Styliser les h2 pour leur mettre un outline jaune, ridge, 5px
```
p.ex3 {outline: 5px ridge yellow;}
```
53
Quelle propriété permet de créer de l'espace entre la bordure et l'outline ?
outline-offset
```
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
```
54
Quelle propriété met le texte en majuscule automatiquement ?
text-transform: uppercase;
55
Quelle propriété pour
mettre de l'espace entre les caractères ?
letter-spacing: 3px;
56
Quelle propriété pour
gérer la taille des alinéas ?
text-indent: 50px;
57
Quelle propriété pour
enlever le formatage du texte ?
text-decoration: none;
Permet par exemple d'enlever le souligné des liens
58
Quelle propriété pour
définir l'alignement de
la dernière ligne d'un texte ?
text-align-last: justify;
59
Comment aligner un texte
de droite à gauche ?
```
p {
direction: rtl;
unicode-bidi: bidi-override;
}
```
60
Comment mettre des lignes sur un texte ?
```
h1 {
text-decoration-line: overline;
} h2 {
text-decoration-line: line-through;
} h3 {
text-decoration-line: underline;
} p {
text-decoration-line: overline underline;
}
```
61
Quelle propriété pour
modifier l'interligne ?
```
p.big {
line-height: 1.8;
}
```
62
Quelle propriété pour
modifier l'espace entre les mots ?
```
p.one {
word-spacing: 10px;
}
```
63
Quelle propriété pour
mettre une ombre rouge à un texte ?
```
h1 {
text-shadow: 2px 2px 5px red;
}
```
ordre :
* horizontal
* vertical
* fading
64
Ajuster le style pour que tous les p soient en gras italique
```
p {
font-weight: bold;
font-style: italic;
```
65
Définir le font-size de manière à permettre l'utilisateur de zoomer avec le menu de son navigateur
unité : em
1 em = 16px
```
body {
font-size: 100%;
}
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
```
le font-size: 100% permet que ça fonctionne même sur un vieil internet explorer
66
Utiliser une google font
```
```
67
Utiliser plusieurs google fonts
les séparer dans le lien avec |
```
```
68
Mettre plusieurs effets sur une google font
```
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect
```
69
Mettre sur une seule ligne toutes les propriétés de font
Attention : font-size et font-family sont requises
```
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
```
70
Ajouter une icône : font awesome
Sur le site de font awesome, se connecter
```
```
71
ajouter une icône : bootstrap
pas besoin de se connecter
```
```
72
