# 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
<h1>Mes films préférés de Clint Eastwood</h1>
<ul>
	<li>Gran Torino (2008)</li>
	<li>Impitoyable (1992)</li>
	<li>Mystic River (2003)</li>
	<li>Sur la route de Madison (1995)</li>
	<li>Lettres d'Iwo Jima (2006)</li>
	<li>L'Échange (2008)</li>
	<li>Josey Wales hors-la-loi (1976)</li>
	<li>Breezy (1973)</li>
</ul>
```

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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Exercice 2</title>
	</head>
	<body>
		<main>
			<header></header>
			<section></section>
			<footer></footer>
		</main>
	</body>
</html>
```
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Pulp fiction</title>
	<style>
body {
  font-family: serif;
}
	</style>
</head>
<body>
	<h1>Uuummmm, this is a tasty burger!</h1>
<p>
  Yeah, I like animals better than people sometimes...
</p>
<p>
  Especially dogs.
</p>

<article>
  <h2>We happy?</h2>
  <p>
    Dogs are the best.
  </p>
  <div>
    <p>
      And the good thing about dogs...
    </p>
    <p>
      is they got different dogs for different people.
    </p>
  </div>
</article>

<p>
  Give me... Raoul.
</p>
<p>
  Right, Omar? Give me Raoul.
</p>
</body>
</html>
```
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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Exercice 3</title>
	</head>
	<body>
		<ul>
			<li><a href="https://developer.mozilla.org/docs/Web/HTML">HTML</a></li>
			<li><a href="https://developer.mozilla.org/docs/Web/CSS">CSS</a></li>
			<li><a href="https://developer.mozilla.org/docs/Web/Javascript">JS</a></li>
		</ul>
	</body>
</html>
```
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.
