Scribd
Carica
56 visualizzazioni10 pagine

Sedki TP CSS

Ghhhh

Caricato da

elbaliyoussef432
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
56 visualizzazioni10 pagine

Sedki TP CSS

Ghhhh

Caricato da

elbaliyoussef432
Copyright
© © All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
Sei sulla pagina 1/ 10
TP-CSS Exercice 1: Premiers pas en CSS 1) On veut obtenir laffichage suivant: en utilisant le HTML suivant Lua Rely Ma premiere page ave Premiers pas CSS K rel="stylesheet" hrel

Un essai en CSS

Ma premiere page avec du CSS.

Mexol.css"/> 1, Eerivez cet HTML dans un fichier, sans le modifier, et écrivez ensuite le fichier exo1..¢ss pour obtenir EXACTEMENT l'affichage souhaité. Exercice 2: Sélecteurs et attributs id et class 1- En utilisant le CSS suivant urgent t color: yellow; #priorite { color: red; h3 t color: blue; - Donnez les couleurs de chacun des éléments suivants: (par défaut les éléments sont noirs)

bla bla bla

bla bla bla

bla bla blash3>

bla bla blachl> "urgent">bla bla bla

  • Tom
  • Ben
  • Joe
  • Mare
  • Towo
  • Modifiez le fichier HTML afin d’ obtenir un résultat qui ressemble a ceci: + Tom « Ben * Joe * Mare ’ «Titi Indications : Modifiez le fichier HTML: On va diviser les joucurs en deux équipes : bleu et vert. En utilisant lattribut class faites que les joueurs de bleu apparaissent en blue et ceux de vert en green. En utilisant Vattribut "id" avec la valeur "gagnant’, faites en sorte que "Toto" soit encadré en rouge. ~ Remarquez, que « gagnant » aura deux attributs, agnant" et la classe "vert" (par exemple). Exercice 3: SEDKI A. Développement web - HTML/CSS Page 2 1. On veut "styler" la page afin d'obtenir les effets suivants (voir figure suivante): ‘Lorem ipsum dolor ‘cb smn ng meine Tait mee nr pou Pcs an me Ba spon ‘Sit amet nis sed lit ben ins Mame ne Spe emi ee i ont [nce couneoee alu car nro ‘Nulla interdum nam ‘Scelerisque praesent (eran en i ss ena a rt ‘Winer ces Reson Deo aoc un fond simulant un effet parchemin, tous les titres de niveau | (éléments h1) centrés sur la page, > tous les titres de niveau 2 (éléments h2) de couleur bleue sur fond doré (identifiant de couleur goldenrod), > le texte des tous les paragraphes (éléments p) justifié (aligné) & gauche et & droite, avec un retrait de 16 pixels au début de chaque paragraphe. vy In itions YT faut appliquer une image de fond a tout le document. On utilise le sélecteur body avec la propriété background-image. ¥ Pour les titres de niveau I (1) et 2 (h2) on utilise respectivement les propriétés: © text-align pour centrer le texte des titres 1, © color et background-color pour définir la couleur du texte et la couleur du fond de titres 2. ¥ Pour les paragraphes p on utilise les propriétés text-align pour la justification et text-indent pour le retrait v 2. On souhaite mettre en évidence certains paragraphes du texte et quelques portions de texte, en les surlignant avec une couleur jaune comme le montre la figure suivante SEDKI A. Développement web - HTML/CSS Page 3 Lorem ipsum dolor Uinicis et pllenegue integer a lqum cused varias tempor. Nunc a eget jot, veh corbin vel oor elie. Cone vem. Pesun eu usc, pe oa elds ela gus pro upendinn Tego mlin mor sed masa lac carts hte dene et Pest EAT emer: land ne wii Sst fs & Masi pret vel Sepen consectetuer sullen Bln ere nee ‘npn corsecemer Dureta Pulsar usin pacientes Nauwis sncgct teper uma pelkntsqur commode seis ibys maces Sel spicing scp fl ne sclrague Pars nes aa conseqst ocean dolor En wet Nulla interdum nam Indications Y On applique Vattribut class aux paragraphes concemés, De méme, on regroupe les portions de texte & surligner avec des balises span et leur appliquer lattribut class. 3. On souhaite modifier laffichage de maniere A ce que les deux premiers paragraphes soient (figure ci- dessous ) 1. dans un cadre de fond gris dont le bord est un trait plein noir. 2. en italique avec une police deux fois plus petite que le texte normal Justo fs & Massa pretiom ve. Sapien consecetuer mullam blandit enim. age lsreet ingh"> aseter CE UEP Wharbve rst pce te Use, Indication Utilisez une balise div pour encadrer les deux paragraphes, que vous doterez d'un identifiant (attribut i). 4.On voudrait que les titres de niveau h! soient encadrés par une boite au fond rouge, avec comme ‘75% largeur de la page bordure un trait plein noir, la. boite étant centrée et occupant 75% de la largeur de la fenétre, et avec une police un peu plus grosse (3.0em au lieu de 2.0em la valeur par défaut de hl (figure suivant). De plus on veut que la marge inférieure de la boite (qui la sépare du bloc suivant) soit de 20 pixels Exerci images de fond Créez un fichier HTML complet (avec les entétes...) et un fichier CSS associés Ajoutez-y le code suivant: HTML:

    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla

    CSS: fessai ‘ border: 4px solid red; ) 1- ajouter l'image de fond suivante a ce paragraphe (#essai).. > Par défaut, Vimage se répéte horizontalement et verticalement > Pour modifier ce comportement on peut utiliser background-repeat: 2 Quelle ligne (entire) faut-il ajouter au CSS pour obtenir cet affichage: SEDKI A. Développement web - HTML/CSS Page 5 3+ Quelle ligne (entire) faut-il ajouter au CSS pour obtenir cet affichage: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla Vous remarquez que la taille de Vimage de fond et la taille de élément p (#essai) sont deux notions séparées: Ici, p est plus grand que l'image de fond. 4. Essayez de remplacer le texte (bla bla bla) par : « S'aime le HTML / CSS »).. ‘Vous verrez que p devient plus petit que limage de fond. + On voudrait redimensionner p (#essai) pour qu'il ait exactement la méme taille que image de fond (180x90 pixels). '5- Ecrivez le CSS nécessaire pour obtenir exactement I'affichage suivant: crbenl etsy HTML/CSS + Attention, quand vous ajoutez du padding, il faut diminuer la taille (width, height) du contenu pour que le tout reste de la méme taille que l'image de fond (180x90). + Pour centrer horizontalement le texte, utilisez text-align (voir le cours) + Le texte blane sur fond clair n'est pas trés lisible. On peut ajouter une ombre au texte avec: text shadow (voir le cours) Exercice 5: Dans lexercice précédent on a utilisé une image png comme image de fond. Bien souvent, on veut utiliser un dégradé de couleurs comme image de fond. Au lieu d'utiliser une image on peut utiliser les gradients CSS. La syntaxe n'est pas simple et il faut ajouter des variantes pour différents navigateurs. Heureusement, il existe des sites web pour vous aider & génerer le CSS nécessaire exemple : https://essgenerator.org/ Créez un gradient CSS sur un de ces sites et appliquez le au HTML suivant. SEDKI A. Développement web - HTML/CSS Page 6

    bia bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla

    Exercice 6: Display block et inline Les éléments HTML peuvent se ranger dans de deux eatégories : inline et block. Les élément block occupent toute une ligne. Les éléments inline s'affichent cote a cote, horizontalement (s'il y a assez de place). IIs sont en général contenus dans un élément block. inline: a, img, strong, span . block: p, hi, div ... h2 as p> exemplliga important, + a strong Tous les éléments HTML ont une valeur display par défaut (inline ou block). La propriété CSS display capable de transformer n'importe quel élément d'un type vers un autre. On peut par exemple imposer aux liens (originellement de type inline) d'apparaitre sous forme de blocs : a 1 display: block; A ce moment-la, les liens vont se positionner les uns en dessous des autres (comme des blocs normaux), et il devient possible de modifier leurs dimensions ! Et 4 Vinverse, vous pouvez tenter de faire en sorte qu'un Elément qui est de type block par défaut devienne inline SEDKI A. Développement web - HTML/CSS Page 7 1-Soit le HTML:

    paragraphe

    strong lien/a>

    titre h2

    ‘chocolat"/> Pour mieux faire apparaitre les éléments (

    ,,,,

    ) on peut leur ajouter une bordure noire ragraphe [strong titre h2 = Indiquez le type de chaque élément (

    ,,,,

    ) :"inline" ou "block" Exercice 7: Un menu horizontal 1- On veut faire un menu comme celui affiché ci-dessous. Un menu est une liste de liens : Une liste se construit en HTML avec des "ul", des "Li" et des "a" Le probléme est qu'une liste affiche chaque li sur une ligne séparée (block). A partir du HTML donné ici:
  • Accueil
  • Infos
  • Contact
  • Se connecter
    • Ecrivez le CSS nécessaire pour obtenir l'affichage suivant: Infos SEDKI A. Développement web - HTML/CSS Page 8 a:hover { Indications : ‘commencez par faire en sorte que les li s'affichent sur la méme ligne. ajoutez la bordure, et l'espacement nécessaire ajustez les couleurs remarquez qu'un élément du menu est différent... utilisez la classe "active" pour obtenir facilement les coins arrondis on va utiliser: border-top-left-radius: 10px; border-top-right-radius: 10px; remarquez que quand la souris passe par-dessus un élément, il prend la couleur rose. ‘On utilise pour ga un le sélecteur de la pseudo classe « :hover » exemple /* Apparence au survol des liens */ text-decoration: underline; color: red; } Comme
    et , les balises HTMLS suivantes permettent aussi de regrouper des éléments HTML pour structurer les différentes parties d'une page. Importa les n'apportent pas d'affichage particulier. On pourrait trés bien obtenir le méme affichage avec des
    . Elles permettent de faciliter la mise en page & l'aide des CSS ('affichage en colonnes par ‘exemples doit étre fait en CSS) SEDKI A. Développement web - HTML/CSS Page 9 1. Essayez d'utiliser les balises que nous venons de découvrir pour obtenir cet aftichage: Mon Site 4 moi Carnets de voyage © Accucil * Blog oo A propos de auteur Cst imei, blabla ba! Je suis né un 23 novembre 2005 Je suis un grand voyageur Bia bia ba bla blabla (texte de Faricle) Cog SEDKI A. Développement web - HTML/CSS Page 10

    Potrebbero piacerti anche