Scribd
Importer
5 vues2 pages

Exercice CSS : Marges et Animations

Le document présente des exercices de création et de gestion de fichiers CSS pour styliser des pages HTML. Il explique l'utilisation des propriétés de marges et de rembourrage, ainsi que la manière de les appliquer de manière synthétique ou détaillée. Les exercices incluent la création de fichiers CSS pour des mises en page spécifiques et l'animation d'éléments au survol de la souris.

Transféré par

guersite guersite
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
5 vues2 pages

Exercice CSS : Marges et Animations

Le document présente des exercices de création et de gestion de fichiers CSS pour styliser des pages HTML. Il explique l'utilisation des propriétés de marges et de rembourrage, ainsi que la manière de les appliquer de manière synthétique ou détaillée. Les exercices incluent la création de fichiers CSS pour des mises en page spécifiques et l'animation d'éléments au survol de la souris.

Transféré par

guersite guersite
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Office de la Formation Formatrice : KHALIL Amal

Professionnelle et de la Promotion du Travail

TP : css
Exercice 1 :

Créer le fichier css qui permet de rendre la page [Link] sous la forme suivante :

Exercice 2 :

Pour gérer les marges en CSS, on utilise les propriétés margin et padding :

Les tailles de ces marges peuvent se déclarer en pixels (px), en em, en %, etc. Tout dépend si
l'on veut qu'elles soient fixes ou proportionnelles.

On peut détailler les tailles des marges à l'aide des suffixes -top (haut), -right (droite), -
bottom (bas),-left (gauche), ou synthétiser les quatre d'un seul coup (la première valeur étant
celle du haut, puis on tourne dans le sens des aiguilles d'une montre).

margin:2px 5px 2em 0;

Si on ne met que deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à
gauche.
Développement web côté client 1/2
Office de la Formation Formatrice : KHALIL Amal
Professionnelle et de la Promotion du Travail

padding:2px 5px;

Si on ne met qu’une seule valeur, elle s'appliquera aux quatre cotés.

Créer le fichier css qui permet d’aboutir au résultat suivant, en se basant sur le fichier
[Link] :

Exercice 3 :

Réaliser la page html suivante en séparant le style du contenu et en veillant à animer les 4
blocs (basic...) de manière à les agrandir quand la souris leur passe dessus :

Développement web côté client 2/2

Vous aimerez peut-être aussi