CSS permet de d\u00e9finir les propri\u00e9t\u00e9s du lien diff\u00e9remment, selon que le lien est visit\u00e9, non visit\u00e9, activ\u00e9, ou si le curseur le survole. Cela permet d’ajouter des effets plaisants et utiles aux sites Web. Pour contr\u00f4ler ces effets, on utilise ce qu’on appelle des pseudo-classes.<\/p>\n
Une pseudo-classe permet de tenir compte de conditions et \u00e9v\u00e9nements diff\u00e9rents pour la d\u00e9finition d’une propri\u00e9t\u00e9 sur une balise HTML. Un lien est susceptible d’avoir plusieurs \u00e9tats. On Utilise a:link et a:visited pour les liens non visit\u00e9s et pour ceux visit\u00e9s. Les liens actifs ont pour pseudo-classe a:active, et la pseudo-classe a:hover intervient lorsque le curseur survole le lien.<\/p>\n La pseudo-classe :link La pseudo-classe :visited La pseudo-classe :active La pseudo-classe :hover Exp 1: l’espacement entre les lettres Exp2: MAJUSCULES et minuscules Les deux exemples donnent un aper\u00e7u des possibilit\u00e9s de combinaison des diff\u00e9rentes propri\u00e9t\u00e9s presque illimit\u00e9es. <\/p>\n Supprimer le trait sous les liens<\/p>\n On peut fixer la valeur de text-decoration en m\u00eame temps que celles d’autres propri\u00e9t\u00e9s pour les quatre pseudo-classes.<\/p>\n CSS permet de d\u00e9finir les propri\u00e9t\u00e9s du lien diff\u00e9remment, selon que le lien est visit\u00e9, non visit\u00e9, activ\u00e9, ou si le curseur le survole. Cela permet d’ajouter des effets plaisants et utiles aux sites Web. Pour contr\u00f4ler ces effets, on utilise ce qu’on appelle des pseudo-classes. Une pseudo-classe permet de tenir compte de conditions et \u00e9v\u00e9nements diff\u00e9rents pour la d\u00e9finition<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/27"}],"collection":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":1,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/27\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/media?parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nExp: les liens sont d\u00e9finis en HTML avec des balises a<\/strong>. On peut donc utiliser a comme s\u00e9lecteur dans CSS\u00a0:<\/p>\n\r\na { color: blue; }\r\n<\/pre>\n
\nExp: il peut \u00eatre visit\u00e9 ou non. On peut utiliser des pseudo-classes pour assigner des styles diff\u00e9rents aux liens visit\u00e9s et non visit\u00e9s.<\/p>\n\r\na:link { color: blue; } \r\na:visited { color: red; } \r\n<\/pre>\n
\nutilis\u00e9e pour les liens menant aux pages que l’utilisateur n’a pas visit\u00e9es.
\nExp:<\/p>\n\r\na:link { color: #6699CC; }\r\n<\/pre>\n
\nUtilis\u00e9e pour les liens menant aux pages que l’utilisateur a visit\u00e9es.
\nExp:<\/p>\n\r\na:visited { color: #660099; } \r\n<\/pre>\n
\nLa pseudo-classe :active est utilis\u00e9e pour les liens qui sont activ\u00e9s.
\nExp:<\/p>\n\r\na:active { background-color: #FFFF00; }\r\n<\/pre>\n
\nUtilis\u00e9e lorsque le pointeur de la souris survole un lien.
\nExp:<\/p>\n\r\na:hover { color: orange; font-style: italic; }\r\n<\/pre>\n
\nOn peut ajuster l’espacement entre les lettres avec la propri\u00e9t\u00e9 letter-spacing. Cela s’applique aux liens pour un effet sp\u00e9cial\u00a0:<\/p>\n\r\na:hover { letter-spacing: 10px; \r\n font-weight:bold;\r\n color:red; }\r\n<\/pre>\n
\nLa propri\u00e9t\u00e9 text-transform permet de basculer entre des lettres majuscules et minuscules. Elle peut aussi servir pour cr\u00e9er un effet sur les liens\u00a0:<\/p>\n\r\na:hover { text-transform: uppercase; \r\n\tfont-weight:bold; \r\n\tcolor:blue; \r\n\tbackground-color:yellow; } \r\n<\/pre>\n\r\na { text-decoration:none; } \r\n<\/pre>\n\r\na:link { color: blue; \r\n\ttext-decoration:none; } \r\na:visited { color: purple; \r\n\ttext-decoration:none; } \r\na:active { background-color: yellow; \r\n\ttext-decoration:none; } \r\na:hover { color:red; \r\n\ttext-decoration:none; } \r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"