CSS : améliorer un site par les feuilles de style !

Depuis l'arrivée des concepteurs et développeurs sur Internet, l'évolution des langages s'est constamment développée. Html, le langage de balisage universel, a vu sa conception évoluer mais montre petit-à-petit ses limites. Si de nouvelles balises apparaissent à chaque nouvelle version, certaines d'entre-elles, plus anciennes, deviennent obsolètes ... ou le seront bientôt.

Les 3 sous-rubriques précédentes (bases, Html et JavaScript, gadgets) ont été réalisées et explicitées à "l'ancienne". Celle-ci est résolument tournée vers la scission des langages. Les scripts que vous aurez trouvé ... et peut-être utilisé dans les autres sous-rubriques peuvent être améliorés grâce à cette technique : essayez ! Ce sera un excellent exercice !

Il convient de prendre le train en marche afin de ne pas voir les navigateurs de demain refuser l'affichage des sites publiés hier ... et même encore actuellement ! Cette évolution a en effet ceci de particulier : elle rejette parfois aujourd'hui ce qu'elle préconisait hier ... La tendance irréversible est à la séparation des outils : d'une part le langage de balisage contrôlant les descriptions de données, d'autre part le langage des styles contrôlant l'affichage de ces données et de leur contenu. C'est ainsi que sont apparues les CSS : Cascading Style Sheets ou, littéralement : Feuilles de Style en Cascade, les FDS.

Vous avez déjà eu l'occasion d'entrevoir certaines possibilités de ce langage dans 2 scripts précédents : les couleurs de liens et les textes ombrés. Mais la puissance offerte par les FDS va bien au-delà de ces simples gadgets !

Bienvenue dans la tribu des concepteurs de pages modernes !



Origines et avantages des CSS ou FDS
Ponctuation et unités de mesure dans les FDS
Syntaxe de base et sélecteurs
Comment déclarer les règles de style ?
Les familles de propriétés et leur description
Feuilles de style internes ou externes ?
Création d'une feuille de style simple

Passons à la pratique par l'exemple :

Non ! Ce n'est pas un "rollover" mais bien une FDS !
Tableau ou calques ? Le diptyque
Tableau ou calques ? Les triptyques
Un ascenseur à vos couleurs ? Facile !
Un formulaire en CSS : plus léger ! plus rapide !
Quand JavaScript et CSS s'allient !
Positionnement de blocs de données ou d'éléments (1)
Centrage et alignement de blocs imbriqués
Positionnement de blocs de données ou d'éléments (2)
Calques et introduction aux pages dynamiques
Pages dynamiques (1) : quand JavaScript s'en mêle !
Pages dynamiques (2) : une page d'accueil "qui en jette" !
Pages dynamiques (3) : images interactives et bulles
Barres de navigation fixes et menus déroulants !
Fantaisies en 3 dimensions : graphisme à gogo !
Les calques au lieu des tableaux ? C'est beaucoup mieux !
Créer des boutons sans logiciel de dessin ? Pourquoi pas ?
Les mises en page optimisées : leurre ou réalité ?
Remplacer les cadres par des calques ? C'est réalisable !

En préparation ... patience !


Les petites règles bien pratiques :

"Coller" une vignette au bas d'une fenêtre de visualisation
Soulignements et surlignements en couleurs !
Centrage horizontal   ET   vertical d'un ensemble !
Vos liens ne  "marchent pas"  ?  Ecrivez-les dans l'ordre ... !
Attribuer une couleur de fond à un titre, un mot, un texte, etc
Centrage horizontal   ET   vertical d'un élément !
Les bordures sous toutes les coutures
Rollover à affichage multiple sans utilisation de JavaScript

en préparation ... patience !
en préparation ... patience !



curieux des CSS





webmestre



Feuilles de style et CSS, formulaire



Je travaille pour vous !
Revenez voir de temps à autre :
il y aura du nouveau !!!

Copiez le logo ci-dessous :

logo

et faites un lien vers ce site !





Docanski Concept

Comment créer un site Web