C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Slideshow horizontal infini
Hier à 08:26 par Leiris

» Infobulle avec effets CSS3
Hier à 01:35 par Helena-Bella

» Limitation de la signature
Ven 18 Aoû 2017, 23:36 par Helena-Bella

» Effet de volet glissant sur un bloc
Ven 18 Aoû 2017, 18:56 par Blocku

» Dimensions des avatars
Ven 18 Aoû 2017, 06:12 par Mortuus

» Signature codée
Jeu 17 Aoû 2017, 22:31 par Helena-Bella

» Signature codée
Jeu 17 Aoû 2017, 22:27 par Helena-Bella

» Signature codée avec onglets
Jeu 17 Aoû 2017, 22:18 par Helena-Bella


Partagez | 
 

Bases CSS - Cours élémentaire

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://www.css-actif.com
avatar
RocketMan
RocketMan

Masculin Messages : 3082



Bases CSS - Cours élémentaire


Le présent cours vous permettra d'acquérir des connaissances générales en CSS et/ou HTML. Ces deux langages informatiques sont mis à l'honneur sur CSSActif et le forum se fait un plaisir de vous offrir gratuitement ces formations. Sachez que nos cours constituent une excellente base pour quiconque voudrait approfondir davantage ses connaissances par la suite et profiter au maximum de la puissance du CSS/xHTML pour ses réalisations web futures.

Table des matières


Les exercices théoriques

Chaque chapitre se termine par un exercice théorique concernant la matière abordée durant ledit chapitre. Leur importance est indéniable, toutefois, il n'est pas obligatoire de les compléter avant de passer au chapitre suivant, vous êtes grands et savez ce qu'il faut faire Wink. Lorsque vous avez terminé un exercice, il doit être auto-corrigé dans cette section : Exercices d'entrainement. Ces travaux ne doivent pas m'être envoyés par MP.


Questions, commentaires & remarques


En parcourant les chapitres du cours, il se peut que vous vous posiez certaines questions directement reliées avec la matière abordée, ce n'est pas grave, c'est même normal. Sachez que, si la situation se présente, toutes vos questions pourront être postées dans le *Lève sa main* de la section. Un codeur, modérateur ou simplement quelqu'un qui connaît la réponse, vous répondra dans les plus brefs délais Wink. Ce sujet accueillera aussi vos remarques et commentaires reliés au contenu du cours.


Dernière édition par Orange le Jeu 12 Avr 2012, 11:40, édité 33 fois
MessageSujet: Bases CSS - Cours élémentaire   Lun 07 Sep 2009, 15:36
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.css-actif.com
avatar
RocketMan
RocketMan

Masculin Messages : 3082



Introduction au CSS


Le terme CSS est un acronyme pour Counter Strike Source Cascading Style Sheets, Feuilles de Style en Cascade en français. Il permet de modifier le style et la présentation d'une page HTML. En d'autres mots, c'est le code CSS qui indiquera la police utilisée pour les pages, les couleurs, les dimensions des tableaux etc.

Langage connexe

On sait déjà vaguement à quoi sert le CSS et tout ça devrait devenir plus clair dans cette partie, car on introduit ici un autre langage de description de documents web, essentiel au fonctionnement du CSS : le HTML. C'est le langage de base de la majeure partie des pages web que vous visitez ; c'est à partir de lui que les autres langages de description de documents web peuvent travailler. Le CSS n'échappe pas à cette règle, ni vous d'ailleurs Twisted Evil
Je m’égare, en gros le HTML définit la structure, le squelette de votre page, c'est avec lui que vous écrirez vos textes, créerez vos tableaux, afficherez des images etc. Le HTML peut aussi donner la couleur à votre texte et au fond, mais ça reste minimaliste, peu pratique et surtout déconseillé par les standards web actuels. C'est pourquoi le CSS est utilisé pour les sites : en plus de pouvoir modifier drastiquement le style de votre page, il peut être centralisé. Sous le choc

Je m'explique : imaginez coder un site tout en HTML, vous pouvez donner les couleurs de votre choix, ajouter une bordure à vos tableaux, etc., mais à chaque page que vous recréerez par la suite, il faudra réécrire toutes les mêmes informations pour donner le style, ce qui augmente le poids de vos pages, et si vous voulez changer de design, il vous faut repasser par chaque page, changer chaque couleur, modifier chaque police, c'est tout un boulot. Alors qu'à la place vous auriez pu utiliser un seul fichier CSS, lequel aurait défini les couleurs pour l'ensemble de votre site. Ensuite pour modifier votre design vous n'auriez eu qu'à changer les couleurs dans le code CSS et la modification aurait été appliquée sur toutes les pages de votre site beaucoup plus rapidement ! Ce n'est pas tout : avec le CSS vous pouvez arrondir les coins d'un tableau, changer l'opacité de certains éléments, donner une couleur différente aux liens. Ces effets ne peuvent être appliqués en HTML : il vous faut du CSS.

C'est ce que Forumactif fait en créant un seul code CSS appliqué à toutes les pages de votre forum. Peut-être ne vous en êtes-vous pas rendu compte, mais dans le menu "couleur" du panneau d'administration on vous donne le choix des couleurs pour le fond du forum, pour les cadres etc. En changeant une valeur là-dedans, vous modifiez le CSS de votre forum ! Forumactif a créé cette interface pour faciliter la tâche des administrateurs, c'est tout Calme. Mais le défaut de cette interface est qu'elle vous prive de toute la puissance du CSS et ne vous permet que de changer les couleurs, finalement elle ne donne que la portion HTML du CSS. N'avez-vous jamais osé cliquer sur "Feuille de style CSS" dans l'onglet au-dessus du menu des couleurs ? Allez-y cliquez Twisted Evil, il va falloir vous y résoudre.

Quoi ? Euh.. Vous ne savez pas du tout de quoi je parle ? Pas de problème, un tutoriel à été fait pour vous expliquer comment accéder à l'option en question: Comment placer un code CSS dans le style de son Forumactif ?. Donc pour résumer en une phrase ce que je viens de vous expliquer en 500 mots : le CSS permet de donner un style complet à votre forum ou à n'importe quelle page HTML.

Les outils

Cette partie sera moins longue que la précédente promis, c'est que quand je suis dans mon élan, c'est dur d'arrêter Embarassed. Donc, les outils, il va vous en falloir. A priori, tout éditeur de texte simple (je pense ici à Notepad pour Windows) peut vous permettre de coder le CSS, vous pouvez même coder dans la boîte de texte de "Feuille de style CSS" dans le PA (panneau d'administration de Forumactif). Moi, en grand paresseux que je suis, j'utilise Dreamweaver CS4. Le logiciel est malheureusement payant et pas qu'un peu Sad Il n'en est pas moins fantastique, faire du CSS avec ce logiciel est un vrai jeu d'enfant grace à l'autocomplétion : vous entrez les premières lettres d'une propriété (que nous verrons plus tard) et il vous donne les suites possibles, ainsi que toutes les valeurs (bientôt aussi) que peut prendre chaque propriété. J'imagine que peu d'entre vous sont disposés à payer pour ce logiciel, aussi vous ai-je déniché un autre logiciel (en français !) :
Téléchargement de la dernière version : Cliquer ici, puis sur "Notepad++ Installer" (Windows)

L'installation devrait se passer sans encombre laissez tout les paramètres par défaut, si vous rencontrez un problème, levez votre main Wink.

Première ouverture de Notepad++, vous vous demandez sûrement pourquoi je vous ai recommandé ce logiciel. Son plus gros avantage (et son seul), c'est la coloration sélective des codes, mais pour que le logiciel colore vos CSS, il va falloir lui dire que le code donné est du CSS. Pour ce faire, rendez-vous dans Language > C > CSS. Ainsi le logiciel donnera une certaine couleur à chaque élément de votre code (prenez note qu'une fois le code copié ailleurs, les couleurs ne seront plus affichées), c'est nettement plus facile de démêler classes, propriétés et valeurs de cette façon (évidemment tout ces termes seront expliqués plus loin).

Edit de 'Christa : Il colore également en rouge les balises fermantes et ouvrantes d'un bloc quand vous posez votre curseur à côté (ce qui vous permet de voir si une balise est mal fermée), et un double clic sur un bout de texte (un nom de classe par exemple) vous permet d'en voir toutes les occurences dans votre document. Il peut aussi faire de l'auto-complétion (faites Ctrl+barre d'espace pendant que vous écrivez).

Syntaxe du code

C'est notre premier vrai "morceau" de CSS, contemplez quelques instants le titre, il marque le point où je vais commencer à utiliser la balise [ code ]. C'est ici que nous apprendrons "l'orthographe" du code ou comment votre CSS devra être structuré. D'abord, sachez qu'il existe trois façon d'appliquer le CSS dans une page :

  1. CSS Externe : Je vous en ai parlé dans le "Langage connexe". C'est un document qui ne contient que du CSS, qui utilise l'extension de fichier .css (à la place de .doc, .txt ou .html, par exemple) et qui, pour être vraiment utile, doit être "appelé" par une page HTML. C'est la façon utilisée par Forumactif pour gérer le CSS de ses pages. Pour lier un CSS externe, on ajoute ce code dans l’entête ( <head> </head>) d’une page HTML :
    Code:
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="mon_fichier_css.css" />
    Ça, vous n’avez pas vraiment besoin de le savoir, sachant que Forumactif comporte à la base un code similaire pour appeler le CSS. Si vous avez à coder un site, c’est la méthode la plus pratique si on prend en considération les avantages spécifiés plus haut.

  2. CSS Interne : Contrairement au CSS externe, le CSS interne n’est pas appelé dans l’entête d’une page HTML. L’entièreté du code CSS est placé entre les balises <head> et </head> de la page. Personnellement, je trouve que c’est la manière la moins pratique d’utiliser le CSS. Forumactif n’utilise pas cette méthode, mais tant qu’à faire un cours de CSS aussi bien vous la montrer :
    Code:
     <style type="text/css">
    <!--
    Code CSS ici !
    -->
    </style>
  3. Style en ligne : la troisième méthode, consiste à inclure le code CSS directement dans une balise HTML, comme dans cet exemple : (on pourrait remplacer span par div, p etc.)
    Code:
    <span style="propriétés CSS"> Code HTML </span>
    Cette méthode peut être utilisée partout, dans un contexte « Forumactivien ». Elle pourrait surtout vous être utile à l'intérieur des messages, mais ceci étant un cours basique, elle ne sera pas détaillée davantage. Son principal inconvénient est qu'il faudrait modifier manuellement la balise lors d’un changement de design ou alors utiliser les classes, autre sujet qui ne sera pas abordé ici.

Essentiellement, peu importe la méthode utilisée, le CSS reste du CSS, il se code exactement de la même manière dans les deux premiers cas, et légèrement différemment pour ce qui est du CSS embarqué.

Chaque feuille de style CSS est divisée en plusieurs règles CSS contenant un bloc de propriétés, lui-même précédé par un sélecteur (élément, classe ou identifiant (seuls les éléments seront abordés ici)). Chaque propriété du bloc est aussi accompagnée d'une valeur. Beaucoup de vocabulaire ici, mais concrètement ça veut dire quoi ? Euh..
Code:
element {
  propriété1 : valeur ;
  propriété2 : valeur ;
  propriété3 : valeur ;
 }
  • élément : C'est lui qui sera influencé par les propriétés du bloc de propriétés. On doit absolument le spécifier dans notre code, sans quoi les propriétés ne pourraient être appliquées. L'élément est un type de sélecteur parmi tant d'autre.

  • Règle : (ou bloc de propriétés) Elle contiendra toutes les propriétés que vous voulez appliquer à votre élément (et autre sélecteur) et doit être délimitée par des accolades ({,}).

  • Propriétés : Elles sont incluses entre les accolades ({,}) du bloc de propriétés et finissent toujours par deux-points (:), lesquels sont suivis par...

  • des valeurs : Pour faire simple, je dirais que les valeurs précisent l'effet des propriétés associées en leur disant ce qu'elles doivent faire. La propriété dit : « Changer la couleur du texte » et sa valeur pourra être "rouge", "bleu", "vert" par exemple. Les valeurs finissent toujours par un point-virgule (;)

  • déclaration : Il s'agit du couple propriété et valeur.

    Exemple d'un groupement (vous n'avez pas besoin de savoir à quoi ça sert, essayer juste de repérer l'élément, les propriétés et les valeurs. Rien de difficile, elles ont été colorées).
    Citation :
    body {
    background-repeat: no-repeat;
    background-image: url('fond.jpg');
    background-position: center;
    background-attachment: scroll;
    }

Ceci conclut l'introduction au CSS, j'espère ne pas vous avoir fait trop peur, j'ai fait la première partie très longue pour tester votre persévérance, m'assurer que tous comprennent bien, sachant que ce sera essentiel pour la suite. Je crois que vous aurez assez de quelques jours pour tout lire et faire votre premier exercice sur la syntaxe du code qui suit.

Exercice 1 : Syntaxe du code

Spoiler:
 

Bonne chance Paix



{ I would love to change the world, but they won't give me the source code }


Dernière édition par Orange le Dim 18 Déc 2011, 16:24, édité 6 fois
MessageSujet: Re: Bases CSS - Cours élémentaire   Mer 09 Sep 2009, 22:30
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.css-actif.com
avatar
RocketMan
RocketMan

Masculin Messages : 3082




Les propriétés
Rappel :
Orange a écrit:

  • propriétés : Elles sont incluses entre les accolades ({,}) du bloc de propriétés, finissent toujours par un deux-points (:) et donnent le style à votre page.

Vous comprenez qu'elles seront au cœur même de votre code CSS : ce sont elles qui agissent réellement sur le style de votre forum (ou de tout autre page web). Il sera donc primordial de les apprendre le plus rapidement possible, ça vous sauvera énormément de temps plus tard. Ce n’est pas tout, vous devrez aussi connaître quel type de valeur peut être donné à chaque propriété. Donc, nous avons près de 50 propriétés basiques, qui peuvent chacune prendre en moyenne trois valeurs ce qui nous fait près de 150 possibilités à retenir ; évidemment ce n'est qu'une grossière estimation, mais aussi bien commencer tout de suite.

fond ~ background


    Vous aurez remarqué que toutes les propriétés en CSS sont en anglais. Oh My God ! Si vous maîtrisez cet autre langage franchement plus complexe, ce sera certainement plus facile pour vous car les propriétés du CSS en disent beaucoup sur leur utilité. Prenons par exemple les propriétés pour le style du fond : elles commencent toutes par background- (fond en anglais, j’espère que je ne vous apprends rien) et après background, il y a un autre mot anglais qui vient préciser la propriété.

    Attention : Je veux tout de suite mettre au clair quelque chose d’important ; quand on parle de fond, on ne parle pas uniquement du fond de la page. On peut parler du fond d’un tableau, d’un paragraphe et même d’une ligne de texte, oui c’est possible.

    Sans plus attendre, je vous dévoile les propriétés pour le fond :

    Propriétés

    Description

    Valeurs

    background-imageCette propriété vous permettra d'afficher une image sur le fond de vos éléments et classes. url(URL)
    none*
    background-colorComme elle l'indique, la propriété donnera une couleur unie au fond de l'élément ou de la classe. color-rgb
    color-hex
    color-name
    transparent*
    background-attachmentSurtout utile pour le fond de la page, la propriété vous permettra de "fixer" l'image de fond. Ainsi, le fond ne bougera pas, il restera toujours à la même place, ce sont les tables du forum qui bougeront. scroll*
    fixed
    background-positionCette propriété placera l'image de fond de votre site selon une position sur le fond de votre forum. L'effet n'est pas très visible sans "background-repeat". top left*
    top center
    top right
    center left
    center center
    center right
    bottom left
    bottom center
    bottom right
    x% y%
    xpos ypos
    background-repeatLa propriété permet de gérer la répétition de l'image du fond. repeat*
    repeat-x
    repeat-y
    no-repeat
    backgroundPermet de réunir toutes les propriétés de fond en une seule.background-color
    background-image
    background-repeat background-attachment background-position
    * valeur (par défaut) lorsque la propriété n'est pas donnée.

    Oui, certaines valeurs peuvent rester floues ; prenons par exemple « rbg », comme tel ça ne dit pas grand-chose. C’est pourquoi toutes les explications sur les valeurs seront données au prochain chapitre. Dire que je m’égare déjà du plan prévu, c’est tout moi ça Rire. D’autres par contre sont faciles à mettre en place, « no-repeat » n’est pas bien difficile à comprendre Wink.


texte ~ text


    Les propriétés de texte commencent presque toutes par le préfixe text-. Elles sont nombreuses et très importantes à retenir, prenez le temps de lire chaque description :

    Propriétés

    Description

    Valeurs

    colorCette propriété modifiera la couleur du texte de l'élément. color-rgb
    color-hex
    color-name
    directionElle vous permettra de définir le sens du texte de l'élément. ltr*
    rtl
    line-heightDéfinit l'espace entre les lignes d'un même texte.

    normal*
    number
    length
    %

    text-alignPermet d'aligner le texte de l'élément selon la valeur donnée.

    left*
    right
    center
    justify

    vertical-alignPour défénir l'alignement de votre texte sur l'axe vertical de l'élément.

    baseline
    top
    middle
    bottom
    length
    %

    text-decorationDonne la "décoration" au texte de l'élément affecté. none*
    underline
    overline
    line-through
    blink
    text-indentPermet d'ajouter un espace vide au début d'un paragraphe.length
    %
    text-transformCette propriété permettera de contrôler les lettres de l'élément. none*
    capitalize
    uppercase
    lowercase
    letter-spacingPermet de modifier l'espace entre les caractères.normal*
    length
    word-spacingPermet de modifier l'espace entre les mots d'un élément. normal*
    length
    * valeur (par défaut) lorsque la propriété n'est pas donnée.


caractères ~ font


    Pour comprendre la suite, il est très important de connaître la différence entre text et font. Sinon, vous allez (tout comme moi) confondre les propriétés de chacune des catégories. Aussi bien vous rentrer ça dans la tête tout de suite : rire :. Je vais donc tenter de vous expliquer le plus clairement possible cette différence. Simplement, disons que les propriétés de caractères fonctionnent même lorsque qu’il y a une seule lettre dans l’élément. Prenons par exemple la propriété de texte line-height, on a beau la définir, si l’élément ne contient qu’un seul caractère on ne verra pas son effet. À l’inverse, la propriété de caractère font-size (pour la grosseur des caractères) sera remarquable même lorsqu’il y a une seule lettre qui compose l’élément. Évidemment, il y a quelques exceptions, mais en gros on peut expliquer ainsi la différence entre font et text.

    Les propriétés de caractères commencent toutes par font-, les voici :

    Propriétés

    Description

    Valeurs

    font-family Cette propriété vous permettra de changer la police de votre caractère.family-name
    generic-family
    font-size Elle permet de changer la grosseur des caractères.xx-small
    x-small
    small
    medium
    large
    x-large
    xx-large
    smaller
    larger
    length
    %
    font-style La propriété permet de changer le style de votre caractère.normal*
    italic
    oblique
    font-variant La propriété permet de donner une variation à vos caractères. normal*
    small-caps
    font-weight Utile pour modifier l'épaisseur de vos caractères. normal*
    bold
    bolder
    lighter
    100
    200
    300
    400
    500
    600
    700
    800
    900


margin, padding, border

    C’est qui ceux-là :huh : ? En fait, le margin et le padding définissent l’espace interne et externe de l’élément, tandis que le border le contourne, observez bien le schéma ci-dessous :


    Vous aurez donc compris que le margin (marge) donne l’espace entre l’extérieur de l’élément et la marge d’un élément voisin. Le border (bordure) (invisible par-défaut) délimite les bords de l’élément, c’est la frontière entre l’extérieur et l’intérieur de l’élément. Le padding (euh…la marge interne) défini la distance entre la bordure et le contenu de l’élément.

    Le margin et le padding étant très liés, je les ai rassemblés dans un seul tableau :

    Propriétés

    Extensions*

    Valeurs

    margin-top
    -bottom
    -left
    -right

    length
    %

    padding
    *Si vous n'ajoutez aucune extension, la valeur de la propriété sera donnée pour tous les côtés.

    Les propriétés de bordures sont plus nombreuses et complexes :

    Propriétés

    Extensions

    Extensions

    Valeurs

    border-top
    -bottom
    -left
    -right

    -color

    Donne la couleur de la bordure. color_name
    hex_number
    rgb_number
    transparent
    -styleDonne le style de la bordure. none
    hidden
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
    inherit
    -widthDonne l'épaisseur de la bordure. thin
    medium
    thick
    length


    Ainsi, la propriété border peut prendre à elle seule jusqu’à deux extensions. L’une désignant le côté affecté (haut (top), bas (bottom), gauche (left), droite (right)), l’autre l’apparence de la bordure (couleur (color), style (style), grosseur (width)). Elles peuvent être agencées de plusieurs façons que voici :

    • Deux extensions : Lorsque l’on donne à border les deux types d’extensions possibles, elles doivent toutes être séparées par un trait d’union (-) déjà inclus dans la liste. Sous forme correcte, la première extension doit toujours être celle qui désigne le côté affecté par la bordure. Exemples de propriétés étendues : "border-top-style: [valeur];","border-bottom-color: [valeur];" et "border-right-width: [valeur];"

    • Une extension : On peut aussi donner à border un seul des deux types d’extension donnés, auquel cas, il n’y a évidement pas d’ordre et toutes les combinaisons sont possibles : "border-style" est tout aussi acceptable que "border-left". Si par exemple on utilise une extension de la deuxième colonne du tableau, l’apparence définie par la valeur serait appliquée sur tous les côtés de la bordure. Si on utilisait une extension de la première colonne, on pourrait définir une apparence propre à chaque côté de l’élément. Sous le choc Oui, vous avez bien compris "apparence". Grâce aux multi-valeurs et aux extensions de côtés, on peut effectivement donner l'apparence pour chaque côté de la bordure. Simplement parce que les valeurs qui peuvent être prises par les extensions de la première colonne sont la deuxième colonne d'extensions. Par exemple, "border-left" peut prendre les mêmes valeurs que "border-style", "border-width" et "border-color".

      Ainsi, "border-left: 1px dashed #00000" est une propriété + valeurs totalement fonctionnelles. C'est ça le multi-valeurs : une propriété qui peut prendre plus d'un type de valeurs séparées par des espaces (il n'y a aucun ordre à respecter). Ici, "border-left" prend "border-style", "border-width" et "border-color" comme valeurs.

    • Sans extension : C’est le "border" tout simple. Lui-même prend toutes les extensions de la première colonne du tableau, du coup les valeurs qu’on lui donne affecteront les bordures de tous les côtés. "border" est lui aussi multi-valeurs : il prend déjà toutes les extensions de la première colonne, mais on peut lui donner les valeurs de la seconde. Ainsi, "border: 1px dashed #00000" donnera un résultat semblable à l’exemple précédent, sauf que la bordure fera tout le tour de l’élément.

    J’ai introduit ici le concept de multi-valeurs. "border" n’est pas la seule propriété qui a cette particularité, mais c’est la seule qui en vaut réellement la peine. Je vous redonne le lien de *Lève sa main*, vu la complexité de la section je crois que ça sera nécessaire Wink.

autres


    Deux dernières petites propriétés très utiles dont on ne pouvait se passer pour une utilisation élémentaire du CSS. Le "width" et le "height"
    1. Width : Très pratique, le "width" permet de donner la largeur de votre élément.
    2. Height : Le "height" définit la hauteur de votre élément.

    Ces deux propriétés peuvent prendre les valeurs "length" et "%"




Vous avez lu jusqu'à la fin ce deuxième chapitre du Cours élémentaire . Félicitations ! Vous avez aussi franchi le point de non retour. À partir de maintenant, les chapitres s'emboîteront les uns dans les autres et il faudra tout lire, pour comprendre vraiment les démarches à suivre pour coder en CSS. Si vous pensez que c'est dur de tout lire, imaginez de tout écrire Rolling Eyes. Je vous donne donc votre devoir de chapitre :

Exercice 2 : Je veux... une propriété

Spoiler:
 



{ I would love to change the world, but they won't give me the source code }


Dernière édition par Orange le Jeu 06 Jan 2011, 13:37, édité 5 fois
MessageSujet: Re: Bases CSS - Cours élémentaire   Lun 21 Sep 2009, 15:27
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.css-actif.com
avatar
RocketMan
RocketMan

Masculin Messages : 3082



Les valeurs des propriétés CSS

Ça vaut bien la peine de valoriser les valeurs, n'est-ce pas ? xD
Bon d'accord, elle n'est pas drôle. Neutre

Rappel :
Orange a écrit:
valeurs : Pour faire simple, je dirais que les valeurs précisent l'effet des propriétés associées en leur disant ce qu'elles doivent faire. La propriété dit : « Changer la couleur du texte » et sa valeur pourra être "rouge", "bleu", "vert" par exemple. Les valeurs finissent toujours par un point-virgule (;)

Les valeurs sont donc essentielles aux propriétés, sans les valeurs (ou en utilisant les mauvaises valeurs), le résultat de votre code serait invisible, pas très réjouissant quand on vient de passer une heure à mettre en place notre CSS. L’exemple du rappel est assez parlant, les valeurs vont définir les propriétés, clarifier leur rôle en somme.

Si vous êtes arrivé jusqu’ici, c’est que vous savez quelle propriété peut prendre quel type de valeur, mais certains types ne sont pas évidents à décoder, il faut savoir comment les mettre en place et surtout connaître le résultat propre à chaque valeur. C’est ce que vous allez apprendre ici avec, dans la mesure du possible, des exemples concrets. Assez de blablatage, passons à ce qui nous intéresse : les valeurs en CSS.


Les "color"s

Pas besoin d'être un expert de la langue pour comprendre de quoi je parle ici, je traduis au cas où certains seraient dans le noir total : il s'agit des valeurs de couleurs. Il y en trois types : RGB-number, Hex-number et color-name. Voici donc :

  • Color-name : Il s'agit d'ajouter le nom anglais d'une couleur à la propriété ; il existe énormément de noms de couleurs en HTML/CSS, il sera impossible pour vous de toutes les retenir et pour moi de toutes les lister. Pourtant, certains l'ont fait. Je vous donne donc un lien bien pratique si vous choisissez de travailler avec le "color-name": Noms des couleurs.

    Quelques exemples :
    Citation :
    Code:
    color: red;
    Exemple
    Code:
    color: blue;
    Exemple
    Code:
    color: green;
    Exemple

  • Hex-number : "Hex", pour hexadécimal. Vous devrez donc ajouter un code de couleur comme valeur à votre propriété. Attention chaque code hexadécimal commence par le symbole numéro (#) pour indiquer l'utilisation d'un code hexadécimal. Personnellement, je préfère la méthode hexadécimale, car il y a plus de teintes disponibles qu'avec le color-name. CSSActif met son sélecteur de couleurs complet à votre disposition, vous n'aurez pas besoin d'apprendre les codes par cœur Wink. Si on reprend les exemples précédents en appliquant le hex-number à la place, remarquez la différence de teinte pour certaines couleurs : l'équivalence hexadécimale de "green" ne donne pas le même vert que "green" lui-même :

    Quelques exemples :
    Citation :
    Code:
    color: #FF0000;
    Exemple
    Code:
    color: #0000FF;
    Exemple
    Code:
    color: #00FF00;
    Exemple

  • RGB-number : Je n'aborderai pas trop ce point, les couleurs RBG offrent un éventail complet de possibilités, 16 581 375 teintes de couleurs pour être précis. Vous n'en aurez pas besoin d'autant. Il faut seulement savoir que RGB veut dire Red (Rouge), Green (Vert), Blue (Bleu). Un RGB-number s'écrit comme suit :
    Code:
    rgb(r,g,b)
    Chaque lettre dans les parenthèses doit être remplacé par le taux de la couleur sur 255.
    Quelques exemples :
    Citation :
    Code:
    color: rgb(255,0,0);
    Exemple
    Code:
    color: rgb(0,0,255);
    Exemple
    Code:
    color: rgb(0,255,0);
    Exemple


Les "border-style" (styles de bordure)

Une image démonstration valant milles mots, je vais me contenter de vous illustrer les styles de bordures possibles :
Citation :
hidden, sans bordure tout simplement.
Code:
border-style: hidden;

dotted, bordure à points.
Code:
border-style: dotted;

dashed, bordure à tirets.
Code:
border-style: dashed;

solid, bordure pleine.
Code:
border-style: solid;

double, bordure double.
Code:
border-style: double;

groove, bordure en relief avec ombre haute.
Code:
border-style: groove;

ridge, bordure en relief avec ombre basse.
Code:
border-style: ridge;

inset, bordure sans relief avec ombre haute.
Code:
border-style: inset;

outset, bordure sans relief avec ombre basse.
Code:
border-style: outset;


Dimensions

Bien utile pour éviter les problèmes de mise en page et d’ajustements disgracieux. J’en dénombre trois grandes types, les length (c'est à dire les mesures de longueur/taille), le % (le pourcentage) et la dernière, qui regroupe tous les noms de dimensions.

Length : valeur chiffrée en unités


La méthode la plus classique, qui combine la valeur de votre dimension à une des unités de mesure suivantes : px, cm, em, ex, in, mm, pt, pc. Il en a beaucoup, c'est pourquoi je n'aborderai, dans ce cours de base, que le pixel (px). Le pixel est une unité de mesure courante, mais variable d'un écran à l'autre, le pixel s'adapte donc plus ou moins à la résolution de l'écran du visiteur. Je vous encourage donc à faire vos propres tests avec les autres unités.

Quelques tailles de texte en pixel :
Citation :
Code:
font-size: 8px;
Exemple
Code:
font-size: 12px;
Exemple
Code:
font-size: 24px;
Exemple
Code:
font-size: 38px;
Exemple
N'oubliez pas d'ajouter l'unité de mesure tout de suite après le nombre (sans espace).

Attention : Bien que les length puissent être utilisées pour donner la taille du texte, elles s'emploient également pour définir les dimensions de vos éléments et l’épaisseur des bordures. Elles sont multi-usage et changent d’utilité selon la propriété avec laquelle elles sont utilisées, ainsi avec font-size l'unité de mesure détermine la taille du texte et avec width, par exemple, elle définit la largeur d’un bloc, paragraphe ou autre élément. Ne vous limitez donc pas à l’usage des valeurs dimensionnelles uniquement pour le texte, sinon vous perdrez toute une importante part du CSS. Je vous encourage, une fois de plus, à faire vos propres tests avec les autres propriétés acceptant les unités de mesure (border, width etc.).

Je vous donne tout de même quelques exemples :
Citation :
length + Bordure, donne l'épaisseur de la bordure.
Code:
border-width: 8px;

length + Width, donne la largeur de l'élément. (J'ai ajouté une bordure pour mettre en évidence la largeur, elle n'est pas obligatoire)
Code:
width: 180px;

length unit + letter-spacing + word-spacing :
comme vous le remarquez, j'utilise une dimension de 3px pour augmenter l'espacement entre mes lettres et une dimension de 10px pour séparer mes mots.
Code:
letter-spacing: 3px;
word-spacing: 10px;
Bref, tant de possibilités.

% : valeur chiffrée en pourcentages


Le % donne le pourcentage de dimension de l'élément (ou du texte) par rapport à celle de l'élément (ou du texte) parent.

Citation :
length unit + Width, donne la largeur de l'élément.
% + Width, donne le pourcentage de largeur de l'élément par rapport à l'élément parent. (Ici 70%)

J'ai d'abord donné la largeur de l'élément parent (400px) puis j'ai donné le pourcentage de la largeur de l'élément contenu dans le premier (70%). Pensez à un jeu de poupées russes, la plus grande englobe celles des niveaux inférieurs et chacune en contiennent une autre plus petite. Dans le contexte du CSS, on place ainsi plusieurs éléments les uns dans les autres, toujours au même pourcentage par rapport au niveau supérieur, voyez :

length unit + Width, donne la largeur de l'élément
% + Width, donne le pourcentage de largeur de l'élément par rapport à l'élément parent. (Ici 70%)
30% plus petit
Encore !
Compris ?
Un dernier
On commence à être à l'étroit.







Noms normalisés de dimensions


Il y a plusieurs noms de dimensions. Personnellement, je ne recommande pas cette méthode, car il est nettement plus rapide de donner une simple valeur en pixels, qu'un nom complet. En plus, les noms de dimensions offrent moins de possibilités et de précision que les pixels. Voici donc un petit tableau des valeurs et de leur effet :

Valeurs

( font-size: ... ; )

Effet

xx-smallTexte
x-smallTexte
smallTexte
mediumTexte
largeTexte
x-largeTexte
xx-largeTexte
smaller
(Plus petit que l'élément parent)
Texte
larger
(Plus grand que l'élément parent)
Texte


Mise en forme du texte

Nous avons déjà touché à la taille des caractères d’un texte à travers les unités le longueur et à sa couleur avec les colors, mais qu'en est-il de sa mise en forme ? J'entends par là son style, ses variantes, son épaisseur et sa police. Restons simple, cette section traitera des valeurs que peuvent prendre font-style, font-variant, font-weight et font-family.

  • Style : il existe 3 valeurs de style et deux résultats visibles Sous le choc que voici :
    Citation :
    Texte de style normal
    Code:
    font-style: normal;
    Texte de style italique
    Code:
    font-style: italic;
    Texte de style oblique
    Code:
    font-style: oblique;
    Comme vous le remarquez, "oblique" et "italic" donnent le même résultat. Cependant, la valeur "italic" est prise en charge par davantage de navigateurs et de versions.

  • Variantes : 2 variantes possibles, que voici :
    Citation :
    Texte de variation petites majuscules
    Code:
    font-variant: small-caps;
    Texte de variation normale
    Code:
    font-variant: normal;

  • Épaisseur : plusieurs épaisseurs possibles suivant une échelle de normal à épais.
    Citation :
    100
    200
    300
    400 - normal
    500
    600
    700 - bold
    800
    900


    bolder : plus gras que l’élément parent.
    lighter : plus mince que l’élément parent.
    Code:
    font-weight: ÉPAISSEUR;
  • La police, non pas celle qui vous court après quand vous avez dépassé la limite de vitesse, je parle de la police de votre texte. Non elle ne viendra pas embarquer votre texte ! Bon, d'accord, j'arrête de vous prendre pour des imbéciles Neutre. Vous avez sans doute déjà utilisé : Arial, Arial Black, Georgia, Times New Roman et Verdana ; ce ne sont qu'exemples parmi tant d'autres.

    Comme mentionné dans le dernier chapitre, c’est la propriété font-family qui permet de donner la police à notre caractère. Il existe deux valeurs possibles.
    1. family-name qui consiste à indiquer le nom exact d’une police installée sur le poste du visiteur et l’afficher. Voici un exemple de code :
      Citation :
      Code:
      font-family:Times New Roman,Georgia,Verdana;
      Pour ce résultat : Texte.
      Remarquez la présence de trois noms de polices de caractères, séparées par des virgules. Si le visiteur ne possède pas Times New Roman, le navigateur tentera alors d’afficher les polices suivantes, si aucune n’a été trouvée, il sélectionnera la police par défaut du navigateur, ils sont brillants les navigateurs n'est-ce pas ? Rire

    2. generic-family : il s'agit des catégories de polices ; quelques exemples :
      Citation :
      serif
      sans-serif
      fantasy
      cursive
      monospace
      Code:
      font-family: NOM_DE_LA_FAMILLE;
    Pour garder une compatibilité optimale, il est recommandé de toujours terminer une chaîne de noms de polices (family-name) par le nom d'une famille de police (generic-family). On s'assure ainsi que le navigateur affichera une police dans le même style que celle qu'on aurait voulu afficher, comme ceci :
    Code:
    font-family:POLICE1,POLICE2,POLICE3,CATÉGORIE1;
    Ceci est un exemple, il y a écrit:
    Code:
    font-family:Times New Roman,Georgia,Verdana,serif;
    Tentera d'afficher en priorité en Times New Roman, sinon en Georgia, sinon en Verdana. En l'absence des trois polices, le navigateur utilisera l'équivalent "local" (spécifique à l'ordinateur utilisé) d'une police de type serif.
    Il est important de comprendre que l'on peut mettre plus d'un nom de police et que la suivante sera choisie si la précédente n'est pas installée sur le poste du visiteur. Sans oublier de séparer chacune par des virgules.


Mise en forme du texte ou "text-"

C'est que je commence à être épuisé Oh My God !. Vous aussi ? Tenez bon, si j'ai été capable d'écrire tout ceci, vous êtes capable de le lire. Wink

Bon c'est fini les élucubrations, passons au vif du sujet (il me semble que j'ai déjà dit ça Neutre), donc on a vu les valeurs de caractères (font), maintenant, attaquons-nous à celles de texte (text). Certaines valeurs ont été abordées plus tôt. En faisant le tri, il ne nous reste plus que les valeurs associées aux propriétés de texte : text-decoration, text-transform et text-align.

  • Décoration de texte, oui, vous avez bien compris des décorations comme sur un arbre de Noël. Il en existe 5:
    Citation :
    Texte décoré souligné
    Code:
    text-decoration: underline;
    Texte décoré surligné
    Code:
    text-decoration: overline;
    Texte décoré barré
    Code:
    text-decoration: line-through;
    Texte décoré clignotant
    Code:
    text-decoration: blink;
    Et mon préféré Very Happy : Texte non-décoré
    Code:
    text-decoration: none;

  • Transformation du texte : 4 valeurs possibles pour un effet assez discret dans tout les cas. Cette propriété perd de son utilité pour un texte normal, mais peut s'avérer intéressante lorsque l'on travail avec le survol.
    Citation :
    texte en minuscules transformées en majuscules
    Code:
    text-transform: uppercase;
    TEXTE EN MAJUSCULES TRANSFORMÉES EN MINUSCULES
    Code:
    text-transform: lowercase;
    texte en minuscules dont les premières lettres de chaque mot sont transformées en majuscules
    Code:
    text-transform: capitalize;
    Texte normal
    Code:
    text-transform: normal;

  • Alignement du texte : ça parle tout seul. Notez que cette propriété ne s'applique qu'à des blocs de texte (paragraphes <p>, blocs <div>, cellules <td> d'un tableau...). Voyons nos quatre exemples encadrés pour plus de clarté :
    Citation :
    Texte au centre
    Code:
    text-align: center

    Texte à gauche
    Code:
    text-align: left

    Texte à droite
    Code:
    text-align: right

    Texte justifié. Sur une ligne, le résultat ne pas visible, mais si je pousse sur la seconde ligne on remarque que chaque fin de ligne arrive exactement sur le bord du tableau, ce qui n’est pas si mal ; personnellement, je justifie toujours mon texte.
    Code:
    text-align: justify


Valeurs de fond

C'est parti pour la dernière section du chapitre : les valeurs de fond. Commençons :
  • Image de fond, : l'utilisation de "background-image" + "url()" vous permettra de mettre en fond d'élément une image de votre choix comme ceci :

    Code:
    background-image: url(LIEN_VERS_IMAGE);

    Pour ce résultat :

    Code:
    background-image: url(http://img96.imageshack.us/img96/4334/fondtuto.png);


  • Répétition de l'image : il existe quatre valeurs associées à la propriété "background-repeat" ; les voici en action :

    Code:
    background-repeat: repeat;


    Code:
    background-repeat: repeat-x;


    Code:
    background-repeat: repeat-y;


    Code:
    background-repeat: no-repeat;


  • Position du fond : il existe 3 positions sur l'axe horizontal et 3 sur l'axe vertical, soit 9 combinaisons possibles. Il vous est possible d'associer une position horizontale (center, top, bottom) avec une position verticale (left, right, center). Je ne crois pas qu'un exemple soit nécessaire, les valeurs possibles parlent d'elles-mêmes.

C'est terminé, je vous promets une réponse plus rapide pour le prochain chapitre, je commence tout de suite. Le prochain chapitre portera sur les éléments, vous pourrez donc commencer à coder quelque chose et voir le résultat Wink.


Exercice 3 : Je veux... une valeur


Spoiler:
 
Vous pouvez simplement compléter l'exercice 2 et rajouter les valeurs Wink.



{ I would love to change the world, but they won't give me the source code }


Dernière édition par Orange le Mer 11 Avr 2012, 23:26, édité 2 fois
MessageSujet: Re: Bases CSS - Cours élémentaire   Lun 01 Fév 2010, 18:04
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.css-actif.com
avatar
RocketMan
RocketMan

Masculin Messages : 3082



Les éléments


Les petits derniers Very Happy.
Rappel :
Orange a écrit:
élément : C'est lui qui sera influencé par les propriétés du bloc de propriétés. On doit absolument le spécifier dans notre code, sans quoi les propriétés ne pourraient être appliquées. L'élément est un type de sélecteur parmi tant d'autre.
Ce qu’il faut comprendre pour commencer, c’est que les éléments (et autres sélecteurs) sont essentiels au fonctionnement de notre code. Ils agissent comme les "destinataires" des instructions données par notre bloc de propriétés. Pour en saisir toute l’utilité, voyez chaque groupement comme une lettre que vous mettez à la poste. Pour qu’elle arrive à destination, vous avez dû inscrire les coordonnées de la personne à contacter. Cette adresse postale est comparable à notre élément (et autres sélecteurs) et le contenu de votre lettre, au bloc de propriétés. Si on avait décidé d’indiquer l’un sans l’autre, il n’y aurait eu aucun résultat visible : c’est comme si on avait posté une enveloppe vide ou laissé traîner notre lettre sur la table… pas très efficace.

« D’accord, je sais qu’il me faut une adresse, mais quelle adresse ? ». C’est une très bonne question, je vous félicite pour votre vivacité d’esprit Rolling Eyes. Les éléments correspondent tous à des balises HTML, il en existe plus de 50. Ainsi, lorsqu’on donne un style à un élément en particulier via CSS, on applique ce style à tout le contenu de la page qui se situe entre les balises HTML correspondantes. Un exemple devrait être plus parlant :

Spoiler:
 
Remarquez ici, que quel que soit le nombre de paragraphes ([<p>) que j’ai intégrés dans ma page, tous ont reçu les propriétés et valeurs CSS que j’ai données à l’élément p dans ma feuille de style. Dans ce cas précis, je voulais afficher une bordure pleine rouge de 5px de large autour du texte entouré des balises <p> et </p>. Seul le texte qui n’a pas été entouré de ces balises n’a pas de bordure.

En résumé, les éléments CSS correspondent tous à une balise HTML, si on définit le style d’un élément dans notre CSS et que sa balise associée n’apparaît pas dans dans le code HTML de notre page, on ne constatera aucun changement de style car le CSS est dépendant du HTML (et la réciproque n’est pas vraie, un code HTML peut fonctionner seul). Pour savoir quel élément correspond à quelle balise, il suffit de retirer les < et > de cette balise. Par exemple, < p> en HTML deviendra p en CSS, c’est aussi simple que ça Wink.


Les éléments courants


Comme le CSS ne peut fonctionner sans le code HTML qui lui est associé, il serait difficile de poursuivre notre cours sans survoler quelques balises HTML. Toutefois, la manière correcte de les utiliser ne sera pas détaillée. Nous supposerons seulement que nous avons déjà, en notre possession, une page HTML qui contient les 12 éléments courants suivants :

CSS

HTML

Fonction

body<body>Sert à définir le style de tout le contenu visible de notre page HTML (Surtout utilisé pour définir la couleur et l’image de fond, la police et la taille des caractères etc.) .
strong
ou b
<strong> ou <b>Sert à définir le style du texte en gras (donc tout le texte placé entre les balises <strong> et </strong> ou <b> et </b>).
em ou i<em> ou <i>Sert à définir le style du texte en italique (donc tout le texte placé entre les balises <em> et </em> ou <i> et </i>).
u<u>Sert à définir le style du texte souligné (donc tout le texte placé entre les balises <u> et </u>).
h#<h#>Sert à définir le style des titres (donc tout le texte placé entre les balises <h1> à <h6> et </h1> à </h6>).
img<img />Sert à définir le style des images.
a<a>Sert à définir le style des liens.
p<p>Sert à définir le style des paragraphes (donc tout le texte placé entre les balises <p> et </p>).
table<table>Sert à définir le style des tableaux.
tr<tr>Sert à définir le style des lignes (rangées) des tableaux.
td<td>Sert à définir le style des cellules des tableaux
span<span>Sert à définir le style du texte placé entre <span> et </span>.
N.B. : Si aucun style CSS n'est donné à l'élément span, le texte placé entre les balises correspondantes n'aura aucun style particulier.
div<div>Sert à définir le style du texte placé entre <div> et </div>.
N.B. : Si aucun style CSS n'est donné à l'élément div, le texte placé entre les balises correspondantes n'aura aucun style particulier.
Maintenant que nous connaissons les éléments fréquemment employés dans nos pages HTML, nous allons pouvoir travailler avec ceux-ci et leur donner un style CSS particulier. Nous commencerons donc à coder réellement en CSS. Pour ce faire, il va nous falloir une page HTML de test, pour constater, concrètement, le résultat de notre code CSS. Pour vous faciliter la tâche, je vous ai créé un Outil de Test CSS ; il vous suffira d’entrer votre code CSS dans la boîte de texte de gauche pour afficher le rendu sur les douze éléments courants dans la portion de droite. Essayez de placer le code CSS ci-dessous dans la boîte de texte (juste en dessous de la mention « Code CSS » et cliquer « Valider », vous comprendrez assez vite l’utilité de la chose Wink.

Code:

body {
  background-color: #9C3;
  font-family: "Courier New", Courier, monospace;
}

td {
    background-color: #6C6;
    border: 3px dashed #9F6;
}

table {
  background-color: #9C9;
  border: 5px solid #CF0;
}

p {
  border: 1px solid #333333;
}

i {
 text-decoration: line-trought;
}

b {
 color: #FF0000;
}

strong {
 color: #0000FF;
}

u {
 font-size: 14px;
}

a {
 font-variant: small-caps;
}

span {
 border-left: 20px solid #690
}

div {
 border-top: 50px solid #CF0;
 background-color: #CCCCCC;
}

h1 {
 text-decoration: overline;
}

h4 {
 font-size: 20px;
}

img {
 border: 5px solid #000000;
 padding-left: 20px;
}
Le changement est drastique, n’est-ce pas ? C’est la puissance du CSS ! À ce point, je ne peux que vous encourager à faire vos propres tests grâce à cette outil. Le prochain chapitre portera sur différentes possibilités d'effets que l'on peut réaliser grâce aux connaissances que nous avons acquises. D'ici là, tentez les combinaisons les plus farfelues d’éléments, de propriétés et de valeurs, le résultat en sera d’autant plus intéressant. Wink


Exercice 4 : Je veux... un élément


Spoiler:
 
Vous pouvez simplement compléter l'exercice 3 et rajouter les éléments.



{ I would love to change the world, but they won't give me the source code }
MessageSujet: Re: Bases CSS - Cours élémentaire   Sam 16 Oct 2010, 13:29
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.css-actif.com
avatar
RocketMan
RocketMan

Masculin Messages : 3082



Et concrètement ?

Le précédent chapitre est venu compléter notre groupement contenant des propriétés, des valeurs et un sélecteur (nous n'avons vu que l'élément). Dorénavant nous savons, théoriquement, appliquer un style CSS à une douzaine d'éléments courants. Ce chapitre-ci sera davantage pratique que théorique, l'Outil de Test CSS vous sera très utile dans la réalisation et la compréhension de cette section, pensez à vous en servir Wink.

Au cours de ce chapitre, nous décoderons, propriété par propriété, valeur par valeur et élément par élément, certains groupements qui vous seront très pratiques dans le codage CSS de votre forum ou de votre site internet. Vous serez amenés à réfléchir et à mettre à profit les connaissances que vous avez acquises lors des précédents chapitres.

Démarche de réflexion

    Dès la prochaine section, vous serez confrontez à différentes situations-problèmes (certains se rappelleront de leurs cours de mathématiques xD) et vous devrez proposer un groupement CSS pour apporter la solution. Pour parvenir à vos fins, il vous faudra suivre une démarche de réflexion rapide et efficace, en 5 étapes.
    1. Établir notre procédure et déduire les exigences implicites : Plus souvent qu'autrement, les problèmes auxquels on est confronté présentent des exigences implicites, un «on doit...» qui n'est pas clairement indiqué dans la situation. Ce sont en quelque sorte les moyens d'arriver au but que l'on s'est fixé, les différents aspects d'un ensemble. En bref, c'est ce dont on a besoin pour arriver à un résultat optimal. Par exemple, si je veux mettre une image de fond, je dois prévoir des exigences telles que : la position du fond, la répétition etc. Une fois ceci fait, mettez (par écrit ou mentalement) l'ensemble des étapes point par point, pour une meilleure compréhension.
    2. Identifier le sélecteur (l'élément) nécessaire : Selon le problème, il vous faudra déterminer à quel élément on veut appliquer l'effet. Vous comprendrez que, si vous faites un mauvais choix, vos propriétés CSS ne seront pas appliquées au bon élément. Au besoin, vous pouvez parcourir les éléments que nous avons vus dans le cours et procéder par élimination.
    3. Identifier la ou les propriétés requises : Vous devrez mettre en application une ou plusieurs propriétés. Décortiquer point par point l'énoncé-problème et traduire ensuite ces points en propriétés CSS, peut vous aider à n'en oublier aucune. Wink
    4. Identifier les valeurs pour chaque propriété : Encore une fois, découper point par point l'énoncé peut vous aider à démêler le tout. L'erreur courante ici serait de donner le mauvais type de valeur à une propriété. Référez-vous au tableau en cas de besoin.
    5. Révisez votre code : C'est ici que l'on risque d'en perdre plusieurs, mais détrompez-vous, relire votre code avant de valider peut vous éviter bien des tracas par la suite et surtout beaucoup de temps.

    Cette démarche, relativement évidente, fait le lien entre une idée et le concret : le code. Très rapidement, vous apprendrez à l'utiliser et elle deviendra presque instinctive. Si son utilité est moindre lorsqu'on est confronté à des situations mineures comme celles présentées ci-dessous, elle peut toujours vous être utile lors de la réalisation de codes plus complexes, où vous imposerez vos propres situations.

Situations problèmes

    Ces problèmes ne sont que des exemples de situations parmi tant d'autres. Dans votre carrière de codeur (ça fait très sérieux ça Razz), vous serez sans doute confronté à des circonstances semblables où il vous faudra partir d'une idée plus ou moins précise et aboutir à un code complet et fonctionnel. Évidemment, vous n'êtes encore qu'au cours élémentaire, par conséquent, les énoncés ci-dessous resteront rudimentaires à comparer à ce qu'un expert pourrait faire.

    Problème n°1
    Énoncé:
    Je désire appliquer un fond-bannière (http://img408.imageshack.us/img408/3579/exemplebanniere.jpg), c'est-à-dire une grande image de 1280px de large par 320px de haut, en fond de mon forum.
    On utilise la démarche de réflexion pour proposer le code répondant aux besoins du demandeur :
    1. Il faut commencer par établir notre procédure ainsi que nos exigences implicites. Complétez la phrase : «Pour ce faire, je dois...» autant de fois que vous pourrez. C'est souvent ainsi qu'on arrive à saisir tous les aspects du problème... C'est fait ? Dès que vous avez trouvé les 5 étapes de la procédure, déroulez :

      Réponse:
       


Comme vous le constatez, il faut prendre en compte tous les aspects d'un problème avant de s'attaquer au code lui-même. Wink Une fois ceci fait, il est nettement plus facile de s'attaquer à la traduction en CSS de notre procédure.

  • Il nous faut maintenant identifier l'élément désiré, sachant que nous souhaitons appliquer une image de fond à notre page, ça ne doit pas être très difficile... Vous l'avez ?

    Réponse:
     

  • Pour l'étape suivante, il nous suffit de rependre notre procédure et de transformer nos étapes en propriétés. Référez-vous au tableau des propriétés en cas de besoin et dites-vous bien que chaque point correspond à une propriété. S'il vous manque une propriété, c'est que vous avez fait une erreur Wink.

    Réponse:
     

  • Comme je viens de le rappeler, il nous faudra associer chacune de nos propriétés à une valeur : la bonne. Notre liste d'exigences nous sera encore très utile (c'est une chance que nous ayons pris le temps de la faire Wink).

    Réponse:
     

  • Assemblez puis réviser votre code, assurez-vous qu'aucune erreur ne s'est glissée et testez le résultats grâce à L'Outil de test CSS. Ça fonctionne ? Tant mieux. Sinon, comparez votre code avec la solution ci-dessous pour connaître votre erreur :
    Réponse:
     
    Ça fonctionne maintenant ? Je l'espère pour vous. Mais si malgré tout, votre code n'est toujours pas fonctionnel, reportez-vous au *Lève sa main*. Passons au prochain problème.







    • Problème n°2
      Énoncé:
      Je souhaite appliquer un dégradé (http://img543.imageshack.us/img543/6272/exempledegrade.png) en fond de ma page. Ce dégradé est une image de rouge #FF0000 vers bleu #1e00e1.
      Grâce au premier problème, nous avons appris à maîtriser la démarche de réflexion. Celui-ci fait volontairement appel aux mêmes concepts pour que vous puissiez appliquer la méthode par vous-même, avec un peu d'aide.


      1. Établissez votre procédure ; celle-ci ne demande que 3 étapes.

        Reprendre les exigences précédentes peut vous aider à y voir plus clair. Wink

      2. Identifions maintenant l'élément à affecter. Réfléchissez fort fort fort Razz.

      3. On traduit notre code en propriétés ; trois étapes impliquent trois propriétés distinctes.

      4. On détermine les valeurs à associer à chacune de nos propriétés.

      5. Assemblez puis révisez votre code, assurez-vous qu'aucune erreur ne s'y est glissée et testez le résultat grâce à L'Outil de test CSS. Ça fonctionne ? Tant mieux. Sinon, comparez votre code avec la solution ci-dessous pour connaître votre erreur :
        Réponse:
         

      Code:

      body {
      background-image: url(http://img543.imageshack.us/img543/6272/exempledegrade.png)
      background-color: #1e00e1;
      background-repeat: repeat-x;
      }   

    Tout devrait être fonctionnel maintenant. Pourtant, ce n'est pas totalement terminé. Révision du code sous-entend aussi optimisation du code. Notre code de trois lignes peut en effet tenir en une seule, grâce au multi-valeurs. Ainsi, en combinant les valeurs de background-image, background-color et background-repeat dans une seule propriété background, on peut obtenir le code suivant :
    Code:
    body {
    background: url(http://img543.imageshack.us/img543/6272/exempledegrade.png)  #1e00e1 repeat-x;
    }

    Qui l'eut cru !



    Voilà, ce chapitre du Cours élémentaire ~ Le groupement, s'achève. Celui-ci ne visait que la compréhension générale du codage : partir d'une idée pour arriver à un code fonctionnel. N'hésitez pas à vous servir de la méthode proposée plus haut et à y apporter vos propres modifications pour en faire une méthode qui vous convienne à 100%. Il n'y aura pas d'exercice supplémentaire pour ce cours, nous avons déjà assez réfléchi comme ça Razz.

    Le prochain chapitre sera donc la conclusion de ce premier cours. Il énoncera rapidement ce que nous y avons appris, mais aussi ce qu'il nous reste à apprendre.



    { I would love to change the world, but they won't give me the source code }
    MessageSujet: Re: Bases CSS - Cours élémentaire   Mar 27 Mar 2012, 17:56
    Revenir en haut Aller en bas
    Voir le profil de l'utilisateur http://www.css-actif.com
    avatar
    RocketMan
    RocketMan

    Masculin Messages : 3082



    Conclusion



    Avouez que vous ne l'attendiez plus celle-là Razz. Moi non plus, j'admets !

    Voici un bref récapitulatif des notions abordées dans ce premier cours CSS : Le groupement. Chaque point à son importance et pourra vous servir d'aide-mémoire par la suite. Prenez le temps de lire :
    • CSS veut dire Cascading Style Sheets (feuilles de style en cascade).
    • Le CSS est utile pour la mise en forme, le style, d'une page HTML. À cet effet, il est dépendant du HTML et ne peut pas produire un résultat visible seul. Il n'a d'incidence que sur les éléments présents dans notre page HTML et ne peut pas en ajouter de nouveaux, ou modifier leur contenu ou leur structure (dans le cas des tableaux notamment), à lui tout seul.
    • Un éditeur de texte simple suffit pour coder en HTML. Toutefois, les éditeurs avec une colorisation automatique (tels Notepad ++ (open source) peuvent s'avérer utile.
    • Il existe trois façons similaires de coder en CSS : le CSS externe (en appelant un fichier .css), le CSS interne (en incluant le style à l'intérieur des balises < style> et < /style> du HTML) et le style en ligne (grâce à l'attribut style commun à la plupart des balises HTML). Le premier étant préférable et largement plus répandu.
    • Chaque "bloc" CSS est composé d'un sélecteur (nous avons vu l'élément), d'une déclaration (ou bloc de propriétés) et d'une directive, elle-même décomposée en un couple propriété, valeur. De cette manière :
      Code:

      selecteur {
      propriété: valeur; /* Cette ligne est une déclaration */
      propriété: valeur;
      propriété: valeur;
      }
    • Les propriétés déterminent quel type de résultat aura notre bloc sur l'élément de la page HTML donné en sélecteur. Chaque propriété peut prendre certains types de valeurs, dont il faut se souvenir.
    • Les valeurs précisent les propriétés et lui donnent sa raison d'être (les deux sont interdépendantes, l'une sans l'autre n'est pas valide). Par exemple, la propriété dit : « Changer la couleur du texte » alors que la valeur rajoute « [Changer la couleur du texte] en rouge ». Il existe également plusieurs types de valeurs s'alliant avec des propriétés spécifiques : font-family: 100px; et width: sans-serif; ne sont pas valides alors que font-family: sans-serif et width: 100px; le sont.
    • Certaines propriétés peuvent prendre plus d'une valeur simultanément grâce au multi-valeurs, c'est le cas, entre autres, de :
      Code:
      border: 1px solid #FFFFFF;
      Code:
      background: url(fond.jpg) #CCCCCC no-repeat top left;
    • Les sélecteurs (éléments) sont les "destinataires" des instructions données par notre déclaration. À la manière d'une lettre qu'on mettrait à la poste avec l'adresse postale du destinataire.
    • Les éléments correspondent aux balises HTML qui sont intégrées dans notre page. L'Outil de test CSS peut servir à faire vos tests.
    • Afin d'arriver à un code fini et fonctionnel, il faut savoir :
      1. Établir notre procédure et déduire les exigences implicites
      2. Identifier le sélecteur (l'élément) nécessaire
      3. Identifier la ou les propriétés requises
      4. Identifier les valeurs pour chaque propriété
      5. Révisez votre code (soyons franc, personne ne le fait Razz).


    Bon, ça y est. J'ai un pincement au cœur . Vous allez devoir voler de vos propres ailes désormais, tout du moins jusqu'au prochain cours CSS (et ça, c'est dans très très longtemps ). Si vous souhaitez aller plus loin, je vous recommande de jeter un coup d’œil aux classes et id en CSS, ça pourrait vous être très utile et franchement, c'est ce qu'il y a de plus plaisant en CSS.

    J'arrive au mot de la fin... euh... Laissez-moi réfléchir.


    FIN.



    { I would love to change the world, but they won't give me the source code }
    MessageSujet: Re: Bases CSS - Cours élémentaire   Mer 11 Avr 2012, 23:48
    Revenir en haut Aller en bas
    Contenu sponsorisé




    MessageSujet: Re: Bases CSS - Cours élémentaire   
    Revenir en haut Aller en bas
     

    Bases CSS - Cours élémentaire

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

     Sujets similaires

    -
    » Bases CSS - Cours élémentaire
    » carte supplémentaire Tenerife sur nuvi 255
    » norvig, cours en ligne d'IA
    » la vie c'comme les cours d'anglais, y'a trop d'faux amis.
    » L'affichage de la carte disparaît en cours de navigation

    Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
    CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Bases de CSS-

    Partenaires Or


    ← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
    Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit