Sommaire                                                          CSS
  + M'écrire
 

ASTUCES INFORMATIQUES

PROVERBES DU MONDE.
Africains, Arabes, Allemands, Chinois, Russes, Québequois...

HUMOUR


AUTRES CITATIONS
Aristophane, George Orwell, Jim Morrison..

 

 

 Service de validation : http://jigsaw.w3.org/css-validator/ 

http://www.aidenet.com/css/ 
http://www.commentcamarche.net/css/cssintro.php3 
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS 
http://www.zdnet.fr/builder/web_design/conception_site/0,39021086,39164074,00.htm 
http://www.mammouthland.net/cours/css/index.php 
http://www.w3schools.com/ 
http://www.cssdebutant.com/ 
http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html
http://fr.html.net/tutorials/css/lesson11.asp
http://www.yoyodesign.org/doc/w3c/css2/cover.html#minitoc 
http://www.zonecss.fr/  
 

http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/ 

Terminologie

Différence entre id et class :id et class sont les deux sélecteurs de la norme CSS : au sein de la CSS,
 les id sont définis avec le signe dièse (#nom) et
 les class avec un point (.nom).
D'une certaine, manière, id est un sélecteur redondant : tout ce qu'on peut faire avec, on peut en faire autant voire plus avec class. Mais id a son utilité. id définit un élément de manière unique dans l'ensemble des balises :

  • un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
  • une class peut désigner plusieurs objets identiques.

Par exemple, il est possible d'avoir ce code :

<div class="toto"></div>
<div class="toto"></div>

Mais il n'est pas correct d'avoir ce code :

<div id="toto"></div>
<div id="toto"></div>

Pour du code "rigoureux", ce qui est syntaxiquement le plus juste doit être privilégié. Utilisez les id en priorité lorsque vous le pouvez et les class lorsque vous ne pouvez pas...

Par exemple : commencez à utiliser id systématiquement pour les objets unique pour faciliter la lecture du code. Par exemple, donnez un id à votre body (pour ancre), à votre bloc en-tête, votre bloc gauche, droit... Par contre pour les paragraphes ou listes de menu utilisez les classes puisqu'il y a plusieurs objets de ce type.

http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id 

Clear
Float
Margin

Balises

Effets de texte

Bordure, polices, etc..

Roll over aux liens hypertextes

 

 Menus

3 colonnes
Deux blocs l'un en-dessous de l'autre
Trois blocs côte-à-côte avec un espace de séparation
Un bloc contenu dans un autre


Maquette modifiable de Laout..
.         èSa page 

Tableaux
Boutons 3D
Changer la couleur du carré au survol et changer l'image

Position
 
Une image alignée à droite d'un texte 

Un header, un footer, deux blocs à gauche l'un en dessous de l'autre, un bloc à droite

 

 
Trois manières de déclarer les styles :

1) Style du document: déclaré dans l'en-tête, c'est-à-dire au sein des balises <HEAD> et </HEAD>

<HEAD>
 <STYLE type="text/css">
background-color: #CCCCCC;
height: 60px;
padding: 1px;

<!--   background-color : définit l'arrière-plan Etc...   -->  

/* on peut mettre aussi les explications entre étoiles */

</STYLE>
</HEAD>
 

2) style dans la balise

<BODY>
<p style="font-size: 16pt ;" > il étair une fois </>
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Titre </H1>
</BODY>
 

3) feuille de style externe

<link rel ""stylesheet"  type="text/css"  href="moncss.css"/>

 
Il faut des accolades   { }
Et un point virgule à la fin de chaque sélecteur  ;

{
font-family: arial, verdana, sans-serif ;
font-size: 14pt ; color: red ;
background-color: #FFFFFF ;
}
 
H1 {
font-family: arial, sans-serif ;
font-size: 12pt ;
font-weight: bold ;
font-style: italic ;
 line-height: 14pt ; }

ou

Gestion de la taille du texte et la lisibilité :

 la taille du texte devrait être gérée avec des unités relatives: pourcentages ou EM.

Le pixel, ennemi de la lisibilité : Le problème des pixels, c'est qu'ils ont une taille différente d'un écran à l'autre, et d'une configuration à l'autre. Entre deux couples écran/configuration, on peut avoir une différence allant du simple au triple

