Page_2-5

2-5 : Créez des apparences dynamiques ici

Pseudo-classe :Une pseudo-classe est un mot clé que l'on va ajouté au selecteur CSS, il indique une action précise qui aura lui aussi une propriété et une valeur. Il y a au survol, au clic, à la sélection et d'autres sélecteurs avancés.

Les pseudo-classes viennent s'ajouter à un sélecteur CSS pour décrire à quel moment un style en particulier doit s'appliquer.

Il en existe beaucoup d'autres sélecteurs. Si vous voulez une liste complète, vous pouvez vous renseigner directement à la source : sur le site du W3C !.

Au survol : hover (survoler).

Sur une image : img:hover :

Exemple sur les images. Au survole, on lui attribue une opacité :

CSS : Écrire "img:hover {opacity: 0.5;}. CSS :

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique à toutes les images. HTML :

Resultat : ici. Mettre la souris sur l'image pour voir l'opacité (comme sur l'image de l'ordinateur).

Sur un texte : p:hovers, a:hover, h1:hover, un mot.

Exemple "p:hover" sur du texte. Au survole, on lui attribue une autre couleur :

CSS : Écrire "p:hover {color: #ecf021}". CSS :

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique à tous les textes dans des balises ‹p›, sauf ceux qui ont déjà des valeurs d'attribuées, sinon les desactiver. HTML :

Resultat : ici. Mettre la souris sur l'image pour voir l'opacité (comme sur la ligne "Mettez à jour vos connaissances...").

Exemple "a:hover" sur le texte d'un lien hypertexte dans des balises ‹a›, comme haut de la page à gauche, sur "acceuil" et "Sommaire"

CSS : Écrire "a:hover {color: #ecf021}".

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique à tous les textes dans des balises ‹a›, sauf ceux qui ont déjà des valeurs d'attribuées, sinon les désactiver. HTML :

Resultat : ici. Mettre la souris sur "ici".

Exemple "h3:hover" sur les textes de lien dans des balises ‹h3›.

Ici, sur "Cours d'OpenClassrooms : "Créez votre site web avec HTML5 et CSS3" et sur "Prêt à donner un nouvel élan à votre carrière" en rouge, double souligné au survol.

CSS : Écrire "a:hover {color: #ec1c1c; text-decoration: underline double rgb (226,22,22);}".

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique à tous les textes dans des balises ‹h3›, sauf ceux qui ont déjà des valeurs d'attribuées, sinon les désactiver. HTML :

Resultat : ici. Mettre la souris sur "cours d'OpenClassrooms...".

Exemple ".ma_classe:hover" sur un ou des mots dans des balises.

Ici, sur "site d'entrainement" en jaune, sur fond jaune clair.

CSS n°46 : Écrire "C28:hover {background-color: rgb(241, 241, 191); color:#d1c305;}". Le n°46a : C28 est créer pour pouvoir mettre une classe dans le HTML afin de ciblé le block, qui est de sa couleur d'origine et pour pouvoir l'indiquer dans le CSS :

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique sur "site d'entrainement". HTML :

Resultat : ici. Mettre la souris sur "site d'entrainement".

Mettre des spans comme ceci ‹span›mot(s)‹/span›
Mettre la classe n°46a : C28 dans la 1ère balise span, comme ceci "‹span class="C28"›site d'entrainement‹/span›.

Au clic : active.

En pratique, elle n'est utilisée que sur les liens hypertexte.

Exemple sur "Acceuil" et "Sommaire".

Mettre la souris sur "Acceuil" et/ou "Sommaire", puis laisser appuyé le clic gauche. Un soulignement apparait, tant que l'on reste appuyé.

CSS : Écrire "h3:active {text-decoration-color: #e72309}".

Resultat : ici. Cliquer sur "acceuil", vous verez la couleur changer très rapidement en rouge.

À la sélection : focus.

Cette pseudo-classe permet d'appliquer un style à un élément lorsqu'il est selectionner au clavier ou à la souris. Au clavier, appuyer sur "tab". Elle pourra être appliquée à d'autres balises, comme les éléments de formulaires.

Exemple "a:focus" sur les textes de lien dans des balises ‹a›, comme haut de la page à gauche, sur "acceuil" et "Sommaire".

Ici, "Accueil" s'afficheront comme ceci : text en vert clair, fond en vert foncé, contour en rouge.

CSS : Écrire "a:focus {propriété: valeur;}".

Resultat : ici. Cliquer sur "acceuil", vous verez la couleur changer très rapidement en vert.

Stylisez un lien hypertexte déjà consulté avec : visited.

Il est possible d'appliquer un style à un lien hypertexte qui a déjà été "cliqué". Par défaut, le navigateur colore un lien en violet. Mais grâce à la pseudo-classe :visited , on peut changer ; même si, en pratique, sur les liens consultés, on ne change souvent pas grand-chose à part la couleur.

