# Partie 1 - Etape 1 : mise en forme d'éléments de messages le : Mer 7 Juin 2023 - 20:11
# Re: Partie 1 - Etape 1 : mise en forme d'éléments de messages le : Mer 7 Juin 2023 - 20:29
Votre titre
==> cela ne donne rien car pas encore de mise en forme CSS
span => délimite une ligne
div => délimite un bloc
¨Pour ajouter le CSS :
Donc si on ajoute une valeur :
Votre titre
Décomposons le code :
- span => votre balise, ici de type "inline" (= en ligne), sans css elle ne changera rien au texte.
- style => ici l'attribut indique qu'un style va être appliqué à ce qui se trouve dans la balise. Du coup, tout ce qui est indiqué entre guillemets (donc la "valeur" de cet attribut) va être imposé au texte "Votre titre".
- background-color => indique sur quoi porte la mise en forme, cette indication doit obligatoirement être suivie de deux points ":", peu importe les espaces par contre, j'ai pour habitude d'en mettre un après les deux points et pas avant, mais il peut ne pas y'en avoir du tout.
- #ffffff => il s'agit du code couleur qui correspond au blanc. Il vous faudra utiliser soit ces codes-là, soit les noms officiels des couleurs. L'un et l'autre vous pouvez les trouver sur le net : Codes couleurs et Nom de la couleur, mais aussi sur votre logiciel en ce qui concerne les codes couleurs.
- ; => attention ! Ce point virgule ne parait pas très important, il est en fait capital ! C'est en effet avec lui que vous séparez deux données de css, donc deux valeurs. Oubliez-le et votre css précédent et/ou suivant ne sera plus pris en compte !
code couleur : https://www.code-couleur.com/
Quelques exemples :
Votre titre
Votre titre
- Code:
<span>Votre titre</span>
==> cela ne donne rien car pas encore de mise en forme CSS
span => délimite une ligne
div => délimite un bloc
¨Pour ajouter le CSS :
- Code:
<span style="valeur">Votre titre</span>
Donc si on ajoute une valeur :
Votre titre
- Code:
<span style="background-color: #ffffff;">Votre titre</span>
Décomposons le code :
- span => votre balise, ici de type "inline" (= en ligne), sans css elle ne changera rien au texte.
- style => ici l'attribut indique qu'un style va être appliqué à ce qui se trouve dans la balise. Du coup, tout ce qui est indiqué entre guillemets (donc la "valeur" de cet attribut) va être imposé au texte "Votre titre".
- background-color => indique sur quoi porte la mise en forme, cette indication doit obligatoirement être suivie de deux points ":", peu importe les espaces par contre, j'ai pour habitude d'en mettre un après les deux points et pas avant, mais il peut ne pas y'en avoir du tout.
- #ffffff => il s'agit du code couleur qui correspond au blanc. Il vous faudra utiliser soit ces codes-là, soit les noms officiels des couleurs. L'un et l'autre vous pouvez les trouver sur le net : Codes couleurs et Nom de la couleur, mais aussi sur votre logiciel en ce qui concerne les codes couleurs.
- ; => attention ! Ce point virgule ne parait pas très important, il est en fait capital ! C'est en effet avec lui que vous séparez deux données de css, donc deux valeurs. Oubliez-le et votre css précédent et/ou suivant ne sera plus pris en compte !
code couleur : https://www.code-couleur.com/
Quelques exemples :
Votre titre
- Code:
<span style="font-family: arial black; font-size: 24px; letter-spacing: 2px; text-decoration: overline underline; color: #3c3131;">Votre titre</span>
Votre titre
- Code:
<span style="font-family: impact; font-size: 34px; letter-spacing: 1px; color: #1a56d0;">Votre titre</span>
# Re: Partie 1 - Etape 1 : mise en forme d'éléments de messages le : Mer 7 Juin 2023 - 20:41
Bordures :
Double bordure pointillés
border-bottom : ligne du dessous
boder-top : ligne du dessus
dashed : pointillés
Votre titre
Cependant, il reste un problème : ne trouvez-vous pas que la bordure est parfois trop collée au texte ? Si ? Alors il faut y remédier ! Ne pensez jamais que quelque chose est impossible en codage... Il faut toujours tout tenter car l'on se rend compte qu'on peut tout trouver.
ajouter une marge intérieure à votre CSS !
Ce qui fait passer de
à
padding-top = marge intérieur en haut
padding-bottom = marge intérieure en base
padding-left = marge intérieure à gauche
padding-right = marge intérieure à droite
Double bordure pointillés
- Code:
<span style="border-bottom: 1px dashed #ff7e00; border-top: 1px dashed #ff7e00;">Double bordure pointillés</span>
border-bottom : ligne du dessous
boder-top : ligne du dessus
dashed : pointillés
Votre titre
- Code:
<span style="font-family: impact; font-size: 34px; letter-spacing: 5px; color: #1a56d0; text-transform: uppercase; border-top: 3px dotted #232087; border-bottom: 3px dotted #232087;">Votre titre</span>
Cependant, il reste un problème : ne trouvez-vous pas que la bordure est parfois trop collée au texte ? Si ? Alors il faut y remédier ! Ne pensez jamais que quelque chose est impossible en codage... Il faut toujours tout tenter car l'on se rend compte qu'on peut tout trouver.
ajouter une marge intérieure à votre CSS !
- Code:
padding: 4px;
Ce qui fait passer de
- Code:
<span style="border-bottom: 3px solid #77563d;">Bordure "soulignement" épaisse</span>
à
- Code:
<span style="border-bottom: 3px solid #77563d; padding: 4px;">Bordure "soulignement" épaisse</span>
padding-top = marge intérieur en haut
padding-bottom = marge intérieure en base
padding-left = marge intérieure à gauche
padding-right = marge intérieure à droite
# Re: Partie 1 - Etape 1 : mise en forme d'éléments de messages le : Mer 7 Juin 2023 - 20:48
MISE EN FORME DE LIENS ET IMAGES
Pour imposer le même genre de mise en forme à des liens ou des images, nous allons procéder à peu près de la même façon, à l'exception cependant que nous n'allons pas mettre une balise supplémentaire autour de notre lien ou de notre image, puisque eux-même en sont déjà. Nous allons simplement les écrire avec du html, et non avec du BBcode ! Je rappelle l'écriture d'un lien et d'une image :
Puisqu'il s'agit de balises, il est tout à fait possible d'insérer à l'intérieur les mêmes données CSS que dans notre "span" un peu plus haut ! Il suffit donc d'ajouter "style=" et le tour est joué ! Voici ce que cela peut donner, en guise d'exemple :
Pour imposer le même genre de mise en forme à des liens ou des images, nous allons procéder à peu près de la même façon, à l'exception cependant que nous n'allons pas mettre une balise supplémentaire autour de notre lien ou de notre image, puisque eux-même en sont déjà. Nous allons simplement les écrire avec du html, et non avec du BBcode ! Je rappelle l'écriture d'un lien et d'une image :
- Code:
<a href="http://www.never-utopia.com">Texte/Lien vers Never-Utopia</a>
<img src="adresse_image.jpg" />
Puisqu'il s'agit de balises, il est tout à fait possible d'insérer à l'intérieur les mêmes données CSS que dans notre "span" un peu plus haut ! Il suffit donc d'ajouter "style=" et le tour est joué ! Voici ce que cela peut donner, en guise d'exemple :
- Code:
<a style="color: red; font-family: arial black; font-size: 16px; border-bottom: 2px dotted blue;" href="http://www.never-utopia.com">Texte/Lien vers Never-Utopia</a>
- Code:
<img src="http://img11.hostingpics.net/pics/338564Yuni010.jpg" alt="" style="border: 4px solid #000000;" />
# Re: Partie 1 - Etape 1 : mise en forme d'éléments de messages le : Mer 7 Juin 2023 - 20:54
Autres balises utiles :
- Code:
<center>Votre texte</center> => centre le texte
- Code:
<br />
# Re: Partie 1 - Etape 1 : mise en forme d'éléments de messages le : Mer 7 Juin 2023 - 21:18
Votre titre
https://fonts.google.com/specimen/Pacifico
selected families > icon en haut à droite, pour ouvrir l'onglet. Recupérer le lien et le mettre avant le code
ici pour pacifico :
- Code:
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300&family=Pacifico&display=swap" rel="stylesheet"><span style="font-family: pacifico; font-size: 30px; letter-spacing: 5px; color: #ccaf08; text-transform: capitalize;">Votre titre</span>
https://fonts.google.com/specimen/Pacifico
selected families > icon en haut à droite, pour ouvrir l'onglet. Recupérer le lien et le mettre avant le code
ici pour pacifico :
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum