Differences

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

--- 2013_2014:s1:docweb:css:start [2013/09/10 07:31] – [La notion d’héritage/cascade] 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 115: / 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 136: / Line 136: @@
 ^ Eléments d'html         ^ Eléments en css           ^
-| bgcolor   | backgroung-color    |
+| body link=  | a:link {color: ...} |
-| body link=  | body:link {color: ...}|
+| body vlink=   | a:visited {color:} |
-| body vlink=   |   body:visited {color:}|
+| body alink=   | a:active {color:} |
-| body alink=   |   body:active {color:}|
 | <font face="French Script MT"| {font-family:"French Script MT"; |
-| <font size="7" color="#006600| {font-size:xx-large; //par exemple//|
+| <font size="7" color="#006600| {font-size:xx-large; //par exemple// |
 | <font color= ... | color: |
-| <b> ... | font-weight:bold;  |
+| <b> ... | font-weight:bold; |
-| <i> ... | font-weight:italic;  |
+| <i> ... | font-weight:italic; |
 </note>
@@ Line 163: / Line 162: @@
 ==== 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 188: / 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 193: / 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 261: / 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!!}}