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 09:35] blay [La notion de classe, de pseudo classe et d’id] |
2013_2014:s1:docweb:css:start [2013/09/11 11:01] 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 163: | Line 163: | ||
==== Combinaison de sélecteurs ==== | ==== 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> | Voici un exemple permettant de modifier en même temps l’ensemble des balises <hx> | ||
<code css> | <code css> | ||
Line 188: | Line 188: | ||
<note>**Les polices de caractères** | <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. | 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 194: | ||
[[http://www.w3schools.com/cssref/css_websafe_fonts.asp|En savoir plus sur les fontes]] | [[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 ==== | ==== La notion de classe, de pseudo classe et d’id ==== | ||
Line 265: | 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 le guillemet fermant... 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!!}} |