Application des styles

On peut appliquer les styles sur la majorité des balises. Quelques balises n'acceptent que quelques propriétés. Par exemple:

  • br; clear:both
  • col, colgroup; text-align:center
  • hr; width: 100%
  • img; border:0;
  • select; border:1px solid red;
  • table; border: 1px solid red;
  • html; margin: 10px;
  • title; display: block;
  • Ne peut pas être stylé (ou sans modifié le display): area, base, DOCTYPE, head, link, map, meta, param, style, script

Conseil

Couleurs

Utiliser toujours le couple (color/background-color). Au pire spécifier explicitement, background-color:transparent;

Positionnement absolue

1. Les positions top/left/bottom/right sont absolues par rapport au BODY ou une balise parente avec la propriété position:relative.

<body>

  
  <!-- je déplace de 5em avec une marge cette division -->
  <div style="margin-top:5em;">
   <!-- absolutediv1 sera placé à la position (0,0/haut,gauche) de la balise body - du document  -->
   <div id="absolutediv1" style="position:absolute;top:0;left:0;">
   </div>
  </div>

  <!-- je déplace de 5em avec une marge cette division et je met position:relative -->
  <div style="position:relative;    margin-top:5em">
   <!-- absolutediv2 sera placé à la position (0,0/haut,gauche) de la balise div précédente -->
    <div id="absolutediv2" style="position:absolute;top:0;left:0;>
    </div>
  </div>

</body>

2. Il faut toujours utiliser au moins une propriété top/bottom et au moins une propriété left/right pour ne pas avoir de problème avec du position:absolute. Exemple: 

#a {position:absolute; top:5px;    left:5px; }
#b {position:absolute; bottom:5px; left:5px; }
#c {position:absolute; top:5px;    right:5px; }
#d {position:absolute; bottom:5px; right:5px; }

Liens Brisés

  • http://dicolive.media-box.net/docCSS/css.php?orderByType=1 - Listes, explications et compatibilité des attributs CSS (2016-01-08)
  • http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py - Explique en anglais/espagnol les sélecteurs CSS3 (2016-01-08)
  • http://css.nu/articles/translate.html - HTML à CSS (2016-01-08)
  • http://macedition.com/cb/resources/abridgedcsssupport.html - Compatibilité CSS2 inter-navigateur (2016-01-08)
  • http://centricle.com/ref/css/filters/ - css hacks by browser (2016-01-08)
  • http://www.maxdesign.com.au/presentation/listamatic/index.htm - Listamatic: Liste et navigation (2016-01-08)
  • http://bluerobot.com/web/css/center1.html - Block Centering (margin:auto) (2016-01-08)
  • http://www.wpdfd.com/editorial/thebox/deadcentre4.html - dead center, a vertical and horizontal centering technique (2016-01-08)
  • http://www.shinze.com/index.php/2003/11/28/40-LesBonsConseilsDePappyDave - conseils (2016-01-08)
  • http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true - MSDN CSS Enhancement (2016-01-08)

Hyperliens...

Lire les commentaires | Laisser un commentaire