Utilisateur:Darkoneko/CSS

Un article de Wikipédia, l'encyclopédie libre.

Sommaire

[modifier] Feuilles de style

/ou mettre les informations de style ?

[modifier] vocabulaire

  • une regle CSS va s appliquer a plusieurs cibles et decrit l'habillage pour celles ci.
  • une propriete est un element constitutif d'une regle.

[modifier] exemple de regle :

p {
  color:navy;
}

Notes

  • la regle concerne les paragraphes
  • pas d'espace avant color, ;ais il est possible d'en mettre un apres
  • color:navy est une propriete

[modifier] cibles possibles

  • "*" : designe tous les elements (==reglage par defaut)
  • h1, h2, h3, h4, h5, h6
  • p, div, span...

[modifier] cibler plusieurs elements d'un coup

h1, h2, h3 {
   color:green:
}

il est aussi possible d'utiliser une "classe" generique pour cibler un peu n'importe quoi


[modifier] Qualifier tous les elements possedant une classe

.erreur {
   color:red;
}

[modifier] Ne qualifier que certains elements

(ex : les paragraphes)

p.erreur {
   color:red;
}

[modifier] Qualifier tous les elements a l interieur d'un element utilisant la classe

L'exemple suivant applique les elements "fils" (contenu dans) un paragraphe utilisant la classe

La seule difference avec le precedente est l espace entre p et le fils

p .erreur {
   color:red;
}

autre exemple

CSS : "qualifier les li se trouvant dans des ul qui se trouvent dans un tableau"
table ul li {
  ....
}

[modifier] qualifier des identifiants uniques

ex de page :

<h1 id="titre1" ...>

CSS

h1#titre1 {
  ...
}

Note : comme titre1 est unique, le "h1" n'est pas obligatoire mais permet juste de s'y retrouver plus facilement


[modifier] exemples

p#main {
   ...
}

p #main {
  ...
{

#main p {
  ...
}
  1. qualifie le paragraphe ayant l'identifiant main
  2. qualifie les elements se trouvant au sein d'un paragraphe ayant l'identifiant main
  3. qualifie tous les paragraphes se trouvant dans la cible ayant l'identifiant main'


body #main p.smallText span {
   ....
}

qualifie un span

  • qui se trouve dans un paragraphe de la classe smallText
  • qui se trouve lui meme dans la cible possedant l'identifiant main
  • qui se trouve dans le body

[modifier] Mise de commentaire :

/* comme ca */


[modifier] proprietes

[modifier] background-color:

couleur d'arriere plan. C'est le même argument que color.

[modifier] le texte

/texte

[modifier] les listes

/liste

[modifier] Pseudos classes

les pseudos classes sont des classes pre-existantes que l'on peut completer

  • a:visited = pour un lien visite
  • a:hover = la souris est sur l'element
  • a:active = le lien est en train d'etre clique

Note: visited et active sont quasi reserves aux liens, mais hover est utilisable a peut pres partout (sauf que ce con d'IE ne le reconnais que pour les liens)

[modifier] le "modele de boite"

/modele de boite

/positionnement

[modifier] type d'affichage

display:

  • block = comme une balise block (sur tout l'espace disponible en largeur)
  • inline = comme une balise inline
  • none = ne pas afficher l'élément
  • float:left (ou right) = élément flottant

NOTE : pour indiquer d'un élément qu'il ne supporte pas le cotoiement d un flottant (exemple, un titre qui serait gêné par une image a droite)

  • clear:left / right / both (se placer dessous plutot qu'à coté si un élément flottant à gauche, droite ou des deux cotés.


  • z-index : permet de mettre des éléments hors flux (float, absolute...) les uns au dessus/dessous des autres en fonction de la valeur affectée.