Css menu spécifique non inteféférant

**INTRODUCTION** ________________________________________________________________________________________________________________________________ CSS est ce qui permet de donner du style à ton site. C'est carrément de l'art numérique, du rouge par ci du vert par la cette police d'écriture par la bas, plus d'espace entre l'image et le texte, un effet d'ombre etc.... Quand tu peint tu va avec ton pinceau directement la ou tu veut appliquer une couleur ou une modification Sur Winword c'est pareil tu sélection puis via ton menu tu changes les propriétés (ou attributs) de ce que tu as sélectionné Bref dans la vie de tous les jours quand tu enseignes (par exemple) devant tes étudiants si tu veux poser une question, même chose tu doit choisir une personne ou un groupe de personnes, tes questions seront du genre - Paul définie moi les loi de Kepler - Les Garcons, ditent moi ce qui rend le corps d'une femme exceptionnel - Les retardataires vous allez tous me faire une petite recherche histoire de vous sensibiliser aux serieux de mes heures de cours **PRINCIPE** ________________________________________________________________________________________________________________________________ Sous HTML/CSS c'est pareil: quand ta page se charge, elle lie au fur et à mesure le code HTML, CSS, javascript, PHP (interprété) et elle construit ta page tel un jeu de cube. c'est différents élements sont appelés par abus de langage DOM (Document Object Model). *En réalité dit toi que c'est un genre d'interface, tout comme les anciens standard téléphonique ou tu avait un tableau devant le standard avec plein de trou et quand tu voulais accéder à une chambre ou personne, le standard branche la prise téléphonique directement dans le connecteurs correspondant a ta destination* Bref... Dans ces objets du DOM (ce que je dit ici marche aussi avec jQuery) est pareil que pour les prof qui donne un cours, il a des éléments qu'il va appelé par QUELQUES CHOSE [code]IDENTIFIANT.SPECIFICITE { ATTRIBUT 1 A CHANGER: VALEUR DE L'ATTRIBUT; ATTRIBUT 2 A CHANGER: VALEUR DE L'ATTRIBUT; ATTRIBUT 3 A CHANGER: VALEUR DE L'ATTRIBUT; ...;[/code] } Tu peux également faire [code].SPECIFICITE { ATTRIBUT 1 A CHANGER: VALEUR DE L'ATTRIBUT; ATTRIBUT 2 A CHANGER: VALEUR DE L'ATTRIBUT; ATTRIBUT 3 A CHANGER: VALEUR DE L'ATTRIBUT; ...;[/code] **SELECTION PAR LE NOM DE LA BALISE HTML** ________________________________________________________________________________________________________________________________ l'identifiant c'est un élément de balise (par exemple DIV ou IMG ou BODY, HTML ou carrément tout avec le *) donc si je veux que mes div aient un fond (attribut css background-color) rouge (valeur red) je ferais div{ background-color:red; } **LES CLASSES - SELECTION PAR POINT** ________________________________________________________________________________________________________________________________ mais ca me dérange!! si je veux appliquer une modification sur la couleur (attribut css color) ceci à un groupe de div alors je leur donne un nom de classe (par exemple bonbon) et j'aurais dans ma page [code]

Salut

comment

ca

va?

je vais bien

merci

[/code] puis un css comme suit par exemple [code] div.bonbon{ // ici je touche aux mots "salut" et "ca" qui sont dans des div dont la classe est bonbon (pour je vais bien non car il est pas dans un div) color:red; } .gateau{ // la je touche a "comment", "va" et "merci" qu'il soit dans un div ou un p vu que j'ai spécifié que la classe color:blue; } p{ // ici disons qu'il y a moins de données de selection donc ca sera aux balises p n'étant pas déja modifié color:green; }[/code] rappelle toi que le css est LIFO (Last In First Out), c'est la dernière déclarée qui prime sur les autres [code] div.bonbon{ color:red; } div.bonbon{ color:green; }[/code] ici les mots des div dont l'une des classes est bonbon seront écrit en vert (green), j'ai dit l'une des classes car tu peut en mettre plusieurs à la fois (pareil c'est la dernière classes qui prime) [code]
comment
[/code] **SELECTION PAR IDENTIFIANT - LE DIESE** ________________________________________________________________________________________________________________________________ donc jusqu'a présent j'ai fait BALISE.SELECTEUR développement
web
[/code] ici avec ce code css [code]div#selecteur1{color:black;} div.selecteur1{color:white;}[/code] développement sera écrit en noir et web en blanc **PSEUDO CLASSE** ________________________________________________________________________________________________________________________________ à présent il arrive qu'une classe ne suffise plus et qu'on veuille aller plus loin dans la selection par exemple un lien que j'ai visité un lien surlequel j'ai mis ma souris la première ligne de mon tableau le dernier bloc div d'une page ...** et c'est la que rentre en jeux les pseudo classes qui sont précédent par ":" par exemple: [code]a:hover {color: red;} // si je met pa souris sur (pseudo classe hover) un lien (balise a) le couleur (attribut color) devient rouge (valeur red) [/code] ou encore [code] table#montableau tr:first-child{background-color:#111111;} // la permiere (firts-child) ligne (tr) de mon tableau (table) dont l'id est montableau (#montableau) aura un fond (background-color) d'une couleur correspondante à la valeur #111111 (couleur gris trés foncée) [/code] **PSEUDO ELEMENT** ________________________________________________________________________________________________________________________________ Pour finir il y a également ce qu'on appelle les pseudo-element before et after, elle te permette de rajouter quelques choses avant ta sélection ou après ta sélection par exemple si tu veux mettre une fleche avant tes liens de class fleche tu peux faire ceci: [code] a.fleche:before{ border-left: 2px solid transparent; border-right: 2px solid transparent; border-top: 2px solid #414141; display: inline-block; height: 0; vertical-align: top; width: 0; content: ""; position:relative; top:-4px; }[/code] voili voilou je penses qu'il y a les bases :)