Vous êtes ici: Accueil / Informatique / Site Web / Dreamweaver 8 / Le CSS en Général

Le CSS en general

CSS ( Cascading style sheet, feuille de style en "cascade") est un langage qui permet de paramétrer votre feuille. C'est grâce au CSS que vous pouvez réaliser une présentation personnalisée. Il n'est plus nécessaire d'utiliser des tableaux.

Celui ci peut être attaché directement à votre page ou en liaison avec un fichier extérieur avec l'extension .css.

Avant toutes choses les commandes associées aux balises, aux styles, aux classes ou aux pseudo-classes sont segmentés par des accolades et chaque code ce termine par un point virgule

Exemple: h1 {code1;code2;...;} ou .cadre {code1;code2;...;} ou #menu p {code1;code2;...;}

Pour simplifier au maximum il faut connaître un minimum.

Composition d'une boîte

Avant de commencer, il faut connaître la composition d'une boîte.

élément simple

 

 

Composition d'une ligne

Encore une dernière information. Il faut connaître la composition d'une ligne. En fait, les unités de longueur.

carpixel

Les unités fixes

Pixel (Px) : donne un dimension fixe et précise

Le problème est que vous imposez la taille de votre caractère

Les unités relatives

 

Les plus intéressants sont les unités relatives. L'internaute peut modifier la taille de votre texte via son navigateur.

Ems (Em) :
Donne une dimension relative par rapport à la normal défini par votre navigateur.

1em: rien ne change
1.3em: on agrandi
0.8em: on diminue

Pourcentage (%):
Donne une dimension relative par rapport à la normal défini par votre navigateur

100%: rien ne change
120%: on agrandi
80%: on diminue.

Nom de la taille:
xx-small, ...., xx-large

 

 

Notion de positionnement

En simplifiant au maximum, un bloc possède 3 types de positionnement

On parlera de flottement

  • A gauche

Votre bloc se situe à gauche de votre écran ou de votre bloc parent (le bloc principal)

  • A droite

Votre bloc se situe à droite de votre écran ou de votre bloc parent

  • Aucun

On va dire, là ou il y a de la place

 

 

Présentation de la fenêtre CSS

Le menu CSS se trouve au niveau le la fenêtre CSS sous l'onglet Styles CSS. A l'affichage vous trouverez 2 Zones.

csspresent

 

Toutes les règles (Zone 1)

Elles sont affectées dans 3 catégories

  1. Les Balises (h1,h2,...,p,ul,a,...)
  2. Les classes ou styles (.cadre,.image,...)
  3. Les Id ou pseudo-classes (#menu, #menu p, a:hover,...)

 

Propriétés (Zone 2)

Affiche le résultat de votre paramétrage par thème, par ordre alphabétique ou par utiliser.

Quand vous créez un paramétrage de style il est intéressant de sélectionner l'icône (Afficher uniquement les propriétés définies). C'est très pratique car vous apercevez le code CSS associé (une traduction direct du langage éditeur en français au langage CSS qui est en anglais).

 

 

Créer un fichier CSS

souri sur l'icône Nouvelle règle CSS

CSS nouvelle règle

Sélectionner Balise et affecter le nom body.

Fichier CSS intérieur (uniquement valable sur votre page active)

Vérifier que dans la zone à définir vous avez bien sélectionné Seulement ce document

 

Fichier CSS extérieur (applicable sur toutes vos pages)

Vérifier bien que le contenu se trouve dans Nouveau fichier feuille de style


puis valider sur OK.

CSS Nouveau fichier

Ici saisir le nom de votre fichier style et vérifier que vous êtes bien relatif à: Document puis valider sur Enregistrer.
NE PAS OUBLIER DE FINIR AVEC .css

Fichier CSS Enregistré

Et voila, nous avons créé un fichier style et s'affiche maintenant l'éditeur de paramétrage CSS. Ici le paramétrage concerne la balise <body>. Vous pouvez mettre une couleur de fond de votre page par exemple (Voir chapitre suivant - Arrière-plan).

 

coDE CSS

Dreamweaver 8 possède la plus part des codes compatibles avec les différents navigateurs que vous trouverez dans les propriétés du CSS en Zone 2 . Pour ceux qui connaissent déjà les codes CSS, ce chapitre peuvent les intéresser. La saisie directe vous évite de passer par l'éditeur CSS.

Il n'est pas très simple de mémoriser tous ces codes alors Dreamweaver 8 a intégré un éditeur de règles CSS qui vous permet de retrouver facilement ces codes en langue française.

C'est pour cette raison que nous ne détaillerons pas ce chapitre. Avec de la pratique et de la curiosité vous trouverez la traduction des codes réalisés avec l'éditeur.

  1. Type ou Police
  2. Arrière-Plan
  3. Bloc
  4. Boîte
  5. Bordure
  6. Liste
  7. Positionnement
  8. Extensions
  9. Tableau, Contenu, Guillemets

 

1. Type ou Police de caractère

csspolice

 

 

2. Arrière-Plan

arrierplan

 

 

3. Bloc

fenbloc

 

 

4. Boîte

fenboite

 

 

5. Bordure

 

fenbordure

 

 

6. Liste

 

fenliste

 

 

7. Positionnement

 

fenposition

 

 

8. Extension

 

 

fenextension

 

 

Tableau, Contenu, Guillemets

 

fentableau