Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Création d'un style CSS

Ce tutoriel illustre la création d'un style CSS dans Dreamweaver CS.

Nous avons déjà vu qu'il y a trois façons de travailler avec du CSS et qui peuvent être appliqués à un document HTML. Bien que nous allons nous concentrer sur l'utilisation de styles externes, il est bon de savoir comment utiliser les deux autres aussi. Regardons maintenant la création de styles CSS.

Créer une feuille de style interne

Faisons ouvrir une page d'exemple:

Texte exemple

Cliquez sur le menu Format et survolez l'option Styles CSS . Vous voyez ce menu déroulant.

Creér nouveau style CSS

Sélectionnez Nouveau ... et la boîte de dialogue Nouvelle règle de CSS apparaît.

boîte nouvelle règle css

Tout d'abord, regardez les options de type de sélecteur.

Type sélecteur d'ID

Avec chacune de ces options il y a une brève explication de son application et de ses limites. A cette occasion, nous allons choisir la classe. Maintenant, donnez un nom au sélecteur. J'ai choisi TestClass.

Maintenant, regardez la définition de la règle.

Règle CSS

Cela nous donne la possibilité de définir le style dans ce document uniquement ou dans un fichier de feuille de style. Nous choisirons ce document seulement à cette occasion. Appuyez sur OK.

Définition des règles

Nous voyons maintenant la définition des règles CSS pour. TestClass dans la boîte de dialogue. Notez que Dreamweaver ajoute la période obligatoire au début du nom pour nous. Nous utilisons cette boîte de dialogue pour choisir les propriétés que nous voulons pour ce style CSS.

Ici, j'ai fait un certain nombre de sélections, dont certaines pour le rendre très distinctif à nos fins.

Définition du type

Cliquez sur OK et mon style CSS est créé.

Pour utiliser le nouveau style, je sélectionne du texte dans mon document, puis utilise la liste déroulante Règle cible sur la page CSS dans le panneau Propriétés.

Panneau propriétés règle css

Sélectionnez TestClass et voir l'effet du nouveau style sur le paragraphe sélectionné.

Règle de style appliqué

Créer une feuille de style externe

Pour créer un style externe, nous allons sélectionner le deuxième alinéa et de suivre à peu près la même procédure, si ce n'est que nous spécifions que le nouveau style doit être défini dans un fichier de feuille de style.

Règle de feuille des tyle externe

Cliquez sur OK. Une nouvelle feuille de style est créé avec un nom que je précise, et le nouveau style CSS est précisé. Maintenant, je sélectionne ce style et l'applique au deuxième alinéa.

Règle style externe appliquée

En fait, ici, j'ai appliqué les deux nouveaux styles de paragraphes alternatifs dans mon document.

Bien que les effets sont les mêmes, il est important de se rappeler que nous avons mis en place ces styles de façons très différentes. Elle a été définie dans l'en-tête du document, comme indiqué dans le code ici.

Code règle de style

L'autre est définie dans une feuille de style externe séparée appelée: style-test.css
Nous pouvons voir un aperçu de cette feuille de style externe ouverte avec Dreamweaver:

Aperçu feuille de style externe

Voir aussi: Attacher une feuille de style externe avec Dreamweaver

 

   

 

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site