Dans la pratique, tous les navigateurs ont une taille de texte par défaut configurée à 16px.

Une solution : exprimée la taille en valeur absolue telle que points

http://forum.alsacreations.com/topic-9-40905-1-Definir-la-taille-du-texte-em-px-pt-mm.html 


La propriété "clear" va être utilisée pour définir si un élément doit se trouver sur la même bande horizontale qu’un élément flottant. On peut donc écrire que cette propriété indique de quelle manière le texte va être placé par rapport à une boîte flottante précédente

http://www.aidenet.com/css/css38n.htm 

float/ clear

float: right, left ou both

Clear : right, left ou both

Voir exemple

.flux
{clear: both ; }

.flux1
{ float : left; margin: 10px ; }

.flux2
{ float : right ; margin: 10px ; }

 

Boites empilées ou en ligne : voir l'exemple
 
Margin, c'est la marge externe à la boite. Padding c'est la marge interne

margin: 0; s'applique à tous les côtés.

margin: 0 0 0 0; les valeurs s'appliquent respectivement aux marges du haut, de droite, du bas et de gauche. Sens des aiguilles d'une montre.

margin: 0 1px; correspond à margin: 0 1px 0 1px;

margin: 0 1px 2px; correspond à margin: 0 1px 2px 1px;

 
Boite avec une image en fond : voir l'exemple
Menu

Un menu horizontal : voir l'exemple

Un menu vertical avec une image comme bouton : voir l'exemple

Trois colonnes en CSS  :  cliquer pour voir l'exemple

Trois blocs côte-à-côte avec un espace de séparation : Voir la feuille            positionnement flottant
 
Un bloc contenu dans un autre : cliquer sur la feuille            imbrication

positionnement en flux

positionnement flottant
Tableaux :  Voir la feuille

 

  John Jane Total
January 123 234 357
February 135 246 381
March 257 368 625
Total 515 848 1363

 

Boutons 3D : Cliquer vers la feuille
 
Balises :

http://www.commentcamarche.net/contents/css/cssproperty.php3 

body{  background-color: #ffebc9;                         <!--  beige comme couleur de fond au document. -->
}
 
h1{
  text-align: center;   <!-- Centre le texte pour la balise H1 -->
  border: 1px;<!-- définit une bordure de 1 pixel -->
  border-style: solid;<!-- affecte le style solide* -->
  border-color: #800000;<!-- affecte la couleur marron à la bordure -->
  background-color: #ffcc99;<!-- affecte un beige plus foncé comme couleur de fond pour la balise H1 -->
  font-family: comic sans ms, arial, ms sans serif;<!-- détermine les polices à utiliser par ordre de préférence -->
}
 
h2{
  text-indent: 50px; <!-- décale le texte de 50 pixels vers la droite -->
    text-decoration: underline;!-- souligne le texte -->
}
 
P{
  width: 80%; <!-- détermine une largeur de 80 % -->
  text-align: justify; <!-- justifie le texte -->
  font-family: arial, comic sans ms, ms sans serif;<!-- applique le type Arial -->
 }
 
font-weight: normal;
font-size:160%;  taille de la police
 
  • font-style: italic, oblique ou normal.
  • font-variant: small-caps pour les petites capitales, ou normal.
  • font-weight: bold pour le gras, ou normal.
  • font-family: famille pour choisir la famille (la police proprement dite) ;

color : couleur de la police

 

 z-index :

La propriété de feuille de style css z-index permet de spécifier la position d'empilement d'un bloc par rapport aux autres (notion de profondeur).
La propriété de feuille de style cssz-index est généralement utilisée pour la création de calques (Layer).
Le bloc ayant la plus grande valeur est au dessus.   http://www.zonecss.fr/style_css/feuille_css_z_index.html 

 

Un header, un footer, deux blocs à gauche l'un en dessous de l'autre, un bloc à droite :   exemple
 

Changer la couleur du carré au survol et changer l'image

 

  
Position

 
Donner un effet de roll over aux liens hypertextes   : voir la feuille

 
EFFETS de texte :


 Texte en relief

  
texte ombré  
Ombre sur un texte  
Auréoles autour du texte  
Floutage de texte  
Texte avec ombrage la base c floutage, mais on met add à 1 et on oriente différemment
Ondulations texte