text-
, de celles qui ont le préfixe font-
, ou de celles qui n'ont aucun préfixe en particulier. (éh, ce serait trop facile sinon font-
. Elles vont agir directement sur le texte afin d'en modifier sa forme.
font-size
(1em
par défaut). Cette valeur peut être exprimée en pixel (px), en pourcentage (%), en em (em), ou à l'aide d'un mot clef pré-configuré.
font-size: 18px;
vous donnera un texte ayant à peu près la même taille qu'un texte en taille 18 sous un traitement de texte.
.pixel1 {
font-size: 18px;
}
.pixel2 {
font-size: 30px;
}
<p class=\"pixel1\">Texte</p>
) auront une taille de 18px.
.pourcentage1 {
font-size: 100%;
}
.pourcentage2 {
font-size: 130%;
}
.pourcentage3 {
font-size: 75%;
}
.em1 {
font-size: 1em;
}
.em2 {
font-size: 1.3em;
}
.em3 {
font-size: 0.6em;
}
xx-small
pour que le texte soit très petit, puis x-small
, small
, medium
c'est la taille normale, large
, x-large
, xx-large
. ça vaut ce que ça vaut
.mini {
font-size: xx-small;
}
.trespetit {
font-size: x-small;
}
.petit {
font-size: small;
}
.normal {
font-size: medium;
}
.grand {
font-size: large;
}
.tresgrand {
font-size: x-large;
}
.trestresgrand {
font-size: xx-large;
}
<h2>Aucun style appliqué</h2>
<p>Garde-moi, ô Dieu ! car je cherche en toi mon refuge.</p>
<h2>En pixel</h2>
<p class="pixel1">18pxJe dis à l'Éternel : tu es mon Seigneur, tu es mon souverain bien !</p>
<p class="pixel2">30pxLes saints qui sont dans le pays, les hommes pieux sont l'objet de toute mon affection.</p>
<h2>En pourcentage</h2>
<p class="pourcentage1">100%On multiplie les idoles, on court après les Dieux étrangers : je ne répands pas leurs libations de sang, je ne mets pas leurs noms sur mes lèvres.</p>
<p class="pourcentage2">130%L'Éternel est mon partage et mon calice ; c'est toi qui m'assures mon lot ; un héritage délicieux m'est échu, une belle possession m'est accordée.</p>
<p class="pourcentage3">75%Je bénis l'Éternel, mon conseiller ; la nuit même mon coeur m'exhorte.</p>
<h2>En EM</h2>
<p class="em1">1emJ'ai constamment l'Éternel sous mes yeux ; quand il est à ma droite, je ne chancelle pas.</p>
<p class="em2">1.3emAussi mon coeur est dans la joie, mon esprit dans l'allégresse, et mon corps repose en sécurité.</p>
<p class="em3">0.6emCar tu ne livreras pas mon âme au séjour des morts, tu ne permettras pas que ton bien-aimé voie la corruption.</p>
<h2>Par mot-clef</h2>
<p class="mini">xx-smallTu me feras connaître le sentier de la vie ; il y a d'abondantes joies devant ta face, des délices éternelles à ta droite.</p>
<p class="trespetit">x-smallSi l'Éternel ne bâtit la maison, ceux qui la bâtissent travaillent en vain ; si l'Éternel ne garde la ville, celui qui la garde veille en vain.</p>
<p class="petit">smallEn vain vous levez-vous matin, vous couchez-vous tard, et mangez-vous le pain de douleur ; il en donne autant à ses bien-aimés pendant leur sommeil.</p>
<p class="normal">mediumVoici, des fils sont un héritage de l'Éternel, le fruit des entrailles est une récompense.</p>
<p class="grand">x-largeComme les flèches dans la main d'un guerrier, ainsi sont les fils de la jeunesse.</p>
<p class="tresgrand">xx-largeHeureux l'homme qui en a rempli son carquois ! Ils ne seront pas confus, quand ils parleront avec des ennemis à la porte.</p>
font-weight
(normal
par défaut), font-style
(normal
par défaut). Voyons plus en détails ces 2 propriétés :
font-weight
: modifie la graisse du texte.
normal
: pas de graisse
bold
: texte en gras
bolder
: texte plus en gras que la normale
lighter
: texte moins en gras que la normale
valeur entre 100 et 900 par pas de 100
: en théorie 100 signifie peu de graisse, 900 signifie beaucoup. En pratique de 100 à 400 le texte est normal, de 500 à 900, il est en gras.
.gras {
font-weight: bold;
}
.gras2 {
font-weight: bolder;
}
.gras3 {
font-weight: lighter;
}
.graschiffre {
font-weight: 300;
}
bolder
, lighter
pour l'instant. On reverra cela lorsqu'on parlera d'héritage.font-style
: modifie l'inclinaison du texte.
normal
: inclinaison... normale
italic
: texte en italique
oblique
: texte en oblique
.italique {
font-style: italic;
}
.oblique {
font-style: oblique;
}
font-family
permet d'utiliser n'importe quel police de caractères sur un texte ! Mais pour que cette police soit réellement visible, il faut que l'utilisateur la possède sur son ordinateur... Et malheureusement, très peu de personne possèdent la magnifique police Winnie ou Starwars que vous rêvez déjà d'afficher sur vos pages.
font-family
. En théorie, c'est un petit peu plus tordu que ça (voyez vous-même dans cet article sur les polices du W3C), mais dans la vraie vie c'est celles dont on se sert.
.ex1 {
font-family: Arial, Verdana, "Times New Roman", serif;
}
.ex2 {
font-family: Trebuchet, Georgia, Arial, serif;
}
body {
font-family: Arial, Verdana, serif;
}
span {
font-family: Trebuchet, Georgia, Arial, serif;
}
@font-face
. J'ai lu que cela ne fonctionnait pas à tous les coups, mais si cela vous intéresse, je vous laisse vous documenter, en commençant par le W3Cfont-variant
permet d'agir sur la casse du texte (majuscule, minuscule) dans une certaine mesure (c'est text-transform
qui se chargera du reste) en permettant de mettre un texte en petites majuscules : laisse la première lettre de la chaine de caractères en majuscule si elle l'était, change la casse des autres lettres en majuscules plus petites. Voyez vous-même :
p {
font-variant: small-caps;
}
text-
. A une exception près, ces propriétés ne vont pas transformer le texte lui-même, mais agir autour de lui.
text-align
(left
par défaut en général) avec les valeurs au choix : center
, left
, right
, justify
.
p.centrer {
text-align: center;
}
p.gauche {
text-align: left;
}
p.droite {
text-align: right;
}
p.justifier {
text-align: justify;
}
<h2>Aucun style appliqué</h2>
<p>Louez l'Éternel ! Louez Dieu dans son sanctuaire ! Louez-le dans l'étendue, où éclate sa puissance !</p>
<h2>Texte aligné</h2>
<p class="gauche">Aligné à gaucheRends-moi justice, Éternel ! car je marche dans l'intégrité, je me confie en l'Éternel, je ne chancelle pas. Sonde-moi, Éternel ! éprouve-moi, fais passer au creuset mes reins et mon coeur ; car ta grâce est devant mes yeux, et je marche dans ta vérité. Je ne m'assieds pas avec les hommes faux, je ne vais pas avec les gens dissimulés ; je hais l'assemblée de ceux qui font le mal, je ne m'assieds pas avec les méchants. Je lave mes mains dans l'innocence, et je vais autour de ton autel, ô Éternel ! Pour éclater en actions de grâces, et raconter toutes tes merveilles. Éternel ! j'aime le séjour de ta maison, le lieu où ta gloire habite. N'enlève pas mon âme avec les pécheurs, ma vie avec les hommes de sang, dont les mains sont criminelles Et la droite pleine de présents ! Moi, je marche dans l'intégrité ; délivre-moi et aie pitié de moi ! Mon pied est ferme dans la droiture : je bénirai l'Éternel dans les assemblées.</p>
<p class="droite">Aligné à droiteDieu est connu en Juda, son nom est grand en Israël. Sa tente est à Salem, et sa demeure à Sion. C'est là qu'il a brisé les flèches, le bouclier, l'épée et les armes de guerre. Tu es plus majestueux, plus puissant Que les montagnes des ravisseurs. Ils ont été dépouillés, ces héros pleins de courage, ils se sont endormis de leur dernier sommeil ; ils n'ont pas su se défendre, tous ces vaillants hommes. A ta menace, dieu de Jacob ! Ils se sont endormis, cavaliers et chevaux. Tu es redoutable, ô toi ! Qui peut te résister, quand ta colère éclate ? Du haut des cieux tu as proclamé la sentence ; la terre effrayée s'est tenue tranquille, lorsque Dieu s'est levé pour faire justice, pour sauver tous les malheureux de la terre. L'homme te célèbre même dans sa fureur, quand tu te revêts de tout ton courroux. Faites des voeux à l'Éternel, votre Dieu, et accomplissez-les ! Que tous ceux qui l'environnent apportent des dons au Dieu terrible ! Il abat l'orgueil des princes, il est redoutable aux rois de la terre.</p>
<p class="justifier">JustifiéO Dieu ! tu nous as repoussés, dispersés, tu t'es irrité : relève-nous ! Tu as ébranlé la terre, tu l'as déchirée : répare ses brèches, car elle chancelle ! Tu as fait voir à ton peuple des choses dures, tu nous as abreuvés d'un vin d'étourdissement. Tu as donné à ceux qui te craignent une bannière, pour qu'elle s'élève à cause de la vérité. Afin que tes bien-aimés soient délivrés, sauve par ta droite, et exauce-nous ! Dieu a dit dans sa sainteté : je triompherai, je partagerai Sichem, je mesurerai la vallée de Succoth ; a moi Galaad, à moi Manassé ; Éphraïm est le rempart de ma tête, et Juda, mon sceptre ; moab est le bassin où je me lave ; je jette mon soulier sur Édom ; pays des Philistins, pousse à mon sujet des cris de joie ! Qui me mènera dans la ville forte ? Qui me conduira à Édom ? N'est-ce pas toi, ô Dieu, qui nous as repoussés, et qui ne sortais plus, ô Dieu, avec nos armées ? Donne-nous du secours contre la détresse ! Le secours de l'homme n'est que vanité. Avec Dieu, nous ferons des exploits ; il écrasera nos ennemis.</p>
<p class="centrer">CentréO Éternel, que mes ennemis sont nombreux ! Quelle multitude se lève contre moi ! Combien qui disent à mon sujet : plus de salut pour lui auprès de Dieu ! Mais toi, ô Éternel ! tu es mon bouclier, tu es ma gloire, et tu relèves ma tête. De ma voix je crie à l'Éternel, et il me répond de sa montagne sainte. Je me couche, et je m'endors ; je me réveille, car l'Éternel est mon soutien. Je ne crains pas les myriades de peuples Qui m'assiègent de toutes parts. Lève-toi, Éternel ! sauve-moi, mon Dieu ! Car tu frappes à la joue tous mes ennemis, tu brises les dents des méchants. Le salut est auprès de l'Éternel : que ta bénédiction soit sur ton peuple !</p>
text-indent
(0
par défaut). Il suffit de préciser une valeur positive ou négative.
.ex1 {
text-indent: 2em;
}
.ex2 {
text-indent: 20px;
}
.ex3 {
text-indent: 10%;
}
.ex4 {
text-indent: -40px;
}
text-decoration
(none
par défaut). On s'en sert surtout pour modifier l'apparence d'un lien (au passage d'une souris, au clic...)
.souligne {
text-decoration: underline;
}
.surligne {
text-decoration: overline;
}
.barre {
text-decoration: line-through;
}
.clignotant {
text-decoration: blink;
}
blink
ne fonctionne pas sur tous les navigateurs.
text-transform
(none
par défaut) permet d'agir directement sur le texte puisqu'elle s'occupe d'en gérer la casse. (majuscule, minuscule, première lettre en majuscule) Un petit exemple vaut mieux qu'une explication.
.majuscule {
text-transform: uppercase;
}
.minuscule {
text-transform: lowercase;
}
.first_majuscule {
text-transform: capitalize;
}
text-
! Quelques autres propriétés en font encore partie (text-shadow
, text-replace
, ...) mais soit elles ne fonctionnent pas correctement, soit elles ne font pas partie du CSS 2, mais du CSS 3. Le CSS3 est de plus en plus utilisé, c'est pour bientôt et on risque d'en reparler !Licorne écrit : Super sympa se que vous faite Aujourd'hui, 18h42 via Résumé - Les Fourberies De ...
Nimabbbhhhhhh proclame : Pamale Le 21 avril, 11h10 via Résumé - Le Médecin Malgrè ...
booba déclame : 7 Le 20 avril, 19h12 via Résumé : La Guerre de Troie...
lolilol écrit : Ca fait 7 Le 19 avril, 11h07 via Résumé du livre : Le Cid de...
sltje suis scribouille : Slt je suis nouvelle sur ce sit esque vous pouver medir si se cite eet bien Le 16 avril, 10h01 via Résumé - Le Médecin Malgrè ...
Latzo 109 écrit :
Slt comme rooro l a dit c est pas le bn site mais moi aussi je joue a Fortnite mn compte c est PlayerSarro.
BYE
Le 15 avril, 22h23 via Résumé du livre : Le Cid de...
587564 griffonne : 3+4=7 Le 14 avril, 18h51
92000 scribouille : Trop facile Le 12 avril, 10h36 via Résumé - Le Médecin Malgrè ...
Okee25 bafouille :
La réponse est 7 car 1+1+1(3)+1+1+1+1(4)=7.
C'est une logique mathématiques qui revient le plus souvent au classe de CP et GS.
Le 08 avril, 13h08 via Résumé scène par scène - Le...
milena bafouille : ùùmm Le 02 avril, 16h13 via Résumé - Les Fourberies De ...
sdefef" griffonne : Savazf Le 30 mars, 22h58 via Texte intégral - Le Médecin...
linabourhrou écrit : Bonjour Le 30 mars, 13h14 via Résumé - Les Fourberies De ...
Sora dit : Merci j'ai aussi un control tout à l'heure Le 26 mars, 8h09 via Résumé - Les Fourberies De ...
yoan déclare : Lol Le 25 mars, 21h01 via Résumé - Les Fourberies De ...
IKG murmure : GO Le 24 mars, 18h57 via Résumé : L'Avare
Canada griffonne : Qui aime la POUTINE Le 23 mars, 18h45 via Résumé scène par scène - Le...
Vladimir Poutine dit : Essaye Le 23 mars, 18h44 via Résumé scène par scène - Le...
Kim Jong Hun scribouille : Attention je vais envoyer un missile thermo-nucléaire Le 23 mars, 18h44 via Résumé scène par scène - Le...
Mac Gyver scribouille : Bon écoutez faut s'barrer d'ici donnez moi un trombone Le 23 mars, 18h41 via Résumé scène par scène - Le...
Don Diegue proclame : Je suis déshonoré Le 23 mars, 18h39 via Résumé scène par scène - Le...
Anonymous2.0 écrit : Wsh y a u bot Le 23 mars, 18h39 via Résumé scène par scène - Le...
bOTbUG dit : COPY/SITE/ROOM Le 23 mars, 18h38 via Résumé scène par scène - Le...
Yoo0Thy dit : Grace a se cite j ai remonter ma moyenne de 2 ptns franchement merci au createur de se cite merci beaucoup Le 18 mars, 14h32 via Résumé - Les Fourberies De ...
Bnmaster murmure : @Anonymous C'est un moyen simple de se prémunir contre les bots postant (au mieux) de la publicité. Le 16 mars, 12h56 via Résumé : Andromaque
Anonymous 2.0 chuchote : 3+4 est = à 7? Je ne comprend pas pourquoi ils ont mit ça.. Le 15 mars, 16h14 via Résumé - Le Médecin Malgrè ...
* dit : Que font les personnage les personnage dans cette scene 1 Le 13 mars, 17h58 via Résumé - Le Médecin Malgrè ...
* déclare : Rien Le 13 mars, 17h56 via Résumé - Le Médecin Malgrè ...
* griffonne : Je fait 555555 Le 13 mars, 17h55 via Résumé - Le Médecin Malgrè ...
marius déclame : Slt qui joue a last day on earth ? Le 12 mars, 19h57 via Résumé - La Chèvre De M. Se...
marius déclare : C trop bête Le 12 mars, 19h53 via Résumé - La Chèvre De M. Se...
marius s'exclame : Fastoche Le 12 mars, 19h44 via Résumé - La Chèvre De M. Se...
555555 gribouille :
3+4=7
sa va ?
Le 09 mars, 9h30 via Résumé - Les Fourberies De ...
louis s'exclame : Sklt Le 08 mars, 18h38 via Résumé scène par scène - Le...
louis klepak proclame : Salut les gars Le 08 mars, 18h38 via Résumé scène par scène - Le...
lol déclame : 3+4=7 Le 08 mars, 12h07 via Résumé - Les Fourberies De ...
rooro726bf s'exclame : Ca m'a aidé pour ma disertation Le 08 mars, 10h49 via Résumé du livre : Le Cid de...
rooro726bf déclare : Mais sinon très bien le résumé Le 08 mars, 10h49 via Résumé du livre : Le Cid de...
rooro726bf proclame : Ouais je sais que c'est pas le bon site mais si vous voulez jouer avec moi sur fortnite sur xbox one s mon pseudo c'est DemonZero61721 Le 08 mars, 10h44 via Résumé du livre : Le Cid de...
rooro726bf s'exclame : 7 Le 08 mars, 10h43 via Résumé du livre : Le Cid de...
rooro726bf griffonne : 7 Le 08 mars, 10h43 via Résumé du livre : Le Cid de...
nbh scribouille : 7 Le 07 mars, 19h53 via Résumé scène par scène - Le...
5OP s'exclame : 9RT788TY67 Le 07 mars, 17h20 via Résumé - La Chèvre De M. Se...
Mi écrit : Les gars vous me sauvez merci? Le 05 mars, 23h38 via Résumé scène par scène - Le...
Amisko chuchote : Ohh !!! Grace a vous uje sort de la gualere parceque je 'ai pas lu mon livre que je devait lire pour les petit vacance mtn !!OMG ce site est vraiment incroyab els!!! Le 04 mars, 19h20 via Résumé : L'Avare
Amisko écrit : Jadore !!! Oh.. Un père noel !!! Le 04 mars, 19h19 via Résumé : L'Avare
lili scribouille : J'aime beaucoup cette pièce, et elle est encore mieux quand on la joue tout les jours! Le 03 mars, 10h20 via Résumé - Le Médecin Malgrè ...
l gribouille : F Le 27 février, 21h11 via La Compagnie du Saint-Sacre...
Dionisio murmure : Merci Le 25 février, 17h42 via Résumé scène par scène - Le...
Bonjour bafouille : Cette pièce de théâtre est simplement NUL Le 23 février, 13h48 via Résumé : Le Mariage de Figa...
lolman dit : ZZzzZZZZZzzzzzZZzZzz Le 22 février, 17h24 via Résumé - Les Fourberies De ...