AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

 :: Hors RPG :: HTML&CSS Voir le sujet précédent Voir le sujet suivant Aller en bas

Le CSS

avatar
Messages : 9
Date d'inscription : 04/06/2014
Voir le profil de l'utilisateur
Ven 20 Juin - 13:43
Grosso modo, le CSS ( feuille de style en cascade, en français littéral ), si tu veux, c'est une langue internet qui permet d'améliorer le design des sites étoussa. on l'introduit par la propriété ' style ' après l'ouverture de la div ( cf. www ), ce qui donne :

Code:
<center><div style="contenu"></div></center>

( en général, c'est toujours mieux de centrer la div parce que sinon, ça va être coller aux bords et c'est pas forcément joli )( même le center, faut le fermer, sinon, la suite du code sera centré, et si tu veux pas que ça le soit .. puis ça peut aussi apporter des erreurs )

Comparé au HTML, au lieu de séparer par des guillemets, tu sépares les propriétés par des points virgules, comme ça :

texte


Code:
<center><div style="background:#f4f4f4; width:500px;">texte</div></center>

Avec ce simple code, tu peux quasiment faire tout ce que je fais actuellement au niveau des design, comme pour Tenjo Gakuen ou encore, Rinku. Parce que oui, pour tout ça, j'utilise, pour les 3/4, que des div avec du css dedans + le html. captain obvious, merci.
Revenir en haut Aller en bas
avatar
Messages : 9
Date d'inscription : 04/06/2014
Voir le profil de l'utilisateur
Ven 20 Juin - 14:00
La modification de la police


Pour modifier l''écriture, c'est un peu comme en html, sauf que tu l'introduis en css. A chaque propriété ( ou presque ) la concernant, il faudra mettre le " font " puis l'origine de la modification : la taille ( size, qui sera désormais en pixel ), la couleur, etc. comme :

KOUKOU


Code:
<center><div style="font-size:35px; color:#fe0101">KOUKOU</div></center>

Concernant la police d'écriture, on n'utilisera plus le " font face " mais le " font family ", raccordé avec un tiret ( donc font-family ), ce qui donne :

KOUKOU 8D


Code:
<center><div style="font-family:oswald; font-size:35px; color:#fe0101;">KOUKOU 8D</div></center>

Je pense que t'as dû le remarquer, mais pour combler l'espace entre chaque mots, en CSS, on remplace par un tiret. C'est comme ça et on peut pas faire autrement, sinon ça fait foirer le code.


Différentes propriétés pour l'écriture


L'alignement du texte

TEXT-ALIGN:CENTER ; pour centrer
TEXT-ALIGN:LEFT  ; pour que le texte soit aligné à gauche
TEXT-ALIGN:RIGHT  ; pour que ça soit à droite
TEXT-ALIGN:JUSTIFY ; pour que ça soit tout beau tout propre, bien aligné à la fin.

Le style du texte

FONT-WEIGHT:BOLD ; pour mettre en gras
FONT-STYLE:ITALIC ; pour mettre en italique
TEXT-DECORATION:UNDERLINE ; pour souligner

Les majuscules & minuscules

TEXT-TRANSFORM:UPPERCASE ; pour mettre en majuscule
TEXT-TRANSFORM:LOWERCASE ; pour mettre en minuscule

L'espacement

LETTER-SPACING:chiffrePX ; pour espacer les lettres comme ça :

Texte

Code:
<div style="letter-spacing:4px;">Texte</div>

( je sais pas si tu y as déjà pensé, mais si le chiffre est positif, alors il peut être également négatif, comme :

Texte

Code:
<div style="letter-spacing:-2px;">Texte</div>

)

( il est possible que j'ai oublié des trucs, et si c'le cas, je reviendrai éditer plus tard & j'te préviendrai )
Revenir en haut Aller en bas
avatar
Messages : 9
Date d'inscription : 04/06/2014
Voir le profil de l'utilisateur
Ven 20 Juin - 14:29
Début de cadre : le background


ET LE TRUC ENFIN ATTENDU
j'ai envie de dire
le background, ou l'arrière plan #merci captain, ça sert à plein de choses, mais surtout à te repérer dedans en fait. On voit clairement les limites de ton cadre grâce à la largeur que t'as imposé ( rappel : width:chiffrepx ), et du coup, pour faire un background rien qu'en couleur, tu fais :

texte

Code:
<center><div style="background:#f4f4f4; width:500px;">texte</div></center>

et c'est tout, sisi ! pas à faire ou à savoir, juste " c'est tout " pour créer un background, aha. xD

Différentes propriétés

Les différents bg

BACKGROUND:#code couleur ; pour un background en couleur seulement
BACKGROUND-IMAGE:URL(adresse de l'image); ; pour un background image
Revenir en haut Aller en bas
Contenu sponsorisé
Contenu sponsorisé
Revenir en haut Aller en bas
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Pensionnat Angel || V:1 :: Hors RPG :: HTML&CSS-
Sauter vers: