Cascading Style Sheets CSS

abdelouafi · Sep 27, 2016

CSS: Feuilles de styles cascadées (Cascading Style Sheets) est un langage de style qui définit la présentation des documents HTML. Il couvre les polices, les couleurs, les marges, les arrière-plan et bien d’autres choses.

HTML sert à structurer le contenu document, tandis que CSS sert à formater un contenu structuré.

Bien que HTML permet de formater le contenu d’une page Web, il reste un peut limité, voir ennuyeux vu que chaque élément doit être formaté séparément. CSS remédie à ce problème en contrôlant la présentation de la page entière ou de plusieurs pages par une seule feuille de style et d’une façon plus précise.

Beaucoup de propriétés des feuilles de style en cascade (CSS) sont similaires à celles de HTML. En effet, supposons qu’on veut définir un arrière plan noir pour une page:

Avec HTML: <body background=‘’black’’>

Avec CSS: body {background-color: black}

Comment appliquer CSS à une page HTML? - I
Il existe trois méthode d’appliquer le style CSS à un document HTML:

Méthode 1:

On peut appliquer directement un style CSS à un document HTML avec l’attribut HTML « style ». Dans ce cas on parle d’un style local.

Supposons qu’on veut définir un arrière plan noir à une page HTML. Le code est le suivant:

Code:

<html>

<head>

</head>

<body style=‘’background-color:black’’>

  <font color=‘’white’’>Le font de cette page est noir!</font>

</body>

</html>

Méthode 2:

En reprenant l’exemple précédent le code est le suivant:

Code:

<html>

<head>

  <style>

  body {background-color:black;}

  </style>

</head>

<body>

<font color=‘’white’’>Le font de cette page est toujours noir!</font>

</body>

</html>

Notez que la balise <style> est déclarée à l’entête du document entre <head> et </head>.

Méthode 3 - I:

C’est la meilleure méthode. Elle consiste à appeler une feuille de style externe définie ailleurs. Pour le reste de ce chapitre on adoptera cette méthode tout en sachant que la syntaxe demeure la même et applicable aux deux méthodes précédentes.

Une feuille de style externe est un fichier texte ayant l’extension «.css ». Elle peut être rangée avec le reste des fichiers du site Web dans le même répertoire ou dans un répertoire à part réservé pour accueillir les feuilles de style définies (recommandé).

Supposons maintenant que la feuille de style est rangée dans un répertoire nommé «styles». La feuille s’appelle «style1.css»

La structure du site est la suivante:

Méthode 3 - II:

Maintenant on crée un lien depuis le document HTML (index.htm) vers la feuille de style (style1.css). Ce lien est créé en une ligne de code HTML:

Code:

<link rel=‘’stylesheet’’ type=‘’text/css’’ href=‘’style/style1.css’’>

La ligne de code doit s’inscrire dans la section d’entête du code HTML (entre <head> et </head>). Comme ceci:

Code:

<html>

<head>

  <link rel=‘’stylesheet’’ type=‘’text/css’’ href=‘’style/style1.css’’>

</head>

<body>

</body>

</html>

Méthode 3 - III:

Vous pouvez conclure qu’avec une seule feuille de style définie sur votre site Web vous pouvez contrôler la totalité des pages en y insérant un lien vers celle-ci.

Imaginez que vous disposez d’un site qui contient 50 pages et qu’à un moment donné vous voulez changer leurs arrière-plan. Sans la feuille de style vous vous trouvez forcés de parcourir toutes les pages et modifier le code de chacune d’entre elles. Alors qu’avec une feuille de style externe le changement peut prendre quelques petites secondes puisque vous n’avez qu’une ligne à changer (au lieu de 50).

Les couleurs et les arrière-plan - I
La couleur d’avant-plan: la propriété ‘color’

La propriété ‘color’ décrit la couleur d’avant-plan d’un élément.

Supposons que nous voulons visualiser les grands titres en rouge. Nous savons jusqu’ici que les grands titres sont balisées en HTML avec l’élément <h1>. Le code suivant donne aux éléments <h1> une couleur rouge:

