Differences

This shows you the differences between two versions of the page.

--- 2013_2014:s1:docweb:css:start [2013/08/29 16:06] – [Je sais répondre à] blay
+++ 2013_2014:s1:docweb:css:start [2013/11/13 11:45] (current) – blay
@@ Line 1: / Line 1: @@
 ====== Feuilles de style : CSS ======
-Basé sur le cours de Gaétan Rey
+Basé sur le cours de Gaëtan Rey
 Les feuilles de style en cascade nommées CSS (Cascading Style Sheets) servent à décrire la présentation des documents (X)HTML et XML. Les standards définissant CSS sont publiés par le W3C. Introduit au fin 1996, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
@@ Line 21: / Line 21: @@
   - Regarder le code source de deux pages différentes et rechercher la différence '<link rel="stylesheet" media="screen" href="<fc #FF0000>210/210.css</fc>?v=8may2013">"
   - Regarder les fichiers css (lien dans la page : Download the example html file and css file)
-  - Notez ce que vous avez appris
 </box>
 {{ :2013_2014:s1:docweb:css:csszengarden.png?300 |}}
@@ Line 53: / Line 52: @@
 ==== Comment utiliser CSS ====
-Il est possible de définir des commandes CSS dans une page html mais nous vous déconseillons fortement cette solution car elle annule une grande partie des bénéfices du CSS. Voici comment indiquer que votre code CSS se trouve dans un fichier séparé
+Il est possible de définir des commandes CSS dans une page html mais nous vous déconseillons fortement cette solution car elle annule une grande partie des bénéfices du CSS. Voici comment indiquer que votre code CSS se trouve dans un fichier séparé, dans les lignes qui suivent ''style.css''
 <code html>
 <head>
@@ Line 72: / Line 71: @@
 <code css>selecteur { propriété:valeur }</code>
-Chaque sélecteur (ici body) peut avoir plusieurs propriétés avec des valeurs indépendantes,
+Chaque sélecteur (ci-dessous ''body'') peut avoir plusieurs propriétés avec des valeurs indépendantes,
 il faut pour cela séparer les propriétés par un « ; ».
 <code css>
@@ Line 86: / Line 85: @@
 <note note> **Couleurs**
-Vous pouvez choisir soit d'utiliser un nom standard de couleur (voir http://www.w3schools.com/cssref/css_colornames.asp) soit de donner les couleurs sous la forme rgb qui offre alors un plus large choix de couleurs en combinant le rouge, le vert et le bleu (http://www.w3schools.com/html/html_colors.asp)
+Vous pouvez choisir soit d'utiliser un nom standard de couleur (voir http://www.w3schools.com/cssref/css_colornames.asp) soit de donner les couleurs sous la forme ''rgb'' qui offre alors un plus large choix de couleurs en combinant le rouge, le vert et le bleu (http://www.w3schools.com/html/html_colors.asp)
 </note>
@@ Line 94: / Line 93: @@
 ==== La notion d’héritage/cascade ====
-Si on traduit les trois mots de « Cascading Style Sheets » on obtient Feuille de style en cascade. Pourquoi « en cascade » ? Car si vous définissez une police de type "Trebuchet MS" sur la balise <body>, l'ensemble des autres éléments du site prendra comme police Trebuchet MS, inutile de le redéfinir à chaque élément.
+Si on traduit les trois mots de « Cascading Style Sheets » on obtient Feuille de style en cascade. Pourquoi « en cascade » ? Car si vous définissez une police de type "Trebuchet MS" sur la balise <body>, l'ensemble des autres éléments du site (parce qu'inclus dans cette balise) prendra comme police ''Trebuchet MS'', inutile de le redéfinir pour chaque élément.
-Autre exemple, si vous définissez la balise body avec une couleur rouge (comme le montre la commande suivante), les autres éléments auront une couleur rouge par défaut :
+Autre exemple, si vous définissez la balise ''body'' avec une couleur rouge (comme le montre la commande suivante), les autres éléments du ''body'' auront une couleur rouge par défaut :
 <code css> body {
 color: #FF0000;
 }
 </code>
