[PDF] Cours CSS : Les Marges et styles | Formation informatique

(1)

3/

ATELIER WEB

LANGAGE CSS

*Cascading Style Sheets : feuilles de style en cascade.

Les feuilles de style servent, comme leur nom l'indique, à contenir les styles que vont prendre les différents éléments de ma page HTML.

C'est un langage informatique qui sert à décrire la présentation des documents HTML. On en est

aujourd’hui à la troisième version du langage ; le CSS3.

Le CSS3 permet de déterminer, pour chaque élément de ma page html : la taille la couleur la profondeur les ombres la position ...

Il permet également maintenant de réaliser de petites animations.

C'est dans la page CSS qu'on va attribuer un style aux textes et aux balises <div> créées précédemment.

(2)

ATELIER WEB CSS

FONCTIONNEMENT

DE QUELS LOGICIELS AI-JE BESOIN ?

Tout éditeur de texte ou un logiciel d'édition de sites internet tel que DREAMWEAVER permettant de créer une page texte.

CRÉER UN LIEN ENTRE LA PAGE HTML ET LA PAGE CSS

Pour que votre page CSS puisse dialoguer avec votre page HTML, il faut lier ces deux pages ensemble.

COMMENT ?

Après avoir créé votre page HTML et votre page CSS dans un même dossier, il faut les lier avec la balise

link dans la partie <head> du document HTML.

La balise <link> : permet d'établir une connexion entre la page HTML et un élément extérieur. Dans ce cas-ci, le lien redirige vers une feuille de style ou « CSS ». La feuille CSS servira à mettre en page le document.

Écriture :

<link rel="stylesheet" href="style.css" />

Balise link : permet de lier d’autres documents à la page HTML.

L'attribut rel : décrit le type de relation entre le document à lier et la page HTML. L'attribut href : indique l'adresse de destination et le nom du fichier.

(3)

LA SYNTAXE CSS DE BASE

La syntaxe de base repose sur trois éléments :

Sélecteur {Propriété : valeur ;}

Sélecteur : correspond à la balise HTML à mettre en forme.

Propriété : correspond à la propriété CSS ; ex : taille de typo. Valeur : correspond à la valeur de la propriété ; ex : 16px.

Ex : h3 { font-family: Arial;

font-style: italic

}

Note :

Les balises possédant un id sont écrites sur la feuille CSS précédées d'un « # ».

Les balises possédant un nom de classe sont écrites sur la feuille CSS précédées d’un « . ». ex : #carré et .carré

(4)

EXEMPLE :

Supposons que nous voulions que le fond d'une page Web soit noir :

1. Repérer la balise adéquate dans le document html.

Balise : <body>

2. Écrire sur la feuille de style les trois éléments de CSS qui permettent d'appliquer un fond noir au body.

