CSS Flashcards
Afficher une liste horizontalement
li {
float: left;
}Dans une table, aligner le texte de tous les titres au centre
th {
text-align: left;
}Mettre des bordures sur un tableau
table, th, td {
border : 1px solid blueviolet;
border-collapse : collapse;
}
Mettre une couleur de fond sur un tableau
th, td {
background-color: #96D4D4;
}Mettre des bordures arrondies sur un tableau
table, th, td {
border: 1px solid black;
border-radius: 10px;
}Skip the border around the table
Ne pas inclure “table” dans le sélecteur de CSS, dans div head div style :
th, td {
border: 1px solid black;
border-radius: 10px;
}
Dans une table, agrandir l’espace entre le texte et la bordure
th, td {
padding: 15px;
}Dans une table, agrandir l’espace entre le texte et la bordure, mais espacer différemment en haut, à gauche, etc
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}Dans une table, modifier l’espace entre les cellules
table {
border-spacing: 30px;Dans une table, sélectionner la 8e ligne
tr:nth-child(8) {
background-color: red;
}Dans une table, sélectionner les lignes impaires
tr:nth-child(odd) {
color: dark green;
}Dans une table, changer la couleur de la ligne correspondant à la cellule sur laquelle se trouve le curseur
tr:hover {background-color: #D6EEEE;}Donner à tous les divs une largeur de 300 px et les centrer
div {
width:300px;
margin:auto;
}
Aligner horizontalement 3 divs, sans float mais en rendant le div inline
div {
width: 30%;
display: inline-block;
}Aligner parfaitement 3 divs avec flex
Div head, div style :
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
<body>
<div class='mycontainer'>
<div> blabla </div>
<div> blabla </div>
<div> blabla </div>
</div>
</body>
Aligner horizontalement 3 divs dans 1 div qui serve de conteneur
<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>Changer la couleur de fond de tous les éléments de classe “papier”
.papier {
background-color: chartreuse;
}Modifier le style d’un élément par ID, où ID = réponse
#réponse {
background-color: chartreuse;
padding: 40px;
text-align: center;
}Sélectionner tous les divs dans le div de classe “tiroir”, sauf le dernier ;
leur mettre une marge de 10px sur la droite
div.tiroir div:not(:last-child) {
margin-right: 10px;
}Organise le contenu des divs de classe “armoire” :
* en grille
* de 3 collonnes
* avec un espace de 10px entre les colonnes
div.armoire {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}Hover sur case de gride
.case :hover {
Mettre code ici
}Syntaxe pour effet de zoom
transform: scale(1.05);
Gérer la vitesse d’un effet
transition: 0.3s ease;
En cas de hover sur une case de grid :
* changer de couleur
* petit zoom
* gérer la vitesse de transition
* ombre au survol
.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);
}