Code:

h1 {

  color:#ff0000;

}


Ou bien:


h1 {

  color:red;

}

Les arrière-plan - I:

La propriété ‘background-color’ décrit la couleur d’arrière-plan des éléments.

L’élément <body> décrit la page toute entière. Pour changer la couleur d’arrière-plan de la page entière il faut appliquer la propriété ‘background-color’ sur l’élément <body>. On aura alos:

Code:

body {

  background-color:#ffff00

}

Ce qui donne un arrière plan jaune pour la page qui utilise ce style.

On peut toujours réunir plusieurs styles. Par exemple:

Code:

h1 {color:#ff0000;}

body {background-color:#ffff00;}

Les arrière-plan - II:

La propriété ‘background-image’ sert à insérer une image d’arrière-plan.

Si on veut ajouter à l’exemple précédent, en plus d’arrière-plan jaune, une image d’arrière-plan nommé ‘im.jpg’ on n’a qu’à mettre le code suivant:

Code:

body {

  background-color:#FFFF00;

  background-image: url(‘’im.jpg’’);

}

url contient le chemin (relatif ou absolu) de l’image à mettre en arrière-plan.

Les arrière-plan - III:

La propriété ‘background-repeat’ permet de répéter l’image d’arrière-plan selon le choix.

Par défaut, une image d’arrière-plan est répétée sur toute la page (si, bien sûr, les dimensions de l’image sont inférieures à celles de la page).

La propriété ‘background-repeat’ peut prendre 4 valeurs:

background-repeat: repeat-x : Répétition horizontale de l’image

background-repeat: repeat-y : Répétition verticale de l’image

background-repeat: repeat : Répétition partout de l’image

background-repeat: no-repeat : L’image ne se répète pas.

L’exemple précédent redevient:

Code:

body {  background-color: #FFFF00;

  background-image: url(‘’im.jpg’’);

  background-repeat: no-repeat;

}

Les arrière-plan - IV:

La propriété ‘background-attachement’ permet de fixer ou de laisser défiler l’image d’arrière-plan.

Par défaut, une image d’arrière-plan défile avec le contenu.

La propriété ‘background-attachement’ possède 2 valeurs:

background-repeat: scroll : L’image d’arrière-plan peut défiler

background-repeat: fixed : L’image d’arrière plan est fixée.

L’exemple précédent redevient:

Code:

body {  background-color: #FFFF00;

  background-image: url(‘’im.jpg’’);

  background-repeat: no-repeat;

  background-attachment: fixed;

}

Les arrière-plan - V:

La propriété ‘background-position’ définit l’emplacement de l’image d’arrière-plan par rapport à la page.

Par défaut, une image d’arrière-plan est située en haut à gauche.

La propriété ‘background-position’ pocède comme valeur les coordonnées (X,Y) de l’emplacement de l’image d’arrière-plan.

Exemple:

background-position: right top : L’image est située en haut à droite.

background-position: 4cm 2cm : L’image est située à 4cm de la gauche et 2cm du haut de la page.

background-position: 50% 50% : L’image est centrée sur la page.

Comme vous pouvez le constater, les valeurs peuvent être exprimées en pourcentage, en cm, en px (pixels) ou encore en utilisant les mots-clés ‘top’,’bottom’,’center’,’left’ ou ‘right’.

Les arrière-plan - VI:

La propriété ‘background’ est un raccourci pour toutes les propriétés énumérée précédemment. En effet, au lieu d’exprimer l’élément <body> de la façon:

Code:

body {  background-color: #FFFF00;

  background-image: url(‘’im.jpg’’);

  background-repeat: no-repeat;

  background-attachement: fixed;

  background-position: 50% 50%

}

On peut raccourcir la syntaxe et on aura:

Code:

body {

  background: #FFFF00 url(‘’im.jpg’’) no-repet fixed 50% 50%;

}

Cascading Style Sheets CSS

مواضيع مشابهة:

abdelouafi

Administrator

Attachments

مواضيع مشابهة: