De manière générale, une feuille de style est un ensemble de règles de formatage qui contrôlent l'apparence du contenu Web. CSS peut être utilisé dans vos pages de trois manières différentes :
Inline : un style unique écrit dans le code.
Intégré : une feuille de style qui contrôle tous les éléments d'une page
Externe : une feuille de style qui contrôle les éléments sur de nombreuses pages
En fait, de nombreux sites utilisent une combinaison de ces trois méthodes selon les besoins.
Une chose importante à considérer lorsque vous travaillez avec CSS est le fait que différents navigateurs et différentes versions du même navigateur analysent CSS de différentes manières. Outre les différences entre les navigateurs Web, vous devez également comprendre qu'il existe de nombreux autres navigateurs, tels que les navigateurs pour entendants, les navigateurs pour téléviseurs et les appareils portables tels que le Palm Pilot et le TTY (téléimprimeur, machine à écrire à distance).
Quelles sont les bonnes pratiques ?
La plupart des technologies ont leurs propres normes convenues. CSS ne fait pas exception. Bien que tous les CSS qui existent sur le Web ne soient pas standardisés, il est utile d'utiliser les CSS conformément aux normes existantes. En général, les développeurs doivent autant que possible séparer le contenu des rapports. Les avantages de procéder ainsi sont les suivants :
1. Augmenter la durée de vie du site
Les feuilles de style non standard peuvent s'avérer pratiques à l'époque, mais lorsque de nouvelles versions de navigateurs sortiront, des problèmes de compatibilité risquent de survenir. À ce moment-là, modifier le site page par page sera une tâche très chronophage et cela rendra également l’utilisation du CSS inutile.
2. Rendez votre site accessible à tous les utilisateurs et navigateurs.
Certaines autorités locales ont légiféré selon laquelle les sites Web doivent être accessibles aux personnes handicapées. Les appareils de navigation conçus pour la sensibilisation au handicap, tels que les navigateurs pour malentendants, sont soumis à des exigences normatives CSS extrêmement strictes.
3. Facilitez les mises à jour et la maintenance du site.
Utilisé correctement, CSS permet aux ajustements que vous effectuez sur une page d’être rapidement appliqués à toutes les pages.
Le premier choix que vous devez faire est de savoir quelle feuille de style utiliser. En matière de bonnes pratiques, voici une analyse des différentes feuilles de style :
CSS en ligne; en termes simples, vous devriez essayer d'éviter de l'utiliser. Entre autres inconvénients, l'utilisation du CSS en ligne signifie que vous ne profitez pas du véritable avantage du CSS, à savoir que vous ne séparez pas le contenu du formatage. DW utilise Inline CSS principalement pour positionner les éléments de la page (ces éléments sont appelés « couches » dans l'interface utilisateur de DW), ou pour utiliser un certain effet DHTML, qui nécessite l'utilisation de Javascript de style Inline pour modifier les propriétés d'un objet.
CSS intégré : c'est également loin d'être idéal car cela n'affecte que la page actuelle. Lors du processus de mise à jour, si une page est perdue, le style du site sera incohérent ; de plus, lorsque les utilisateurs parcourent votre site, les informations de la feuille de style doivent être téléchargées pour chaque page.
CSS externe : c'est votre premier choix. Le CSS externe permet à toutes les pages qui y sont connectées de conserver une apparence et un style cohérents ; de le décrire, de le modifier une fois et de mettre facilement à jour toutes les pages associées ; de réduire la taille de votre page et de naviguer plus rapidement. D'autres bonnes pratiques sont abordées ci-dessous lors de l'analyse de fonctionnalités CSS spécifiques.
Créer une feuille de style CSS dans DW
Lors de la création d'une feuille de style CSS dans DW (Texte 》Style CSS 》Nouvelle feuille de style), dans la boîte de dialogue contextuelle, vous disposez de deux options : Nouveau fichier de feuille de style et Uniquement pour la page actuelle (Ce document uniquement). Sélectionnez "Nouveau fichier de feuille de style" et vous commencez le processus de création de CSS externe. Cette option vous oblige à nommer la feuille de style et à sélectionner un emplacement de sauvegarde avant le processus de création proprement dit ; l'autre option, Ce document uniquement, écrira le code correspondant directement sur la page.
Vous pouvez également sélectionner une feuille de style existante pour modifier ou ajouter de nouvelles définitions dans la boîte de dialogue Nouveau style.
Doit-il être connecté à un CSS externe ou importé ?
Après avoir créé la feuille de style externe, vous devez la joindre à chaque page (ou modèle). Pour ce faire, cliquez sur le bouton « Attacher une feuille de style » dans le panneau CSS. La boîte de dialogue Lier une feuille de style externe apparaîtra, dans laquelle vous pourrez accéder à votre feuille de style cible. Après avoir trouvé le nom, vous pouvez choisir de lier ou d'importer. cette feuille de style externe.
La connexion est la méthode la plus couramment utilisée. Sélectionnez « lien » pour connecter la feuille de style à la page. Il ajoutera le balisage suivant à votre page :
L'option de connexion est prise en charge par tous les navigateurs prenant en charge CSS. Si vous souhaitez que certains navigateurs plus anciens (tels que Netscape 4.x) « voient » cette feuille de style, vous devez utiliser la méthode suivante.
Si vous sélectionnez l'option "Importer", les balises utilisées sont :
NetSscape4 ignorera complètement le CSS importé et interprétera la page en fonction du CSS connecté. De cette façon, nous pouvons utiliser les nouvelles fonctionnalités de CSS sans nous soucier des problèmes de compatibilité des navigateurs.
Inspecteur de propriétés CSS
Vous pouvez facilement passer en mode CSS dans l'inspecteur de propriétés de DW. Par défaut, l'inspecteur des propriétés affiche les balises de police en mode HTML brut. Cliquez sur le petit « A » à côté du menu déroulant Polices et vous verrez les feuilles de style CSS actuellement disponibles au lieu d'une liste de balises de police. En même temps, vous pouvez facilement revenir en mode HTML.
Feuilles de style CSS prêtes à l'emploi
L'une des fonctionnalités CSS intéressantes de DW est qu'il inclut des feuilles de style CSS prêtes à l'emploi. Les nouveaux utilisateurs de CSS peuvent d’abord l’essayer. Sélectionnez Fichier > Nouveau, sélectionnez les feuilles de style CSS dans la boîte de dialogue contextuelle du nouveau document et une liste de tous les CSS disponibles apparaîtra dans la zone de droite. Pour mettre en pratique ce que nous appelons les meilleures pratiques, choisissez-en une marquée « Accessible ».
Enregistrez le document dans le dossier du site, puis ajoutez le CSS à votre document en utilisant la méthode décrite ci-dessus.
Feuilles de style au moment de la conception
Cette fonctionnalité de DW vous permet d'appliquer des feuilles de style aux pages lorsque vous travaillez en mode conception, vous offrant ainsi une compréhension plus intuitive de l'apparence du site. Les feuilles de style au moment de la conception n’apparaîtront pas sur le site. Cette fonctionnalité est très utile du point de vue de nos meilleures pratiques. Si vous utilisez à la fois les méthodes d'importation et de jointure (comme décrit ci-dessus), joindre une feuille de style au moment de la conception vous permet de développer le site en utilisant l'une ou l'autre. Vous pouvez facilement passer à une autre feuille de style lorsque vous souhaitez voir à quoi ressemblera la page sous une autre feuille de style.
Les feuilles de style au moment de la conception sont également utiles pour les développeurs qui souhaitent appliquer CSS côté serveur (comme ASP, PHP ou ColdFusion) ou côté client via Javascript. Les feuilles de style côté serveur constituent également un autre moyen de gérer la mauvaise prise en charge CSS dans les navigateurs clients. Mais dans les versions précédentes de DW, cette méthode ne permettait pas de visualiser l'effet réel du CSS pendant la phase de conception. Les feuilles de style au moment de la conception vous permettent d'afficher les effets des feuilles de style en temps réel, afin que vous puissiez travailler avec une interface visuelle dans DW. Un autre avantage est que lorsque vous téléchargez des fichiers de site, vous n'avez plus besoin de parcourir l'intégralité du site à la recherche de feuilles de style redondantes.
vérifier
Que vous créiez votre propre feuille de style ou que vous en modifiiez une existante, la validation garantit que vous n'utilisez pas à mauvais escient des balises non standard ou un code incorrect. DW lui-même n'inclut pas de validateur CSS, vous pouvez utiliser le service de validation fourni par le site du W3C.
Dans DW, vous pouvez valider les balises HTML ou DHTML (Fichier > Vérifier la page > Valider le balisage (pour HTML) ou Fichier > Vérifier la page > Valider en XML pour XHTML.). DW fournit de nombreux outils auxiliaires lors du développement de sites basés sur CSS. Avec l'aide de MW MX, associée à une bonne compréhension du CSS, vous pouvez développer un site qui résistera à l'épreuve du temps.