monnerat/web_2024

History

Denis Monnerat e53f464564 typo		2024-12-10 12:53:25 +01:00
..
correction	ajout correction tp3	2024-12-10 12:50:01 +01:00
img	tp3	2024-12-03 09:45:10 +01:00
src	tp3	2024-12-03 09:45:10 +01:00
README.md	typo	2024-12-10 12:53:25 +01:00

README.md

TP CSS

Vous trouverez une correction du tp1 ici.

Vous trouverez une correction du tp2 ici.

Vous trouverez une correction du tp3 ici.

Exercice 1 : stylisation d'une liste

Soit le code html suivant

<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 suivant :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Exercice 2</title>
	</head>
	<body>
		<main>
			<header></header>
			<section></section>
			<aside></aside>
			<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 : selection à l'aide d'attributs.

Soit le code html suivant

<!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 :

On peut selectionner un élément en utilisant la valeur d'un attribut. Par exemple :
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 et sa feuille de style.

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:
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.