AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 HTML & CSS n°3

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

Admin


MES POSTS : 20
CHROMOSOME : Féminin
CARNET DE ROUTE
•• AFFINITÉS :
•• PUF: Pseudo
•• CLAN & RANG:

MessageSujet: HTML & CSS n°3   Dim 17 Juil - 8:11


2 - LE CSS




    Bonjour mes petits poulpes à pois jaunes & à rayures vertes ♥️ Quoi ? Vous n'êtes pas des céphalopodes ? =O Conclusion > faut que j'arrête de boire. mais, c'est pas le sujet du jour. Vous et moi, nous avons déjà parcouru une aventure dans les forêts étranges et magnifiques *mais qui peuvent rapidement vous donner envie de balancer votre ordi par la fenêtre* du codage HTML. Je vous ai appris a créer une boîte. Vous ne vous en rappelez pas ? Mais si voyons ! C'est ici. Vous vous rappelez maintenant ? Parfait. Alors, si vous avez essayé, je suppose que vous vous dites "Mince, j'vais quand même pas m'embêter a recopier a chaque fois toutes ces propriétés ..." Malheureusement pour vous ... si vous codez sur WoH si. Sauf exeptions, et si vous voulez effectivement coder uniquement pour WoH, je vous invite à lire tout de suite "Le CSS de WoH" a la fin du tutoriel.

    Maintenant je m'adresse à vous si vous êtes administrateur sur votre propre forum. Car pour vous éviter le recopiage général qui est très embêtant, nous allons toucher a quelque chose qui se nomme le CSS. Normalement, si vous êtes débutant(e), une question doit déjà vous brûler les lèvres ... La réponse est en dessous. Enjoy =)

    °Le CSS, c'est Quoi ?



    Alors mes cocos, le CSS c'est un code fait UNIQUEMENT de propriétés. On pourrait dire, en fait, que le xHTML est la structure de votre code, et que le CSS, c'est tout ce qui va venir le personaliser. Ça a pas l'air, comme ça, mais en réalité le codage CSS est largement plus simple que le codage xHTML ... Ouh, mais je vois que vous avez du mal à suivre. Un peu de patience, mes mignons. À la fin de ce tutoriel, vous me détrônerez largement ! Bon, je disais donc, si on prend par exemple une boîte : le CSS tout seul, vous la verrez pas. Le HTML tout seul, vous la verrez, mais elle ressemblera a rien - sauf si vous avez suivi mon tutoriel Angel . Vous comprenez ? Non ? C'est pas grave : vous COMPRENDREZ ! Bref, la première chose à faire pour bien commencer ce tutoriel serait de vous dire que pour bidouiller le CSS de votre forum, vous devez avoir accès au panneau d'administration. Vous allez ensuite dans couleur > Feuille de type CSS. /!\ IMPORTANT. Si vous n'avez encore jamais touché au CSS de votre forum et qu'il y a quelque chose d'écrit dans cette partie, SUPPRIMEZ TOUT ! c'est celui qui a fait votre design qui a également fait ces codes, et en les utilisant alors que vous avez changé de design, vous faites une violation des droits d'auteurs de cette personne.
    Bref, tout cela nous amène au point deux de notre tutoriel
    [/center]

    °Comment on s'en sert ?

    Telle est la question, mes amis ! L'avantage du CSS par rapport au HTML est qu'il permet de coder le forum dans sa quasi totalité. Mais ici, nous allons rester sur notre boîte, c'est juste pour vous expliquer . En réalité les propriétés CSS sont grosso modo les mêmes que celles du codage HTML. Je vous explique par un exemple très simple :
    Cette boîte

    Code:
    <div style="border-right: 2px dotted #1c0b2f; border-left: 2px  dotted #1c0b2f; border-top: 4px solid #1c0b2f; border-bottom: 4px solid #1c0b2f; background-color: #9984b0; padding: 5px;">Cette boîte</div>

    Je vais adapter mon codage HTML a un codage CSS. Comment faire me demandez vous ? ça n'a pas l'air, mais en réalité c'est simple. Fonctionons par étape.

    Tout d'abord, j'enlève ma DIV & les guillemets qui l'accompagnent que je replacerais plus tard :
    Code:
    border-right: 2px dotted #1c0b2f; border-left: 2px  dotted #1c0b2f; border-top: 4px solid #1c0b2f; border-bottom: 4px solid #1c0b2f; background-color: #9984b0; padding: 5px;
    NE TOUCHEZ SURTOUT PAS AUX POINTS-VIRGULES !

    Deuxième étape, vous donnez un nom a votre div ( moi ce sera "violette" ) et vous l'encadrez des symboles CSSiens : un point devant le nom, on ouvre l'accolade devant les propriétés et on la referme après.
    Code:
    .violette{border-right: 2px dotted #1c0b2f; border-left: 2px  dotted #1c0b2f; border-top: 4px solid #1c0b2f; border-bottom: 4px solid #1c0b2f; background-color: #9984b0; padding: 5px;}

    Pour que le codage CSS fonctionne, il ne vous reste plus qu'à mettre des saut de lignes entre les propriétés.
    Code:
    .violette {
    border-right: 2px dotted #1c0b2f;
    border-left: 2px  dotted #1c0b2f;
    border-top: 4px solid #1c0b2f;
    border-bottom: 4px solid #1c0b2f;
    background-color: #9984b0;
    padding: 5px;}
    Je précise, au cas ou certains n'auraient pas compris mon blabla de tout à l'heure, ce code est à coller dans votre panneau d'administration > Couleur > Feuille type CSS.

    Maintenant, il faut rattacher à nos propriétés la DIV de tout à l'heure, sauf qu'au lieu d'être suivie de "style" elle sera suivie de "class" *quand t'as pas de style, faut avoir la classe !* *Conscience : Oui bon Mélow tes blagues de m*rde, tu te les plies tu tles range* Bref, vous mettez donc ce petit code :
    Code:
    <div class="NOM DE VOTRE BOITE -moi, je vais mettre violette"></div>
    Dans vos sujets, messages etc ... la boîte sera la même partout . Pratique, nan ?

    °&, c'est quoi le CSS de WoH qu'on s'fende la poire ?

    Bien. Vous êtes prêt(e)s ? Je vais vous dévoilez mes plus lourds secrets de HTML ....




































    *imagine l'oeil qui tourne dans l'orbite, le filet de bave a la comissure des lèvres, vite, vite Mélow livre nous tes secrets !* *Conscience : tu te la pètes pas un peu ? u_Y*
    Nan mais ho, tous ceux qui se sont cruts que j'allais leur donner mes meilleurs codes comme ça pour qu'ils copient colle ils peuvent se casser tout de suite, je préviens. Ici c'est un cours, pas un stand de triche u_u' Bref, je ne vais pas vous donner le CSS de WoH, loin de là, je vais me contenter de vous donner les noms de quelques DIV que j'ai faites et que vous pourrez utiliser ici.

    Nom de la div: jaune


    Nom de la div: violette


    Nom de la div: verte


    Des questions ?


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://warriors-of-hell.forumgratuit.org
 

HTML & CSS n°3

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
 :: Préambule :: Question & Idées :: Questions-
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit