Club Informatique VINCI

Le C.I.V représente un groupement d'étudiants constituant le club informatique de la Grande École Marocaine de l'Informatique et des Réseaux du Télécom VINCI -Rabat-. (L'utilisation de Internet explorer 6/7 n'est pas recommandée, on vous propose Firefox)

Les forums du C.I.V attend vos propositions en ce qui concerne le graphique, les catégories, et les sections.

Connexion

Récupérer mon mot de passe

Sondage

Quel est votre antivirus préféré ?
16% 16% [ 4 ]
32% 32% [ 8 ]
0% 0% [ 0 ]
0% 0% [ 0 ]
0% 0% [ 0 ]
36% 36% [ 9 ]
0% 0% [ 0 ]
0% 0% [ 0 ]
8% 8% [ 2 ]
8% 8% [ 2 ]

Total des votes : 25

Qui est en ligne ?

Il y a en tout 1 utilisateur en ligne :: 0 Enregistré, 0 Invisible et 1 Invité

Aucun


[ Voir toute la liste ]


Le record du nombre d'utilisateurs en ligne est de 23 le Mer 17 Oct - 12:31

Statistiques

Nos membres ont posté un total de 1292 messages dans 373 sujets

Nous avons 437 membres enregistrés

L'utilisateur enregistré le plus récent est intellection


    introduction à CSS

    Partagez
    avatar
    owenho
    Modérateur
    Modérateur

    Messages : 115
    Points : 3773
    Réputation : 4
    Date d'inscription : 02/05/2009
    Age : 28
    Localisation : larache/rabat

    introduction à CSS

    Message par owenho le Jeu 26 Nov - 15:13

    saluut les vinciens . voila je vous propose une introduction trés important à CSS .

    d'abord Qu'est-ce que c'est ? Comment les utiliser ?
    Les CSS (Cascading Style Sheets) autrement dit "feuilles de styles en cascade") permettent de définir la présentation des pages Web.
    Désormais, votre code HTML ne vous servira qu'à définir la structure de vos contenus tandis que les CSS vous permettront de créer vos styles et votre mise en page.

    Si vous souhaitiez définir la couleur de l'arrière plan et la bordure d'un tableau ainsi que le retrait (padding) de chacune de ses colonnes, vous auriez défini votre tableau par le code suivant :
    Code:

    <table border="1" bgcolor="silver" cellpadding="3" cellspacing="0">
     

    Cette approche présentait cependant de nombreux inconvénients :
    1.Vos styles étant définis à l'intérieur même de votre contenu, ils étaient fastidieux à définir .
    2.Vous deviez répéter la même définition de style à chaque fois que vous souhaitiez l'utiliser dans votre page où dans les diverses pages de votre site .
    3.A chaque fois que vous souhaitiez modifier ce style, vous deviez reparcourir le contenu de toutes vos pages pour mettre à jour, une par une, les diverses définitions qu'elles contenaient .
    4.Ces répétitions augmentaient la taille de vos pages .

    A.Comment fonctionnent les CSS :
    Les CSS représentent une nouvelle façon très efficace d'appliquer des styles aux éléments (X)HTML.

    Elles vous permettent de définir n'importe quelle propriété de style comme la bordure, le type de caractère, la couleur de fond, l'espace entre les lettres...

    Il y a trois façons principales d'appliquer des styles CSS :
    1.Dans le corps du code (X)HTML .
    2.Dans l'en-tête de la page .
    3.Dans une feuille de style totalement séparée du code (X)HTML.

    A.1:Les CSS dans le corps du code (X)HTML :

    Vous pouvez définir des styles CSS directement dans la définition d'une balise (X)HTML. Dans l'exemple ci-dessous, nous utilisons une balise
    qui permet de définir une "boîte" à l'intérieur d'un contenu :
    Code:

    <html><head>
    <title>CI-VINCI</title>
    </head>
    <body>
    <div style="background-color:orange; border:1px solid black; color:yellow; font-size:120%; padding:2em;">
      CI-VINCI
    </div>
    </body>
    </html>
    ce qui donne :

    CI-VINCI


    Cette approche est extrêmement proche de l'ancienne façon de définir des styles et présente les mêmes inconvénients.


    Elle ne présente un intérêt que lorsque vous êtes certain que le style défini ne sera utilisé à aucun autre endroit ni sur aucune autre de vos pages. S'il y a la moindre chance pour que vous ayez à nouveau besoin de ce style à un autre endroit, vous devriez absolument utiliser l'une des deux autres méthodes proposées plus bas, afin de faciliter la maintenance et l'évolution de votre site.

    A.2. Les CSS dans l'en-tête de la page :
    mainant que par la méthode précédente, il est préférable de définir vos styles CSS une fois pour toute dans une section particulière de votre page Web (on utilise normalement la section
    Code:

    <html>
    <head>
      <style type="text/css">
        div
        {
          background-color:#400;
          color:#fff;
          padding:15px;
          border-bottom:5px solid red;
          margin-bottom:15px;
        }
      </style>
    </head>

    <body>
      <div>
        Cette phrase est présentée en fonction du style défini dans l'en-tête
      </div>
      <div>
        Cette phrase aussi, est pourtant le style n'a été défini qu'une fois !
      </div>
    </body>
    ce qui donne :



    içi je vous conseile de tapez le code et de changer les valeurs de chaque variable pour bien comprendre leur role ok. Smile

    Grâce à cette nouvelle façon de procéder, vous n'avez besoin de définir votre style qu'une seule fois. Dans notre exemple, le style défini s'appliquera automatiquement à toutes les balises
    de la page.

    Avec cette méthode, vous pouvez appliquer le même style plusieurs fois dans la même page, mais pas à plusieurs pages d'un coup. Pour aller plus loin dans la standardisation de vos pages , pour l'utilisez sur plusieurs page donc la troisiéme methode nous appelle.

    A.3.Les CSS dans une feuille de style totalement séparée du code (X)HTML:
    La façon idéale de définir les CSS consiste à les enregistrer dans un document indépendant de vos pages (X)HTML. Grâce à cette méthode, toutes les pages qui font référence à cette feuille de style externe hériteront de toutes ses définitions.


    Un autre intérêt de cette méthode est de pouvoir définir plusieurs feuilles de styles pour le même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le contenu est affiché (écran, imprimante, etc.). Nous reviendrons plus tard sur cet aspect.


    Une page (X)HTML peut faire référence à plusieurs feuilles de styles en même temps. Dans ce cas, les définitions contenues dans ces différentes feuilles seront combinées entre elles.


    Voici un exemple de styles définis dans un document séparé :
    style.css
    Code:
    body
    {
      background-color:#ccf;
      letter-spacing:.1em;
    }

    p
    {
      font-style:italic;
      font-family:times,serif;
    }
    page.html
    Code:

    <head>
      <link href="style.css" media="all" rel="stylesheet" type="text/css" />
    </head>

    <body>
      <p>Voici un exemple de paragraphe.</p>
      <p>Et voici un deuxième paragraphe.</p>
    </body>
    essayez d'executer ce petit code pour voir le resultat.
    Comme dans la méthode précédente (CSS dans l'en-tête de la page), le style n'a été défini qu'une seule fois mais peut être utilisé plusieurs fois. La différence entre cette méthode et la précédente, c'est que notre feuille de style peut être utilisée par un nombre illimité de pages. Il suffira d'ajouter la mention
    Code:

    <link href="style.css" media="all" rel="stylesheet" type="text/css" />
    dans ces pages pour que notre feuille de style s'y applique.

    Lorsque les utilisateurs du site chargeront une page, leur navigateur ira également lire la feuille de styles à laquelle cette page fait référence. Cette feuille de style sera gardée en mémoire par le navigateur et n'aura pas besoin d'être rechargée lors de la lecture des pages suivantes. Le résultat est un gain de temps de chargement global et une économie de bande passante pour le serveur de votre site.

    la déclaration " link href=..." n'est pas la seule façon de faire appel à une feuille de style séparée. On peut également utiliser la formulation suivante :
    Code:
    <style type="text/css">
      @import url(styles.css) all;
    </style>
       

    Vous devrez remplacer "styles.css" par le nom que vous souhaitez donner à votre feuille de style. Vous pouvez également remplacer "all" par le type de média auquel se destine votre feuille de style.
    parceque il ya quatre type de media:

    media="all" : vous permettra de mettre en place une feuille de style commune à tous les medias.
    media="screen, projection" vous permettra de mettre en place une feuille de style destinée aux écrans.
    media="handheld" vous permettra de mettre en place une feuille de style destinée aux PDA et téléphones mobiles.
    media="print" vous permettra de mettre en place une feuille de style destinée aux imprimantes.

    Internet Explorer (versions 6 ou inférieures) ne reconnaît pas le type de média avec "@import". La feuille de style ne sera ni importée ni appliquée si vous avez précisé un média. Utilisez la formulation suivante : si vous voulez que votre déclaration soit reconnue par IE6.
    •La règle "@import" permet d'importer une feuille de styles à l'intérieur d'une autre feuille de style. La déclaration aura alors la forme simple suivante : @import url(styles.css). Vous devrez seulement remplacer "styles.css" par le nom que vous souhaitez donner à votre feuille de style.

    et enfin voila quelque avantages à séparer les feuilles de styles du contenu.

    Citons en particulier :

    1.La réduction de la taille des pages : Les définitions de style ne sont faites qu'une seule fois, même si elles sont utilisées plusieurs fois .

    2.La réduction des temps de connexion : Les navigateurs garderont en mémoire (en cache) le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site. Seuls les contenus des pages devront être chargés au cours de la navigation .

    3.Une mise à jour plus facile : Vous n'aurez besoin que de changer la feuille de style pour mettre à jour la présentation de l'ensemble de votre site .

    4.Scinder le travail de rédaction et le travail de présentation : Vous pouvez commencer à rédiger le contenu de vos pages sans vous soucier de leur présentation finale. Pensez simplement à placer correctement vos balises sémantiques (titre, sous-titres, listes, classes et ID, etc.). Vous pourrez travailler votre mise en page et votre design plus tard.

    bon courage .
    avatar
    El Maligno Angelo
    Administrateur
    Administrateur

    Messages : 373
    Points : 4399
    Réputation : 8
    Date d'inscription : 25/04/2009
    Age : 29
    Localisation : ErRabat

    Re: introduction à CSS

    Message par El Maligno Angelo le Jeu 26 Nov - 15:47

    Fort de plus en plus mi hermano, bravo modo afro


    _________________
    it's awesome to feel...what others can't, but i think doin' what poeple cannot do make u surpass feelings step !!
    avatar
    ELBADRI.Zakaria
    Administrateur
    Administrateur

    Messages : 141
    Points : 3949
    Réputation : -1
    Date d'inscription : 01/05/2009
    Age : 29

    Re: introduction à CSS

    Message par ELBADRI.Zakaria le Ven 27 Nov - 4:35

    ohhh c'est trés bien fait
    ytoub 3lik khouya
    avatar
    owenho
    Modérateur
    Modérateur

    Messages : 115
    Points : 3773
    Réputation : 4
    Date d'inscription : 02/05/2009
    Age : 28
    Localisation : larache/rabat

    Re: introduction à CSS

    Message par owenho le Mar 1 Déc - 13:42

    de nada mi amigo pirat

    Contenu sponsorisé

    Re: introduction à CSS

    Message par Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc - 17:33