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 2  - info css  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8 
 Menu cours 1 CSS 2  - background-color  - color  - police : font-family  - font-size  - font-weight 
- width  - height  / structure        ➽ ➽ ➽ - couleurs garanties 



Cours 1 CSS 2.0 : le style pour xhtml



 © LigneWeb  ... /color-font.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Le style en CSS 2.0


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 






... avant de réaliser le fichier extérieur css, nous allons définir les principeaux éléments de style ...
... et les éléments sont les couleurs du texte et de fond, ... ainsi que les polices ...
... en les plaçant directement dans l'écriture d'une feuille de style .css ...

Background-color : ...

... je vais m'occuper du premier bloc dans ma page html ... qui est ... body ...
... je vais lui donner une couleur de fond ... que je nomme ... background-color ...
... comme body représente toute la page html, ce bloc est essentiel ... et le style défini ici ...
... sera valable pour toute la page ... sauf si d'autres blocs intérieurs sont différents et recoivent eux-même une autre couleur de fond ... (on comprendra plus tard) ...

... j'aurai donc ...  body { background-color: #3399bb; }  ... la couleur de fond de la page ... couleur s'exprimant ...
... tel que définit au cours 5 vu précédemment ...
... body ... suivi ... d'accolades ... entre lesquelles se trouve ... l'objet ... (background-color) ...
... suivi de ... deux points ... et sa ... valeur ... (#3399bb) ... suivi d'un point-virgule ...(indispensable) ...
... il y a une différence entre ce qui est dit au cours 5 html et ici ...
... au cours 5, c'est l'ancienne manière de l'écrire ... à l'intérieur de la page html ...
... elle n'est d'ailleur pas la seule possible ...
... alors qu'ici, ... c'est celle qui se met dans la feuille de style ...  .css  ... exigé par le xhtml ...

... ceci complète le cours précédent ...
... nous pouvons aligner les différentes données sur une seule ligne ....
... ou les mettrent les unes à la suite des autres comme dans l'exemple précédent ...
... c'est beaucoup plus clair en les mettant les unes au dessous des autres ... ( pour le travail ) ...




Couleur : color ... (rappel)


... pour la couleur du texte ... on va utiliser le terme simple ... color ...
... suivi des deux points et du non de la couleur ...
...ce nom peut être en anglais ou en code comme vu au cours 5 ...
... on aura donc ...  body { color: #000033; }  ... qui est la couleur du texte écrit ici ...

... je peux mettre ensemble ces deux données soit l'une derrière l'autre, soit l'une en dessous de l'autre ...
... c'est cette dernière façon que l'on privilégiera pour la relecture ...

Structure : ...

Voici ce que cela donne dans un fichier .css ... externe au fichier .html :



Le code des couleurs :

... la première manière de nommer les couleurs est d'utiliser leur nom en anglais ...
... les noms de couleurs les plus communes sont :

Aqua Blue Fuschia Grey Green Lime
Maroon Navy Olive Purple Red Silver
Teal White Yellow AliceBlue Lavender Black


... cela donne ...
Aqua Blue Fuschia Grey Green Lime
Maroon Navy Olive Purple Red Silver
Teal White Yellow AliceBlue Lavender Black

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... ces différentes couleurs sont utilisées pour la couleur de fond, ... la couleur du texte, ... la couleur d'une ligne, d'un encadrement, ... etc ...
... la couleur de la zone visible d'une page web se situe dans la balise body ...
... nous diront au navigateur que cette page doit avoir une couleur de fond blue ... et cela donnera dans le language html 4 ...
...  <body background-color="blue"> .............................</body> ...
... pour la couleur d'un texte, ... sa couleur sera précisée par ... color="white" ...
... mais dans le language xhtml ... cela se définit dans un fichier extérieur ...
... c'est dans ce cours sur ...  les feuilles de style (CSS 2.0)  ... que cela est développé ...

... AliceBlue et Lavender ... ne font pas parties des couleurs de base pour le web ...

Méthode hexadécimal :

... nous pouvons utiliser le codage des couleurs, ce qui permet d'avoir plus de 16 couleurs ...

... pour avoir une couleur sur un écran, il y a trois couleurs de base ...
... le rouge, le vert et le bleu (R-V-B) ...
... c'est leur mélange qui donnera le ton ...
... nous prendrons un poucentage de chacune d'elle dans l'ordre R-V-B ...
... deux valeurs pour chacune des couleurs avec les termes 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

... ce qui donne ...
Blanc : #ffffff Magenta : #ff00ff
R - : Rouge pur : #ff0000 Cyan : #00ffff
V - :     Vert pur : #00ff00 Jaune pur : #ffff00
B - :   Bleu pur : . #0000ff Noir : #000000

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

...le code de couleur est précédé de   # ... ex. : color="#00ffff"  pour le cyan ...
... lorsqu'on le nomme dans un fichier html ou dans un fichier css ... (à voir plus tard ) ...

La technique du mélange :

... la base de la réflexion ...
Blanc : #ffffff Rouge : ff - Vert : ff - Bleu : ff
Rouge : #ff0000 Rouge : ff - Vert : 00 - Bleu : 00
Vert : #00ff00 Rouge : 00 - Vert : ff - Bleu : 00
Bleu : #0000ff Rouge : 00 - Vert : 00 - Bleu : ff
Noir : #000000 Rouge : 00 - Vert : 00 - Bleu : 00

... avec comme couleur de fond ... un dégradé radial avec center top ... circle ... en CSS 3 ...

... les deux premiers signes sont pour le rouge ...
... les deux signes suivants sont pour le vert ...
... les deux derniers signes sont pour le bleu ...

... ... deux valeurs pour chacune des couleurs avec les signes : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f ...
... 00 pour aucune couleur ... et ... ff comme valeur maximum pour la couleur ...

La méthode RGB ... ( Red-Green-Blue ) :

... ici, on donne une proportion des trois couleurs par un nombre ...
... ce nombre est compris entre o et 255 ...
... cela s'écrit ... rgb(70,120,235) ...


... la couleur de fond ... rgb(70,120,235) ...

... méthode moins utilisée dans le fichier ...  .css  ...
... une page dans Wikipédia ...  sRGB  ...




Les couleurs garanties pour le web.

... contrairement à ce qu'on devrait avoir, il n'y a pas corrélation entre le pourcentage d'une couleur ...
... et le résultat effectif de cette couleur sur notre écran ...
... on ne peut obtenir la couleur identique à celle d'une impression offset ...
... "l'absence de correction gamma implique que les six intensités souhaitées ...
... 0 %, 20 %, 40 %, 60 %, 80 %, et 100 % ...
... sont affichés à 0 %, 2 %, 10 %, 28 %, 57 %, et 100 % dans un standard 2,5 gamma CRT ou LCD, ...
... et ceci faisant la plupart du temps ... des couleurs très sombres ...

... les intensités dans le bas de la gamme, particulièrement entre 0 et 3, ...
... sont quasiment indiscernables les unes des autres
" ...

... la source d'information est la ...  page Wikipédia pour les couleurs du web  ...
... comme base de réflexion ... la théorie des couleurs, comme celle des sons est bien plus complexe ...
... tout ceci n'est vrai qu'en théorie ... cela se complique encore par nos réglages ...
... car fonction des ordinateurs, des écrans utilisés, de leurs réglages ...
... de la valeur gamma utilisée ... et de l'interaction des couleurs entre elles ...

... voir aussi les ...  explications  ... plus complètes ...




Police

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 complétant :
... 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 :
Ce qui est expliqué au cours  d'introduction du CSS 3 .




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 2  - info css  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8 
  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