Graph' Power
Bienvenue sur Graph' Power !!
Je te souhaite une bonne visite sur le forum.
Si tu est inscrit connecte-toi !
Mais si tu est un invité... tu ne vas pas tardé a t'inscrire x)

Les Staff de GP

Graph' Power

.F E R M E R.
 

Partagez | 
 

 Utilistion avancée du CSS

Aller en bas 
AuteurMessage
Manumanu
GPiens
GPiens
avatar

Messages : 189
Date d'inscription : 19/09/2011
Age : 30
Localisation : Perpignan

MessageSujet: Utilistion avancée du CSS   Mer 28 Sep - 14:58


Ce cours s'adresse à ceux qui ont déjà des bases de html et css. J'entends par là que vous devez comprendre de quoi je cause quand je parle de classes, de propriétés, d'attributs et de balises.

.:: 0. Introduction ::.



Pour petit rappel :
<balise attribut="valeur">


Donc si vous êtes là, c'est que vous savez construire une feuille de style. Et vous travaillez comme ceci, grosso modo :
Code:

#page {
   width: 800px;
   overflow: auto
}

#page .bloc {
   width: 100px;
   display: inline-block

C'est une bonne base de travail ; mais désormais, on passe dans la cour des grands, on va voir l'utilisation plus avancée sdes sélecteurs. Figurez-vous que ceci veut dire quelque chose en CSS :

 #page > div * div + div li:first-child a[href~="index.html"] { color: #ccc }


Certes, c'est un tantinet plus long et complexe qu'écrire simplement la classe d'un élément.
Il est important de noter que la séparation du contenu et de la mise en forme est au coeur même de l'utilisation du CSS, et des principes sémantiques que le W3C met en place depuis des anneés (depuis la mise au point du xhtml). Par la même, l'idéal pour cette sémantique serait d'avoir un code html vide d'éléments de mise en forme - d'ailleurs, le W3C recommande l'absence de tout attribut style dans les balises html, et préconise l'utilisation de classes CSS et d'ID à la place.
Mais on peut minimiser au maximum l'utilisation de ces classes et de ces ID grâce à l'utilisation des sélecteurs. Dans l'exemple ci-dessus, j'ai volontairement exagéré la complexité, mais on peut faire beaucoup de choses avec simplicité - parfois même plus qu'avec des classes.

De plus, ça peut se révéler très utile dans certains cas. Songez à ceci :

  • Vous n'aurez peut-être pas toujours accès au html, et donc pas la possibilité de le modifier. C'est le cas avec forumactif, par exemple.
  • Vous pouvez grâce à ça proposer un changement de design très facile, qui ne nécessite que peu de remaniement html sur votre site
  • Cela sert également à appliquer un style à des éléments très nombreux sans avoir besoin de toucher au html






.:: 1. Les sélecteurs d'enfants ::.




Sélecteur d'enfant

 div.rouge span { color: red }

Vous utilisez déjà très probablement ce sélecteur, même sans le savoir. En effet, mettre un élément à la suite d'un autre crée automatiquement un principe de descendance. Dans le cas présent, la div portant la classe rouge devient parente de l'élément span, qui lui devient enfant.
Dans cet exemple, toutes les balises span contenues dans la div seront affectés de manière récursive, et ce peu importe s'il y a d'autres balises entre eux ; sauf si un parent plus "proche" lui donne une information contradictoire, comme une autre couleur : c'est le principe d'héritage.
Code:

<div class="rouge">
   <div class="bleu">
      <span id="1">Ce texte sera affecté</span>
   </div>
   <span>Ce texte sera affecté</span>
</div>

<span>Ce texte ne sera pas affecté</span>

Dans le cas présent, le span portant l'id "2" est enfant de la div "bleu", puis de la div "rouge". Voyons un petit schéma simple histoire de bien comprendre ce principe :
Citation :

  • Mes enfants seront rouges

    • Mon parent m'a dit d'être rouge

    • Mon parent m'a dit d'être rouge

      • Le parent de mon parent m'a dit d'être rouge

      • Le parent de monMon parent m'a dit d'être rouge



    • Mon parent m'a dit d'être rouge, mais mes enfants seront verts !

      • Mon parent m'a dit d'être vert

      • Mon parent m'a dit d'être vert



    • Mon parent m'a dit d'être rouge



  • Mes enfants seront bleus

    • Mon parent m'a dit d'être bleu





