TD2 - Université d`Angers

Transcription

TD2 - Université d`Angers
Université d’Angers
Développement Web
TD2 – Premières notions de CSS2
Vous pouvez n’avez pas à réécrire toute la page de départ. Indiquez uniquement ce qui doit se trouver
entre les balises <body >et <body />
Exercice 1 :
Q 1 . Que fait le CSS suivant ?
*
{
background-color :green ;
}
h1, p
{
text-align :right ;
font-family :Aigrette, ’’Times New Roman’’, sans-serif ;
}
h2
{
font-style :italic ;
/* font-style :oblique ; */
text-transform :capitalize ;
text-decoration :underline ;
background-color :yellow ;
font-family :Arial;
}
p .toto
{
font-family :Pigeon, serif ;
font-size :40px ;
color :blue ;
}
#titi
{
font-weight :bold ;
font-variant :small-caps ;
color :red ;
}
Q 2 . Qu’est-ce qui sera écrit en bleu dans le texte suivant ?
<h1 class="toto"> Mon titre </h1>
<p> Mon premier paragraphe </p>
<p class="toto"> Mon second paragraphe et <q>ma citation </q></p>
<p> Mon <span class="toto"> troisième </span> paragraphe </p>
<p> Mon <span class="toto"> troisième, oups <span> quatrième </span></span> paragraphe </p>
<blockquote class="toto"> <p> Ma sitation longue </p></blockquote>
Q 3 . Sans modifier le document XHTML, écrire un fichier CSS permettant les mises en formes
suivantes :
1. Les titres de niveau 1 sont en lettres capitales minuscules.
2. Les titres de niveau 2 sont soulignés.
3. Les paragraphes sont en gris.
1/2
4. Les textes importants de classe c1 apparaissent en rouge, ceux de classe c2 sont en italique et violet.
5. Les citations sont en bleu et italique si elles sont contenues dans un paragraphe, mais apparaissent
droites sur fond vert si elles sont contenues dans un titre h1 ou h2.
Q 4 . De quelle couleur sera écrit le “et encore important !”
Exercice 2 : La figure suivante montre mon arborescence de fichiers.
Q 1 . Quelle instruction dois-je mettre pour que le fichier exemple.html utilise le CSS contenu dans
le fichier general.css ? Et dans quelle fichier dois-je la mettre ?
Q 2 . Quelle instruction dois-je mettre pour que exemple.html qui utilise le CSS de general.css affiche
comme image de fond logo.png en bas à gauche de l’écran ?
Q 3 . Est-il possible d’avoir sur la même page Web d’autres images que l’image de fond ? Et si oui
comment ?
2/2