TP4-5 : Utilisation des styles CSS

Objectif :

Appliquez une feuille de style à un site web pour gérer sa mise en forme .

Matériel :

Un PC sous Linux ou Windows relié à internet.
Un Serveur Web pour déposer les pages créées ( venus ).
Un navigateur firefox, opéra ou autre.
Un Editeur de texte ( Notepad++, Sublim text).
La norme CSS3 t
Le site http://www.w3schools.com/ contient un bon didacticiel et de nombreux exemples qui vous aideront à répondre aux questions.

Travail à réaliser.

Mettre en forme le texte .

Recopiez le code html suivant dans un fichier test.htm et joignez lui une feuille de style externe styleTest.css.

<!DOCTYPE HTML PUBLIC> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page de test pour les CSS</title> <link href="styleTest.css" rel="stylesheet" type="text/css">
</head>
<body> 
<ul> 
<li>page1</li> 
<li>page2</li> 
<li>page3</li> 
<li>page4</li> 
</ul> 
<h1>un titre de niveau 1 </h1> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis  
  eros dolor, venenatis vitae, pretium ut, suscipit nec, lectus. Mauris  
  urna. Etiam auctor lacus sit amet mauris. Nullam bibendum. Mauris vitae  
  leo. Nullam arcu. In nec odio nec tellus blandit tristique. Mauris vel  
  l ibero. Class aptent taciti sociosqu ad litora torquent per conubia  
  nostra, per inceptos hymenaeos. Proin congue pharetra lectus.  
  Suspendisse interdum eleifend nulla. Vestibulum lacinia mi nec ipsum? 
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis  
  eros dolor, venenatis vitae, pretium ut, suscipit nec, lectus. Mauris  
  urna. Etiam auctor lacus sit amet mauris. Nullam bibendum. Mauris vitae  
  leo. Nullam arcu. In nec odio nec tellus blandit tristique. Mauris vel  
  l ibero. Class aptent taciti sociosqu ad litora torquent per conubia  
  nostra, per inceptos hymenaeos. Proin congue pharetra lectus.  
  Suspendisse interdum eleifend nulla. Vestibulum lacinia mi nec ipsum?</p> 
</body> 
</html>

Redéfinissez la police, à l'aide de la propriété font-family placé au niveau de la balise body.
Que se passe t il si le navigateur du client ne possède pas cette police ?
Réglez également la taille par défaut du texte avec la propriété font-size.
L'utilisateur peut il régler la taille d'affichage du texte sous IE si l'on utilise une taille en pixel ?
Quelle taille de police est obtenue si l'on applique une propriété font-size:80% au premier paragraphe <p> du body où la font-size a été fixé à 15em.
Modifiez les balises H1 : caractères gras ( font-weight ), soulignés ( text-decoration ), systématiquement en Majuscule ( text-transform ).
Quelle est la police héritée pour H1, peut on la changer ?
Comment centrer le texte de la balise H1 ?
Appliquez au premier paragraphe un interligne de 3 em, un écart entre les lettres de 0,4 em.
Que se passe t il lorsque l'écart entre les lettres est négatif ?
Réglez l'espace entre les mots à 0,6em.
Que se passe t il lorsque l'écart entre les mots est négatif ?
Limitez maintenant la largeur du paragraphe à 400 pixels et alignez le texte à gauche et à droite ( justify ).
Réunissez l'ensemble des styles du premier paragraphe dans un style #paragraphe1 qui lui sera ensuite appliquez.
Que se passe t il si l'on affecte la propriété text-align:"center" à la balise body ? Nous verrons par la suite comment centrer des blocs comme les paragraphes.
Identifiez le deuxième paragraphe avec un id=paragraphe2, appliquez lui le style suivant : #paragraphe2 { font : italic bold 100% Arial, Helvetica, sans-serif;}.
Quelle est cette notation condensée ? identifiez les différents termes.

Utilisez des images et des couleurs pour les fonds.

Ajouter un fond jaune au paragraphe1, un fond bleu au paragraphe2, un fond vert au titre et un fond violet à la liste.
Appliquez un fond rose pâle au body.
Que remarquez vous quand à la taille et à la disposition des blocs ?
Récupérez l'image craft.jpg, quelle est sa taille ?
Appliquez la propriété background-image : url(...) au paragraphe2 pour insérer l'image en fond. Que remarquez vous ?
Quel est l'effet de la propriété background-repeat: no-repeat?
Quels sont les autres attributs possible pour la répétition ?
Comment centrer l'image dans le fond du paragraphe ?
Quelles sont les autres possibilités de placement d'une image dans un fond ?
Placez l'image craft.jpg en fond du paragraphe1 sans répétition, centrez la et utilisez la propriété background-attachement:fixed.
Quel est l'effet obtenu par cette dernière propriété ?

Des bordures pour agrémenter le tout.

Mettez en place une bordure sur le titre ( balise h1 ). Commencez par une bordure d'épaisseur 5px, de style 3D sortant ( ridge ) et de couleur verte, plus claire que le fond.
Tester les autres styles : double, groove, hidden, inset, outset, ridge, solid, dashed et dotted.
Utiliser les bordures pour faire apparaître un trait plein vert clair à droite du paragraphe1.
Insérer en fin de page le logo src et faîtes en un lien vers le site src.
Créez un style .sansbordure pour supprimer les bordures autour de l'image.

Mettre en forme les listes.

Donnez à la liste un identificateur "menu" ( id="menu") afin de modifier le style de cette liste.
Avec la propriété list-style-type, remplacer les puces par des losanges, par des carrées.
Quelle valeur faut il mettre pour supprimer les puces ?
Quelle est l'effet list-style-position:inside et outside ?
On peut remplacer la puce par une image quelconque avec la propriété list-style-image, trouver ou réaliser une image pour remplacer les puces.
Retirer toutes les puces, ajouter une propriété margin = 0 et padding =0 que nous verrons en détail au prochain tp, et passer à la suite.

Le style des liens hypertextes.

Pour chaque élément de la liste, page1, page2, .. créer un lien fictif ( href="#" ).
Dans quel style apparaissent les liens par défaut.
Rédefinissez le style de la balise <a> contenue dans la liste, en mettant le texte en jaune et non souligné. Cette balise est dans une liste on y accède dans la feuille de style par #menu a, car la balise <a> est un descendant de la balise identifiée par menu.
Distingue-t-on encore les différents états des liens ( visités, survolés, en cours de sélection ) ?
Modifiez ces trois états en changeant les styles pour les différents états des liens : a:visited, a:hover, a:active .
Pour donner l'aspect d'un bouton aux liens, appliquez le style suivant : color: #FFFF33; text-decoration: none; background: #fc0; line-height: 25px; border : 1px solid black; text-align:center;
Changez la couleur du bouton lorsqu'il est survolé ( #menu a:hover ).

Application :

Appliquez maintenant les techniques vues à votre CV.