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 5 CSS 2  - id et class  / span  / position  - transparent/opacity 



Cours 5 CSS 2.0 : class et span



 © LigneWeb  ... class, span et positionnement.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Style des éléments
dans les blocs en XHTML


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 




Le style des éléments dans div : ≠ id et class.

... il est important de différencier le style de chaque bloc en marquant une différence ...
... et nous allons voir comment :

… la logique de présentation est la suivante :

… d'abord, la balise … <body> … suivi de tous les blocs qui le concernent …
… ensuite, la balise … <div id="entete"> … suivi de tous les blocs qui le concernent…
… ensuite, la balise … <div id="menu"> … suivi de tous les blocs qui le concernent …
… ensuite, la balise … <div id="corps"> … suivi de tous les blocs qui le concernent …
… ensuite, la balise … <div id="pieds"> … suivi de tous les blocs qui le concernent …

… montrons maintenant ce que cela donne dans la feuille de style … externe … (en CSS 2.0) ...

… pour … <body> … l'écriture est …   body  
… pour … <div id="entete"> … l'écriture est …   #entete  
… pour … <div id="menu"> … l'écriture est …   #menu  
… pour … <div id="corps"> … l'écriture est …   #corps  
… pour … <div id="pieds"> … l'écriture est …   #pieds  
… avec pour chacun d'eux … l'ouverture et la fermeture des accolades entre lesquelles se trouve les attributs …
… comme décrits dans le …  cours CSS 2.0  ...

… pour tous les autres blocs … nous avons une écriture différente comme suit : ...

… nous n'écrirons plus … <div id="space-..."> … mais … <div class="space-...">
… ce qui se traduira dans la feuille de style … externe … par …
… cette écritue …   .space   … suivi des accolades avec les attributs …
… le mot … space … précédé d'un … point
… nous voyons apparaître l'expression …   class="----"  
… ce qui permet de réserver … id="----" … pour attribuer un nom à cette balise ...

Voici un exemple de fichier simplifié ... .css ... tiré directement de ce site :

… à part les … div entete, menu, corps et pieds … il y a d'autres div qui ont d'autres noms …
… et ceux-ci, exprimés grâce à la spécification … id="____" … avec le nom entre guillemets ...



La balise span.

… avec … div … on peut donner un style particulier à ce bloc en utilisant sa … class

… mais nous pouvons faire également ...
... un style particulier pour une partie d'un bloc avec … span  ...

… nous voyons une illustration de l'utilisation de … span … dans la phrase précédante …
… ( avec la partie de phrase … avec les lettres en blanc et le fond en bordeau … ce qui permet de le mettre en évidence ) …
… avec … <span class="_______"> … comme balise entrante …
… et … </span> … comme balise sortante …

… comme exemple, prenons le surlignement précisé par un … span ... particulier ...

Voici un exemple de class dans ... .css ... réservé à ce span :
En le réactualisant pour les derniers navigateurs essentiels :
Ce qui est expliqué au cours  d'introduction du CSS 3 .

… prenons le bloc dans le fichier … .html … avec la partie encadrée par un … span ...

Voici un exemple de class dans ... .html ... réservé à ce span :



Propriétés de positionnement.

... le positionnement des différents blocs se fait avec les ... id ... pour les quatre grands blocs ...
... l'entete, le menu, le corps et le pieds ...

... et les autres blocs internes aux quatre grands avec les ... class ...

... et les propriétés de positionnement s'expriment avec les attributs :
... margin ... et ... padding ... avec ... top, right, bottom et left ... voir le ...  cours 4 CSS  ...
... width ... et ... height ... avec ... une mesure en pixel (px) ... ou ... en % ... voir le ...  cours 1 CSS  ...
... float ... avec …left, right ...
voir le cours ...  création de sites 2  ... et le cours ...  création de sites 4  ...

exemple :

... style.css ... fichier simplifié :

… nous voyons le placement du menu et du corps … avec l'attribut …  float  ...


... la ...  construction d'une page web  ... se réalise de ...  haut en bas  ... pour définir les blocs ...
... et de ...  gauche à droite  ...

... c'est avec le ...  style en CSS 2.0 dans un fichier externe  ...
... que nous pourrons définir la place de chacun d'eux ...
... ( voir le cours sur  la création d'un site web  et les pages suivantes ) ...

... pour toute aide complémentaire, n'ayez pas peur de contacter le ...
...  webmaster 
...

... de ... gauche à droite sauf ... pour ... l'élément flottant ...
... qui sera toujours placé en premier, ... qu'il soit à gauche ou à droite ...

... toujours suivre la  logique  de lecture / placement / construction ...

... un exemple qui est ...  l'image flottante à droite  ... placée en premier …
… avec le titre … “Les balises des zones en XHTML.“
... sur la même ligne ...
... suivre la logique permet une lecture plus rapide ...
... cela facilite le travail d'un robot pour le référencement ...
... un ensemble de contraintes de départ qui permet la relecture du code ...
... cela facilite aussi l'autonomie ... évidemment ...

... toute mesure de base dans ... body ... a comme référence de départ ...
...  le coin supérieur gauche  ...
... et toute mesure dans un bloc particulier ... son coin supérieur gauche ...



La transparence.

... la transparence peut se définir sous deux termes : ...
... la véritable transparence ... celle qui est totale ... que l'on nomme ...transparent
... et la transparence partielle ... que l'on nomme ... opacity ...

Transparent :

... cette transparence se définit avec le ... background-color ...
... elle remplace une couleur ... permettant la transparence ...
...  et donc l'apparition de la couleur ou de l'image en arrière plan  ...

... la transparence d'un bloc ...

Opacity :

... ici, ... opacity ... est l'attribut qui aura une valeur ... comprise entre ... 0.1 et 0.9 ...
...voire la valeur ... 1 ... qui est synonyme d'opacité totale ...

... opacity d'un bloc ...

... pour être totalement complet ... certains navigateurs demandent une autre manière de l'écrire ...

... opacity d'un bloc pour tout navigateur et tout système ...

...  cela permet l'apparition de la couleur ou de l'image en arrière plan  ...
... plus ou moins légèrement ...
... c'est avec ces attributs que l'on joue pour obtenir un effet 3D ...
... on peut le voir en application avec la bande supérieure pour les cookies ...
... ou la bande a en plus son ombrage ...


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