logo

TP : débuter avec le CSS

Mise en situation

Préparer un fichier HTML

Nous avons donc un conteneur qui contient un ensemble d’éléments.Pour organiser leur agencement dans le bloc conteneur. Prenons pour exemple ce code : 

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>TP CSS</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div id="conteneur">

			Placer ici les titres et les 5 paragraphes du TP sur HTML

		</div>
	</body>
</html>

Enregistrez la page sous le nom pagestyle.html. Afficher le résultat sur un navigateur.

Préparer un fichier CSS

Dans le fichier CSS :

Créer une page style.css contenant ce code : 

#conteneur{
	width:800px;
	margin:auto;
	padding:40px;
	background-color:#dddddd;
	}

Quel changement s'est produit ?

Gérer le fond d'écran

Rajouter le bloc suivant dans votre fichier CSS

body {
  background: url("http://mathartung.xyz/nsi/img/exo_ihm.jpg") no-repeat center fixed; 
  background-size: cover;
 }

Dans le bloc #conteneur, rajouter la ligne : 

	opacity : 0.8;

Regarder le résultat sur le navigateur.

Création d'une classe

Dans le fichier HTML, choisir deux balises <p> et modifiez-les de la façon suivante :

<p class="bleu">

Dans le fichier CSS, rajouter le bloc suivant :

.bleu{color:blue;
	font-size:20px;
	text-align: right
	}

Regardez le résultat.

exercice sur les liens

Rajouter un lien dans votre page HTML.

  1. Il doit s'afficher en vert, et ne plus être souligné.
  2. Lorsque la souris est dessus il devient rouge et plus grand.
  3. Une fois cliqué, il devient rose.
  4. ... et plus si vous avez des idées...

exercice : animation sur une image

Rajouter l'image suivante entre deux paragraphes de votre page HTML. 

<img id="image" src="http://mathartung.xyz/nsi/img/exo_ihm_mini.jpg">
  1. Vous pouvez changer l'image si vous voulez.
  2. L'image doit être centrée.
  3. Lorsque la souris passe dessus, sa taille double (ou triple)
  4. ... et plus si vous avez des idées...

Pour trouver: