Présentation des feuilles de style en cascade
Les feuilles de style en cascade (CSS) sont une série de règles de formatage qui contrôlent l'apparence du contenu des pages Web. Lorsque vous utilisez CSS pour formater une page, séparez le contenu de la présentation. Le contenu de la page (c'est-à-dire le code HTML) réside dans le fichier HTML lui-même, tandis que les règles CSS qui définissent la présentation du code résident dans un autre fichier (une feuille de style externe) ou dans une autre partie du document HTML ( généralement l'en-tête du fichier). L'utilisation de CSS vous offre une grande flexibilité et un meilleur contrôle sur l'apparence exacte de votre page, du positionnement précis de la mise en page aux polices et styles spécifiques.
CSS vous permet de contrôler de nombreuses propriétés que HTML seul ne peut pas contrôler. Par exemple, vous pouvez spécifier différentes tailles de police et unités (pixels, tailles en points, etc.) pour le texte sélectionné. En utilisant CSS pour définir la taille des polices en pixels, vous garantissez également une approche plus cohérente de la mise en page et de l'apparence sur plusieurs navigateurs.
Outre le formatage du texte, vous pouvez utiliser CSS pour contrôler le formatage et le positionnement des éléments de niveau bloc dans une page Web. Par exemple, vous pouvez définir des marges et des bordures pour les éléments au niveau du bloc, faire flotter du texte autour d'un autre texte, etc.
Les règles de formatage CSS se composent de deux parties : les sélecteurs et les déclarations. Un sélecteur est un terme qui identifie un élément de format (tel que P, H1, nom de classe ou ID), et la déclaration est utilisée pour définir le style de l'élément. Dans l'exemple suivant, H1 est le sélecteur et tout ce qui est entre parenthèses ({}) est une déclaration :
H1 {
taille de police : 16 pixels ;
famille de polices : Helvetica ;
poids de la police : gras
;
Une déclaration se compose de deux parties : des propriétés (telles que font-family) et des valeurs (telles que Helvetica). La règle CSS ci-dessus crée un style spécifique pour les balises H1 : le texte de toutes les balises H1 liées à ce style sera de 16 pixels, en police Helvetica et en gras.
Le terme cascade fait référence à la possibilité d’appliquer plusieurs styles au même élément. Par exemple, vous pouvez créer une règle CSS pour appliquer la couleur, une autre règle CSS pour appliquer des marges, puis appliquer les deux au même texte sur la page. Les styles définis « cascadent » jusqu'aux éléments de votre page Web, créant finalement le design souhaité.
Le principal avantage de CSS est qu'il offre des fonctionnalités de mise à jour pratiques ; lorsque vous mettez à jour une règle CSS en un seul endroit, le formatage de tous les documents utilisant ce style défini est automatiquement mis à jour vers le nouveau style.
Les types de style suivants peuvent être définis dans Dreamweaver :
Les règles CSS personnalisées (également appelées styles de classe) vous permettent d'appliquer des propriétés de style à n'importe quelle plage ou bloc de texte. (Voir Application de styles de classe.)
Les styles de balises HTML redéfinissent le formatage de balises spécifiques (telles que h1). Lorsque vous créez ou modifiez le style CSS d'une balise h1, tout le texte formaté avec la balise h1 est immédiatement mis à jour.
Les styles de sélecteur CSS (styles avancés) redéfinissent le formatage pour des combinaisons spécifiques d'éléments ou pour d'autres formes de sélecteur autorisées par CSS (par exemple, appliquez le sélecteur td h2 chaque fois qu'un en-tête h2 apparaît dans une cellule de tableau). Les styles avancés peuvent également redéfinir le formatage des balises contenant un attribut id spécifique (par exemple, un style défini par #myStyle peut être appliqué à toutes les balises contenant la paire de valeurs d'attribut id="myStyle").
Les règles CSS peuvent être situées aux emplacements suivants :
Une feuille de style CSS externe est une série de règles CSS stockées dans un fichier CSS externe distinct (.css) (et non un fichier HTML). Le document est lié à une ou plusieurs pages du site Web à l'aide de liens dans la partie d'en-tête du fichier de document.
Une feuille de style CSS interne (ou intégrée) est une série de règles CSS contenues dans la balise de style dans l'en-tête d'un document HTML.
Les styles en ligne sont définis dans l'ensemble du document HTML dans une instance spécifique d'une balise.
Dreamweaver reconnaît les styles définis dans les documents existants à condition qu'ils respectent les directives de style CSS.
Astuce
Pour afficher le Guide de référence CSS O'Reilly inclus avec Dreamweaver, sélectionnez Aide > Référence, puis sélectionnez Référence CSS O'Reilly dans le menu contextuel du panneau Référence.
La définition manuelle du formatage HTML remplace le formatage appliqué via CSS. Pour que les règles CSS contrôlent le formatage des paragraphes, tous les formats HTML définis manuellement doivent être supprimés.
Dreamweaver restitue la plupart des propriétés de style que vous appliquez directement dans la fenêtre Document. Vous pouvez également prévisualiser le document dans une fenêtre de navigateur pour voir comment les styles sont appliqués. Certaines propriétés de style CSS apparaissent différemment dans Microsoft Internet Explorer, Netscape Navigator, Opera et Apple Safari, et certaines ne sont actuellement prises en charge par aucun navigateur.