Complement de cours css

Propriété Display :
Appliquer les valeur : inline ,inline_block et block sur un span qui est par defaut une balise
inline

Création menu:
Html:
<a href="menu lineaire.html"> Fichier </a>
<a href=""> Edition</a>
<a href=""> Selection</a>

Css1)
a{ font-size: large;
display: block;
padding:15px;
background-color: blue;
width: 50px;
margin:5px;}

Css 2)
a{ font-size: large;
display: inline-block;
padding:15px;
background-color: blue;
width: 50px;
margin:5px;}

1
Transformations
Les transformations CSS vous permettent de déplacer, faire pivoter,
mettre à l'échelle et incliner des éléments.
Passez la souris sur l'élément ci-dessous pour voir une transformation
2D :
 transform
Méthodes de transformation CSS 2D
Avec la propriété CSS transform, vous pouvez utiliser les méthodes de
transformation 2D suivantes :
 translate()
 rotate()
 scale()
 skew()

A- La translate()méthode déplace un élément de sa position actuelle

(selon les paramètres donnés pour l'axe X et l'axe Y).
L'exemple suivant déplace l'élément <div> de 50 pixels vers la droite et
de 100 pixels vers le bas par rapport à sa position actuelle :
div { transform: translate(50px, 100px);}
Exercices :
1. Faites une translation vers le bas de 250px
……………………………………………………………………………………..…………………………………………………………………..
2. Faites une translation vers le haut de 120px
……………………………………………………………………………………………………………………………………………………………..
3. Faites une translation de 50px vers la gauche et 100px vers le
bas ………………………………………………………………………………………………………………………………………………..

B- La rotate()méthode fait tourner un élément

L'exemple suivant fait pivoter l'élément <div> dans le sens des aiguilles
d'une montre de 20 degrés :
div{transform:rotate(20deg);} ou div{transform:rotateZ(20deg);}
Exercices :
1. Faites pivoter l'élément <div> dans le sens inverse des aiguilles
d'une montre de 20 degrés :………………………….…………………………..
2. Faites pivoter un élément autour de son axe X à 35 degré :
div{……………………..:rotateX();}
3. Faites pivoter un élément autour de son axe Y à 50 degré :
………………………………………………………………………………………….

C- La scale()méthode augmente ou diminue la taille d'un élément

L'exemple suivant augmente l'élément <div> à deux fois sa largeur
d'origine et à trois fois sa hauteur d'origine :
div { transform: scale(2, 3);}
Exercices :
1. Réduis l'élément div à la moitié de sa largeur et de sa hauteur
d'origine :
div { transform: scale(…………………….);}
2. Augmente la largeur de l’élément div à deux fois sa largeur d'origine :

2
 div { transform: scaleX(…………………….);}
3. Diminue la largeur de l’élément div à la moitié de sa hauteur d'origine :
div { transform: scaleY(…………………….);}

D- La skew()méthode incline un élément le long des axes X et Y selon

les angles donnés
Exercices :
1. Incline l’élément div de 30 degrés
div { transform: skeW(20deg);}
.
2. Incline un élément le long de l'axe X de 30 degrés.
div { transform: ……………..(20deg);}
3. Incline l'élément div de 20 degrés le long de l'axe Y :
div { transform: …………(20deg);}

Transitions CSS
Les transitions CSS vous permettent de modifier les valeurs des propriétés en
douceur, sur une durée donnée.
 transition
 transition-delay
 transition-duration
 transition-property

Pour créer un effet de transition, vous devez spécifier deux choses :

 la propriété CSS à laquelle vous souhaitez ajouter un effet
 la durée de l'effet
Remarque : Si la partie durée n'est pas spécifiée, la transition n'aura aucun
effet, car la valeur par défaut est 0.
Exemple
div { width: 100px;
height: 100px;
background: red;
transition: width 2s;}
L'effet de transition commencera lorsque la propriété CSS spécifiée (largeur)
changera de valeur.
Exemple
div:hover { width: 300px;}
Notez que lorsque le curseur sort de l'élément, il reviendra progressivement à
son style d'origine.

Exercices
1. Ajouter un effet de transition pour les propriétés width et height, avec
une durée de 2 secondes pour la largeur et de 4 secondes pour la hauteur
div { transition: width ….., …………… 4s;}
div:hover{ ……………………………………………;…………………………………………………;}

3
exercice
Les propriétés de transition CSS peuvent être spécifiées une par une, comme
ceci : div {transition: 1s width 2s;}
Réécrire les propriétés en détail
div {
transition-property: ……….;
transition-duration: ………..;
transition-delay: ………;}