# TP CSS > Vous trouverez une correction du tp1 [ici](../tp1/correction). > Vous trouverez une correction du tp2 [ici](../tp2/correction). > Vous trouverez une correction du tp3 [ici](../tp3/correction). ## Exercice 1 : stylisation d'une liste Soit le code [html](src/exercice1.html) suivant ```html

Mes films préférés de Clint Eastwood

``` Donnez une feuille de style pour obtenir la mise en page suivante ; ![eastwood](./img/eastwood.png) > Propriétés css utiles : > - `list-style-type` : contrôle l'apparence de la puce d'un élément de liste. > - `padding`, `margin` : espace intérieur et extérieur > - `background-color` : couleur de fond > - `font-style` : italique, oblique ou normal > > Pseudo-classes utiles : > - `nth-child` : nth-child(an+b) permet de selctionner les éléments en fonction de leur position. ## Exercice 2 : positionnement des boîtes avec la propriété `position`. Soit le code [html](./src/exercice2.html) suivant : ```html Exercice 2
``` Donnez une feuille de style pour obtenir la mise en page suivante : ![eastwood](./img/smiley.png) > Propriétés utiles > - `position` : static, relative, absolute, fixed, sticky > - `top`, `bottom`, `right`, `left` : coordonnées de l'élément. Attention, pour le > positionnement absolu, les **coordonnées s'entendent par rapport au premier ascendant en position relative, > le body s'il n'y en a pas**. > - `ẁidth` et `height` : largeur et hauteur. > - `border-radius` et `border` : arrondi des coins, et bordure. ## Exercice 3 : selection à l'aide d'attributs. Soit le code [html](src/exercice3.html) suivant ```html Exercice 3 ``` Donnez une feuille de style pour obtenir la mise en page suivante : ![stack](./img/web_stack.png) Vous pouvez utiliser les images suivantes : - [html](https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-plain.svg) - [css](https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-plain.svg) - [javascript](https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-plain.svg) > On peut selectionner un élément en utilisant la valeur d'un attribut. Par exemple : > ```css > a[href*="toto"] > ``` > selectionne les liens dont l'url cible contient "toto". > Propriétés utiles : > - `background-image` : permet de définir une image comme arrière plan. > - `display` : permet de définir le rendu d'un élément (bloc ou en ligne) > - `font-size` : contrôle la taille de la fonte. > - `text-align`, `vertical-align` : contrôle l'alignement horizontal et vertical des éléments inline. ## Exercice 4 : media queries Soit le code [html](src/exercice4.html) et sa feuille de [style](src/style4.css). Lorsque la largeur de l'écran est inférieur à `640px`, le menu n'est plus affiché. > Utilisez une requête media `@media`. ## Exercice 5 : mise en page avec la propriété `float` On reprend le source précédent. À l'aide de la propriété `float`, affichez les articles sur 2 colonnes avec une bordure de 1px grise et une marge entre les articles de 40px. > Vous aurez besoin d'utiliser la propriété `width` que vous pouvez utiliser avec la fonction CSS `calc()` pour le calcul, > exemple: > ```css > width: calc(100px + 2*20px) > ``` > Penser quand vous cherchez la bonne largeur (+/- 50%), qu'il faut prendre en compte la taille de marge et des bordures. Vous pouvez utiliser > la propriété `box-sizing`. Ajoutez une requête media pour que les articles s'affichent à nouveau verticalement lorsque la taille de l'écran est en dessous de 720px.