PDF (adobe.com)

A propos des règles CSS

Une règle de style CSS se compose de deux entités : le sélecteur et la déclaration (ou dans la plupart des cas, un bloc de déclarations). Le sélecteur est un terme (tel que p, h1,un nom de classe ou un identifiant) qui identifie l'élément mis en forme tandis que le bloc de déclaration définit quels sont les propriétés de style. Dans l'exemple suivant, h1 correspond au sélecteur tandis que tout ce qui est placé entre les crochets ({}) correspond à la déclaration :

h1 { 
font-size: 16 pixels; 
font-family: Helvetica; 
font-weight:bold; 
}

La déclaration est composée de deux entités : la propriété (par exemple, font-family) et la valeur (par exemple, Helvetica). Dans la règle CSS précédente, un style particulier a été créé pour les balises h1 : le texte de toutes les balises H1 liées à ce style sera associé à une police Helvetica, d'une taille de 16 pixels et en gras.

Le style (qui est défini par une règle ou par un groupe de règles) se trouve dans un emplacement distinct de celui de la mise en forme du texte réel, généralement dans une feuille de style externe ou dans la section head du document HTML. Ainsi, une règle concernant les balises h1 peut s'appliquer à de nombreuses balises à la fois (et dans le cas de feuilles de style externes, la règle peut s'appliquer à de nombreuses balises à la fois dans un grand nombre de pages différentes). De cette façon, CSS offre une capacité de mise à jour extrêmement aisée Lorsque vous mettez à jour une règle CSS dans un emplacement, la mise en forme de tous les éléments qui utilisent le style défini est automatiquement mise à jour en fonction du nouveau style.

Vous pouvez définir les types de styles suivants dans Dreamweaver :

  • Les styles de classe vous permettent d'appliquer des propriétés de style à tout élément de la page.

  • Les styles appliqués aux balises HTML redéfinissent la mise en forme d'une balise spécifique, telle que h1. Lorsque vous créez ou modifiez un style CSS pour la balise h1, tout le texte formaté à l'aide de cette balise h1 est immédiatement modifié en conséquence.

  • Les styles avancés redéfinissent la mise en forme pour une combinaison particulière d'éléments ou pour d'autres formes du sélecteur admises par CSS (par exemple, le sélecteur td h2 s'applique chaque fois qu'un en-tête h2 apparaît dans une cellule de tableau). Les styles avancés peuvent également redéfinir la mise en forme pour des balises qui contiennent un attribut id (identifiant) (par exemple, les styles définis par #myStyle s'appliquent à toutes les balises qui contiennent la paire valeur-attribut id="myStyle").

Les règles CSS peuvent se trouver aux emplacements suivants :

Feuilles de style CSS externes
Ensembles de règles CSS enregistrées dans un fichier .css externe distinct (pas dans un fichier HTML). Ce fichier est lié à une ou plusieurs pages d'un site Web à l'aide d'un lien ou d'une règle @import situé dans la section head d'un document.

Feuilles de style CSS internes (ou imbriquées)
Ensembles de règles CSS incluses dans une balise style de la section head d'un document HTML.

Styles en ligne
Définis dans des instances spécifiques de balises dans un document HTML. L'utilisation de styles en ligne n'est pas recommandée.

Dreamweaver reconnaît les styles définis dans des documents existants, pour peu qu'ils soient conformes aux recommandations des feuilles de style CSS. Dreamweaver restitue également la plupart des styles appliqués directement en mode Conception. Toutefois, la prévisualisation d'un document dans une fenêtre de navigateur vous permet d'obtenir le rendu direct le plus précis de la page. Certains styles CSS s'affichent différemment dans Microsoft Internet Explorer, Netscape Navigator, Opera, Apple Safari ou d'autres navigateurs, et certains ne sont pas encore pris en charge par aucun navigateur.

Pour afficher le guide de référence CSS d'O'Reilly inclus dans Dreamweaver, choisissez Aide > Référence et sélectionnez O'Reilly - Référence CSS dans le menu déroulant du panneau Référence.