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

Titre du site ligneweb.net
... 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 css 2.0  - introduction  - structure  - balises : types  - balises : place 
-➽ ➽ ➽  utilisation de la balise details et summary en CSS 3 
-➽ ➽ ➽  caractères spéciaux : html 4 / ISO8859-1 



Info Cours CSS 2.0 : le fichier .css



 © LigneWeb  ... /info cours css.
© design : LigneWeb
© : alain jean deligne              ... Coins arrondis, ... ombrages, ... couleur de fond en dégradé : ...
... avec la propriété box-shadow ... avec inside (l'ombrage interne) ... donnant l'effet 3 D ... en CSS 3 ...
... avec la propriété box-shadow ... l'ombrage externe ... donnant l'effet 3 D ... en CSS 3 ...



Nous abordons le style :


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 




Cliquez ici pour le détail

Le CSS de cette page ...




... la balise  details  ne fonctionne pas avec certains navigateurs ... (c'est le résultat final qui apparait) ...



Ce n'est pas de l'enseignement, c'est du partage de connaissances.

... dans le xhtml, le style pour les éléments sera défini dans un fichier ...extérieur ...
... mais parfois on pourra mettre une précision de style dans une des balises vue en html ...
... mais cela sera toujours dans la feuille de style extérieure ... ( nous verrons cela plus tard ) ... cela est exigé pour le ... XHTML ...
... nous étudions le CSS 2.0, le nouveau CSS 3 arrive mais n'est pas complet ...
... il sera étudié dans espace création, les ombrages ici viennent de CSS 3.0 ...


Vous pouvez aller tout de suite à ...  l'espace cours ... 
... voir le ...  menu spécial pour le cours  ... dans l'en-tête ...

...  le language CSS veut dire :  ... les ... feuilles de style en cascade ... ce qui veut dire que le style premier d'une page web peut être corrigé par une autre définition de style particulière dans la page même et ainsi de suite ... la dernière prenant le dessus ... sur les autres ...
... la feuille de style externe se nomme : ... essais.css ... avec essais ... comme nom (pour exemple) ...
... le nom de la feuille de style suivi de ...  .css  ...



Cliquez ici pour le détail

Notre choix proposé ...

... c'est un site pédagogique ...
... il est construit avec ce qu'il enseigne : ...
... le XHTML/CSS 2 vers et pour le HTML 5/CSS 3 ...

Notre choix permet ceci :

... la page construite en HTML 5 / CSS 3 est celle que vous avez construite vous-même ...
... vous avez écris vous même le texte en suivant la logique simple d'écriture ...
... en utilisant les balises encadrantes définies par ce HTML 5 / CSS 3 tout simplement ...

... vous êtes maître à bord et pouvez toujours changer, transformer ou recréer votre page ...
... votre autonomie qui en découle est la garantie de votre individualité ...
... elle participe de votre liberté, de votre créativité, ...
... de votre dimension humaine ...

... un retour à l'essentiel, ... qui n'enlève rien au partage ...
... partage d'une compétence, d'une connaissance, d'une aide aussi ...
... vous pouvez commencer par le XHTML / CSS 2 qui est la base du HTML 5 / CSS 3 ...

... l'accès à ce site est gratuit, ...
... même si nous proposons aussi de réaliser avec vous un site web ...
... cette dimension existe pour tous ceux qui en ont besoin ...
... un besoin d'autonomie avec une aide ... à prix modique ...
... je peux aussi le réaliser complètement avec des explications ...


... la balise  details  ne fonctionne pas avec certains navigateurs ... (c'est le résultat final qui apparait) ...





La structure de la feuille de style :

... il n'y a pas de partie introductive ... on passe directement aux différentes énonciation pour chaque groupe ...
... chacun d'eux a un nom suivi entre accolades des différentes valeurs pour chaque élément ...

... il faut ouvrir un nouveau fichier en le nommant ... essais.css ... (par exemple) ...
... on le fait dans le même logiciel que celui utilisé pour html ...
... il n'y a donc pas d'introduction ... le nom seul suffit à être reconnu ...
... ce fichier sera appelé dans la page html au niveau de head ...

Appel de la feuille de style :
elle est mise à la suite des diverses balises ... meta ...
... dans le ... head ... de la page ... HTML ...



... utilisation concrète de la balise details ... utilisée en CSS 3 ... ci-dessous ... en XHTML transitionnel ...
... ne fonctionne pas avec certains navigateurs ... (c'est le résultat final qui apparait) ...






➽ ➽ ➽ [ cliquez ici ]
- Voici un exemple de fichier .css tiré directement de ce site.


Voici un exemple de fichier ... .css ... tiré directement de ce site :
Il y a un moment déjà ...

... et nous voyons l'application des balises details et summary ... vue en CSS 3 ...
... ne fonctionne pas avec certains navigateurs ... (c'est le résultat final qui apparait) ...
Voici ce même fichier ... .css ... réactualisé :
Ce qui est expliqué au cours  d'introduction du CSS 3 .

... et nous voyons l'application des balises details et summary ... vue en CSS 3 ...
... ne fonctionne pas avec certains navigateurs ... (c'est le résultat final qui apparait) ...








... cet exemple montre très clairement la structure de ce fichier ... il va droit au but ...
... et c'est cela que nous allons étudier maintenant ...

... nous précisons que tout le style doit être mis dans cette page css ...
... pour respecter les recommendations du ...W3C ...
... nous pouvons avoir plusieurs feuilles de style pour une même page web ...


... nous voyons tout de suite l'avantage de cette manière de procéder ...
... tout ce qui est ... le contenu ... se trouve dans la page html (.html) ...
... tout le style est dans la feuille de style (.css) ...
... il permet le changement aisé de celui-ci ...

le nom du fichier est toujours en minuscules

... on peut donc changé l'un sans changer l'autre, que ce soit le contenu ou le style ...


... pour un même texte écrit en html ...  voici une multitude de design css  différents ...
... ils se retrouvent sur le site ... csszengarden.com  ...
... le site de base ...  css zen garden  ... est réalisé avec une première feuille de style ...
... et avec la même base html il y a d'autres feuilles de style qui montrent des sites totalement différents ...
... toutes ces ...  feuilles de style  ... illustrent parfaitement les potentialités de l'XHTML ... avec le CSS 2.0 ...
... écrits dans un fichier ...  .css  ... extérieur ...
... ce qui permet de changer facilement de style ...
... un ... autre exemple  ... intéressant ...




... reprenons la structure de base en html ... la balise html ... suivie de la balise head ... suivie de la balise body ...
... la balise qui a comme nom body, englobe toute une page du site web ...
... et c'est son style que nous allons définir maintenant ...

... le premier mot est ...  body  ... (on va à la ligne) ...

... on écrit  l'accolade ... { ... d'ouverture  ... ( et on va à la ligne ) ...

... là, il y a un décalage automatique pour la suite ...
... on écrit les différentes  données suivies par ... le point-virgule ...; ... 
... une, deux, trois ... ce qu'il faut définir ...
... on va à la ligne après chacune d'elle ...
... et enfin ... avec le décalage inverse ...
.... on termine l'ensemble des données par la  fermeture de l'accolade ... } ... 
... vous pouvez le voir sur l'exemple ici plus haut ...

Nous avons trois types de balises pour définir le style :

… le premier, comme nous venons de le voir est la balise englobant la page visible : … body

… le deuxième est celui des quatre grandes zones : en-tête, menu, corps et pied de page …
… et se définissent par leur nom : … <div id="menu">

… le troisième est celui des différents blocs internes aux précédants …
… ces troisièmes se définissent par la classe … <div class="table5">

… nous les étudions dans un deuxième temps au …  cours CSS 5  … mais avant, étudions le style en général ...

Autre forme d'écriture :

... il y a une autre manière d'écrire tous les éléments de style entre les accolades ...
... on les écrit les uns à la suite des autres tous sur la même ligne ...
... l'inconvénient, c'est que c'est baucoup moins lisible pour tous ...




Place des styles :

... par balise :

... on définit le style pour chaque balise ...
... ce qui demande une unité de style dans les différentes pages ...
... c'est souvent le résultat pour les CMS habituellement ...

... par bloc :

... on définit le style dans chacun des blocs que sont :
... body, en-tête, menu, corps et pied-de-page ... en n'oubliant pas ...
... dans notre cas, par exemple, ... les menus supplémentaires ...
... dans chacun de ses blocs ... on définit chaque balise dans ses différentes situations ...
... ce qui veut dire la possibilité de la variation du style ...
... ce qui amène aussi une créativité plus grande ...
... même s'il y a des répétitions ... et donc une longueur plus importantes ...


Les commentaires :

... le commentaire pour une page css ... est ...
... /* ... pour la balise entrante ...
... et */ ... pour la balise sortante ...
... ce qui nous donne ...  /*ceci est un commentaire*/  ...




Remarque :

La balise code :

... si je veux écrire du texte en langage HTML, il y a une balise ... code ...
... cette balise permet d'écrire du langage HTML dans une page web sans que le navigateur ne le transforme ...
... cette balise ne marche que dans du langage html transitionnel ... donc pas ici ...
... car nous sommes en XHTML transitional ...
... ce qui permet de montrer le code html ... utilisé pour montrer les programmes ...
... <code> ... est la balise entrante ...
... </code> ... est la balise sortante ...
... il y a une manière d'écrire certains symboles ou lettres avec accent pour qu'ils soient transformé en clair ...
... en remplaçant les ... < ... et les ... > ... par des abréviations spéciales
... dont voici une liste ci-dessous :
... sur ce site, pour écrire du texte avec le code en vue de montrer un exemple, ...
... j'utilise une balise textarea ( d'un formulaire ) ... qui sert à communiquer ...
... ce qui me permet d'y écrire le texte et les balises sans que le navigateur ne l'interprête ...



Les caractères spéciaux : pour html 4

... en ... XHTML ... avec encodage texte en ... utf-8 ... nous pouvons ... écrire le texte en clair avec les accents ...

... en html 4.0 et antérieur, ... la manière d'écrire les mots était confronté à un problème ...
... les lettres avec accents devaient être écrit avec un code ... le code ISO-Latin-1 ...
... aussi nommé ... ISO8859-1 ...
... une lettre ... é s'écrira donc ...   & eacute;   ... sans espace entre & et e ...
... c'est la raison du nouveau code ... utf-8 ... qui permet d'écrire normalement le texte ...

Textes avec accents : ISO8859-1



...ce tableau contient les entités caractères et numériques du jeu de caractères ...
... ISO-Latin-1 (ISO8859-1) ... :

Caractère Entité numérique Entité caratère Description
< & #60; & lt; inférieur à
> & #62 & gt; supérieur à
  & #160 & nbsp; espace insécable
© & #169 & copy; copyright
& & #38 & amp; et commercial
é & #233 & eacute; e accent aigu
è & #232 & egrave; e accent grave
ê & #234 & ecirc; e accent circonflexe
ë & #235 & euml; e accent tréma
à & #224 & agrave; a accent grave
... ... ... etc.

... il ne faut pas d'espace entre le & et le reste du code ...

... le e accent grave et le a accent grave ne se différencient que par la lettre e ou a ...
... donc les lettres a, u, i, o majuscules ou minuscules peuvent être codée de la même manière ...
... c'est ... l'entité caractère ... qui est habituellement utilisée pour le html ...

  ZOOM  

... une référence avec tous les codes dans cette norme ... (anciennement la plus utilisée ) ...
...  le code ISO-Latin-1  - (ISO8859-1) ...

... mais ce code reste toujours fonctionnel en XHTML et en HTML 5 ...




... 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