Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 Menu CSS 3  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - cours 5  - Cours 6  - Cours 7 
 Menu cours 7 CSS 3  - police : font-family  - font-size  - font-weight  - width  - height  / structure 



Cours 7 CSS 3avec LigneWeb
les polices et mesures.



 © LigneWeb  ... /les polices et mesures.
© design : LigneWeb
   © : alain jean deligne - LigneWeb



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...



Le logo de LigneWeb



Police


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Police : font-family ...

... on parle maintenant de la police de caractère que l'on nomme ... font ...
... pour définir la police pour toute la page ... on parle de font-family ...
... et on choisit trois, quatre polices qui marchent sur le web ... comme Geneva, Arial, Verdana, ...
... "Times New Roman", mise entre guillemets ... ainsi que ... Times, serif ...

... je choisis également ...  Papyrus et "Comic Sans MS" ... mais que tout le monde n'a pas  ...

... l'internaute aura soit la première ou la seconde police, s'il na pas la première et ainsi de suite ...

... cela nous donne ... :
 body { font-family: Arial, Geneva, "Comic Sans MS", Papyrus, Times, serif; }  

... mais actuellement, nous avons choisis l'ensemble des polices suivantes :

 body { font-family: Arial, Geneva, "Comic Sans MS", Papyrus, "Times New Roman", Times, serif; }  

... parce que Windows 7 utilise une autre police Papyrus, plus irrégulière qui gêne la lecture ...

Police : font-size ...

... cette police a une taille que l'on nomme ... font-size ... définie aussi en pixel ... px ...
... cela nous donne ...  body { font-size: 16px; }   ...

Police : font-weight ...

... cette police a une épaisseur que l'on nomme ... font-weight ... définie en nombres entiers compris entre 100 et 900 (toutes les centaines uniquement) ... une valeur centrale est 500 ... au dela, ... la police grossis pour devenir gras ...
... cela nous donne ...  body { font-weight: 500; }   ...




Les mesures d'un bloc.

Largeur : width ...


... body a une certaine largeur ... que l'on nomme ... width ... mesurée en pixel ... px ...
... pour mon site, je le fais ... auto ... cela nous donne ...  body { width: auto; } ...

... mais on pourrait avoir ...  body { width: 800px; } ...

... en automatique la page va s'adapter à la largeur de la page du naviguateur ...
... avec une mesure définie, la page gardera sa largeur ... de 800px ...

... le ... width du body de ce site ... n'est plus ... auto ...
... car pour un écran très large, ... l'étalement était trop grand ...

... nous avons opté pour une autre solution ... avec deux valeurs ...
... une maximale ... avec ... max-width: 1000px; ...
... une minimale ... avec ... min-width: 780px; ...

... le site évolue, ... et donc ces mesures ne sont plus d'actualité ...
... la largeur au moment ou j'écris ceci est ... width: 1024px; ...
... et pour  garder le site au centre de la page du navigateur  ...
... je donne ...margin: auto; ...





Hauteur : height ...


... body a une certaine hauteur ... que l'on nomme ... height ... mesurée en pixel ... px ...
... pour mon site, je le fais ... auto ... cela nous donne ...  body { height: auto; } ...

... mais on pourrait avoir ...  body { height: 600px; } ... par exemple

... il faut remarquer deux choses :
... premièrement, que la largeur imposée demande des largeurs définies pour le menu et le corps lorsqu'ils sont l'un à côté de l'autre ...
... et deuxièmement, qu'une hauteur définie impose de ne pas dépasser cette mesure dans l'addition des blocs et paragraphes placés dans le corps de la page html visible ...

... il n'est pas nécessaire de définir une hauteur ... car celle-ci s'établira automatiquement en fonction du contenu ...

... la hauteur du corps doit toujours être supérieure à la hauteur du menu vertical, ...
... qu'il soit à gauche ou à droite ...




Structure :

... maintenant mettons tout cela ensemble et cela va donner :
... le nom du fichier sera par exemple : ... style.css ...
... ou, avec la solution qui existait au début pour ce site :
... ou, avec la solution qui existe actuellement pour ce site :


... et, pour prendre l'exemple complet d'un bloc fort utilisé :
... cela montre un changement de police, une couleur de fond, ... etc.
En le réactualisant pour les derniers navigateurs essentiels :

... en le réactualisant :
... cela montre aussi les arrondis spéciaux ...
... et l'ombrage créé par le passage de la souris ... etc.
En le réactualisant pour les derniers navigateurs essentiels :




Remarque : ...


... la largeur et la hauteur peuvent aussi être utilisés pour donner les mesures ...
... d'une image, d'un cadre, d'un tableau, ... etc...
... mais également de tout bloc ... div ...
...  il y a un espace entre tout attribut et sa valeur  ...
... et sera toujours suivi du point-virgule ...

... un attribut et sa valeur :

... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 Menu CSS 3  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours CSS 2  - Création site  - Cours HTML 5  - Cours   CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies