tp3 : css
This commit is contained in:
181
R1.02/tp/tp3/README.md
Normal file
181
R1.02/tp/tp3/README.md
Normal file
@@ -0,0 +1,181 @@
|
|||||||
|
# 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 ;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> 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 :
|
||||||
|
|
||||||
|
|
||||||
|
> 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 :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Exercice 4 : selection à l'aide d'attributs.
|
||||||
|
Soit le code [html](src/exercice3.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 :
|
||||||
|
|
||||||
|
|
||||||
|
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/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 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.
|
||||||
BIN
R1.02/tp/tp3/img/eastwood.png
Normal file
BIN
R1.02/tp/tp3/img/eastwood.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
R1.02/tp/tp3/img/exo3.png
Normal file
BIN
R1.02/tp/tp3/img/exo3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
R1.02/tp/tp3/img/smiley.png
Normal file
BIN
R1.02/tp/tp3/img/smiley.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
R1.02/tp/tp3/img/web_stack.png
Normal file
BIN
R1.02/tp/tp3/img/web_stack.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
23
R1.02/tp/tp3/src/exercice1.html
Normal file
23
R1.02/tp/tp3/src/exercice1.html
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<title>CEastwood</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
14
R1.02/tp/tp3/src/exercice2.html
Normal file
14
R1.02/tp/tp3/src/exercice2.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!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>
|
||||||
43
R1.02/tp/tp3/src/exercice3.html
Normal file
43
R1.02/tp/tp3/src/exercice3.html
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<!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>
|
||||||
14
R1.02/tp/tp3/src/exercice4.html
Normal file
14
R1.02/tp/tp3/src/exercice4.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!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>
|
||||||
60
R1.02/tp/tp3/src/exercice5.html
Normal file
60
R1.02/tp/tp3/src/exercice5.html
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||||||
|
<link rel="stylesheet" href="style5.css">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/">Home</a></li>
|
||||||
|
<li><a href="/">About</a></li>
|
||||||
|
<li><a href="/">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 1</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 2</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 3</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>Article title 3</h1>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<img src="https://picsum.photos/300/200" alt="">
|
||||||
|
<p>lorem ipsum</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
R1.02/tp/tp3/src/style5.css
Normal file
21
R1.02/tp/tp3/src/style5.css
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
ul {
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
list-style-position: inside;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 2em;
|
||||||
|
font-size : 2em;
|
||||||
|
}
|
||||||
|
li:last-child{
|
||||||
|
margin-right:0;
|
||||||
|
|
||||||
|
}
|
||||||
|
article {
|
||||||
|
text-align: justify;
|
||||||
|
border : 1px solid grey;
|
||||||
|
padding : 1em;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user