• Css : Mode d'emploi ! [MàJ]

     

    Coucou!

    En tant que "graphiste" du site, je n'ai pas réalisé grand nombre d'article. Mais aujourd'hui, je me suis dit, tant qu'a faire du CSS, pourquoi ne pas parler du CSS? 

    C'est pour quoi je suis heureuse de vous présenter ce petit tutoriel, auquel suivra, je l'espère, de très près un second tutoriel sur l'html. 


    I_ Le CSS, qu'est-ce-que c'est?

    Pour faire simple, le CSS est un language utilisé par votre ordinateur afin de mettre en forme et en couleur des pages web.

    Ce language est relié très étroitement avec un autre language: l'html. Je vous parlerai plus de celui-ci dans un tuto lui étant entièrement dédié.

    Le CSS est assez simple à mettre en place, cependant, il nécessite d'y passer un peu de temps, d'avoir beaucoup de patience, mais aussi d'être curieux.

    Pour réaliser votre premier code en CSS, je vous conseille de suivre ce petit tuto qui vous présentera les bases de ce language, de vous emparer d'un stylo et d'un bout de papier, et de d'ouvrir votre logiciel bloc-notes (ou notepad, notepad++).  


    II_Balises et mots clés

    Comme je le disais précédement, le CSS est un language qui est étroitement lié à un autre language, l'html. Ces deux-là sont tellement liés que le CSS n'a aucun sens sans l'html.

    Ce chapitre va se concentrer sur ce qu'on appelle des balises. Ce sont ces même balisees qui vont déterminer sur quel "champ d'action" vont se concentrer les prochaines lignes de votre code. Chaque balise désigne donc un endroit précis de votre page web.

     

    h1
    {
    Cette balise, par exemple, signifie que vos prochaines lignes de code se concentreront sur le titre ayant le plus d'importance dans votre page web. (h= titre ; 1= niveau d'importance).
    Ce petit caractère:{ signifie que vous allez commencer à écrire du code, à l'inverse, celui-ci: } marque la fin de votre code pour la balise choisie.
     
    Conseil perso: Pour éviter que ma page ne soit trop désordonnée, je passe à la ligne entre la balise, le caractère de début de code, le code et chaque ligne de code.
     
    Nous avons déterminé notre champ d'action, ici le titre principal de notre page. Nous allons donc pouvoir commencer à écrire un peu de code...
    h1
    {
    color: rgb(142, 100, 62);
    font-size: 28px;
    text-align: center;
    text-decoration: underline;
    }
    Alors, essayons de comprendre ce que sont les différentes lignes se trouvant entre les deux caractères de début et fin de code....
    Tout d'abord, nous allons parler des mots clés se trouvant dans ces 4 lignes:
    color: 
    font-size: 
    text-align: 
    text-decoration: 
     
    Le mot clé color: indique à votre ordinateur que vous vous concentrez sur la couleur de police du titre.
    Le mot clé font-size: indique que quelle taille aura la police de votre titre.
    text-align: définit la position du texte, c'est-à-dire centré (center), à droite (right), gauche (left), ou aucun (none).
    Enfin, le mot clé text-decoration: vous permet d'ajouter un style particulier (et facultatif) à votre titre. Par exemple: souligné=underline, italique=italic....
     
    /! Attention: n'oubliez pas les deux points : après chaque mot-clé!!! 
     
    Remarque: Vous remarquerez que le CSS est composé de balises et mot-clés exclusivement en Anglais!
     
    Bon, tout ça est très bien, mais vos mots-clé ne peuvent servir à grand chose sans être suivis des données qui les définissent.
    Dans le chapitre suivant, nous allons donc voir quelques lignes de code qui vont nous permettre de définir le plus précisemment possible l'apparence que vous souhaitez donner à votre titre.
    III_Définir une apparence avec des chiffres et des lettres
     
    Conseil perso: Je vous conseille de noter chacun des mots-clé suivants et des autres chapitres ainsi que leur signification sur un bout de papier ou sur word afin de les apprendre plus facilement.
     
    Vous pouvez maintenant, si ce n'est pas déjà fait, ouvrir une fenêtre sur Bloc-notes.
    Entrez le code suivant en guise de départ:
     
    h1
    {
    color: rgb(0, 0, 0);
    font-size: 12px;
    text-align: none;
    text-decoration: underline;
    }
     
    A quoi correspondent ces chiffres, ces lettres et ces signes après les différents mots-clé?frown
    Ce sont tout simplement vos choix d'apparence.
    Pour commencer, j'ai prit un code pas très personnalisé: le code ci-dessus va, une fois relié à une page html, afficher un titre d'importance première dont les caractères seront de couleur noir, de taille de police 12, sans alignement particulier et il sera souligné.
    Remarque: il existe plusieurs languages de définition de couleur. Ici, j'utilise le language RGB utilisé par le logiciel paint. Cependant, ce n'est pas le plus commun. Donc si vous souhaitez utiliser un language plus "pro" téléchargez le logiciel "boîte à couleur" avec le lien suivant: http://www.01net.com/telecharger/windows/Multimedia/outils_internet/fiches/17864.html
     
    Le code suivant, le mot-clé font-size détermine la taille de la police. Ici, elle fera 12 pixels. C'est une taille dite "défaut" car très souvent utilisée.
    La ligne commençant par le mot-clé color: , vous l'aurez sans-doute compris, va déterminer la couleur de votre police. (On utilise le language rgb, c'est à dire le plus facile à utiliser mais un des moins répandu.) On voit un zéro pour chaque couleur (Red= rouge, Green= vert, Blue=bleu), donc on aura une couleur de police noire.
    Pour ceux qui veulent utiliser un autre language de coloris, vous pouvez dès à présent ouvrir l'application "Boîte à couleur" dont le lien de téléchargement se trouve un peu plus haut:
     
    Hébergement photos  
     
    Dans le cadre du CSS, et donc de ce tutoriel, nous allons utilisé le language utilisé par la boite à couleur. On voit un exemple de ce code sur l'image ci-dessus: #000000. Comme indiqué dans la case de simulation (le carré noir) le code #000000 nous donnera une couleur noire. cheeky
    Je vais revenir sur ce petit logiciel juste après ce chapitre d'explication de code, ne vous inquiétez pas.
     
    Ensuite, nous avons le mot-clé text-align: , il s'agit du mot-clé indiquant à votre ordinateur quel sera l'alignement de votre texte. Le petit mot none signifiant "aucun" informe à l'ordinateur qu'il n'a pas besoin d'appliquer un alignement de texte particulier. Il utilisera un alignement par défaut qui correspond à un alignement à gauche de l'écran (le plus souvent).
     
    Le dernier mot-clé de ce morceau de code est text-decoration. Ce mot-clé va vous permettre de "personnaliser" un peu votre police en ajouttant par exemple un soulignement, en la mettant en italic, en gras, etc... Il est suivit de la définition  underline ce qui soulignera le texte concerné.

    Dans le chapitre précédent on a vu que les mots-clé, relié à des "définitions", permettaient de personnaliser une police au sein d'un texte. Nous avons également prit rapidement connaissance d'un logiciel de choix de coloris, pratique pour nous aider à choisir une couleur précise. Dans le chapitre suivant, on va voir ce logiciel un peu plus en détail... Alors tout le monde exécute" la boîte à couleurs" s'il vous plait! laugh
     
    IV Utiliser "La Boîte à Couleurs"
     
                                             / Cet article est en cours de rédaction. Merci de votre compréhension !
     
     

    Tags Tags : , , , , , , , , , , , , , ,
  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :