Stardust Team SDT Forum

Big_nay · Date de naissance: 01/08/1992

Personnalisons notre texte avec le CSS.

Bah on sait déjà mettre en couleur un texte Cool

Si vous pensez que c'est la limite du CSS vous êtes très loin du compte. Le CSS peut aller beaucoup plus loin dans la personnalisation, il peut modifier la taille du texte, modifier la police de caractère et bien d'autre encore. Alors ne perdons pas de temps et commençons Very Happy

Ok! Let's work! Dit, je souhaiterais faire un roman de chevalerie médiéval en ligne et j'aimerais avoir un grand titre pour mes chapitres comment je peux faire ça?

Sympa le projet de roman, je vais le prend comme exemple Okay

. Pour modifier la taille d'un texte, on utilise font-size! Ainsi pour ton titre, on mettra:

Code:

h1
{
font-size:20px;
}

Encore des pixels, je n'aime pas ça! On ne peut pas avoir des trucs genre petit, grand... ?

Et bien... en faite... c'est possible Very Happy

mais en anglais (encore et toujours l'anglais^^). On a "médium" pour moyen, "small" pour petit et "large" pour grand. Mais c'est pas tout on peut faire plus petit ou grand en ajoutant x-, ainsi x-small c'est encore plus petit et x-large est encore plus grand. Toujours pas content, rajoutons encore un x et ça nous fait encore plus petit ou grand. Ainsi xx-small est très petit et xx-large est très grand. Alors heureux?

Très heureux (plus!plus! un petit peu plus... heu désolé, hors sujet musical) ! Et si je rajoute encore un x?

Non malheureusement ça ne marche pas comme ça. Mais c'est déjà pas mal non? C'est sur que si vous voulez une taille exact mieux vaut utilisé les pixels ou les em...

Les em?

Ha oui, j'allais oublier! Vous pouvez aussi exprimer la taille en em. Qu'est-ce que c'est que ces em? en faite ça vous permet d'exprimer un agrandissement ou un rétrécissement. Enfaite 1em s'est la taille normal, après 0.5em c'est deux fois plus petit, 0.3333... em c'est trois fois plus petit. En réalité c'est comme les pourcentages. Ha je ne vous ai pas dit, on peut aussi exprimer la taille en pourcentage. Comme les em, la taille du texte normal est 100% et après faite varie pour avoir la taille de vos souhait.

C'est déjà pas mal pour mesurer une taille non?

Ouais, je vais pouvoir me débrouiller. Mais en faite, j'aimerais bien que mon texte ait du style alors j'aurais aimer lui mettre une police de caractère gothic.

Cela se comprend, pour modifier votre police de caractère, on utilise font-family. Vous devez mettre une série de police que vous voulez voir sur votre site. Pourquoi en mettre plusieurs? car si une, ne peut pas s'afficher, on passe à la second et ainsi de suite.

Pourquoi ma police ne s'afficherait pas?

Ça c'est la mauvaise nouvelle du cours, pour qu'une personne voit la police mis en premier position sur votre site, elle doit l'avoir installer sur son ordinateur. Si ce n'est pas le cas, on passera à la deuxième de la liste et ainsi de suite. Donc pour votre police gothic Neutral

... il faudra proposer a votre visiteur de la télécharger et installer. Voici un site pour télécharger plein de police de caractère:

Dafont

Donc il faudra que tu mettes sur ton site ce lien par exemple: Telecharger cette police

Vous comprenez pourquoi maintenant pourquoi on vous propose de télécharger des polices : ICI
Pour le moment, vous n'avez pas le choix désolé.

Pour le moment?! C'est possible que ça change?

Oui, avec le CSS3, il sera possible d'utiliser une police que l'internaute n'a pas d'installer sur son ordinateur. Faut attendre qu'il sort. Et oui comme le XHTML, le CSS a plusieurs versions, nous somme actuellement au CSS2 et on va bientôt passer au 3 . Pour info, on utilise actuellement le XHTML 1.1

Mais revenons à notre police. Tu pourras mettre sur ton site:

Code:

p
{
font-family: "Cloister Black", Arial, "Times New Roman", serif;
}

Ainsi on veut en priorité la Cloister Black sinon l'arial et le times new roman qui sont installer sur pas mal d'ordinateur. Et enfin le serif, vous la connaissez peut être, c'est une police qui se met si aucune ne marche donc c'est elle que l'on met en dernier.

Pourquoi il y en a entre guillemet et d'autre sans?

Ha j'aurais pensé que vous aurez remarqué pourquoi. En faite, si la police est composé de plusieurs mot comme "Times New Roman" on met des guillemets et si c'est un mot simple comme Arial pas de guillemet.

Bon je vais m'arreté là mais on est loin d'avoir fini, je posterais un autre post pour que vous puissiez réaliser le texte que vous imaginez!

Publicité

Publicité	Supprimer les publicités ?

Big_nay · Date de naissance: 01/08/1992

Cool, mon titre est en grand, en écriture gothique mais moi j'aimerais bien le centrer.

Pas de problème, pour cela text-align est votre ami! Il peut prendre 4 valeurs, left (gauche), center (centré) et right (droit) et le quatrième vous le connaissez. Very Happy

Heu, bah... tu as à droite, à gauche, au milieu, qu'est-ce que peut faire ce 4^ème alignement?

Bah regardez par vous même. Lorsque vous faites un post, on vous propose 4 alignements, le 4^ème et donc le "justifié" qui se traduit par justify . Ainsi pour ton titre:
Exemple

Code:

h1
{
text-align:center;
}

Pour le "exemple" plus haute, c'est ce que j'ai utilisé^^:

Code:

<span style="text-align:center">Exemple</span>

Noter que j'ai utilisé l'attribut style="" pour le mettre car sur ce forum, on ne peut pas créer de feuille de style^^.

Ok! ça marche bien (encore heureux Razz

). Maintenant je souhaiterais embellir mes paragraphes en mettant un alinéa, c'est possible?

Il ne semble vous l'avoir déjà, le CSS, c'est formidable, ça sait faire plein de choses y compris mettre des alinéas. Pour cela, on utilise text-indent. Il permet de mettre un décalage de x pixel au début de votre bloc. Ainsi pour tes paragraphes, tu peux mettre:

Code:

p
{
text-indent: 25px;
}

Soit dit en passant, si votre site à une bannière au lieu d'un gros titre en haut de votre page web. Je vous conseille de mettre le titre de votre site (dans un < h 1> avec un identifiant par exemple) et de mettre un alinéa négatif élevé du genre:

Code:

#titre_site
{
text-indent:-10000px
}

Ainsi votre site web aura un titre mais d'un alinéa négatif, il sera hors de la fenêtre et donc personne le verra. Pourquoi faire ça alors qu'une bannière suffit très bien? Car sachez que des non-voyants ou des personnes ayant des gros problèmes de vue navigue qu'en même sur internet (on ne va pas les priver de ce joyau) mais avec un navigateur vocal, c'est à dire qu'il lit les pages web. Bien sur ce type de navigateur ne pourrait pas lire un texte écrit sur une image mais même si votre titre est invisible, il est écrit quelque part et donc le navigateur vocal va le lire et ainsi la personne sera sur quel site elle se trouve. Et ouais, un point très important d'internet est l'accessibilité, je ferais sans doute un tutorial dessus.

Bon je sais aussi qu'il y a des gros maniacs parmi vous qui souhaitent tout contrôler. Ces perfectionnistes veulent voir leur site comme ils l'imagine, et bien suffit qu'il existe (je ne vais pas m'attarder dessus), une propriété word-spacing qui permet de définir en pixel l'écart entre les mots. Et encore plus poussé, letter-spacing qui permet de définir en pixel l'écart entre les lettres. Ma foi,personnellement je ne les utilise jamais mais qui sait, ça vous plaira peut etre. Il y a également line-height qui définit l'espace entre les lignes.

