Nous allons apprendre à faire un
bloc tout d'abord. C'est tout simple. La balise div vous permettra de créer un bloc et vous devriez lui attribuer plusieurs fonctions afin que le bloc prenne forme.
- Code:
-
<div="1erAttribut;2èmeAttribut;3èmAttribut;"></div>
Le
Html c'est tout ce qui est sous le forme de "<..>" Le
CSS c'est tout ce qui est "1erAttribut;2èmeAttribut;3èmAttribut;". En bref le
HTML forme le corps, le
CSS forme les couleurs, les images, c'est le contenu.
Il y a toujours des points virgules entre chaque attribut même s'il se trouve à la fin du CSS. Pensez également à bien referme le crochet en HTML. Déjà nous allons décider de la hauteur→
height et de la largeur→
width de notre bloc. Prenons par exemple 450*600px. On les insère ainsi.
- Code:
-
<div style="width:450px;height:600px;"></div>
Simple non ?
Sauf que là nous avons créer une zone vide. Alors pour compléter ça, on peut soit choisir une image, soit une couleur. Nous allons commencer par simplement y mettre une couleur de fond→
background-color. Votre couleur doit être en html code, il commence par # et comporte 6 chiffres.
Exemple : #000000=noir et #FFFFFF=blancPour chercher la couleur de votre choix je vous propose ce site :
https://html-color-codes.info/Codes-couleur-HTML/ - Code:
-
<div style="width:450px;height:600px;background-color:#F2F2F2;"></div>
Mettons ensuite des bordures à ce bloc. Pour cela, nous utilisons
border-right, border-left, border-top, border-bottom (droite, gauche, haut, bas). On les utilise ainsi : border: XXpx
#000000 solid/dotted/dashed..etc Solid c'est pour faire une ligne continue, dotted une ligne en pointillée et dashed pour une ligne segmentée. Vous pouvez vous amuser à varier et faire comme vous voulez !
- Code:
-
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;"></div>
RESULTAT 1 (ci-dessous)
Ajoutons-y un
titre. Pour trouver une belle police je vous conseille de chercher ici :
https://fonts.google.com/J'ai choisi
Homemade Apple, mais faites comme vous voulez
Google me donne donc deux choses :
- Code:
-
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">
ça va aller juste avant votre titre, c'est du html
- Code:
-
font-family: 'Homemade Apple', cursive;
ça va aller dans la div du titre car c'est du css
Créons une nouvelle div dans la div précédente et ajoutons un titre ainsi :
- Code:
-
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;">
<div style="font-family: 'Homemade Apple', cursive;color:#85CFBE;font-size:30px;"><link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">Titre au choix</link></div></div>
Le
link vient de Google font, et le css inséré aussi. On applique une couleur avec
color et on choisit une taille de police avec
font-size.
RESULTAT 2 (ci-dessous)
Comme le titre dépasse en haut, on lui rajoute une marge inférieure →
padding en haut →
top ainsi :
- Code:
-
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;">
<div style="font-family: 'Homemade Apple', cursive;color:#85CFBE;font-size:30px;padding-top:20px;"><link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">Titre au choix</link></div></div>
J'espère que je ne vous ai pas perdu Pour la suite c'est simple, c'est comme avant, on crée un
bloc, mais dans le bloc d'avant et après le bloc du titre. On choisit les dimensions, un fond et petite nouveauté que j'apporte, on peut utiliser l'opacité→
opacity pour nuancer, et faire un peu apparaître le fond (utile quand le fond est une image). De plus, on ajouter overflow:auto pour faire la scrollbar, ainsi on pourra y mettre un texte long sans qu'il ne dépasse du bloc.
- Code:
-
<div style="width:450px;height:600px;background-color:#F2F2F2;border-top:1px #F0ADAD dotted; border-bottom:1px #F0ADAD dotted; border-right:8px #F0ADAD solid; border-left:8px #F0ADAD solid;">
<div style="font-family: 'Homemade Apple', cursive;color:#85CFBE;font-size:30px;padding-top:20px;"><link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">Titre au choix</link></div>
<div style="width:350px;height:150px;background-color:#3EB397;color:#ffffff;opacity:0.6;overflow:auto;padding:5px;"> Aloha ~
J'espère que vous n'êtes pas trop perdu car en fait je voulais faire un tuto hyper rapide mais je me rends compte qu'il se rallonge beaucoup mon tutoriel, j'ai envie de vous montrer tout en même temps désolée
J'espère que ça ne vous gêne pas
Je vous fais des bisous <3
Arya-sensei
</div></div>
J'ai également ajouté des marges intérieures avec
padding:5px; pour éviter que le texte colle aux bordures.
RESULTAT 3 (ci-dessous)
Ensuite vous pouvez varier avec les bordures, les couleurs et tout ce que vous voulez !
Sur le résultat final, j'ai juste varier l'opacité