Si vous ne souhaitez pas que les liens déjà visités soient colorés d'une façon différente qu'un lien hypertexte non cliqués, il vous faudra leur appliquer la même couleur qu'aux liens normaux. De nombreux sites web font cela (OpenClassrooms y compris !).

Exemple en noir :

CSS : Écrire "a:visited {color:black;}"

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique à tous les textes dans des balises ‹a›. HTML :

Resultat : ici.

Il existe de nombreux sélecteurs, une grande quantité de propriétés CSS, permettant d'obtenir des effets particulièrement avancés, comme CSS Art. Exemple de lien : ici.

Sélecteur avancé : siblings (selecteur de voisins).

Il permet de faire intéragir simultanément deux éléments voisins, du même parents, du même block.

On precise l'élément principal, au quel on aditionne l'élément cible. Ensuite on indique la propriété, avec hover (survol) et la valeur, qui s'affichera au survol de l'image.

Pour cette exemple, l'élément principal est le paragraphe "Faites un grand pas..." (en bas), l'élément cible, le titre h3 "Prêt à donner un nouvel élan à votre carrière ?", dont le texte s'affichera en vert au survol de l'élément principal (le paragraphe).

CSS : Écrire "p:hover + h3 {color:#2cd150}".

Si l'image n'était pas dans une balise paragraphe ‹p›, titre ‹h.› ou autres, on aurait écrit "img:hover" au lieu de "p:hover". On peut mettre d'autres propriétés et valeurs et même plusieurs.

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".".

Résultat HTML :

Resultat : ici. Possitionner la souris au survol de "prêt à donner..."

Sélécteur universel : "*".

Le sélecteur universel "*" sélectionne toutes les balises sans exception.

Ici, on va mettre tous ce qui est texte en oblique.

CSS : Écrire "a:visited {font-style: oblique;}"

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique à tous les textes. HTML :

Resultat : ici. Possitionner la souris au survol de "prêt à donner..."

Sélécteur d'une balise contenue dans une autre : A B.

Exemple sur les textes : "une certification professionnelle" et "votre projet de carrière".

1ere étape :

Préalablement, on crée le secteur n°49 : C29 avec différentes propriétés et valeurs : une couleur de texte rouge, un souligné rouge et une police "Arial". CSS :

Ensuite, on crée des balises span autour des deux textes, en inserant la class C29 : ‹span class="C29"› texte ‹/span›. Ici sur le texte "Une certification professionnelle". HTML :

Resultat : ici. Possitionner la souris au survol de "prêt à donner..."

2ème étape :

Ensuite, créer un nouveau code CSS, ci dessous, avec de nouvelles propriétés et valeurs. Ici, textes en bleu foncé,en italique et une ombre jaune.

CSS : Écrire "p .C29 {color:rgb(6, 54, 211); font-style: italic; text-shadow: 6px 6px 2px rgb(251, 255, 0);}. CSS

HTML : C'est automatique. Toutes les balises avec la class "C29" se trouvant dans un paragraphe "p" ont des modification de style. La demande de changement à été faite que pour la couleur. Il a été rajouter l'italique et l'ombre. Le soulignement et la police Arial sont rester d'origine. Ici sur le texte "Une certification professionnelle". HTML :

Resultat : ici

Sélécteur d'une balise ‹a› qui possède un attribut : a[attribut].

a[attibut]{propriété: valeurs;} :

Cela permet de changer le style de l'attribut dans toutes les balises ‹a› où il se trouve. Exemple "title" sur "Acceuil" et "ici".

CSS : Écrire "a[title] {propriétés: valeurs;}"

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique à tous les titles. Exemple : le "ici aprés le titre du cours" HTML :

Resultat : ici

a[attibut="valeur"]{propriété: valeurs;} :

Cela permet de changer le style d'un attribut spécifique dans toutes les balises ‹a› où il se trouve. Exemple avec le "title : acceuil" (modifier pour cet exemple).

CSS : Écrire "a[title="Acceuil"] {propriétés: valeurs;}".

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique à tous les titles avec le mot "Acceuil" écris de cette façon précise. HTML : ici.

Resultat : ici

a[attibut*="valeur"]{propriété: valeurs;} :

Cela permet de changer le style d'un attribut spécifique dans toutes les balises ‹a› où il se trouve, même s'il est accompagné d'autres textes.

Exemple avec le title : "ici". Cela modifira tous les titles qui on "ici" y comprix qui ont ici dans leur contenu, comme "Cliquer ici" seront pris en compte. Exemple avec "ici" et "acceuil" qui a un title "cliquer ici".

CSS : Écrire "a[title*="ici"] {propriétés: valeurs;}".

HTML : C'est automatique, vu que ce n'est pas une classe qui commence par un point ".". Cela s'applique à tous les titles. HTML :

Resultat : ici