J'appele boite tout les élement html car il possede tous une taille que l'on peut définire et que l'on peut placer sur la page.
Pour modifier la hauteur d'une boite on peut utiliser 'height' ou même définire le maximum et le minimum pour cette fonctions par exemple
height: auto ;
min-height: 10px;
max-height: 200px;
On peut aussi définire la largeur d'une boite pour ca on utilise width (utiliser un % est tres pratique)
width: 80%;
min-width: 100px;
max-width: 1000px;
On peut afficher les bord d'une boite en définisant leur epaiseur, leur couleur et le type de boite par exemple :
border: 5px solid blue;
On peut aussi arondire le bord des boites soit tous d'un coup soit en précisant pour chaque coin de la boites.
border-radius: 20px;
border-radius: 10px 20px 0px 30px;
On peut placer une ombre sur une boite de cette magnier
box-shadow: 5px 5px 5px 5px black;
On peut définire la couleur du contenue d'une boite de cette magniere.
color: red;
On peut aussi définire la couleur du fond de la boite.
background-color: red;
Si on veut un fond d'une couleur spécial on peut renseigner une image de cette facon.
background: url(./image/bg.png) center/cover;
ici je met tout les details qui permete de modifier des texte ou autre
On peut définire une police
font-family: cursive;
Ainsi que la taille de la police
font-size: 2rem;
Modifier le parametre majuscule / minuscule
text-transform: capitalize;
capitalize : met en majuscule les premiere letre
lowercase : met tout en minuscule
uppercase : met tout en majuscule
________
Modifier le texte avec des decorations
text-decoration: underline;
underline : sous ligne le text
overline : sur ligne le text
line-through : bare le text
________
Definire un espace entre les letre
letter-spacing: 1px;
On peut possitioner le texte de plusieur magnier avec
text-align: center;
center : au centre
start : au debut de la boite
end : a la fin
justify : comme pour le livre
left : a gauche (je n'ai pas compris la dif avec start)
right : a droite (je n'ai pas compris la dif avec end)
________
On peut metre du pading pour modifier l'espace par raport au bord de la boite (et même préciser selon les direction)
padding: 15px;
padding-left: 5px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 5px;
On peut également metre un margin pour définire l'espace entre le bord de la box et l'exterieur (en metant un seul chifre on précise les 4 directions d'un coup en en metant 2 on précise pour chaque directions et bien sur si on en met 4 on donne chaque directions précisément)
margin: 0px;
margin: 0px auto;
margin: 0px 5px 2px 0px;
On peut définire des grille qui permete de positioner des élement et de faire des style assez particulier.
On peut définire la boite de cette magnier en cyblant l'objet qui contient les objet qui doivent etre placer dans les boite
display: grid;
Ensuite on peut définire le nombre de ligne et de colone (ici 3 ligne et 2 colone)
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
la partie la plus importante
On peut séparer les partie de la grille pour les asocier et crée des élement plus grand que d'autre :
grid-template-areas:
"a b"
"a b"
"a c";
Ensuite on peut associer des élement a des nom de boite avec
#a_metre_dans_a {
grid-area: a;
}
Pointer des objet
Pour pointer les objet html il y a 3 methode qui se combine entre elle. Les 3 methode sont :
Pointer avec les balise html directement
header {
toute les particulariter
}
Pointer avec une class pour cela on met un point avant le nom de la class.
.nom_de_la_class {
toute les particulariter
}
Pointer avec un id pour ca on met un # avant le nom
#l'id {
toute les particulariter
}
Ensuite il sufit de cumuler par exemple je veux aporter des modifications a tout les text qui contienne la classe texte_rouge et qui sont placer dans le header (noté que si un element est vise plusieur fois et que on modifie la meme informations ce sera l'appele le plus précis qui gagnera)
header p .texte_rouge {
toute les particulariter
}
On peut aussi doner des particulariter a plusieur chemin avec des virgule de cette magniere
header , #id {
toute les particulariter
}