AccueilFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 CSS plus en détail...

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Stephy
charming anti-PRINCE
avatar

Nombre de messages : 714
Date d'inscription : 30/05/2007

MessageSujet: CSS plus en détail...   Jeu 19 Aoû - 21:06

⇢ Taille texte ; contrôler le texte. Ici
Les pixels c'est très pratique pour être précis, mais ce n'est pas très "recommandé" car il se peut qu'une taille trop petite (ou trop grosse) gêne certaines personnes.
En ce qui me concerne, la méthode des "em" (ou des %) est la plus pratique : elle a l'avantage de s'adapter automatiquement aux préférences du visiteur et d'être facile à utiliser.

|En pixels ; c'est une façon très précise d'indiquer la taille du texte. C'est à vous de dire combien de pixels exactement doit faire le texte.
Pour avoir un texte de 16 pixels de hauteur, vous devez écrire :
Code:
<font-size:16px;></font>
(ailleurs sur FA)
SUR FA : Éternel [size]


|En taille relative ; c'est-à-dire en écrivant carrément "gros", "très gros", "petit", "minuscule". Mais bien sûr, comme tout c'est en anglais :p. Voici la liste des différentes valeurs que vous pouvez mettre ainsi que leur signification.
# xx-small : minuscule
# x-small : très petit
# small : petit
# medium : moyen
# large : grand
# x-large : très grand
# xx-large : euh... gigantesque
SUR FA :
Hello xx-small
Hello medium
Hello x-large

Code:
<div style= "font-size:xx-small;"> Hello xx-small</div><div style= "font-size:medium;"> Hello medium</div><div style= "font-size:x-large;"> Hello x-large</div>
Hello xx-small
Hello medium
Hello x-large

Spoiler:
 


|En em ; On doit indiquer la taille du texte par rapport à la taille normale de la police. Je m'explique : "1em" signifie "Taille normale". Si vous mettez un nombre supérieur (généralement un nombre décimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande. De même pour réduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite. (Il faut mettre un point et non une virgule.)
SUR FA :
Hello 0.8em
Hello 1.4em

Code:
<div style= "font-size:0.8em;"> Hello 0.8em</div><div style= "font-size:1.4em;"> Hello 1.4em</div>
Spoiler:
 


