Feuilles de style CSS

Feuilles de style CSS
71
Les standards du web
F e u i l l e s d e s t y l e CS S
Les langages du web : le HTML et les CSS
Depuis la version 4 de l'HTML (décembre 1999), le W3C propose les feuilles de
style en cascade, les Cascading Style Sheet (CSS). Le but est de bien séparer
le contenu, décrit par le HTML, de la mise en forme et de la mise en page, décrites par les feuilles de style. Au lancement des CSS, les navigateurs ont eu
« du mal » à bien interpréter et à afficher correctement les feuilles de style.
Actuellement, la situation s'est nettement améliorée, même si elle n'est pas
encore parfaite.
Aujourd'hui, l'objectif de tout créateur de site web est de créer des sites respectueux des standards en utilisant au mieux le meilleur de la technologie : le
(X)HTML et les CSS.
Actuellement, nous vivons une « révolution » dans l’art de concevoir des sites
Web. En effet, bien que les nouvelles versions, HTML5 et CSS3, soient en
cours d'élaboration, il faut encore attendre que les navigateurs les prennent en
compte et les interprètent de manière similaire. Mais d’ores et déjà, dans
Dreamweaver, vous pouvez commencer à les utiliser. Nous le verrons au
moment opportun dans les chapitres à venir. Mais notez bien que l’utilisation
de l’HTML5 et des CSS3 dans Dreamweaver fait appel à une parfaite connaissance de ces deux langages, car presque « tout » doit se faire en mode Code.
Pourquoi utiliser les CSS ?
Utiliser les CSS n'a que des avantages :
- Les feuilles de style permettent de bien séparer le contenu de la mise en
forme et de la mise en page. Vous avez ainsi des documents bien mieux structurés.
- Les feuilles de style permettent de partager la même mise en forme et la
même mise en page pour plusieurs pages HTML, voire pour le site complet.
- Les feuilles de style offrent beaucoup plus de possibilités de mise en forme du
contenu que le HTML.
- Les feuilles de style offrent infiniment plus de possibilités de mise en page que
le HTML.
© Editions ENI - Toute reproduction interdite
72
Dreamweaver CS6
Feuilles de style CSS
- Les feuilles de style permettent de centraliser les mises en forme et les
mises en page.
- Les feuilles de style permettent de ne saisir qu'une seule fois une mise en
forme ou une mise en page. Cela est donc plus rapide et plus homogène. Cela
implique aussi des risques d'erreur moindres.
- Les feuilles de style permettent une mise à jour rapide : il suffit de changer
une propriété d'un style pour qu'automatiquement tous les éléments qui utilisent ce style soient mis à jour.
- Les feuilles de style permettent de créer plusieurs styles de mise en forme
et de mise en page et de changer l'apparence visuelle du site très rapidement.
Comment utiliser les styles CSS
Où enregistrer les feuilles de style ?
Pour enregistrer vos styles, vous avez deux solutions principales. La première
est d'enregistrer les styles dans le document HTML qui doit utiliser ces styles.
Dans ce cas, la « portée » d'utilisation des styles est limitée à cette page HTML
exclusivement. La deuxième possibilité est d'enregistrer les styles dans un
document CSS (l'extension du fichier sera .css). Dans ce cas, vous allez pouvoir
lier toutes les pages HTML que vous voulez à ce fichier CSS. La « portée »
d'utilisation des styles est dans ce cas la plus importante : c'est le site entier
qui va pouvoir utiliser le même fichier CSS.
Connaître les sélecteurs
Les feuilles de style utilisent ce qui s'appelle des « sélecteurs ». Un sélecteur
indique à quel élément HTML s'applique tel ou tel style.
Vous pouvez créer un style qui pourra s'appliquer à n'importe quel élément
HTML. Ce sont les sélecteurs de classe. Vous nommez le style, vous définissez
ses propriétés de mise en forme et vous l'appliquez aux éléments HTML que
vous voulez : sélection de mots, paragraphe, en-tête, cellule de tableau,
image...
© Editions ENI - Toute reproduction interdite
Feuilles de style CSS
73
Vous pouvez redéfinir la mise en forme d'un élément HTML existant. Ce sont les
sélecteurs de balise. Dans ce cas, il n'y a pas création d'un nouveau style, puisque
vous utilisez un élément HTML existant. Vous définissez juste les propriétés de
mise en forme. Il n'y a pas d'application par vos soins, puisque dès que vous
utilisez l'élément HTML redéfini, la mise en forme s'applique immédiatement. Supposons que vous redéfinissiez la mise en forme de l'élément d'en-tête de niveau
3 (élément HTML <h3>) : dès que dans votre page vous utilisez un élément d'entête de niveau 3, la mise en forme que vous avez définie s'applique.
Le troisième type de sélecteurs est celui utilisé pour la mise en page. Cela permet de créer des « boîtes ». Ce sont les sélecteurs d'identification. Ces styles
sont à usage unique dans chaque page web, c'est-à-dire qu'un seul style d'identification peut être utilisé par page. Supposons que je veuille créer une boîte
pour afficher un en-tête dans la page web. Je crée le style CSS pour cette boîte
et je ne peux l'utiliser qu'une seule fois dans ma page. C'est logique, car il ne
peut y avoir qu'une seule zone d'en-tête dans ma page. Mais rien ne nous empêche d'avoir le même en-tête dans plusieurs pages de notre site web.
Enfin, nous utiliserons un dernier type de sélecteur, celui dédié à la mise en
forme des liens hypertextes. Ce sont les pseudo-classes.
Il existe d'autres sélecteurs CSS, que nous n'utiliserons pas dans le contexte
d'utilisation de Dreamweaver dans ce livre.
Créer des styles dans le document actif
La création d'un sélecteur de classe dans le document
Nous allons créer un style dans un sélecteur de classe dans le document actif.
i Dans le document HTML enregistré, dans le menu Format - Styles CSS, choisissez Nouveau, ou dans le panneau Styles CSS, cliquez sur le bouton Nouvelle
règle CSS
.
© Editions ENI - Toute reproduction interdite
74
Dreamweaver CS6
Feuilles de style CSS
La fenêtre Nouvelle règle de CSS apparaît :
© Editions ENI - Toute reproduction interdite
Feuilles de style CSS
75
i Dans la liste déroulante Type de sélecteur, choisissez Classe (peut s'appliquer
à n'importe quel élément HTML).
i Dans le champ Nom du sélecteur, saisissez le nom du sélecteur. Le nom d'une
classe doit toujours commencer par le caractère point .. Mais si vous ne l'indiquez pas, Dreamweaver le fera pour vous. Ne mettez pas d'espaces, pas de
caractères accentués ni spéciaux. Vous pouvez mettre des majuscules pour
mieux lire les noms longs.
i Dans la liste déroulante Définition de règle, choisissez où vous voulez
enregistrer le style. Dans notre exemple, nous choisissons (Ce document
uniquement).
i Cliquez sur le bouton OK.
La fenêtre qui suit, Définition des règles de CSS, permet de définir les propriétés du
style créé. Les propriétés se classent en catégories. La liste de toutes les catégories se
trouve sur la gauche. Pour chaque catégorie, vous avez dans la zone principale la liste
des propriétés.
© Editions ENI - Toute reproduction interdite
76
Dreamweaver CS6
Feuilles de style CSS
Nous étudierons dans les chapitres suivants l'utilisation des différentes propriétés.
Une fois le style créé, il apparaît dans le panneau Styles CSS. Dans cet exemple, le style
.texteCourant apparaît bien associé au libellé <style> qui symbolise la feuille de style
enregistrée dans le document HTML.
La création d'un sélecteur de balise dans le document
Nous allons créer un style dans un sélecteur de balise dans le document actif. Le but est
de modifier la mise en forme de l'en-tête de niveau 3, l'élément HTML <h3>.
i Comme précédemment dans la page web enregistrée, dans le menu Format Styles CSS, choisissez Nouveau, ou dans le panneau Styles CSS, cliquez sur le
bouton Nouvelle règle CSS.
La fenêtre Nouvelle règle de CSS apparaît.
i Dans la liste déroulante Type de sélecteur, choisissez Balise (redéfinit un
élément HTML).
© Editions ENI - Toute reproduction interdite