Mise en forme simple de d'éléments de messages

Soyez les Bienvenue
Votre Titre
Ceci est un lien vers l'apprentissage du codage
texte en gras
autre manière de mettre en gras

Hashirama Senju First Hokage ~


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 !

votre titre

votre titre

votre titre

Soyez les Bienvenues

Soyez Les Bienvenues

Bienvenues !

Double Bordure Pointillé

"padding" impose une marge intérieure et elle fonctionne comme la propriété "border", c'est à dire que vous pouvez choisir d'imposer une marge que sur l'un des quatre côtés par exemple, ou bien seulement en haut et en bas, etc... Pour cela affichez, comme pour la bordure, l'endroit où vous voulez la marge :

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

Le (x)HTML : On parle généralement de "html", sans préciser le "x" qu'il y a devant. "HTML" signifie "HyperText Markup Langage" et le "x" ou "(x)" placé devant signifie "eXtensible". Inutile de retenir tout cela, il suffit de savoir que le html permet d'afficher des éléments sur une page grâce à des balises.

Le CSS : "CSS" signifie "Cascade Style Sheet" ou en Français "Feuille de style en cascade". Retenez que le CSS c'est la mise en forme de vos éléments html : la couleur, les bordures, le "style", tout simplement.

Règle numéro 1 : Toute balise ouverte doit être ensuite refermée
Vous pouvez le voir dans mes exemples, il ne suffit pas d'ouvrir une balise pour y mettre un élément, il faut que l'élément soit enfermé dans la balise. C'est le "slash" ("/") placé dans la balise de fin qui permet de refermer la dite balise.
CODE:
Je viens d'ouvrir une balise de ligne... Et je la referme maintenant avec ceci :
Mais alors vous me direz que dans mon exemple avec l'affichage d'une image, la balise n'est pas refermée... Regardez :
CODE:

En réalité si, la balise est bien refermée, seulement celle-ci se referme avec un simple "/>". C'est une exception (il en faut bien ! Ce serait trop simple sinon^^) et c'est la seule, avec le marqueur de retour à la ligne dont nous parlerons plus loin.

