Explication de codes

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Explication de codes

Message par Invité le Mer 20 Mai 2015 - 21:16

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://homesweethome.forumperso.com

Description du problème

Bonjour,

Ces trois codes étaient déjà dans ma feuille de style à l'ouverture de mon forum, quelqu'un peut me dire de quoi il s'agit au juste ?

Code:

body {
background-attachment: fixed;
background-position: top center;
}
a:link,a:active,a:visited {
text-decoration: none;
}
a:hover
{
cursor: url("XPOSv2Cursor 67.cur");
}

Merci ! Cool


Dernière édition par Dopamine le Mer 20 Mai 2015 - 23:03, édité 1 fois

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Explication de codes

Message par MlleAlys le Mer 20 Mai 2015 - 21:54

Bonjour,
De façon générale, un code css sert à mettre en forme un élément et s'écrit toujours :
Code:
élément { propriété1: valeur; propriété2: valeur; etc }
encore présenté comme ceci pour mieux distinguer les différentes mises en forme d'un élément :
Code:
élément {
  propriété1: valeur;
  propriété2: valeur;
  etc
}


Votre premier code :
Code:
body {
  background-attachment: fixed;
  background-position: top center;
}
body est l'élément qui contient toute la partie visible de la page. C'est notamment à cet élément qu'on attribue le fond de page en background. L'image de background est mise dans la partie image du panneau d'administration.

- La propriété background-attachment permet de choisir la façon dont est "attaché" le fond : ce peut être fixed (qui ne bouge pas quand on fait défiler la page), ou scroll (qui défile avec le contenu de la page), pour les plus utilisés. Cette ligne n'est normalement pas nécessaire puisque une petite case à cocher vous permet dans la partie images du panneau d'administration de choisir si votre fond est fixe ou non, inutile donc normalement de le remettre dans le css ^^

- La propriété background-position permet de préciser la position de l'image de fond, verticalement et horizontalement : ici top center signifie que l'image est placée à l'origine en haut et au centre (centrage horizontal) de la page.


Le deuxième code :
Code:
a:link,a:active,a:visited {
  text-decoration: none;
}
Ici le code concerne plusieurs éléments, séparés par des virgules : a:link, a:active, et a:visited
l'élément a est celui de la balise des liens que vous connaissez certainement :
Code:
<a href="ADRESSE DU LIEN"> NOM DU LIEN </a>
:link, :active et :visited sont des pseudo-class qui ajoute une précision quand à l'élément auxquels ils sont accolés :
a:link signifie les balises a de type lien (parce que oui ce n'est pas toujours le cas ^^"),
a:active signifie les liens actifs (quand on clique dessus par exemple),
a:visited signifie les liens déjà visités.

- Et, à ces trois éléments, on applique la mise en forme text-decoration: none; qui permet d'annuler la mise en forme par défaut de soulignage des liens (souligner un texte en css : text-decoration: underline;)

En bref, ce code permet de ne pas avoir les liens soulignés ^^


Enfin,
Code:
a:hover {
  cursor: url("XPOSv2Cursor 67.cur");
}
On retrouve l'élément a correspondant aux liens, et la pseudo-class :hover qui traduit "au passage de la souris sur l'élément".
La propriété css cursor permet de modifier le curseur de la souris, et ici le curseur choisi est celui précisé entre les parenthèses. Cependant le lien mis ne semble mener nulle part, donc le code en lui même ne sert apparemment à rien, c'est la petite main par défaut qui apparait au survol des liens. Razz

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Explication de codes

Message par Invité le Mer 20 Mai 2015 - 22:53

Merci MlleAlys, ce qui répond tout à fait à mes questions ! Cool

Maintenant y a t-il un moyen pour ne changer que la couleur des liens que l'on poste dans un message sans que cela ne touche aux autres liens du forum ?

Car en ce moment, étant de la même couleur que le texte, ils ne se démarquent que si on les survole avec la souris.

J'ai essayé plusieurs choses mais n'y arrive pas... Confused

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Explication de codes

Message par MlleAlys le Mer 20 Mai 2015 - 22:59

Les messages se trouvent dans un bloc de classe postbody, pour modifier la couleur des liens qui sont à l'intérieur des messages, c'est à dire des balises a, il faut donc utiliser le code suivant :
Code:
.postbody a {
  color: red;
}
(le point devant le postbody indique que c'est un nom de class. Il n'y a pas de point devant le a parce que c'est une balise ^^)

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Explication de codes

Message par Invité le Mer 20 Mai 2015 - 23:03

Cool ! Merci beaucoup !!!!! Wink

Sujet résolu

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum