Alors on a appris la base -base du codage, on l'a complète un peu avec une famille supplémentaire qui allège pas mal notre zone écrite, la famille Texte donc x)
Là encore, on commence par le début bien que l'ordre des codes ne soient pas très important tant que la famille se suit, je vous décris les différents code, la famille se place à la suite de celle du fond et des bords, je vous conseille tout de même de garder les padding et les border-radius à la fin du codage, plus facile pour les modifs ^^
Le texte donc, en premier lieu, choisir l'emplacement dit "de base" c'est à dire celui par défaut de votre texte, bien sûr, vous pourrez toujours modifier des morceaux de votre texte avec vos balises de bases du fow, ça marche quand même ^^
Pour définir l'emplacement du texte on utilise ce code:
text-align: xx; > on peut remplacer xx par plusieurs choix:
Justify = le texte fera une longueur bien propre en réglant les espaces.
center = le texte sera centré
Right = le texte sera aligné à droite
Left = le texte sera aligné à gauche
J'ai une préférence pour le justify qui laisse un fini parfait <3
On oubli toujours pas le ";" à la fin du code sinon le suivant l'emportera avec lui et aucun des deux ne sera lu sur votre page ^^
Donc exemple:
- Code:
-
<div style="text-align: justify; ">
pour reprendre tout neuf ou comme avant :
Texte
- Code:
-
<center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; border-radius: 10px 10px 10px 10px;padding: 10px 10px 10px 10px;"> Texte </div></center>
Pour imposer la couleur de base rien de plus simple:
Color: XX, xx remplacer par une couleur ^^
Texte
- Code:
-
<center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; color: red; 12xp; border-radius: 10px 10px 10px 10px;padding: 10px 10px 10px 10px;"> Texte </div></center>
Ainsi, la mise en forme du texte, bien sûr pas obliger de tous les mettre, ils sont facultatif libre à vous de les trier, le mieux et de les mettre dans un nouveau code mère à la suite du premier, plus simple pour modifier:
Texte
font-family: xx > xx = Famille de police = exemple Verdana, Arial, Georgia, ect...
Attention les noms avec espaces comme "Trebuchet MS" doivent être mis dans des guillemets.
font-size: xx > xx = Taille de votre police de caractère = X xp exemple 12px (taille standard)
font-style: xx > xx = type de texte, exemple: Gras, italic, oblique...
Voilà les trois bases à nouveau attention à suivre la famille texte, pas n'importe où, à la suite et toujours le ";" ^^
ATTENTION: Toujours mettre color: XX la couleur quoi à la fin, sinon gares aux bugs <<
Exemple:
Texte
- Code:
-
<center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>
Si on s'en sent le courage, on peut rajouter d'autre fantaisie:
text-decoration: xx; > xx remplacer par :
underline (souligner
overline (ligne au dessus)
line through (barrer)
blink (clignoter)
Toujours dans la famille texte et avant "color" Ok? ^^
Bon bon, le texte fini on passe à mieux x)
Certain on peut être remarqué des codages avec différent niveau, je m'explique les niveaux ce sont différentes balises mères qui se suivent, oui on peut faire ça à certaine condition :/
On reprend notre exemple et on lui fait un chapeau facilement ^^
Comment? simple, on C/C le code (que la partie div sauf si vous ne voulez pas qu'il soit centré) et le rajoute à la suite sauf qu'on oubli pas de fermer la balise hein
Mais bon on va pas tout garder hein ><
déja je définis le chapeau que je veux, sa taille, son fond, s'il rejoint mon cadre ou non, garde le même principe ou non ou encore s'il contient ou pas du texte, pas de texte? Déjà supprimer toute la famille texte, pas de fond la famille fond pas de bordure la famille bordure, easy x)
Faisons un essaie, je vais faire un chapeau séparé du texte j'utilise
qui fait sauter une ligne ^^:
Titre
Texte
- Code:
-
<center><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Titre </div><br>
<div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>
Mouais bof >> Après je peux toujours modif sa largueur, police, bordure ect x)
Titre
Texte
Trouvez ce qui a changé tout seul >< là vous êtes pro >>
- Code:
-
<center><div style="background-color: white; width : 400px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: center; font-family: Arial; font-size: 34px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Titre </div><br>
<div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>
Bon bon, pas mal, tentons de les attacher finalement, je supprime
et l'espace avec le
:
Titre
Texte
- Code:
-
<center><div style="background-color: white; width : 400px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: center; font-family: Arial; font-size: 34px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Titre </div><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>
Oyé Oo C'est là où on est content d'avoir choisi de traiter la bordure coté par coté
Pour une fusion parfaite, je surprime la bordure du bas du premier code mère, vous devez vous rappeler lequel non? eh eh x) Oubliez pas le radius non plus là encore vous savez lequel modif. ^^
Titre
Texte
- Code:
-
<center><div style="background-color: white; width : 400px; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: center; font-family: Arial; font-size: 34px; font-style: italic; color: red; border-radius: 10px 10px 0px 0px; padding: 10px 10px 10px 10px;"> Titre </div><div style="background-color: white; width : 600px; border-bottom: black 12px solid ; border-left: red 4px double; border-right: red 4px double ; border-top: black 12px solid; text-align: justify; font-family: Arial; font-size: 24px; font-style: italic; color: red; border-radius: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;"> Texte </div></center>
Même principe pour en bas ou en rajouter plusieurs, là encore tout se modifie fond color ou image ect.
La suite plus tard ^^