Règle numéro 2 : Prenez l'habitude de tout écrire en minuscule dans vos codages, et sans caractères spéciaux
N'utilisez pas d'accents, pas de symboles, sauf le trait bas "_" (touche Cool. Les chiffres sont autorisés sans problème.

Règle numéro 3 : Les valeurs doivent être entre guillemets ou apostrophes
Prenez par exemple le code pour afficher une image ou une adresse, l'adresse se trouve entre guillemets. J'utilise les guillemets uniquement, donc je vous apprends de cette façon là aussi, sachez juste qu'il est possible d'utiliser l'apostrophe.

Règle numéro 4 : Les attributs doivent avoir une valeur
Un exemple tout bête : dans le cas présent vous ne pouvez afficher l'adresse avec simplement le "href" sans sa valeur. Le code serait incorrect. Par conséquent, chaque fois que vous voulez préciser quelque chose dans le code avec ce qu'on appelle un attribut, vous devez lui mettre une valeur entre guillemets. Ne vous inquiétez pas, il est normal que cette règle soit peu claire encore, vous verrez qu'elle deviendra tout à fait logique avec la pratique au point que vous vous demanderez comment il est possible d'oublier la valeur de votre attribut !

Règle numéro 5 : Les codes doivent s'imbriquer correctement

Voici une petite liste de ce que vous pouvez employer pour commencer avec cette simple balise :

ELEMENT MODIFIE	NOM DE LA PROPRIETE	VALEURS POSSIBLES	EXEMPLES
Police de texte	font-family	arial; - time new roman; - georgia; - trebuchet; etc... (attention, n'utilisez que des polices de base, c'est préférable)	Arial - Arial black - Impact - Time new roman - Georgia...
Taille du texte	font-size	12px; - 24px; ... tout chiffre en px (pixel) mais aussi small; - x-small; - large; (il existe d'autres mesures plus complexes dont vous n'aurez pas l'utilité dans l'immédiat, ni peut-être jamais d'ailleurs)	10 px - 14 px - large - x-large...
Couleur du texte	color	#ffffff; (blanc), #000000; (noir) - ou tout autre code couleur possible, les noms des couleurs fonctionnent aussi, reportez vous aux liens mis plus haut pour le background.	#000000 - #ff6c00 - Blue - Darkred...
Espacement des lettres	letter-spacing	un chiffre en pixel, attention de ne pas trop élargir non plus. Conseillé : entre 1 et 4 pixels.	Espace - Encore plus d'espace - Quatre pixels d'espace - Et ça marche en négatif aussi !
Espacement des mots	word-spacing	valeur en pixel, attention à la lisibilité !	Entre deux mots 5 pixels - Entre deux mots 10 pixels
Epaisseur du texte	font-weight	lighter; normal; bold; bolder; (certains n'ont pas d'effet avec certaines polices)	Lighter - Normal - Bold - Bolder
Transformation du texte	text-transform	uppercase (tout en majuscule), capitalize (première lettre en majuscule), lowercase (tout en minuscule)	uppercase - Lowercase - capitalize
Variantes de texte	font-variant	normal ou small-caps (tout en majuscule mais petite majuscules)	Small Caps
Décoration de texte	text-decoration	overline (souligné dessus), line-through (barré), underline (souligné dessous), blink (clignotant : déconseillé)	Overline - Line through - Underline - Blink
Couleur de fond	background-color	code couleur ou nom de couleur comme expliqué pour la couleur de texte	#FFFFFF - Yellow - #b5b5b5

Informations Bye Never-Utopia

La zone-bloc "div"

La seconde manière est de créer une zone "block", au départ sans mise en forme, à laquelle nous appliquerons ensuite du css. Cette méthode sera plus utilisée dans vos mises en forme de message, elle est importante, c'est même d'une des balises les plus utilisées dans les structures de page. Elle est très malléable et permet une multitude de personnalisation.
La balise pour créer une zone est la suivante :

Ne perdez pas de vue que votre texte doit être lisible et qu'il serait bien plus long qu'un simple titre ! Evitez donc absolument tout ce qui est texte en lettre majuscules (difficile à lire) ou d'espacer les lettres ou les mots de manière trop importante, etc.

http://www.faux-texte.com/

Remplir le code avec un faux texte pour avoir un aperçut du codage !

Couleur de fond
background-color: #000000; => vous connaissez déjà, il s'agit de la couleur de fond, qui sera forcément sous l'image que vous placerez.

background-image: url(adresse.jpg);

Positionnement du fond
background-position: top center; => positionnement de l'image de fond (ici en haut et au milieu, tout combinaison est possible)

Répétition du fond
background-repeat: no-repeat; => répétition de l'image, ici on ne répète pas l'image.

- repeat-x; => répète le fond sur l'horizontale
- repeat-y; =>répète le fond sur la verticale
- repeat => répète le fond partout, horizontalement et verticalement.

Il faut bien évidemment utiliser en couleur de fond la couleur de votre image créée ! De plus, il faut bien penser à demander au background qu'il se place en haut au centre et qu'il ne se répète pas.

Hé mais attends... Y'a un souci dans ton code, le cadre est plus large que l'image, et pourtant dans le code y'a bien 700px de largeur ?!? Comment ça se fait ?

Pour éviter d'obtenir un tel résultat, il est mieux de faire deux blocs, l'un englobant l'autre, en mettant le fond dans le premier, et le texte dans le second. Je vais donc créer un second bloc à l'intérieur pour mettre mon texte, et dans ce cas là le padding ne m'agrandira plus mon bloc contenant le fond !

background-image: url(image1.jpg), url(image2.jpg);
background-position: position image1, position image2;
background-repeat: repeat de l'image1, repeat de l'image2;

• overflow: visible => c'est comme s'il n'y avait rien, cela laisse visible ce qui dépasse du cadre.
• overflow: hidden => cache la partie qui dépasse.
• overflow: auto => impose un scroll (barre de défilement) à l'endroit où c'est nécessaire, donc en bas ou sur le côté.

Modifier la largueur: width:
Modifier la hauteur: height:

Text-transform
Nous pouvons choisir parmi cinq valeurs :
Uppercase : transforme tout le texte en majuscules ;
Lowercase : met tout le texte en minuscules ;
Capitalize : met uniquement la première lettre de chaque mot en majuscule ;
None : pas de transformation ;
Inherit : hérite des styles de l’élément parent.

Text-decoration
Underline : le texte sera souligné ;
Overline : une ligne apparaîtra au dessus du texte ;
Line-through : le texte sera barré ;
Blink : le texte clignotera (attention, ne fonctionne pas sur tous les navigateurs) ;
Inherit ;
None : pas de décoration, comportement par défaut.

Pour modifier l’alignement d’un texte, Text-align.
Cette propriété peut prendre cinq valeurs différentes :
Left : le texte sera aligné sur la gauche ; valeur par défaut ;
Center : le texte sera centré ;
Right : le texte sera aligné sur la droite ;
Justify : le texte sera justifié ;
Inherit : hérite des propriétés de l’élément parent.

Text-shadow :
1ère valeur : déplacement horizontal de l’ombre ;
2ème valeur : déplacement vertical de l’ombre ;
3ème valeur : rayon de propagation (flou gaussien) de l’ombre ;
4ème valeur : couleur de l’ombre (accepte les mêmes valeurs que la propriété « color »).

Pour créer des bordures et les personnaliser, nous allons avoir besoin de trois propriétés :
Border-width, qui va définir l’épaisseur de la bordure (valeur en px) ;
Border-style, qui va définir le style de la bordure ;
Border-color, qui va définir la couleur de la bordure (accepte les mêmes valeurs que la propriété « color »)

Solid
Dotted
Dashed
Double
Groove
Ridge
Inset
Ouset

Définir des angles différents pour chaque côté des bordures en utilisant : top-left, top-right, bottom-left et bottom-right.

Padding va définir l’espace entre l’élément en soi et sa bordure. Cette propriété doit être utilisée uniquement dans ce but, et jamais pour positionner des éléments dans une page ou les uns par rapport aux autres.

peut définir des espacements différents pour chaque marge intérieure de nos éléments en utilisant les propriétés padding-right, padding-bottom, padding-left et padding-top.

Pour définir la taille des marges extérieures, c’est-à-dire de l’espace à l’extérieur des bordures d’un élément, le margin. (margin-right, margin-bottom, margin-left et margin-top)

Ajouter une couleur de fond, utiliser la propriété background-color.

Ajouter une image de fond, background-image. (Background-image:url(""))

Position et répétition du fond
La propriété background-repeat nous permet de gérer la répétition de notre fond. Cette propriété accepte quatre valeurs :
Repeat : le fond se répète horizontalement et verticalement, c’est le comportement par défaut ;
Repeat-x : le fond ne se répète qu’horizontalement ;
Repeat-y : le fond ne se répète que verticalement ;
No-repeat : le fond ne se répète pas.

Fixer le fond ou le faire défiler avec la page
Pour fixer le fond et ainsi donner un effet intéressant, on utilise la propriété background-attachment à laquelle on donne une valeur égale à fixed.
Cette propriété accepte deux valeurs : fixed donc ou scroll, qui est la valeur par défaut et qui va faire défiler le fond en même temps que la page.