This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
2013_2014:s1:docweb:css:start [2013/09/10 19:56] blay [Combinaison de sélecteurs] |
2013_2014:s1:docweb:css:start [2013/09/11 11:00] blay [La notion de classe, de pseudo classe et d’id] |
||
---|---|---|---|
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. | * [[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; | * 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. | * Validez votre nouveau fichier html ''gardenWithCss.html'' résultant, il doit être conforme au fichier initial. | ||
</box> | </box> | ||
Line 137: | Line 137: | ||
^ Eléments d'html ^ Eléments en css ^ | ^ Eléments d'html ^ Eléments en css ^ | ||
| bgcolor | backgroung-color | | | bgcolor | backgroung-color | | ||
- | | body link= | body:link {color: ...} | | + | | body link= | a:link {color: ...} | |
- | | body vlink= | body:visited {color:} | | + | | body vlink= | a:visited {color:} | |
- | | body alink= | body:active {color:} | | + | | body alink= | a:active {color:} | |
| <font face="French Script MT"| {font-family:"French Script MT"; | | | <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// | | ||
Line 202: | Line 202: | ||
http://www.w3schools.com/css3/css3_fonts.asp | http://www.w3schools.com/css3/css3_fonts.asp | ||
+ | (fichier de fontes : http://www.w3schools.com/css3/sansation_light.woff) | ||
</note> | </note> | ||
- | |||
==== La notion de classe, de pseudo classe et d’id ==== | ==== La notion de classe, de pseudo classe et d’id ==== | ||
Line 273: | Line 273: | ||
* [[http://www.w3schools.com/html/html_colornames.asp|en savoir plus sur les noms de couleurs]] | * [[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]] | * [[http://www.w3schools.com/cssref/pr_class_display.asp|en savoir plus sur les formes d'affichages]] | ||
+ | * Attention, nous perdons la quote fermante... une idée? | ||
{{ :2013_2014:s1:docweb:css:citations1.png?800& |Nouvelle visualisation qui étonnamment nous satisfait!!}} | {{ :2013_2014:s1:docweb:css:citations1.png?800& |Nouvelle visualisation qui étonnamment nous satisfait!!}} |