Selecteur d'enfant direct : ">"


 div.rouge > span { color: red }

Sur le même principe de lien enfant/parent, ce sélecteur (qui ne porte pas de nom particulier au demeurant, mais que j'appelle "sélecteur d'enfant direct" pour être plus clair) sert à n'agir que sur les enfants directs d'un élément, à l'inverse du sélecteur simple qui agit de manière récursive sur toute sa descendance.
Code:

<div class="rouge">
   <div class="bleu">
      <span>Ce texte ne sera pas affecté</span>
   </div>

   <span>Ce texte sera affecté</span>
</div>

<span>Ce texte ne sera pas affecté</span>
Citation :

  • Mes enfants directs seront rouges

    • Mon parent m'a dit d'être rouge

    • Mon parent m'a dit d'être rouge

      • On ne m'a rien dit

      • On ne m'a rien dit



    • Mon parent m'a dit d'être rouge





Selecteur descendant : "*"

 div.rouge * span { color: red }

À l'inverse du sélecteur d'enfant direct, ce sélecteur agit de manière inverse, et affecte tous ses descendants sauf ses enfants directs.
Code:

<div class="rouge">
   <div class="bleu">
      <span>Ce texte sera affecté</span>
   </div>
   <span>Ce texte ne sera pas affecté</span>
</div>
<span>Ce texte ne sera pas affecté</span>
Citation :

  • Mes enfants descendants seront rouges

    • On ne m'a rien dit

    • On ne m'a rien dit

      • Mon grand-parent m'a dit d'être rouge

      • Mon grand-parent m'a dit d'être rouge

      • Mon grand-parent m'a dit d'être rouge

        • Mon grand-parent m'a dit d'être rouge

        • Mon grand-parent m'a dit d'être rouge




    • On ne m'a rien dit





Selecteur d'adjacence : "+"


 div.rouge span + span { color: red }

Un sélecteur un peu plus complexe cette fois-ci, mais très utile. Celui-ci sert à définir un lien d'adjacence entre deux balises ayant un parent direct commun. Les éléments adjacents au dernier à être cité ne seront pas affectés.
Code:

<div class="rouge">
   <div class="bleu">
      <span>Ce texte ne sera pas affecté</span>
      <span>Ce texte sera affecté</span></div>
   </div>

   <span>Ce texte ne sera pas affecté</span>
   <span>Ce texte sera affecté</span></div>

<span>Ce texte ne sera pas affecté</span>
Citation :

  • Je n'ai rien dit à personne

    • Mes frères seront rouges !

    • Mon frère m'a dit d'être rouge

    • Mon frère m'a dit d'être rouge




On peut bien sûr utiliser ce sélecteur plusieurs fois. Par exemple, si on voulait affecter les éléments d'une liste seulement à partir du quatrième élément :
 li+li+li+li { color: red }

Citation :

  1. Élément de liste

  2. Élément de liste

  3. Élément de liste

  4. Élément de liste

  5. Élément de liste

  6. Élément de liste

  7. Élément de liste

  8. Élément de liste

  9. Élément de liste


C'est un sélecteur dont je me sers régulièrement pour, entre autres, définir des marges automatiques entre deux éléments de même nature, comme des blocs d'un élément de menu.
#sidebar div+div { margin-top: 15px }




.:: 2. Sélecteur d'attribut ::.



On peut également attribuer des propriétés à un (ou plusieurs) élément html précis en fontion des attributs qu'ils portent. Ainsi on peut, encore une fois, se passer facilement d'ajouts de classes dans le html en se reposant sur ce qui existe déjà. Il suffit d'accoler le nom de l'attribut en question entre crochets [] à l'élément en question. On ne se soucie pas de la valeur de cet attribut.
a[title] { color: red }

Code:

<a href="#">Ce lien ne sera pas affecté</a>
<a href="#" title="">Ce lien sera affecté</a>
<a href="#" title="Venez sur mon site !">Ce lien sera affecté</a>

a[target] { color: red }

Code:

<a href="#">Ce lien ne sera pas affecté</a>
<a href="#" title="">Ce lien ne sera pas affecté</a>
<a href="#" title="" target="">Ce lien sera affecté</a>

Mais on peut également aller plus loin et cibler un élément dont l'attribut prend une valeur précise. C'est très utile pour les éléments d'un formulaire, qui sont définis, avec la même balise, par la valeur de leur type :
input[type=password] { color: red }

Code:

<input type="text" />
<input type="password" /> <!-- Cet élément sera affecté -->
<input type="submit" />

Vous pouvez également définir le fait qu'un attribut doit contenir au moins une des valeurs énoncées.
a[rel~=copyright] { color: red }

Code:

<a href="#" rel="">Ce lien ne sera pas affecté</a>
<a href="#" rel="copyright">Ce lien sera affecté</a>
<a href="#" rel="copyright copyleft">Ce lien sera affecté</a>

Sachez enfin qu'on peut combiner ces sélecteurs à volonté :
a[rel][target=_blank][title] { color: red }



.:: 3. Les pseudo-classes ::.




:first-child

Très pratique dans certains cas, cet élément cible un élément s'il est le premier enfant de son parent. Il faut donc bien faire attention, car il s'agit bien du premier enfant, et non du premier enfant d'un tel type. Par exemple :
div p:first-child { color: red }

Code:

<div>
   <p>Cet élément sera affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>

Si on voit maintenant, pour le même code CSS, ce code HTML :
Code:

<div>
   <h2>Ce titre ne sera pas affecté</h2>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
   <p>Cet élément ne sera pas affecté</p>
</div>
Rien ne va se passer. En effet, le code CSS signifie "cibler tous les éléments p s'il s'agit du premier enfant de leur parent" et non "cibler tous les éléments p qui sont les premiers de ce éléments de type p enfants". Or dans ce cas, c'est h2 qui est le premier enfant.


:hover

Cette pseudo-classe est très utilisée. Elle déclenche un ensemble de propriétés au survol d'un élément par la souris. C'est par exemple très utilisé pour les menu, qui vont se dérouler ou changer de couleur au survol. On peut l'appliquer à tout élément html.
div:hover { background: white }


Il est aussi possible de cibler des éléments au survol de leur parent. Dans le cas suivant, ce sont tous les liens contenu dans un élément de liste au survol de la div qui les contient (et non au survol du lien) :
div:hover li a { background: white }



:first-letter

On peut se servir de :first-letter pour créer des lettrines. C'est d'ailleurs sa principale utilité. Dans l'exemple suivant, tous les éléments p verront leur première lettre affichée en rouge.
p:first-letter { color: red }



:first-line

Peu utilisé, cette pseudo-classe va agir sur la première ligne de texte d'un élément.
p:first-line { color: red }



:after et :before

Voici deux pseudo-classes complémentaires très utiles. Elles s'utilisent avec la propriété content, et servent à rajouter un élément avant (pour :before) ou après (pour :after) un autre élément.
span:before{ content: "→ " }

Ainsi pour ce code :
Code:
<span>Test</span>
On obtiendra ce résultat :
Citation :
→ Test

a:after{ content: " >>" }

Code:
<a href="#">Lien</a>
Citation :
Lien >>


Il existe d'autres pseudo-classes, moins utilisées, comme :link et :visited (qui n'agissent que sur les liens). De nouvelles pseudo-classes très intéressantes apparaîssent avec le CSS3. Ce sera peut-être l'occasino d'y revenir. ;)


