Feuilles de style CSS

Transcription

1 Feulles de style CSS 71 Feulles de style CSS Les standards du web Les langages du web : le HTML et les CSS Depus la verson 4 de l'html (décembre 1999), le W3C propose les feulles de style en cascade, les Cascadng Style Sheet (CSS). Le but est de ben séparer le contenu, décrt par le HTML, de la mse en forme et de la mse en page, décrtes par les feulles de style. Au lancement des CSS, les navgateurs ont eu «du mal» à ben nterpréter et à affcher correctement les feulles de style. Actuellement, la stuaton s'est nettement amélorée, même s elle n'est pas encore parfate. Aujourd'hu, l'objectf de tout créateur de ste web est de créer des stes respectueux des standards en utlsant au meux le melleur de la technologe : le (X)HTML et les CSS. Actuellement, nous vvons une «révoluton» dans l art de concevor des stes Web. En effet, ben que les nouvelles versons, HTML5 et CSS3, soent en cours d'élaboraton, l faut encore attendre que les navgateurs les prennent en compte et les nterprètent de manère smlare. Mas d ores et déjà, dans Dreamweaver, vous pouvez commencer à les utlser. Nous le verrons au moment opportun dans les chaptres à venr. Mas notez ben que l utlsaton de l HTML5 et des CSS3 dans Dreamweaver fat appel à une parfate connassance de ces deux langages, car presque «tout» dot se fare en mode Code. Pourquo utlser les CSS? Utlser les CSS n'a que des avantages : - Les feulles de style permettent de ben séparer le contenu de la mse en forme et de la mse en page. Vous avez ans des documents ben meux structurés. - Les feulles de style permettent de partager la même mse en forme et la même mse en page pour pluseurs pages HTML, vore pour le ste complet. - Les feulles de style offrent beaucoup plus de possbltés de mse en forme du contenu que le HTML. - Les feulles de style offrent nfnment plus de possbltés de mse en page que le HTML.

