Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:css [17/08/2009 15:56] – édition externe 127.0.0.1
+++ informatique:css [19/08/2009 14:02] (Version actuelle) – effacée cyrille
@@ Ligne 1: / Ligne 1: @@
-====== Cascading Style Sheets ======
-CSS - Cascading Style Sheets - Feuilles de style
-Des liens dans le [[glossaire:CSS|glossaire/CSS]].
-**N'oubliez pas le Doctype !**\\
-Attention à ne pas oublier le doctype du document (lire "[[http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html|DTD : comment choisir]]"), sinon votre page sera en [[http://www.alsacreations.com/article/lire/573-A-propos-du-Modele-de-boite-Microsoft-ou-quirks.html|mode Quirks]].
-[[http://www.blueprintcss.org|Blueprint]] is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
-[[http://wiki.github.com/stubbornella/oocss|Object Oriented CSS]] allows you to write fast, maintainable, standards-based front end code. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites.
-===== Tips =====
-==== Centrer des éléments en CSS ====
-=== Le centrage horizontal des éléments de type en-ligne ===
-La propriété CSS "text-align" est prévue pour s'appliquer sur un élément bloc (conteneur) et contrôlera l'alignement (gauche, droite, centré, justifié) de tous les élements de type "en-ligne" contenus dans ce bloc conteneur.
-<code css>
-#someClass {
- text-align: center;
-}
-</code>
-=== Le centrage horizontal des éléments de type bloc ===
-Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner une largeur (width) à l'élément et les valeurs "auto" aux marges latérales.
-<code css>
-#someClass {
-  margin-left: auto;
-  margin-right: auto;
-  width: ...; /* largeur obligatoire pour être centré */
-}
-</code>
-=== Centrage supportant resize ===
-Centrage d'un élément qui reste centré quand on retaille la fenêtre du navigateur.
-L'astuce est de placer dans un premier temps ce bloc à top 50% et left 50%,  ce qui placera le coin supérieur gauche du bloc au milieu de page. Ensuite, on définit des marges négatives dont la valeur est exactement la moitié  de la largeur et hauteur du bloc, ce qui le positionnera au milieu de page.
-<code css>
-#conteneur {
-     position:absolute;
-     left: 50%;
-     top: 50%;
-     width: 700px;
-     height: 400px;
-     margin-top: -200px;
-     margin-left: -350px;
-     border: 1px solid #000000;
-     }
-</code>
-==== Liens ====
-  * a:link: lien normal, non visité
-  * a:visited: lien visité
-  * a:hover: état du lien lorsque le curseur passe dessus
-  * a:active: lien sélectionné par clic
-==== Coins arrondis ====
-L'article d'origine : http://www.html.it/articoli/nifty/
-La couleur du rectangle est à la fois dans le css et dans le html ...
-Le style CSS :
-<code css>
-.rtop, .rbottom{display:block;background: transparent}
-.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: #605C9D}
-.r1{margin: 0 5px}
-.r2{margin: 0 3px}
-.r3{margin: 0 2px}
-.r4{margin: 0 1px; height: 2px}
-</code>
-Le rectangle HTML:
-<code html>
-<div style="background-color: transparent; width: 300px">
-  <b class="rtop" >
-    <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
-  </b>
-  <div style="background-color: #605C9D; color: #FFFFFF; text-align: center;">
-    Bla bla bla dans le rectangle
-  </div>
-  <b class="rbottom" >
-    <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
-  </b>
-</div>
-</code>
-{{:informatique:html-css_rounded_boxes_.html|Voir cet exemple}}
-==== Saut de page ====
-<code html>
- <p style="page-break-before: always;">
- </p>
- et aussi
- <div style="page-break-inside: avoid;">
- </div>
-</code>
-http://openweb.eu.org/articles/css_impression/