.:: 4. Conclusion... ? ::.


Tout en essayant d'être complet, je n'ai pas été exhaustif. Ce sont là des bases de l'utilisation plus poussée qu'on peut avoir du CSS et du HTML. Il existe des techniques avancées qui n'ont rien à voir avec les sélecteurs ou les pseudo-classes, comme le placement d'éléments.
Si ce petit cours vous a plu, vous pouvez consultez de petits tutoriels que j'ai rédigé sur mon blog, ainsi qu'un tutoriel sur les Sprites CSS que j'ai écrit pour le Site du Zéro.

À bientôt pour d'autres cours !

PS: N'hésitez pas si vous avez des questions.

Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.infographizm.com
Azumi Ikata.
Fondatrice
Fondatrice
avatar

Messages : 2691
Date d'inscription : 10/07/2011
Age : 20
Localisation : Devant mon ordi... j'ai essayer derrière mais je vois rien --'

MessageSujet: Re: Utilistion avancée du CSS   Mer 12 Oct - 14:54

Merci du cours :D
Je n'ai pas eu le temps de tout lire, désoler...

____■▫ Graph' Power ▪□____
GalerieBoîte à Cadeaux



Merci ma Sista Carbonara
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://graphpower.graphforum.com/
 
Utilistion avancée du CSS
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graph' Power :: Cours Libre-
Sauter vers:  
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forumactif.com