CSS : quelques styles. 2, calques

 

accueil (cours internet)

styles de texte >

L' "élément parent" d'un calque est celui dans laquelle il est inclus, i.e <body> s'il est placé directement dans la page, <p> s'il est placé dans un paragraphe (<p><span></span></p>), <td> s'il est placé dans une cellule de tableau , etc.

Style

Définition

Valeurs possibles
  • z-index
ordre de superposition des calques : le calque dont l'index z est le plus élevé sera "au-dessus" de tous les autres. 1,2,3, ...
 
  • top
  • right
  • bottom
  • left

distance entre le bord

  • supérieur
  • droit
  • inférieur
  • gauche

de l'élément et celui de l'élément parent (ou de la page, s'il est en position absolue)

px, pc, ... (unités)

% (de l'élément parent)

auto

  • position

point de référence du positionnement :

  • coin gauche haut de la page (absolu),
  • position "normale" que devrait avoir l'élément dans la page (relatif)
  • fixé à son élément parent (permet de faire un menu statique sur le site Openweb par ex.)

 

  • absolute
  • relative
  • fixed (pas compris par IE 6 et < )
  • visibility

le calque peut être

  • visible,
  • caché,
  • ou reprendre les paramètre de visibilité son élément parent

 

visible
hidden
inherit

  • overflow
comportement du calque en cas de chevauchement par un autre visible
hidden
scroll
auto
  • width
  • min-width
  • max-width

 

 

  • width : largeur exacte
  • min-width : largeur minimale
  • max-width: largeur maximale

 

px, pc, ... (unités)
% (de l'élément parent)
auto
none

  • margin : 1
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

marge

  • supérieure
  • droite
  • inférieure
  • gauche

par rapport à la bordure intérieure de son parent
ou à la bordure inférieure/gauche/supérieure/droite de l'élément précédent.

(num ; %)

px, pc, ... (unités)

% (de l'élément parent),

  • padding
écart entre les bords du calque et son contenu

px, pc, ... (unités)
%

  • border-width2
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
épaisseur de bordure (doit être associé avec border-style)

 

px, pc, ... (unités)

thin, medium, thick

  • border-style 3 
  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

apparence de la bordure

 

none,hidden,

dotted (pointillé),

dashed (tirets),

solid (lignes),

double,

groove (creusée),

inset (incrustée),

ridge (en relief),

outset (posée)

  • border-color4

  • border-top-color
  • border-right- color
  • border-bottom- color
  • border-left- color

couleur de bordure (doit être associé avec border-style)

 

 

  • border5
  • border-top
  • border-right
  • border-bottom
  • border-left

propriétés combinées de la bordure dans cet ordre : largeur type couleur

ex : thin dotted red

 

  • background-color
couleur d'arrière-plan

nom de couleur : red, blue, ...
ou valeur rvb

#ccffcc
rgb(255,106,126)

 

 

1 Suivie d'1 valeur : s'applique aux 4 côtés ; 2 valeurs : 1e s'applique à top et bottom, 2e à right et left ; 3 valeurs : 1e s'applique à top, 2e à right et left, 3e à bottom ; 4 valeurs : s'appliquent dans cet ordre à top, right, bottom, left.

2 Voir note 1 - 3 Voir note 1 -4 Voir note 1 - 5 Voir note 1

 

plus de propriétés :
cf Propriétés CSS sur http://fr.selfhtml.org voir le site

 

Eric
Pichon

retour haut de pageaccueil (cours internet)