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
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.
[Link]"/>
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
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 :
[Link]
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
stronglien/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:
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