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.
- Généralité
- Composition d'une boîte
- Composition d'une ligne
- Positionnement d'une Boîte
- Présentation de la fenêtre CSS
- Créer un fichier CSS
- Code CSS
Navigation chapitre:
Généralité
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.
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.
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.
Toutes les règles (Zone 1)
Elles sont affectées dans 3 catégories
- Les Balises (h1,h2,...,p,ul,a,...)
- Les classes ou styles (.cadre,.image,...)
- 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
sur l'icône Nouvelle règle CSS
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.
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
. 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.
- Type ou Police
- Arrière-Plan
- Bloc
- Boîte
- Bordure
- Liste
- Positionnement
- Extensions
- Tableau, Contenu, Guillemets
1. Type ou Police de caractère
2. Arrière-Plan
3. Bloc
4. Boîte
5. Bordure
6. Liste
7. Positionnement
8. Extension
Tableau, Contenu, Guillemets