Université de Nice Sophia Antipolis
2009-2010
IUT R&T
Retour sur la page du cours

Cours "Techno Web"
TP - Styles CSS2
- ÉNONCÉ -

Ressources extérieures : les pages du W3C sur les CSS et le cours de cssdebutant.com.

Préambule : création d'une feuille de style

Pour les exercices qui suivent, on récupérera le fichier exo.html sur son compte pour le modifier en local.

Avec la balise <link>, faire en sorte que les styles apparaissent dans un fichier indépendant de exo.html.

Associer ce style seulement au media "écran".

Modifier le style des listes Pour les listes de définitions (<dl>, <dt> et <dd> - cf. exemple), modifier les styles pour que :
- les ensembles de définitions soient encadrés par un cadre orange en pointillés, de 4 pixels d'épaisseur ;
- les termes définis soient en gras ;
- les définitions soient en italique.

Pour les listes non ordonnées (<ul>),  modifier le style pour que la puce soit un carré.

Pour les listes ordonnées (<ol>), modifier le style pour que :
- les listes ordonnées de premier niveau soient numérotées en chiffres romains majuscules ;
- les listes ordonnées de deuxième niveau (imbriquées dans une autre <ol>) soient numérotées par des lettres grecques minuscules ;
- les listes ordonnées de troisième niveau soient numérotées par des lettres latines minuscules.
Modifier les paragraphes importants En créant une classe CSS 'important', modifier le style pour que les paragraphes importants :
- s'affichent en rouge dans un cadre bleu d'épaisseur 2 pixels, avec un fond gris #dddddd ;
- aient un espace d'affichage total de 8cm (largeur) par 2.5cm (hauteur) ;
- possèdent des marges externes de 1cm et des marges internes de 0.5cm ;
- ne débordent pas du cadre ;
- aient leur texte caché qui devienne visible lorsque la souris passe dessus.
Pseudo-classes En utilisant la pseudo-classe 'first-letter', modifier le style des éléments des listes (li) pour que la première lettre soit plus grosse.
En utilisant la pseudo-class  'first-line', changer également le style de la première ligne d'un paragraphe important. Mettre ces lignes en gras et en italique.
Séparer et styler le menu Reprendre le fichier exo.html et découper le document en deux parties, le plus simple étant de créer un tableau contenant une ligne et deux cases. La partie gauche doit contenir le menu (les liens internes) ; la partie droite doit contenir le reste de la page, comme suit :

<table>
    <tr>
        <td class="menu">
                <div class="menu"> ... le menu ... </div> 
        </td>
        <td> ... le reste de la page ... </td>
    </tr>
</table>

Nous encapsulons la partie gauche dans une <div> pour lui imposer un style spécifique. Nous encapsulons également dans une autre <div> le menu contenu dans la partie gauche.
Modifier le style de telle sorte que :
  1. la partie gauche ait une largeur de 16em ;
  2. la partie gauche soit encadrée et sur fond gris ;
  3. le "menu" dans cette partie gauche soit également encadré (cela fait bien deux cadres) ;
  4. le menu reste toujours au même niveau dans la page lorsque l'utilisateur utilise la barre de défilement ;
  5. le fond du menu devienne jaune quand la souris passe dessus.
Numérotation automatique Il est possible que cette partie de l'exercice ne soit pas réalisable si votre navigateur est Internet Exploreur.

NE MARCHE PAS SUR LES VERSIONS DE NAVIGATEUR QUE VOUS AVEZ SOUS LINUX, MAIS FONCTIONNE SOUS WINDOWS AVEC FIREFOX

Numérotation automatique des titres H1, H2 et H3

Numéroter automatiquement les titres de niveaux 1, 2 et 3 en respectant la structure/encapsulation (comme la structure donnée par les listes ordonnées dans la table des matières).

Numérotation des paragraphes importants

Devant chaque paragraphe important, ajouter de manière automatique : 'Note', puis le numéro du chapitre (titre 1), puis un point, puis le numéro de paragraphe dans le chapitre. (Il faut donc réinitialiser ce dernier numéro à chaque titre de niveau 1.) NB : il est possible que cette partie de l'exercice entre en conflit avec le style dynamique (quand la souris passe sur ces paragraphes). Dans ce cas, enlever cette partie du style.
Du rab sur les tableaux Modifier le fichier exo_tab.html de manière à ce qu'il ressemble à : image a reproduire

Valid XHTML 1.1

Valid CSS!