Site personnel

RATP | MÉTÉO | ASTRO et MUSIC
 


FORMATEUR - WEBMESTRE - Tél : 06 25 27 61 68 


7 rue André Bernard - 93110 Rosny sous Bois 


eric-bourgeois.com www



Introduction aux feuilles de styles CSS

CSS est un langage spécifique au Web, fréquemment employé comme complément du langage HTML, et dont la fonction est de former des feuilles de styles chargées de la mise en forme des documents web. Il gère l'esthétique ( couleurs, typographie) et diverses fonctionnalités.

Son champ d'action ne se limite pas au média screen (écran) mais s'étend également aux médias print (imprimante), projection (présentations projetées), braille (tablettes à l'usage des aveugles), embossed (impression en braille), aural/speech (propriétés auditives), handheld (assistants numériques) et tv (Web-TV)


Présentation

La version actuelle de CSS (CSS 2) complète la version précédente CSS 1, avec laquelle elle est entièrement compatible.

Les feuilles de styles sont apparues dans les années 1990, période pendant laquelle les deux principaux navigateurs, Netscape Navigator et Microsoft Internet Explorer, créaient leurs extensions mutuellement incompatibles et truffées de balises propriétaires. Chacun refusant les éléments de l'autre, il fallait concevoir ses pages en détectant le navigateur utilisé et en adaptant le code au besoin.

CSS s'est peu à peu imposé comme standard universel palliant ces problèmes de compatibilité.

Après son acceptation par le W3C qui l'associa au langage HTML, la version 1.0 des feuilles de styles CSS fit son entrée dans les différents navigateurs (Netscape 4 et Internet Explorer 4 qui incorporèrent peu à peu ces nouvelles propriétés).

CSS version 2.0, apparu plus tard, offrait de nouvelles possibilités bien plus vastes : positionnements divers et précis, fonctionnalités d'accessibilité (notamment pour les lecteurs vocaux), etc.

À présent, la quasi-totalité des navigateurs proposent tout CSS 1 et presque tout CSS 2.
Mais les standards continuent leur évolution, et CSS 3 attend désormais son adoubement officiel par le W3C (recommandation).

Il prendra alors la suite des versions précédentes sur les navigateurs plus réactifs comme Mozilla et Opera).


La syntaxe de base des CSS

Quelle que soit la version de CSS retenue, une feuille de styles CSS prend toujours la forme d'une liste de déclarations, écrites dans un langage spécifique et distinct de HTML.

Ainsi, pour appliquer la couleur bleue aux titres principaux du document, on écrira :

h1 {color: blue}

Rien de bien compliqué !
Les accolades sont précédées d'un sélecteur, qui s'applique ici à la balise <h1>.

Cette règle colorera donc toutes les balises <h1> contenues dans la page.

Le bloc de déclaration, situé dans les accolades { }, contient une ou plusieurs déclarations, ces dernières étant constituées de couples « propriété - valeur ».
Cet exemple ne contient qu'une seule déclaration, associant la valeur blue à la propriété color.

C'est toujours le caractère deux points ( : ) qui sépare une propriété de sa valeur – rappelons qu'en HTML les attributs sont qualifiés à l'aide d'un signe d'égalité (par exemple : color="blue").

Pour compléter ce bloc par d'autres déclarations, on les ajoute simplement à la suite SANS OUBLIER le séparateur d'instruction, le caractère point-virgule ( ; )

On assurera la lisibilité du code en réservant une ligne à chaque déclaration.
L'ensemble formé par le sélecteur et le bloc de déclaration sera nommé « règle ».
Exemple de règle CSS avec deux instructions :

h1 {
color: blue;
text-align: center;
}


Appliquer les styles CSS

Comment appliquer ce style CSS au document HTML qui en dépend ?

Il existe pour cela trois méthodes, mais nous utiliserons de préférence celle de la feuille de styles séparée, qui présente de nombreux avantages. suite ...


Désactiver les styles CSS

FireFox a une option pour montrer la page web sans les informations de style.

Pour désactiver le CSS :

Menu principal Affichage Style de la page Aucun style

Pour le restaurer le CSS :

Menu principal Affichage Style de la page Style de base


Haut de page

Introduction Html


Le fond et la forme

Ouvrages de références

Auto-entrepreneur.
Access®, Excel®, Powerpoint®, Word® & Windows® sont des produits et marques déposés
propriété de Microsoft, Inc.
Photoshop® & Dreamweaver ® sont des produits et marques déposés propriété de Adobe System.

 
Dernière mise mise à jour : 06.11.2011