-Si vous souhaitez une autre police pour les balises <h1> par exemple, il suffit de la définir à nouveau.
+Si vous souhaitez une autre police pour les balises ''<h1>'' par exemple, il suffit de la définir à nouveau.
 <code css>
 h1 {font-family: Georgia, sans-serif;}
 p {font-family: Tahoma, serif;}
 </code>
-Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement dans le sélecteur1. Par exemple, ceci peut être utile si on n'a pas envie que la règle s'applique à un li qui serait contenu dans une sous-liste de type ol.
+Un sélecteur de la forme sélecteur1 > sélecteur2, au contraire, ne désigne que le cas où sélecteur2 est directement dans le sélecteur1. Par exemple, ceci peut être utile si on n'a pas envie que la règle s'applique à un ''li'' qui serait contenu dans une sous-liste de type ''ol''.
 <code css>
 ul > li { margin-left: 10em; }
@@ Line 116: / Line 115: @@
   * [[http://validator.w3.org/check|Validez votre fichier]] Votre objectif est de le rendre valide en séparant contenu et présentation.
   * Recopier le fichier sous ''gardenWithCss.html'' puis séparer le style dans un fichier css;
-  * [[http://jigsaw.w3.org/css-validator/validator|Valider votre fichier css]]  (conseil : vérifier la validité de votre fichier css; modifier votre fichier html; visualiser le html; itérer...)
+  * [[http://jigsaw.w3.org/css-validator|Valider votre fichier css]]  (conseil : vérifier la validité de votre fichier css; modifier votre fichier html; visualiser le html; itérer...)
   * Validez votre nouveau fichier html ''gardenWithCss.html'' résultant, il doit être conforme au fichier initial.
 </box>
@@ Line 122: / Line 121: @@
 <note>**La taille des caractères**
-Si vous fixer la taille de vos caractères, elle ne pourra pas évoluer en fonction de votre navigateur.
+Si vous fixez la taille de vos caractères, elle ne pourra pas évoluer en fonction de votre navigateur.
 Pour cette raison, vous pouvez utiliser des unités relatives qui vont permettre un redimensionnement des caractères à l'écran.
@@ Line 134: / Line 133: @@
 </note>
+<note tip>**Quelques Tips**
+^ Eléments d'html         ^ Eléments en css           ^
+| body link=  | a:link {color: ...} |
+| body vlink=   | a:visited {color:} |
+| body alink=   | a:active {color:} |
+| <font face="French Script MT"| {font-family:"French Script MT"; |
+| <font size="7" color="#006600| {font-size:xx-large; //par exemple// |
+| <font color= ... | color: |
+| <b> ... | font-weight:bold; |
+| <i> ... | font-weight:italic; |
+</note>
@@ Line 144: / Line 155: @@
 <h1><font face="French Script MT" size="7" color="#006600">Jardin Zen CSS</font></h1>
 <h2><font size="5" color="#669933"><b><u>La beaut&eacute; de la conception CSS</u></b></font></h2> Une demonstration de ce qu'on peut accomplir lorsqu'on utilise les CSS pour la conception web. S&eacute;lectionez n'importe quelle feuille de style list&eacute;e pour charger le r&eacute;sultat sur cette page. <br> T&eacute;l&eacute;chargez les fichiers d'exemple <a href="xxx.html" title="Clique-droit pour sauver ce document sur votre disque dur." style="color: #B7A5DF"><b>html</b></a> et <a href="xxx.css" title="Clique-droit pour sauver ce document sur votre disque dur." style="color: #B7A5DF"><b>CSS</b></a> <h3><i><font face="Georgia" color="#7d775c">Le chemin vers l &eacute;dification</font></i></h3>
-Les reliques pass&eacute;es des s&eacute;lecteurs sp&eacute;cifique aux navigateurs, des DOMs incompatibles, et du manque de support des CSS encombrent un long chemin sombre et morne. <br><br> Aujourd'hui, nous devons nous clarifier l'esprit et nous d&eacute;barassez des pratiques pass&eacute;es. La r&eacute;v&eacute;lation de la v&eacute;ritable nature du Web est maintenant possible, gr&acirc;ce aux efforts infatigables des gens du W3C, du WaSP et des cr&eacute;ateurs des principaux navigateurs. <br><br> Le Jardin Zen CSS vous invite &agrave; vous relaxer et &agrave; m&eacute;diter sur les le&ccedil;ons importantes des ma&icirc;tres. Commencez &agrave; voir clairement. Apprenez &agrave; utiliser ces techniques (bient&ocirc;t consacr&eacute;es par l'usage) de mani&egrave;re neuve et revigorante. Ne faites qu'Un avec le Web. <br></body>
+Les reliques pass&eacute;es des s&eacute;lecteurs sp&eacute;cifique aux navigateurs, des DOMs incompatibles, et du manque de support des
+ CSS encombrent un long chemin sombre et morne.
+<br><br> Aujourd'hui, nous devons nous clarifier l'esprit et nous d&eacute;barassez des pratiques pass&eacute;es. La r&eacute;v&eacute;lation de la v&eacute;ritable nature du Web est maintenant possible, gr&acirc;ce aux efforts infatigables des gens du W3C, du WaSP et des cr&eacute;ateurs des principaux navigateurs.
+<br><br> Le Jardin Zen CSS vous invite &agrave; vous relaxer et &agrave; m&eacute;diter sur les le&ccedil;ons importantes des ma&icirc;tres. Commencez &agrave; voir clairement. Apprenez &agrave; utiliser ces techniques (bient&ocirc;t consacr&eacute;es par l'usage) de mani&egrave;re neuve et revigorante. Ne faites qu'Un avec le Web. <br></body>
 </code>
 ==== Combinaison de sélecteurs ====
-Vous pouvez aussi combinez les éléments HTML qui regroupent les mêmes caractéristiques.
+Vous pouvez aussi combiner les éléments HTML qui regroupent les mêmes caractéristiques.
 Voici un exemple permettant de modifier en même temps l’ensemble des balises <hx>
 <code css>
@@ Line 173: / Line 187: @@
 <note>**Les polices de caractères**
+**AVANT**
 Le texte s'affiche avec les polices de caractères présentes sur l'ordinateur des visiteurs. Cela implique que vous ne pouvez pas utiliser n'importe quelles polices.
@@ Line 178: / Line 193: @@
 [[http://www.w3schools.com/cssref/css_websafe_fonts.asp|En savoir plus sur les fontes]]
-</note>
+**Mais depuis CSS3**
+Before CSS3, web designers had to use fonts that were already installed on the user's computer.
+With CSS3, web designers can use whatever font he/she likes.
+When you have found/bought the font you wish to use, include the font file on your web server, and it will be automatically downloaded to the user when needed.
+Your "own" fonts are defined in the CSS3 @font-face rule.
+http://www.w3schools.com/css3/css3_fonts.asp
+(fichier de fontes : http://www.w3schools.com/css3/sansation_light.woff)
+</note>
 ==== La notion de classe, de pseudo classe et d’id ====
@@ Line 246: / Line 268: @@
   * Modifier le fichier html en ajoutant uniquement des indications pour le fichier de style et le fichier de style pour que
      * toutes les citations soient en gras
-     * les citations en français sont en "blue" et suivie de //par// ((vous pourrez utiliser [[http://www.w3schools.com/cssref/sel_after.asp|le sélecteur "after"]]
+     * les citations en français sont en "blue" et suivie de //par// Vous pourrez utiliser [[http://www.w3schools.com/cssref/sel_after.asp|le sélecteur "after"]].
      * les citations en anglais sont en "aqua" et suivie de //by//
          * [[http://www.w3schools.com/html/html_colornames.asp|en savoir plus sur les noms de couleurs]]
          * [[http://www.w3schools.com/cssref/pr_class_display.asp|en savoir plus sur les formes d'affichages]]
+         * Attention, nous perdons le guillemet fermant... une idée?
 {{ :2013_2014:s1:docweb:css:citations1.png?800& |Nouvelle visualisation qui étonnamment nous satisfait!!}}