AccueilFAQRechercherMembresGroupesS'enregistrerConnexion
Design optimisé pour Google Chrome et Safari.

Date : 9 de Onohozu 802

Partagez | 
 

 Tutoriel n°3 | Les attributs CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Mizuri

Chef du clan Ichizoku
Chef du clan Ichizoku

Messages : 162
Date d'inscription : 30/05/2010

Détails
Points de Vie:
63/100  (63/100)
Arme: Shurikens
Statut: Chef de clan

MessageSujet: Tutoriel n°3 | Les attributs CSS   Dim 25 Juil - 1:38

Voici une liste des attributs CSS en fonction de ce sur quoi ils agissent.
Ceux qui agissent sur le texte :
text-align: center/left/justify/right (ne marche pas sur les balises de type a, span, img...)

font-size : taille du texte en px (exemple : 14px) ou en valeur relative (exemple xx-small/x-small/small/medium/large/x-large/xx-large) ou encore en %

font-family: nom de la police (préférez tout de même mettre plusieurs police afin que si l'utilisateur ne possède pas la première, il voit la deuxième et ainsi de suite) /!\Si le nom de la police comporte des espaces, mettez-la entre guillemets (exemple "Comic sans MS") N'oubliez pas de mettre la police "serif" (standard) à la fin pour qu'une police de base soit affichée si aucune autre police n'a été trouvée. /!\

text-indent: taille de l'alinéa en px (le paragraphe commencera Xpx plus à droite)
word-spacing : l'espace entre les mots en px
font-style: italic/oblique/normal (pour mettre le texte en italique ou retirer l'italique)
letter-spacing : l'espace entre les lettres en px.
font-weight:bold/normal (pour mettre le texte en gras ou retirer le gras)
font-variant:small-caps/normal (pour que le texte apparaisse en petites majuscules ou pour retirer des petites majuscules)
text-transform:uppercase tout le texte sera écrit en majuscules / lowercase tout le texte sera en minuscules / capitalize la première lettre de chaque mot sera en majuscule / none texte normal
text-decoration:underline souligné / line-through barré / overline ligne au-dessus.
blink clignotant / none texte normal
color: nom de la couleur / code hexadécimal / rgb( quatité de rouge, quantité de vert, quantité de bleu)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://7kanokyon.forumactif.com
Migry

Conseillère du Chef Ensoku
Conseillère du Chef Ensoku

Messages : 19
Date d'inscription : 30/05/2010

Détails
Points de Vie:
100/100  (100/100)
Arme: Un Fouet noir
Statut: Conseillère

MessageSujet: Re: Tutoriel n°3 | Les attributs CSS   Lun 26 Juil - 20:54

Exemple d'un code CSS contenant tous les attributs :
Code:
.CODE {
text-align : center ;
font-size : small
font-family : "Comic Sans MS", Arial, "Courrier New", serif ;
text-indent : 5px ;
word-spacing : 6px ;
font-style : italic ;
letter-spacing : 2px ;
font-weight : bold ;
font-variant: small-caps ;
text-transform : capitalize ;
text-decoration : underline overline;
color : black ;  }
Code:
<div style="text-align : center ; font-size : small ; font-family : "Comic Sans MS", Arial, "Courrier New", serif ; text-indent : 5px ; word-spacing : 6px ; font-style : italic ; letter-spacing : 2px ; font-weight : bold ; font-variant: small-caps ; text-transform : capitalize ; text-decoration : underline overline ; color : black ;">
Et ça donnera :
Un super effet x)

Code:
<div class=CODE>Un super effet x)</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://unknown-s-empire.forum-pro.fr/
Mizuri

Chef du clan Ichizoku
Chef du clan Ichizoku

Messages : 162
Date d'inscription : 30/05/2010

Détails
Points de Vie:
63/100  (63/100)
Arme: Shurikens
Statut: Chef de clan

MessageSujet: Re: Tutoriel n°3 | Les attributs CSS   Ven 6 Aoû - 8:18

Ceux qui agissent sur les bordures et les fonds (attention ne fonctionnent pas avec les balises dites "inline" c'est à dire span, a, img...): Notez que l'on peut intégrer -top/-left/-bottom/-right après border pour n'attribuer la valeur qu'à une seule bordure du cadre
-Bordure-
border-width : thin / medium / thick ou valeur en px
border-style :

border-color: nom de la couleur / code hexadécimal / rgb( quatité de rouge, quantité de vert, quantité de bleu)

-Fond-
background-img:url('URL')
background-color: nom de la couleur / code hexadécimal / rgb( quatité de rouge, quantité de vert, quantité de bleu)

/!\Pour intégrer un fond en html, il ne faut mettre que "background" dans l'attribut style. Notez que cette méthode fonctionne aussi en css


Dernière édition par Mizuri le Mar 31 Aoû - 2:25, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://7kanokyon.forumactif.com
Mizuri

Chef du clan Ichizoku
Chef du clan Ichizoku

Messages : 162
Date d'inscription : 30/05/2010

Détails
Points de Vie:
63/100  (63/100)
Arme: Shurikens
Statut: Chef de clan

MessageSujet: Re: Tutoriel n°3 | Les attributs CSS   Ven 6 Aoû - 8:32

Exemple d'un code CSS contenant tous les attributs :
Code:
.CODE2 {
border-right-width : thick ;
border-bottom-widht: medium ;
border-left-widht: medium ;
border-top-widht: medium ;
border-style: double ;
border-right-style: groove ;
border-top-color: #FFFFFF ;
border-right-color:cyan ;
border-left-color :red ;
border-bottom-color: rgb(25,210,2) ;
background-color: blue }
Code:
<div style="border-right-width : thick ; border-bottom-widht: medium ; border-left-widht: medium ; border-top-widht: medium ; border-style: double ; border-right-style: groove ; border-top-color: #FFFFFF ; border-right-color:cyan ; border-left-color :red ; border-bottom-color: rgb(25,210,2) ; background: blue">
CADRE !!!
(pour plus simple j'ai enlevé le fond bleu sur l'exemple afin qu'on voit bien les bordures)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://7kanokyon.forumactif.com
Contenu sponsorisé




MessageSujet: Re: Tutoriel n°3 | Les attributs CSS   Aujourd'hui à 14:28

Revenir en haut Aller en bas
 

Tutoriel n°3 | Les attributs CSS

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
 :: Parchemins étrangers :: Parchemins banals :: Tutoriel HTML et CSS-
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit | Forums RPG | Incarnations