les sélecteurs
Voici le code html suivant, que vous ne pouvez pas retoucher:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Infolearn - solutions de formation destinées aux entreprises / administrations</title>
<style type="text/css">
@import "main.css";
</style>
</head>
<body>
<h1 lang="en"><a href="accueil.html" title="retour à la page d'accueil"><img src="logo.png" alt="infolearn " /></a>Corporate learning solution</h1>
<ul id="language">
<li><a href="accueil.html" id="langOn">FR</a></li>
<li><a href="/en/accueil.html">EN</a></li>
<li><a href="/de/accueil.html">DE</a></li>
</ul>
<ul id="menu">
<li><a href="accueil.html">Accueil</a></li>
<li><a href="societe.html">Société</a></li>
<li><a href="cours.html">Cours</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="liens.html">Liens</a></li>
</ul>
<h2>Infolearn: solutions de formation destinées aux entreprises / administrations</h2>
<p>Infolearn améliore la performance globale de l’entreprise et
développe votre capital humain par des solutions formation innovantes,
qualitatives et à forte valeur ajoutée. Infolearn transforme
vos changements en <a href="succes.html">succès</a> et votre stratégie en réalité.</p>
<p>La vie d’une entreprise est faite de changements de plus en plus rapides
qui impactent les organisations, les processus de travail, les équipes.
Pour accompagner ces évolutions et mener au succès votre société il
est important de pouvoir mobiliser vos équipes et de leur donner les
compétences nécessaires pour réussir dans des environnements en constante
mutation. </p>
<p style="text-align:center">Infolearn est leader en suisse romande pour les solutions de <a href="formation.html">formation</a> destinées
aux entreprises / administrations. Infolearn vous fera bénéficier
de ses 15 ans d’expériences, de la réussite de centaines
de <a href="projets.html">projets</a> spécifiques en Suisse et à l'étranger, de l'expertise
de ses 120 consultants-formateurs. </p>
<h3>Notre concept global de solution formation se décline en prestations:</h3>
<img src="infolearn.jpg" alt ="" />
<ul>
<li><a href="bilan.html">Bilan de compétences</a> individuels ou d’équipes
(assesments)</li>
<li><a href="conseil.html">Conseil en formation</a> et construction de projets formation</li>
<li>Solutions de gestion de la formation et intranets de formation</li>
<li> Création de programmes et supports de formation</li>
<li><a href="animation.html">Animation de cours</a> (dont plus de 500 cours collectifs en Suisse)</li>
<li><a href="certifications.html">Certifications / test</a></li>
<li> Suivi de plans de formation.</li>
</ul>
<p>Nos domaines d’excellence sont la <a href="gestion.html">gestion de projets</a>, les méthodologies
et processus, le service management, la sécurité, l’informatique,
les <a href="telecom.html">Télécoms</a>, les skills liés aux projets et technologies.</p>
<p>Infolearn est une société suisse du groupe Altran (15 000
personnes, 1.6 MM€ de C.A., cotation Bourse de Paris).</p>
<p>Notre présence sur 4 continents nous permet de gérer des projets
multilingues, globaux et internationaux.</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Infolearn - solutions de formation destinées aux entreprises / administrations</title>
<style type="text/css">
@import "main.css";
</style>
</head>
<body>
<h1 lang="en"><a href="accueil.html" title="retour à la page d'accueil"><img src="logo.png" alt="infolearn " /></a>Corporate learning solution</h1>
<ul id="language">
<li><a href="accueil.html" id="langOn">FR</a></li>
<li><a href="/en/accueil.html">EN</a></li>
<li><a href="/de/accueil.html">DE</a></li>
</ul>
<ul id="menu">
<li><a href="accueil.html">Accueil</a></li>
<li><a href="societe.html">Société</a></li>
<li><a href="cours.html">Cours</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="liens.html">Liens</a></li>
</ul>
<h2>Infolearn: solutions de formation destinées aux entreprises / administrations</h2>
<p>Infolearn améliore la performance globale de l’entreprise et
développe votre capital humain par des solutions formation innovantes,
qualitatives et à forte valeur ajoutée. Infolearn transforme
vos changements en <a href="succes.html">succès</a> et votre stratégie en réalité.</p>
<p>La vie d’une entreprise est faite de changements de plus en plus rapides
qui impactent les organisations, les processus de travail, les équipes.
Pour accompagner ces évolutions et mener au succès votre société il
est important de pouvoir mobiliser vos équipes et de leur donner les
compétences nécessaires pour réussir dans des environnements en constante
mutation. </p>
<p style="text-align:center">Infolearn est leader en suisse romande pour les solutions de <a href="formation.html">formation</a> destinées
aux entreprises / administrations. Infolearn vous fera bénéficier
de ses 15 ans d’expériences, de la réussite de centaines
de <a href="projets.html">projets</a> spécifiques en Suisse et à l'étranger, de l'expertise
de ses 120 consultants-formateurs. </p>
<h3>Notre concept global de solution formation se décline en prestations:</h3>
<img src="infolearn.jpg" alt ="" />
<ul>
<li><a href="bilan.html">Bilan de compétences</a> individuels ou d’équipes
(assesments)</li>
<li><a href="conseil.html">Conseil en formation</a> et construction de projets formation</li>
<li>Solutions de gestion de la formation et intranets de formation</li>
<li> Création de programmes et supports de formation</li>
<li><a href="animation.html">Animation de cours</a> (dont plus de 500 cours collectifs en Suisse)</li>
<li><a href="certifications.html">Certifications / test</a></li>
<li> Suivi de plans de formation.</li>
</ul>
<p>Nos domaines d’excellence sont la <a href="gestion.html">gestion de projets</a>, les méthodologies
et processus, le service management, la sécurité, l’informatique,
les <a href="telecom.html">Télécoms</a>, les skills liés aux projets et technologies.</p>
<p>Infolearn est une société suisse du groupe Altran (15 000
personnes, 1.6 MM€ de C.A., cotation Bourse de Paris).</p>
<p>Notre présence sur 4 continents nous permet de gérer des projets
multilingues, globaux et internationaux.</p>
</body>
</html>
Etablir les sélecteurs qui devraient être utilisés dans la feuille de style styles.css afin que:
- Les textes du menu et du menu de langues soient non-soulignés, de couleur bordeau et rouge au survol
- Les liens dans la page soient soulignés,sauf ceux de la liste, et de couleur vert foncé, vert plus clair lors d'un survol
- Que l'on puisse donner une couleur de fond jaune ainsi qu'un cadre noir au menu
- Que l'on puisse attibuer une bordure bleue sur le haut du menu et sur le bas
- Que le paragraphe "Nos domaines d’excellence" et "Infolearn est leader" puissent être encadrés en rouge
- Que le lien "succès" soit plus gros que le reste du texte
- Que le logo soit encadré en noir
Solution
Afficher
SI, à l'heure actuelle, on est assez limité dans l'emploi des sélecteurs à cause d'IE6 qui n'en interprète pas beaucoup, vu le meilleur support par IE7 ils devraient de plus en plus être utilisés dans le futur afin d'alléger l'html et simplifier les mises à jour. D'ailleurs css3 propose de nombreux nouveaux sélecteurs.
a {
color:#060;
}
a:hover {
color:#090;
}
ul a {
text-decoration:none;
}
#menu a,#language a {
color:#900;
}
#menu a:hover,#language a:hover {
color:#F00;
}
#menu {
background-color:#FF9;
border:1px solid black;
}
#menu li:first-child{ /* non reconnu par IE6 */
border-top:1px solid blue;
}
#menu li:last-child{ /* non reconnu par IE6, sélecteur CSS3 */
border-bottom:1px solid blue;
}
ul+p, p[style] { /* non reconnu par IE6 */
border:1px solid red;
}
h2+p a { /* non reconnu par IE6 */
font-size:2em;
}
h1 img {
border:1px solid black;
}