|En pourcentage : Si vous indiquez "100%", le texte aura une taille "normale". Si vous mettez "130%", le texte aura une taille correspondant à 130% de la taille normale. Ca ressemble énormément aux "em" (en fait c'est plus ou moins pareil).
SUR FA :
Hello 80%
Hello 130%

Code:
<div style= "font-size:80%;"> Hello 80%</div><div style= "font-size:130%;"> Hello 130%</div>


Dernière édition par Stephy le Jeu 19 Aoû - 21:33, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
Stephy
charming anti-PRINCE
avatar

Nombre de messages : 714
Date d'inscription : 30/05/2007

MessageSujet: Re: CSS plus en détail...   Jeu 19 Aoû - 21:32

⇢ Effets de style sur texte ; différents effets sur les textes.

|Base ; Normal, italique, gras, etc. [font-style]
SUR FA : Normal, Italic, Bold.
Texte italic !
Code:
<div style= "font-style:italic;">Texte italic !</div>

|Majuscules ; Jouer avec les majuscules ~ [none pour rien]
. Lettre en petite majuscule. [font-variant]
SUR FA :
Texte small-caps
Code:
<div style= "font-variant:small-caps;">Texte small-caps</div>
. Texte en majuscule. [text-transform]
SUR FA :
Texte uppercase
Code:
<div style= "text-transform:uppercase;">Texte uppercase</div>
. Texte en minuscule. [text-transform]
SUR FA :
Texte lowercase
Code:
<div style= "text-transform:lowercase;">Texte lowercase</div>
. Capitalize, met la première lettre de chaque mot en majuscule. [text-transform]
SUR FA :
Texte capitalize
Code:
<div style= "text-transform:capitalize;">Texte capitalize</div>

|Décoration ; des petits plus. [none pour rien]
. Souligner le texte.[text-decoration]
SUR FA :
Texte underline
Code:
<div style= "text-decoration:underline;">Texte underline</div>
. Barrer le texte.[text-decoration]
SUR FA :
Texte line-through
Code:
<div style= "text-decoration:line-through;">Texte line-through</div>
. Line au dessus du texte.[text-decoration]
SUR FA :
Texte overline
Code:
<div style= "text-decoration:overline;">Texte overline</div>
. Faire clignoter le texte.[text-decoration]
SUR FA :
Texte blink
Code:
<div style= "text-decoration:blink;">Texte blink</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
Stephy
charming anti-PRINCE
avatar

Nombre de messages : 714
Date d'inscription : 30/05/2007

MessageSujet: Re: CSS plus en détail...   Jeu 19 Aoû - 22:23

⇢ Fond ; Contrairement à ce qu'on pourrait croire, le fond ne désigne pas forcément le fond de toute une page web. On peut aussi appliquer un fond uniquement aux titres, ou aux paragraphes, ou encore à certains mots d'un paragraphe.

|Fond couleur ; on utilise la propriété CSS "background-color". Elle s'utilise de la même manière que la propriété "color", c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB.
SUR FA :
Couleur fond ~
Code:
<div style= "background-color:#FFFFFF; width: 90px;">Couleur fond ~</div>

|Fond image ; La propriété permettant d'indiquer une image de fond est background-image. Comme valeur, on doit lui mettre url("nom_de_l_image.png"). Bien entendu, votre fond n'est pas forcément en PNG, il peut aussi être en JPEG ou en GIF. Par exemple :
Code:
background-image:url("fond.png");
SUR FA :
Image en fond !
Code:
<div style= "background-image: url( 'http://i30.tinypic.com/30csn7n.jpg' ); background-attachment: fixed; width:100px, height:100px">Image en fond !</div>
OU en plus simple et réunis...
<div style= "background: url( 'http://i30.tinypic.com/30csn7n.jpg' ); fixed; width:100px; height:100px">Image en fond !</div>
Attachement du fond ! [background-attachment]
Fixer l'image : fixed (Elle restera comme en fond du forum et changera lors du scroll)
Faire défiler l'image avec le texte : scroll (Elle restera en fond du texte et ne bougera pas)

Répéter le fond ! [background-repeat] (NE FONCTIONNE PAS TOUJOURS SUR FA)
Ne pas répéter le fond: no-repeat
Répéter sur la première ligne horizontale : repeat-x
Répéter sur la première ligne verticale : repeat-y
Répéter tout simplement : repeat

Positionner le fond ! [background-position]
top, bottom, left, center, right. (Ils peuvent être mis ensemble. ex - top right)


⇢ Espace ; contrôler l'espace (du texte, de la marge, etc). Ici

|Marge ; Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures, et padding pour les marges intérieures.
Élément extérieur : margin | Élément intérieur : padding

Les tailles de ces marges peuvent se déclarer en pixels (px), en em, en %, etc. Tout dépend si l'on veut qu'elles soient fixes ou proportionnelles.
On peut détailler les tailles des marges à l'aide des suffixes -top (haut), -right (droite), -bottom (bas), -left (gauche). Si on ne met que deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à gauche. On peut aussi synthétiser les quatre d'un seul coup (la première valeur étant celle du haut, puis on tourne dans le sens des aiguilles d'une montre).
Code:
margin:2px 5px 2em 0;

|Box model ; lorsqu'on attribue une taille à un élément de type block (à l'aide d'un width ou d'un height), les marges viennent s'ajouter à cette taille.
Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.
SUR FA :
Box model !~
Code:
<div style= "background-color:#FFFFFF; width:200px; padding:40px; margin:auto;">Box model !~</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
Contenu sponsorisé




MessageSujet: Re: CSS plus en détail...   

Revenir en haut Aller en bas
 

CSS plus en détail...

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: TASTY PLAYGROUND :: Codes-