Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Expo

    Hochgeladen von

    Aouraghe Samia
    27 Ansichten15 Seiten

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    27 Ansichten15 Seiten

    Expo

    Hochgeladen von

    Aouraghe Samia

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 15

    (Cascading Style Sheets)

    Exemple :

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

    Les styles dfinis l'intrieur mme du contenu. On doit rpter la mme dfinition de style chaque fois que on souhait l'utiliser dans notre page,o dans les diverses pages de notre site. Chaque fois quon souhaitent modifier le style,on doit reparcourir le contenu de toutes nos pages pour les mettre jour, une par une, les diverses dfinitions qu'elles contient. Ces rptitions augmentent la taille de nos pages. Etc..

    Les CSS reprsentent une nouvelle faon d'appliquer des styles aux lments (X)HTML. Elles nous permettent de dfinir n'importe quelle proprit de style comme: Bordure Couleur de fond l'espace entre les lettres

    Nom du selecteur de balise { propriete : valeurs; . } Prciser le nom de la balise en premier. Encadrer les dfinitions par des accolades { } . Placer un point virgule derrire chaque dfinition.

    Exemple: h1 { color : red ; text-align : center ; }

    Dans le corps du code (X)HTML . Dans l'en-tte de la page . Dans une feuille de style totalement spare du code (X)HTML.

    Les styles CSS dfinies directement dans la dfinition d'une balise (X)HTML. Exemple:

    <div style="background-color:orange; border:1px solid black; color:yellow; font-size:150%; padding:1em;>Cette balise div a du style!</div>

    Remarque: Comme l'ancienne faon prsente les mmes inconvnients. Note: voir test1

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

    <body> <div>Cette phrase est prsente en fonction du style dfini dans l'en-tte</div> <div>Cette phrase aussi, est pourtant le style n'a t dfini qu'une fois !</div> </body>

    Remaraque: Grce cette mthode on a besoin de dfinir notre style une seule fois et on peut appliquer le mme style plusieurs fois dans la mme page, mais pas plusieurs pages d'un coup.

    Note: voir test2

    Grce cette mthode, toutes les pages qui font rfrence cette feuille de style externe hriteront de toutes ses dfinitions. On peut dfinir plusieurs feuilles de styles pour le mme contenu et de basculer d'une feuille l'autre en fonction du support sur lequel le contenu est affich.

    Dfinition du style: Body {background-color:#ccf; letter-spacing:.1em; } p {font-style:italic; font-family:times,serif; } Code (X)HTML associ au CSS

    <head> <link href="style1.css media="all rel="stylesheet" type="text/css" /> </head> <body> <p>Voici un exemple de paragraphe.</p> <p>Et voici un deuxime paragraphe.</p> </body> Note:voir test 3 et test4

    La rduction de la taille des pages. La rduction des temps de connexion : Les navigateurs garderont en mmoire (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 chargs au cours de la navigation . Une mise jour plus facile.

    A fin dafecter plusieurs style une mme balise on utilise les classes. Dclaration dune classe css: .nom-classe{ propriete : valeurs; .. } Lapplication dune classe se fait par lajout de la mention class=" nom-classe " dans la dfinition de la balise.

    Dfinition de classe: .class1{ color:red; } Code (X)HTML associ au CSS <head> <link href="style3.css" media="all" rel="stylesheet" type="text/css" /> </head>

    <body> <p class="class1">Le style s'applique ce Paragraphe </p> <p>Mais pas celui-l </p> <div class="class1">Et s'applique aussi cett balise !</div> </body> Note: voir test5

    Chaque lment (X)HTML peut avoir aucune, une ou plusieurs classes. Pour appliquer plusieurs classes au mme lment il faut prcisez la liste de classes en sparant leurs noms par un espace .
    Exemple: .class1 { color:yellow; } .class2 { background-color:#A0A0A0; font-weight:bold; }
    Code associ <body> <p class=" class1 class2 "> Les styles des deux classes s'appliquent ce Paragraphe </p> <p class="mon-style2">Alors que ce paragraphe n'a qu'une seule classe </p> </body> Note: voir test6

    Das könnte Ihnen auch gefallen