Big_nay · Date de naissance: 01/08/1992

Bon j'aimerais un peu me concentré sur mes titres. Personnellement, je les trouverais mieux souligné.

Bah soulignez les alors Razz

Comment faire ? On utilise text-decoration. Pour souligner, il faut mettre comme valeur underline.

Code:

h1
{
text-decoration:underline;
}

Tu dis "pour souligner" , car cette propriété sait faire autre chose?

Bien sur, elle peut mettre une ligne en dessus (me demander pas en quoi sait utile) avec overline, peut barrer un texte avec line-through, elle peut faire clignoter un texte avec blink cependant selon la version d'Internet Explorer que le visiteur a, ça risque de ne pas marcher et none pour rien. Cette dernière est parfois utilisé pour supprimer le soulignement des liens comme celui ci : Lien sans soulignement et en jaune

Code:

a
{
color: #FFFF00;
text-decoration:none;
}

Tient en faite?! Elle ne fait pas le gras et l'italique?

Bah comme vous pouvez le voir non. Pour le gras et l'italique, ils ont des propriétés spécialement pour eux Cool

. Pour le gras, on utilise font-weight qui prend comme valeur bold ( pour le gras) et normal (pour une écriture... normal). Ainsi pour que tout votre site soit écrit en gras on met:

Code:

*
{
font-weight: bold;
}

C'est quoi cette astérisque? Shocked

Ho, je n'ai pas fait les présentations ! Alors lecteur, l'astérisque, astérisque, le lecteur. Lecteur, l'astérisque sert à dire l'ensemble du cible, réellement toutes les balises. Astérisque, le lecteur apprend le CSS avec un super prof (bah quoi Cool

).
Ainsi plus haut, toutes les balises auront la propriété font-weight avec comme valeur bold.

Pour italique, on utilise font-style qui prend trois valeurs: italic , oblique , normal.

C'est quoi la différence entre italic et oblique?

C'est l'angle d'inclinaison. Désolé avec la police du forum, je ne peux pas vous montrer d'exemple car elle est déjà en italique. Désolé Crying or Very sad

Tu y es pour rien, ce n'est pas grave. Et comme tu as du t'emmerder pour mettre tout en capital, je veux bien t'excuser. Very Happy

Heu... bah en faite... c'est utiliser du CSS pour mettre en majuscule. J'ai utilisé font-variant qui prend comme valeur small-caps (pour mettre en majuscule) et normal. J'aurais aussi pu utilisé text-transform.
Elle prend 4 valeurs: lowercase qui met tout en minuscule, uppercase qui met tout en majuscule, capitalize qui met des majuscules au début de chaque mot et none qui laisse le texte normal.

Contenu Sponsorisé