2 72 Dreamweaver CS6 Feulles de style CSS - Les feulles de style permettent de centralser les mses en forme et les mses en page. - Les feulles de style permettent de ne sasr qu'une seule fos une mse en forme ou une mse en page. Cela est donc plus rapde et plus homogène. Cela mplque auss des rsques d'erreur mondres. - Les feulles de style permettent une mse à jour rapde : l sufft de changer une proprété d'un style pour qu'automatquement tous les éléments qu utlsent ce style soent ms à jour. - Les feulles de style permettent de créer pluseurs styles de mse en forme et de mse en page et de changer l'apparence vsuelle du ste très rapdement. Comment utlser les styles CSS Où enregstrer les feulles de style? Pour enregstrer vos styles, vous avez deux solutons prncpales. La premère est d'enregstrer les styles dans le document HTML qu dot utlser ces styles. Dans ce cas, la «portée» d'utlsaton des styles est lmtée à cette page HTML exclusvement. La deuxème possblté est d'enregstrer les styles dans un document CSS (l'extenson du fcher sera.css). Dans ce cas, vous allez pouvor ler toutes les pages HTML que vous voulez à ce fcher CSS. La «portée» d'utlsaton des styles est dans ce cas la plus mportante : c'est le ste enter qu va pouvor utlser le même fcher CSS. Connaître les sélecteurs Les feulles de style utlsent ce qu s'appelle des «sélecteurs». Un sélecteur ndque à quel élément HTML s'applque tel ou tel style. Vous pouvez créer un style qu pourra s'applquer à n'mporte quel élément HTML. Ce sont les sélecteurs de classe. Vous nommez le style, vous défnssez ses proprétés de mse en forme et vous l'applquez aux éléments HTML que vous voulez : sélecton de mots, paragraphe, en-tête, cellule de tableau, mage...

3 Feulles de style CSS 73 Vous pouvez redéfnr la mse en forme d'un élément HTML exstant. Ce sont les sélecteurs de balse. Dans ce cas, l n'y a pas créaton d'un nouveau style, pusque vous utlsez un élément HTML exstant. Vous défnssez juste les proprétés de mse en forme. Il n'y a pas d'applcaton par vos sons, pusque dès que vous utlsez l'élément HTML redéfn, la mse en forme s'applque mmédatement. Supposons que vous redéfnssez la mse en forme de l'élément d'en-tête de nveau 3 (élément HTML <h3>) : dès que dans votre page vous utlsez un élément d'entête de nveau 3, la mse en forme que vous avez défne s'applque. Le trosème type de sélecteurs est celu utlsé pour la mse en page. Cela permet de créer des «boîtes». Ce sont les sélecteurs d'dentfcaton. Ces styles sont à usage unque dans chaque page web, c'est-à-dre qu'un seul style d'dentfcaton peut être utlsé par page. Supposons que je veulle créer une boîte pour affcher un en-tête dans la page web. Je crée le style CSS pour cette boîte et je ne peux l'utlser qu'une seule fos dans ma page. C'est logque, car l ne peut y avor qu'une seule zone d'en-tête dans ma page. Mas ren ne nous empêche d'avor le même en-tête dans pluseurs pages de notre ste web. Enfn, nous utlserons un derner type de sélecteur, celu dédé à la mse en forme des lens hypertextes. Ce sont les pseudo-classes. Il exste d'autres sélecteurs CSS, que nous n'utlserons pas dans le contexte d'utlsaton de Dreamweaver dans ce lvre. Créer des styles dans le document actf La créaton d'un sélecteur de classe dans le document Nous allons créer un style dans un sélecteur de classe dans le document actf. Dans le document HTML enregstré, dans le menu Format - Styles CSS, chosssez Nouveau, ou dans le panneau Styles CSS, clquez sur le bouton Nouvelle règle CSS.

4 74 Dreamweaver CS6 Feulles de style CSS La fenêtre Nouvelle règle de CSS apparaît :

5 Feulles de style CSS 75 Dans la lste déroulante Type de sélecteur, chosssez Classe (peut s'applquer à n'mporte quel élément HTML). Dans le champ Nom du sélecteur, sasssez le nom du sélecteur. Le nom d'une classe dot toujours commencer par le caractère pont.. Mas s vous ne l'ndquez pas, Dreamweaver le fera pour vous. Ne mettez pas d'espaces, pas de caractères accentués n spécaux. Vous pouvez mettre des majuscules pour meux lre les noms longs. Dans la lste déroulante Défnton de règle, chosssez où vous voulez enregstrer le style. Dans notre exemple, nous chosssons (Ce document unquement). Clquez sur le bouton OK. La fenêtre qu sut, Défnton des règles de CSS, permet de défnr les proprétés du style créé. Les proprétés se classent en catégores. La lste de toutes les catégores se trouve sur la gauche. Pour chaque catégore, vous avez dans la zone prncpale la lste des proprétés.

6 76 Dreamweaver CS6 Feulles de style CSS Nous étuderons dans les chaptres suvants l'utlsaton des dfférentes proprétés. Une fos le style créé, l apparaît dans le panneau Styles CSS. Dans cet exemple, le style.textecourant apparaît ben assocé au lbellé <style> qu symbolse la feulle de style enregstrée dans le document HTML. La créaton d'un sélecteur de balse dans le document Nous allons créer un style dans un sélecteur de balse dans le document actf. Le but est de modfer la mse en forme de l'en-tête de nveau 3, l'élément HTML <h3>. Comme précédemment dans la page web enregstrée, dans le menu Format - Styles CSS, chosssez Nouveau, ou dans le panneau Styles CSS, clquez sur le bouton Nouvelle règle CSS. La fenêtre Nouvelle règle de CSS apparaît. Dans la lste déroulante Type de sélecteur, chosssez Balse (redéfnt un élément HTML).