Scribd Logo
Importer

Bienvenue sur Scribd !

  • Css XHTML Labo 2

    Transféré par

    madraba
    68 vues4 pages

    Titre original

    Css Xhtml Labo 2

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    68 vues4 pages

    Css XHTML Labo 2

    Transféré par

    madraba

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    Tutorial : les feuilles de style CSS et la norme XHTML

    Partie 1

    Introduction Les feuilles de style en cascade (Cascading Style Sheets - CSS) traitent le problme du contrle de la mise en page dans la cration de pages HTML. Une feuille de style est dfinie comme un ensemble de rgles de mise en page. Chaque rgle commence par un lment (appel en anglais selector). Pour dcrire le style de mise en page d'un lment HTML, on lui associe une liste de proprits. Il est trs important d'investir dans l'valuation des diffrantes proprits du langage CSS, travers des exemples pratiques ainsi qu'a l'aide de Firebug outil indispensable. Objectifs Maitrise de langage de balisage CSS2 - Concepts fondamentaux: rgle, selecteur, classe... - Inspection du code l'aide firebug

    Premier pas : soit le code test.html suivant : <html> <head> <title> Dmonstration de feuille de style</title> <style type="text/css"> body { background-color: black } h1 { color: yellow; font-weight: bold;font-size: 12 pt; font-family: Arial, Helvetica, sans-serif; } p { color: white; font-size: 10 pt; font-family: Courier, monospace; } </style> </head> <body> <h1> Feuilles de style en cascade </h1> <p> Il est facile de concevoir des feuilles de style. Il suffit de connatre le langage HTML et les concepts de mise en page de traitement de textes. <!ajouter ici des autres balises selon le besoin --> </p> </body> </html> Q 1 : indiquer les diffrentes tag utilises entre <head> et </head>.

    Rappel 1 : Styles dans un fichier spar

    L'utilisation d'un fichier de styles dans des pages Web se fait en 2 tapes: 1- Crer un fichier dans lequel on place tous les lments et leurs proprits de style. 2 - Donnez un nom ce fichier dont l'extension est css 3- Exemple: style.css 4- Ce fichier n'est pas un fichier HTML. Donc, il ne contient pas les balises HTML ni les balises HEAD. 5- Placez dans la section HEAD du fichier HTML la balise suivante: <link rel='stylesheet' type='text/css' href='style.css'> Q 2 : expliquer le rle de la tag link, ainsi que la signification de ses diffrents attributs Remarque : Pour la suite de lexercice, vous dfinirez le style dans un fichier CSS spar en commencent par le fichier test.html. Q 3 : Dfinissez des styles diffrents pour les titres h1, h2, h3. Vous pouvez jouer sur la taille, la couleur du titre, la couleur du fond, ... Vous choisirez une police de caractre sans serif (comme Arial, Helvetica, Verdana, ...) que vous appliquerez sur tout le contenu de votre page. Q 4 : Pour mettre en forme les listes, vous pouvez jouer sur le style des puces, et bien sur vous pouvez modifier le style du texte qui compose chaque item de la liste. Faites quelques essais. Comment faire pour que le premier item de chaque liste apparaisse en gras ? R3 : Dfinir des styles (named styles) Exemple: On peut dfinir des lments (Selectors) appels "Styles dfinis (Named Styles) avec des proprits qui peuvent tre utilises pour caractriser la mise en page de balises HTML. L'attribut "class" est utilis pour appliquer un "Named Style" une balise. Le nom d'un Named Style est n'importe quel nom prcd d'un point ( .) et la liste des proprits est cre de la mme faon. .important { font-style: italic; color:red }

    Pour appliquer un "Named Style" une balise, on utilise l'attribut "class" l'intrieur de la balise HTML laquelle on veut appliquer le style; la valeur de l'attribut "class" est le nom du "Named Style" SANS le point. Exemple: <h3 class= " important " > Ce titre est rouge et italique</h3> On peut crer un style qui s'applique un lment HTML spcifique. Ainsi, ce style ne sera utilisable que pour cet lment spcifique. Pour le crer: Nom de l'lment, suivi d'un point, suivi du nom du style et entre accolades, la liste des proprits. On a dfini pour la balise paragraphe, 3 styles diffrents: p.note { color:red; font-size:80% } p.introduction { color: green; } p.normal { color: black;}

    Pour une introduction Pour une note Pour le texte normal Utilisation: <balise class="style"> Exemple: <p class="introduction">..</p> Q4 : Utilisation de l'attribut ID pour dfinir le style L'attribut "ID" fonctionne de faon similaire importante: l'attribut CLASS. Mais il y a une diffrence

    La valeur d'un attribut "ID" DOIT tre unique dans un document. C'est dire que tout lment l'intrieur du corps du document peut avoir un attribut "ID" mais leurs valeurs doivent tre diffrentes. Un lment qui inclut un "ID" est appel un "Idselector". Exemple de dfinition de style avec ID #xyz34 { text-decoration: underline } Le signe # indique au fureteur quil sagit dun ID. Exemple d'utilisation de l'attribut ID
    <HTML> <HEAD> <TITLE>style avec ID</TITLE> <STYLE TYPE="text/css"> #xyz34 { text-decoration: underline } </STYLE>

    </HEAD> <BODY> <P ID= "xyz34 ">Ce texte est soulign</P> </BODY> </HTML> Q 5 : Dfinissez le style des tableaux afin davoir des tableaux de ces styles :

    Style 1 :

    Indication 1: voir lutilit des proprits suivantes border-radius, border-top-left-radius, border-top-right-radius

    Nous allons maintenant nous intresser au positionnement des blocs. Changez le style pour que chaque bloc div soit encadr. Ceci vous permettra de visualiser leur position. Pour rpondre aux questions suivantes, les seules modifications autorises dans le fichier XHTML sont lajout de classes et didentifiant (attributs class et id). Najoutez pas de tableau ! Essayez le positionnement en mode absolu, et en mode flottant. Crer les figures suivantes :

    Soit le code XHTML suivant :


    <html ..> <head> <li>texte [3] <style type="text/css"> <ol id="liste"> body {color: blue; } <li>texte [4]</li> h1 {color: green; } </ol> .h1 {color: blue; } </li> ol#liste1 li {color: yellow;} </ul> li:first-child {color: grey;} <h2>texte [5]</h2> ol[id] li {color: purple;} <ul> ul {color: black; } <li>texte [6] h1+ul>li+li {color: orange;} <ol id="liste1"> h1+ul>li {color: red; } <li>texte [7]</li> h1+ul {color: blue; } </ol> </style> </li> <title>Exo2 TD2</title> <li class="h1">texte [8] </head> <ol id="liste2"> <body> <li>texte [9]</li> <h1>texte [1]</h1> <li>texte [10]</li> <ul> </ol> <li>texte [2]</li> </li> <li>texte [3] </ul> <ol id="liste"> </body> <li>texte [4]</li> </html> </ol> Question : Indiquez pour chaque nombre entre crochet la couleur dans laquelle il s'affiche. </li> </ul> <h2>texte [5]</h2> <ul> <li>texte [6] <ol id="liste1"> <li>texte [7]</li> </ol>

    Vous aimerez peut-être aussi