# TP CSS > Vous trouverez une correction du tp1 [ici](../tp1/correction). > Vous trouverez une correction du tp2 [ici](../tp2/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 Soit le code [html](src/exercice3.html) suivant : ```html Pulp fiction

Uuummmm, this is a tasty burger!

Yeah, I like animals better than people sometimes...

Especially dogs.

We happy?

Dogs are the best.

And the good thing about dogs...

is they got different dogs for different people.

Give me... Raoul.

Right, Omar? Give me Raoul.

``` En utilsant les selecteurs contextuels (`E F`,`E + F`, `E > F`, `E ~ F`), donnez des règles de styles pour obtenir la mise en forme suivante : ![stack](./img/exo3.png) ## Exercice 4 : selection à l'aide d'attributs. Soit le code [html](src/exercice4.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. On pourra utiliser ici les boîtes flexibles (`flex`). > - `font-size` : contrôle la taille de la fonte. ## Exercice 5 : media queries Soit le code [html](src/exercice5.html) et sa feuille de [style](src/style5.css). Lorsque la largeur de l'écran est inférieur à `640px`, le menu n'est plus affiché. > Utilisez une requête media `@media`. ## Exercice 6 : 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.