Création de site petites annonces Documentation Kaoley petites annonces
Précédent Suivant

Les base du css

Pour définir un style il y a plusieurs façons d'y accéder :
  1. Par une balise : par exemple a (les lien), h1 (les balide titre), etc.
    ça s'ppliquera a toutes les balise
  2. Par un classe : .ma_classe
    ce style s'appliquera a tout ce qui fera référence à cette classe
  3. Par un identifiant (id) : #mon_id
    ce style s'appliquera a l'éllement qui est definit pas cet ID. En général c'est unique.
Css cela signifie : Cascading Style Sheets
Donc un style en cascade ... Cela veut dire que l'on peut définir un style général pour la balise

Avec son style correspondant


Mais si dans une page en particulier on veut ce style, mais pas de la même couleur on a plusieurs solution :
1. on définit une classe ou un identifiant
Avec son style correspondant. Mais si on veut changer que la couleur. on ne met que cela. C'est en cascade ... on a déjà définit tous le reste, on met uniquement ce que l'on veut changer.


2. on le met dans un "boite"
Et on écrit le css comme cela


Le plus interessant c'est de connaire les mots clés utilisé.
Voici ce qui est le plus utilisé :
  • width : la largeur d'un élément en % (80%) ou en pixel (150px)
  • height : la hauteur d'un élément en % (80%) ou en pixel (150px)
  • background-color : La couleur de font (voir table de code couleur en annexe)
  • color : La couleur d'un élément (voir table de code couleur en annexe)
  • font-family : Police de carractère d'un texte (voir le paragraphe sur ce sujet)
  • font-size : Taille de la police en pixel de préférence
  • padding : définit les différents écarts de remplissage sur les quatre côtés d'un élément (5px 8px 3px 4px). Il existe 4 varriantes pour définir les 4 cotés : padding-top, padding-right, padding-bottom, padding-left.
  • margin : taille des marges sur les quatre côtés d'un élément (5px 8px 3px 4px). Il existe 4 varriantes pour définir les 4 cotés : margin-top, margin-right, margin-bottom, margin-left.
  • font-weight : définit la "graisse" (texte en gras par exemple) utilisée pour le texte. Il y a plein de possibilité, mais on utilise principalement Bold(gras) et normal
  • text-decoration : "none" aucune décoration (c'est ce qu'il y a par défaut). "underline" = souligné
  • border : definit la bordure d'un élément. Par exemple : 1px solid #ff0000. Bordure pleine d'un pixel de large et rouge. Il existe aussi border-top, border-left, etc.
  • text-align : Alignement d'un texte : left, right, center et justify