Body {

background-color: #000; }

Sélecteur multiples

On peut sélectionner plusieurs éléments de notre body et leur attribuer des propriétés communes. Dans l’exemple qui suit les mêmes propriétés sont appliquées à h1, h2 et h3.

(5)

LES PROPRIÉTÉS

Il existe une centaine de propriétés importantes à connaître pour mettre correctement une page HTML en forme.

LES PROPRIÉTÉS RELATIVES AU TEXTE :

1. font-family :

Rôle : définit, sous forme de liste classée par ordre de préférence, la famille de polices à utiliser pour afficher le contenu.

2. font-Size:

Rôle : définit la taille de caractère de l'élément. Valeur(s) possible(s) pour cette propriété : infinie. Exemple : body {font-size: 14pt}

3. font-style:

Rôle : détermine si l'élément doit être affiché en caractères normaux (Roman), italiques ou obliques.

Exemple : h2 {font-style: italic}

4. text-transform :

Rôle : contrôle la capitalisation du texte d'un élément. Exemple : h2 { text-transform: uppercase}

(6)

5. text-align:

Rôle : détermine l'alignement horizontal du texte à l'intérieur d'un élément. Exemple : p {text-align: right}

6. font-weight :

Rôle : définit la graisse (épaisseur) de la police de caractères à appliquer à l'élément. Exemple : p{font-weight: bolder}

7.color :

Rôle : définit la couleur du texte. Exemple : H3 {color: #000080}

8.text-decoration :

Rôle : permet de placer un soulignement, une ligne au-dessus, barrée ou clignotante. Exemple : a {text-decoration:none;}

9.letter-spacing

Rôle : définit l'espacement entre les caractères à l'intérieur d'un élément. Exemple : a {letter-spacing: 1.1em}

(7)

10.word-spacing

Rôle : définit l'espace entre les mots en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentages (%).

P {word-spacing: 5pt}

11.

line-height

définit l'interligne soit l'espace entre les lignes du texte en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentages (%).

P {line-height: 10pt}

12.text-indent

définit un retrait dans la première ligne d'un bloc de texte souvent utilisé avec <P>. N'oubliez pas dans ce cas </P> est spécifié en pixels (px).

(8)

LES PROPRIÉTÉS RELATIVES AUX TAILLES ET POSITIONS

1 .width :

rôle :

détermine la longueur d'un élément de texte ou d'une image.

Exemple : #carré {width: 200px}

2 .height :

rôle : détermine la hauteur d'un élément de texte ou d'une image. Exemple : #carré {height: 200px}

3.z-index :

rôle : détermine la profondeur de l'élément par rapport aux autres éléments de la page. Similaire à l'ordre des calques dans photoshop.

Exemple : #carré {z-index : 200}

4.margin :

margin-top

détermine la valeur de la marge supérieure en unité de longueur ou auto.

{ margin-top: 5px }

margin-right

détermine la valeur de la marge droite en unité de longueur ou auto.

(9)

margin-bottom

détermine la valeur de la marge inférieure en unité de longueur ou auto.

{ margin-bottom: 5px } margin-left

détermine la valeur de la marge gauche en unité de longueur ou auto.

{ margin-left: 5px } margin

regroupe les différentes propriétés de la marge.

5 .Top, right, left et bottom :

rôle : détermine la position à partir du top de la page, de la gauche de la page, de la droite de la page et du bas de la page.

Exemple : #carré {top : 200px}

Nécessite d'enclencher en même temps la propriété « position » Exemple : #carré {

position : fixed ; top : 200px }

(10)

6. Position :

rôle : détermine si l'élément est positionnable, et si oui, de quel type de positionnement il s'agit.

Pour avoir accès aux propriétés top, bottom, left et right, il faut absolument utiliser la propriété Position.

Syntaxe CSS : position: constante.

Valeur(s) possible(s) pour cette propriété :

• Absolute :

Présente tous les éléments comme s'ils n'étaient pas positionnés puis ajuste la position de l'élément en fonction des propriétés

Top, right,

left et bottom.

La position absolue initiale se détermine par rapport au coin supérieur gauche de la fenêtre du browser. Les coordonnées de ce point sont top = 0 et left = 0.

Pour positionner mon objet sur la page, j'ai accès à quatre propriétés :

Top, right, left et bottom :

qui peuvent être définies en :

• pixels (vous précisez la valeur suivie de px), • pourcentage (la même chose suivie de %).

(11)

et à 200px du côté gauche de la fenêtre. L'écriture CSS est :#carré {position : absolute}

• Fixed : ne laisse pas d'espace pour l'élément. Au lieu de cela, place l’élément à la position spécifiée relative à la fenêtre d'affichage, ce qui empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour chaque page ).

• Relative : la position relative {position: relative} se détermine par rapport à d'autres éléments de la page, par exemple un élément du code Html.

(12)

LES PROPRIÉTÉS RELATIVES AUX FONDS

1. background-color :

Rôle : définit la couleur d'arrière-plan de l'élément.

Syntaxe CSS : background-color: couleur en hexadécimal ou RGB.

Valeur(s) possible(s) pour cette propriété : toute spécification de couleur valide ou transparent.

Exemple : p {background-color: #000}

2. background :

Rôle : propriété permettant de définir, à l'aide d'une seule instruction, cinq propriétés de style d'arrière-plan : la couleur, le lien vers une image, la répétition, et les positions droites et top.

Syntaxe CSS : background-color : color url('img.png') no-repeat right% top%;

Valeur(s) possible(s) pour cette propriété : toute combinaison des cinq valeurs de propriété de style possibles, dans n'importe quel ordre.

Exemple : body {background: #fff url('img_tree.png') no-repeat 50% 50% ;}

3. background -size :

Rôle : la propriété css background-size spécifie la dimension des images d'arrière-plan. Syntaxe CSS : background-size: constante.

Valeur(s) possible(s) pour cette propriété :

• cover, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi petite que possible, tout en assurant que les deux dimensions soient supérieures ou égales aux dimensions de la surface de positionnement.

• contain, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi grande que possible, tout en assurant que les deux dimensions soient plus petites ou égales aux dimensions de la surface de positionnement.

(13)

AUTRES PROPRIÉTÉS

Opacity :

La propriété de feuille de style css opacity permet de spécifier l'opacité (transparence) d'un élément.

La propriété feuille de style css opacity peut prendre la valeur de nombres compris entre 0.0 et 1 ; 0.0 étant totalement transparent et 1 totalement opaque.

.identifiant{ opacity:0.5;} ou .identifiant{ opacity:.5;}

Overflow :

La propriété de feuille de style css overflow permet de gérer les dépassements de blocs (calque, champ formulaire...).

La propriété de feuille de style overflow css peut prendre la valeur de : - visible, rend visible tout ce qui dépasse.

- hidden, cache tout ce qui dépasse. Masque les barres de défilement horizontales et verticales.

- scroll, met toujours une barre de défilement horizontale et verticale. - auto, met une barre de défilement horizontale ou verticale si besoin. - inherit, hérite de son parent (css2).

(14)

Cursor:

La propriété de feuille de style css cursor permet de spécifier la forme du curseur.

La propriété de feuille de style cursor css peut prendre la valeur de : - auto,

- nw-resize, curseur en forme de double petite flèche en diagonale bas droit vers haut gauche,

- crosshair, curseur en forme de croix fine,

- n-resize, curseur en forme de double petite flèche verticale, - default, curseur en forme de grosse flèche,

- se-resize, curseur en forme de double petite flèche en diagonale bas droit vers haut gauche,

- pointer, curseur en forme de main avec un doigt déplié,

- sw-resize, curseur en forme de double petite flèche en diagonale bas gauche vers haut droit,

- move curseur en forme de quatre flèches en croix,

- s-resize, curseur en forme de double petite flèche verticale, - e-resize, curseur en forme de double petite flèche horizontale, - w-resize, curseur en forme de double petite flèche horizontale,

- ne-resize, curseur en forme de double petite flèche en diagonale bas gauche vers haut droit,

- text, curseur ayant approximativement la forme d’un grand I, - help, curseur en forme de flèche et "?",

- wait, curseur en forme de sablier,

- inherit, la forme du curseur hérite de son parent. - progress, curseur en forme de flèche avec sablier, - not-allowed, curseur en forme de rond barré,

- no-drop, curseur en forme de main avec un doigt déplié avec un rond barré,§