Voir la source de CSS : Cours

== Définition  ==

CSS (Cascading Style Sheets&nbsp;: feuilles de style en cascade) est un langage informatique se présentant sous la forme de déclarations servant à'''décrire la présentation des documents HTML et XML.''' ( [http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade source] ).<br> 

<br>

== Insertion de feuilles de style dans un document (X)HTML:<br>  ==

On peut écrire du CSS directement dans le document.<br> 
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt; titre du document &lt;/title&gt;

&lt;style type="text/css"&gt;
  body { color: white; background: black; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

  &lt;p&gt; un document vide &lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;

</pre> 
<br> 

Il est préférable de stocker les styles dans un ou plusieurs fichiers externes, on ajoute alors une balise "link" suivante dans la section "head" du document HTML qui pointe sur le fichier ou les fichiers CSS:<br> '''&lt;link type="text/css" rel="stylesheet" href="<span style="color: green;">le_nom_de_mon_fichier.css</span>"&gt;''' 
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt; titre du document &lt;/title&gt;
&lt;link type="text/css" rel="stylesheet" href="le_nom_de_mon_fichier.css"&gt;
&lt;/head&gt;
&lt;body&gt;

   &lt;p&gt; un document vide &lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;

</pre> 
<br>

== Sélecteurs, règles, propriétés<br>  ==

Le langage CSS&nbsp;utilise une syntaxe pour '''cibler les balises HTML''' ( = éléments) auxquelles on souhaite appliquer un style. 

Dans l'exemple suivant, on définit une '''règle''' CSS pour l'élément 'h1' du document cible. Cette '''règle''' consiste en deux parties principales : un '''sélecteur''' ('h1') et deux '''déclarations''' ('color: blue' et 'font-size: 12px'). Celles-ci se composent à son tour de deux parties : une '''propriété''' ('color') et une '''valeur''' ('blue'). <br>

<br> 

[[Image:Selector.gif]]<br> 

<br> 

Une centaine de propriétés est définie dans la spécifications CSS2.<br>

<br>

=== D'autres exemple de selecteurs:  ===

'''On selectionne tous les paragraphes'''<br> 

''HTML:''<br> 
<pre>&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ante vel nibh vestibulum 

&lt;/p&gt;

&lt;p&gt;
Aliquam ut lacus eget ante faucibus mollis nec eget orci. .

&lt;/p&gt;
</pre> 
''CSS'':<br> 
<pre>p {

  color: #aaa;                        /*  couleur de texte en noir */

  background-color: #fff;        /*  couleuir de fond en blanc */

}
</pre> 
<br> 

'''On selectionne tous les liens:'''<br> 

''HTML: ''<br> 

 &lt;ul&gt;
 &lt;li&gt;
  '''  &lt;a href="http://www.netvibes.com/"&gt;netvibes&lt;/a&gt;'''
 &lt;/li&gt;
 &lt;li&gt;
 '''    &lt;a href="http://www.google.fr/ig"&gt;igoogle&lt;/a&gt;'''
 &lt;/li&gt;
 &lt;/ul&gt;

''CSS:'' 
<pre>a{

font-weight: bold; /* texte en gras */

text-decoration: underline; /* le lien est souligné */

}
</pre> 
<br> '''On selectionne tous les liens qui seront survolés pas la souris'''<br> 
<pre>a:hover {

  font-weight: bold;     /*  texte en gras  */

  text-decoration: underline;   /*  le lien est souligné */

}
</pre> 
<br> 

'''On selectionne tous les titres de tous niveaux'''<br> 

''HTML:'' 
<pre>&lt;h1&gt;titre du site&lt;/h1&gt;

&lt;h2&gt;sous titre du site&lt;/h2&gt;

&lt;h3&gt;accueil &lt;/h3&gt;

&lt;p&gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ante vel nibh vestibulum.

&lt;h3&gt;contact&lt;/h3&gt;
&lt;p&gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra ante vel nibh vestibulum tristique.</pre> 
<br> ''CSS:''<br> 

notez qu'il est possible de sélectionner plusieurs élements en mêm temps<br> 
<pre>h1, h2, h3, h4, h5, H6 {

  color: #ccc;                         /* couleur de texte en gris */

  text-transform: capitalize;          /* 1 ere lette de chaque mot en Majuscule */

}
</pre> 
<br> 

'''On selectionne seulement les liens qui sont dans des listes non ordonnées'''<br> 
<pre>&lt;p&gt;
  &lt;a href="http://www.yahoo.com/"&gt;yahoo&lt;/a&gt;
&lt;/p&gt;

&lt;ul&gt;

  &lt;li&gt;
    &lt;a href="http://www.netvibes.com/"&gt;netvibes&lt;/a&gt;
  &lt;/li&gt;

  &lt;li&gt;
     &lt;a href="http://www.google.fr/ig"&gt;igoogle&lt;/a&gt;
  &lt;/li&gt;

&lt;/ul&gt;
</pre> 
''CSS:''<br> 
<pre>ul li a {

  font-weight: bold;

  text-decoration: none;
}

/* cible "tous les 'a' se trouvant dans un 'li' se trouvant lui même dans un 'ul' */

</pre> 
équivalent à ceci:<br> 
<pre>ul a {

  font-weight: bold;
  text-decoration: none;

}
</pre> 
<br> 

'''On seletionne un seul élement en fonction de son 'id'''' 

''HTML:'' 
<pre>&lt;p id="mon_paragraphe"&gt;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget tellus mi, eleifend ullamcorper nibh. Nunc tempus luctus libero, semper sollicitudin turpis pharetra id. 

&lt;/p&gt;

&lt;p&gt;
 Vivamus fermentum dignissim bibendum. Mauris non placerat lacus. Fusce suscipit congue neque, a venenatis dui ultricies rutrum. 
&lt;/p&gt;


</pre> 
''CSS:''<br> 
<pre>#mon_paragraphe {

  font-style: italic;

}
</pre> 
<br> 

'''On selectionne plusieurs élements en fonction de leur classe'''<br> 

''HTML:''<br> 
<pre>&lt;div class="colonne"&gt;

  &lt;p id="p_header"&gt;lorem ipsum&lt;/p&gt;

&lt;/div&gt;

&lt;div class="colonne"&gt;

  &lt;p&gt;Donec dolor tortor, consequat a dictum dignissim, rutrum in felis&lt;/p&gt;

&lt;/div&gt;

&lt;div&gt;
  &lt;p&gt;Sed non augue tortor, sit amet lobortis dui.&lt;/p&gt;

&lt;/div&gt;




</pre> 
''CSS:''<br> 
<pre>.colonne {

  border: 1px solid  #ccc;

  float: left;

}

#p_header {

  font-style: italic;

}
</pre>

== <br>Notion de flux  ==

Le flux d'un document pourrait se définir comme étant le comportement naturel des éléments d'une page web, ces éléments se succèdant dans l'ordre où ils sont déclarés dans le code HTML. La structure formée par l'ensemble des eélements ( noeuds ) constituant une page web s'appelle l'arbre logique du document ( DOM ).<br> 

Les éléments de type "block" s'affichent logiquement par défaut les uns en-dessous des autres tandis que les éléments délimitant pour la plupart des portions de textes ( de type "inline" ) s'affichent côte à côte. 

<br> 

voir&nbsp;: http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html 

<br> '''Gérer les conteneurs flottants''' 

Il est possible de faire flotter des elements de types 'block', c'est une technique utilisée tous les jours à différentes fins. C'est par exemple un moyen très simple de créer des colonnes. Le fait de faire flotter des boîtes peut cependant poser des problèmes. En effet, tout conteneur flottant est en fin extrait du flux, ce qui a pour conséquence de faire remonter les elements qui suivent.&nbsp;<br>



''HTML:''
<pre&lt;div id="conteneur-flottants"&gt;

  &lt;div id="col-a" class="flottant"&gt;

    &lt;p&gt;lorem ipsum&lt;/p&gt;

  &lt;/div&gt;


  &lt;div id="col-b" class="flottant"&gt;

    &lt;p&gt;lorem ipsum&lt;/p&gt;

  &lt;/div&gt;

&lt;/div&gt;</pre>


''CSS:''
<pre.flottant {

 width: 300px;  /* un element flottant doit toujours avoir une largeur définie */

 float: left;

}</pre>


Pour régler ce problème, on utilise principalement deux méthodes

1. ajout d'un element HTML après le dernier flottant auquel on spécifie une propriété 'clear'

''HTML:''
<pre>&lt;div id="conteneur-flottants"&gt;

&lt;div id="col-a" class="flottant"&gt;

&lt;p&gt;lorem ipsum&lt;/p&gt;

&lt;/div&gt;

&lt;div id="col-b" class="flottant"&gt;

&lt;p&gt;lorem ipsum&lt;/p&gt;

&lt;/div&gt;

&lt;hr  class="clear-flow" /&gt;

&lt;/div&gt;
</pre>
''CSS:
<pre>.flottant {

width: 300px; /* un element flottant doit toujours avoir une largeur définie */

float: left;

}


.clear-flow {

  clear: left;

}</pre>


2. ajout d'une classe directement sur l'element qui contient les flottants

''HTML:''

== <br>Notion de modèle de boîte CSS (box-model):  ==

Le Box Model est la manière dont les navigateurs doivent afficher les boîtes CSS ( c'est à dire comment ils doivent calculer les dimensions de ces boîtes afin d'effectuer correctement leur rendu ). Le problème vient du navigateur IE6 qui ne gère pas correctement ces boîtes.<br> 

[http://stuffthathappens.com/blog/wp-content/uploads/2007/09/css-box-model.png <br>] 

[[Image:Css-box-model.png]]<br> 

<br> 

[http://www.elanceur.org/jason/BidouillageBoites/BidouillageBoite.html Une explication claire détaillée ]<br> 

<br> 

== Les couleurs et les arrière-plan<br>  ==

Couleur police&nbsp;: <br> 
<pre>H1 { color: red }

</pre> 
Couleur et image d'arrière plan&nbsp;:<br> 
<pre> body {background:#ffffff url('mon_image.png') no-repeat right top;}
</pre> 
<br> 

== Le texte<br>  ==

Couleur&nbsp;:<br> 
<pre>body {color:blue;}
h1 {color:#cccccc;}
</pre> 
L'alignement&nbsp;: <br> 
<pre>h1 {text-align:center;}
p {text-align:right;}
p.main {text-align:justify;}
</pre> 
La décoration:<br> 
<pre>a {text-decoration:none;} /*  commentaire CSS&nbsp;: les liens sont toujours soulignés par défaut */
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</pre> 
<br> 

== Les polices<br>  ==

Déclarer une police:<br> 
<pre>p{font-family:"Verdana", serif;}

</pre> 
Le style<br> 
<pre>p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
p.bold {font-weight:bold;}

</pre> 
La taille 
<pre>h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}</pre> 
<br> 

<br> 

== Les liens<br>  ==
<pre>a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</pre> 
/* Ces règles doivent ê écrites dans cet ordre précis */<br> 

<br> 

== Les propriétés raccourcies  ==

background&nbsp;: <br> 
<pre>div {
background-color: transparent;
background-image: none;
background-repeat: repeat;
background-position: top left;
background-attachment: scroll;
}

/* est équivalent à */

div {
background:red url(image.png) repeat top left scroll;
}

</pre> 
<br> 

margin&nbsp;:&nbsp; <br> 
<pre>div {
margin-top: number+unit;
margin-right: number+unit;
margin-bottom: number+unit;
margin-left: number+unit;
}
</pre> 
/* est équivalent à */<br> 
<pre>div {
margin: auto auto auto auto;
}
</pre> 
D'autres raccourcis existent&nbsp;: http://www.pompage.net/pompe/raccourcisCSS/<br> 

== Les bordures: <br>  ==

bordure simple&nbsp;: <br> 
<pre>border:5px solid red;
</pre> 
équivalent à ceci&nbsp;:<br> 
<pre>border-width: 5px;

border-style: solid;

border-color: red;
</pre> 
<br> <br> 

<br> 

== Les dimensions<br>  ==
<pre>div.message { height: 30px; width: 200px;  }
</pre> 
<br> 

== Le positionnement:  ==

*positionnement normal&nbsp;: une marge dont la taille varie selon les navigateur est ajoutée. 
*positionnment relatif: l'element est positionner en fonction par rapport au coin haut gauchede l'element parent. 
*positionnement absolu: l'element est positionné par rapport au coin haut gauche de la fenêtre.<br>

<br> 

[[Image:Posicionamiento-css.jpg]] 

<br> 

<br> 

== <br> La transparence  ==

Ajouter ceci :<br>
<pre>.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
</pre>

== Le positionnement des elements flottants<br>  ==

Un élément flottant est un élément positionné à la suite des autres, '''qui est extrait du flux et déplacé''' le plus à gauche possible (float: left) ou le plus à droite possible (float: right) jusqu’à ce qu’il touche les bords de son conteneur ou d’un autre élément flottant positionné avant lui ( [http://onfaitduweb.com/programmation/la-theorie-des-floats/ source] )<br> 

<br> 

Les règles en détails&nbsp;: http://www.yoyodesign.org/doc/w3c/css2/visuren.html#float-position<br> 

== Remarques sur le nommage des règles CSS:  ==

[[Image:Sem vs struct.jpg]] 

<br> 

[[Image:Sem vs struct2.jpg]]<br> 

<br> 

[http://onfaitduweb.com/category/css/ source] 

<br>

== Quelques règles bien utiles <br>  ==

'''reset css'''<br> 
<pre>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  margin:0;
  padding:0;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

fieldset,img {
  border:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
  font-style:normal;
  font-weight:normal;
}

ol,ul {
  list-style:none;
}

caption,th {
  text-align:left;
}

h1,h2,h3,h4,h5,h6 {
  font-size:100%;
  font-weight:normal;
}

q:before,q:after {
  content:'';
}

abbr,acronym { 
  border:0;
}

</pre> 
<br> '''clearfix'''<br> 
<pre>
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

</pre> <br>

'''Coins ronds''' 
<pre>.rounded-corners {
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20'''
'''

/* 
   ne fonctionne oas sous IE ni sous 0pera , piour ces navigateurs, on crée des images que l'on place au 4 coins 
   du conteneur:
  
     http://www.roundedcornr
     http://wigflip.com/cornershop
     http://www.generateit.net/rounded-corner/
 

  on peut utiliser aussi du javascript pour générer des coins ronds à la volée:

   http://www.dillerdesign.com/experiment/DD_roundies/    
      
*/

</pre><br>

'''Transparence'''<br>
<pre>.transparent {
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
</pre>




<br>

<br>

<br>
<br>

== Outils<br>  ==

http://www.blog-expert.fr/outils/aide-memoire-css-351.html: cheatsheet (aide mémoire) en français, chaque règle est commentée.<br> 

http://www.pxleyes.com/blog/2010/03/most-practical-css-cheat-sheet-yet/: joli cheatsheet à télécharger (en).<br> 

http://jigsaw.w3.org/css-validator/&nbsp;: un validateur de CSS.<br> 

http://html-ipsum.com/&nbsp;: code html prêt à copier-coller.<br> 

http://www.lipsum.com/feed/html&nbsp;: faux texte prêt à copier-coller.<br> 

http://fr.wikipedia.org/wiki/Couleurs_du_Web&nbsp;: liste des code couleurs html<br> 

[http://www.mikii.fr/blog/2010/09/14/les-10-erreurs-css-les-plus-repandues/ 10 conseils de base à suivre pour écrire du CSS ] 

<br>


[[Catégorie:Vrac]]