Cours CSS et PHP

Problème à signaler:

Télécharger



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Ressource de formation complet sur les bases de CSS

...

Pourquoi utiliser CSS ?

Pour mettre des couleurs et modifier la taille d'un texte par exemple, vous mettez peut-être enHTML quelque chose du genre  :

<font size="2" color="#003300">

La forme et le contenu se trouvent donc mélangés, et il vous faudra répéter ces modifications si vous voulez faire pareil ailleurs.

Pour une page, ce n'est pas difficile à réaliser

. Cependant, imaginez si on doit faire cela pour toutes les pages d'un site web. A chaque modification d'un style, il faudra parcourir les lignes de chaque page afin de mettre à jour les définitions de tous les styles. Il deviendra alors rapidement fastidieux de répéter la même chose pour chaque page d'un site web.

Le pire, c'est que si jamais le thème du site change, il nous faudra refaire les mêmes tâches pour chaque page. Non seulement cela consommera énormément de temps, mais cela augmentera d'autant les possibilités d'erreurs.

S'il vous faut faire ça pour le site en entier, n'y a-t-il pas une manière de le faire sans perdre du temps, sans avoir à parcourir les pages une à une ? Les CSS vous permettent de vous épargner cette galère, puisque c'est leur rôle.

Malins comme on est, on sait qu'il y a une certaine uniformité pour toutes les pages d'un site web. Une possibilité envisageable serait donc de grouper ces propriétés quelque part et de les appeler en cas de besoin. Comme ça, on peut très facilement faire des modifications sans perte de temps.

D'où la notion de CSS ou Cascading Style Sheet traduite par feuille de style en cascade.

Cours pour apprendre le CSS

Avant d'apprendre le CSS, il est fortement conseillé d'avoir une notion de base en HTML/XHTML. Pour cela, vous pouvez consulter les tutoriaux XHTML sur ce même site. En ce qui concerne les outils, vous pouvez utiliser les mêmes outils que pour vos documents XHTML.

Vous aurez donc besoin au minimum d'un éditeur de texte comme le bloc-note par exemple. Il y a aussi d'autres logiciels plus spécialisés tel que Notepad ++ ou Dreamweaver qui vous permettront de créer vos styles plus facilement. Le choix vous appartient librement.

A part ça, il vous faut un peu de volonté et que vous vous donniez le temps d'apprendre. Dans ce tutoriel, nous allons aborder plusieurs notions en CSS. Dans un premier temps, nous allons surtout parler des choses basiques telles que la syntaxe de base et la notion de classe.

Ensuite nous allons voir les différentes mises en forme possibles du formatage d'un texte jusqu'à la manipulation des positionnements. Tout ceci, sans oublier d'appliquer le style en mettant en évidence la relation étroite entre XHTML et CSS.

Inclure des styles CSS dans vos pages XHTML

Il existe trois façons de définir une feuille de style. Nous allons voir dans ce tutoriel quelles sont les possibilités pour utiliser CSS dans un document XHTML.

Définition CSS spécifique en ligne

On peut définir individuellement un (ou plusieurs) style(s) pour un mot ou paragraphe de page par exemple. Cela consiste donc à intégrer les styles dans le corps du document XHTML.

Code CSS :

<p style="font-size: 15pt ;" >

L'utilisation de cette méthode revient au même que celle de faire les fonts et présente les mêmes inconvénients. Elle ne semble intéressante que lorsque le style que vous aller définir est vraiment spécifique à cet endroit. Autrement dit, au cas où vous pensiez réutiliser le même style à un autre endroit, il vaut mieux utiliser les méthodes suivantes.

Méthode CSS interne

Cette deuxième méthode consiste à mettre le style dans l'entête de la page. La syntaxe est incorporée à l'entête du fichier XHTML entre les balises <style type="text/css"> .... </style> placées entre les tags <head> et </head>.

Le style ainsi défini peut être appliqué à tous les endroits de la page, sans avoir à redéfinir les propriétés. Néanmoins, cela nécessite d'inclure le code du style à l'entête de chaque fichier, et de le répéter pour tous les fichiers. Donc ce n'est pas encore optimal.

Méthode CSS externe

En linking, vous utilisez un fichier séparé, indépendant du code XHTML, et qui porte l'extension .css. ( ou n'importe quelle autre extension, celle-ci présentant l'avantage de savoir qu'il s'agit d'un fichier de feuilles de style.).

Ce fichier contient tous les styles CSS utilisés dans toutes les pages. Vous placez une simple ligne (toujours la même) qui servira à appeler le fichier .css entre les tags <HEAD> et </HEAD>, et votre fichier est opérationnel.

Cette méthode présente divers avantages par rapport au deux précédentes :

  • Les définitions de style ne sont faites qu'une seule fois, à un seul endroit
  • Cela vous réduit considérablement la taille de votre page XHTML
  • Les navigateurs peuvent mettre en cache le contenu de la feuille de styles qui s'appliquera sur toutes les pages du site. Une fois cette mise en cache effectuée, le navigateur n'aura plus qu'à charger le contenu de la page. D'où une forte réduction du temps de transfert.
  • Cela facilite la maintenance. Vous n'avez qu'à manipuler un seul fichier lorsque vous voulez modifier un tel ou tel aspect de votre site.
  • Cela donne une meilleure structuration de votre page puisque que le contenu lui-même est séparé de la forme.
  • Il est possible de créer des règles d'appel à ce fichier : Si c'est un "ordinateur" (ou plus exactement un "écran") qui appelle la page alors on lui envoie le fichier CSS destiné à l'écran. Si c'est l'imprimante, alors on lui envoie le fichier CSS pour l'imprimante, etc..

Et il est donc possible, comme son nom l'indique (Cascade Stylesheet), de définir des styles "en cascade", en fonction des pages, et de l'environnement (écran, imprimante, flux RSS, etc...).

Comment attacher une feuille de style à un document XHTML :

Dans un fichier style.css, vous mettez par exemple le contenu de votre style :

Code CSS :

menu{

font-size :12px ;

font-weight :900 ;

}

Dans un premier temps il est important que vous compreniez le principe et l'organisation des fichiers. Pour l'instant ne vous inquiétez pas si vous n'arrivez pas à traduire ce qui est écrit dans ce fichier : Patience. Ensuite vient le moment de l'attacher au document XHTML.

Dans l'entête de chacun de vos fichiers, il y a juste à rajouter une ligne pour inclure le fichier style.css :

Code CSS :

<head>

<link href="/style.css" rel="stylesheet" type="text/css" media="all">

</head>

Il faut donc spécifier dans href le fichier à inclure. L'attribut média permet de spécifier le type de média auquel le style sera appliqué. Le média peut aussi bien être l'ordinateur qu'un téléphone portable, une imprimante, etc...

Vous avez peut être vu quelque part une autre syntaxe comme ceci, toute aussi applicable :

Code CSS :

<style type="text/css">

@import url(style.css) ;

</style>

Il est possible, comme nous l'avons vu plus haut, d'incorporer plusieurs lignes de style, comme ceci (principe des 'cascades' ) :

Code CSS :

<head>

<link href="/style-1.css" rel="stylesheet" type="text/css" media="all">

<link href="/style-2.css" rel="stylesheet" type="text/css" media="print">

</head>

Cours pour apprendre la syntaxe CSS de base

Une feuille de style contient la définition de différentes règles CSS. C'est en appliquant ces règles qu'on peut mettre en forme les éléments, ou plus concrètement leur donner du style. Une règleCSS est divisée en 2 parties :

  • le sélecteur
  • le bloc de déclaration

C'est le sélecteur qui détermine ou identifie les parties du document auxquelles sera appliqué le style. Il sert à sélectionner l'élément que l'on a envie de mettre en forme. Le bloc de déclaration, quant à lui, contient les déclarations des styles à appliquer. Il est toujours mis entre 2 accolades :

Code CSS :

body

{

color:red

}

Ici, body est le sélecteur alors que le bloc de déclaration est la zone délimitée par les accolades. Autrement dit, les styles définis entre accolades seront appliqués à la balise body.

Le bloc de déclaration CSS

Dans un bloc de déclaration, on liste tous les styles que l'on veut utiliser pour l'élément sélectionné. Ce bloc est composé de déclarations qui elles-mêmes contiennent une propriété et une valeur. La propriété correspond à l'attribut qu'on souhaite changer. A chaque propriété peut être affectée une valeur. Une propriété et une valeur sont toujours séparées par le symbole "deux points" (:).

Reprenons l'exemple de tout à l'heure, tout en regardant bien le bloc :

Code CSS :

body

{

color:red

}

color est une propriété qui spécifie la couleur, red est une valeur de la propriété qui signifie rouge. Le style défini sous entend qu'il faut donc mettre la couleur des textes de la balise body en rouge. Si la valeur est composée de plusieurs mots, il serait mieux de le mettre entre guillemets comme dans cet exemple :

Code CSS :

body

{

font-family: "Times new roman"

}

Un bloc peut contenir plusieurs déclarations. Dans ce cas, les déclarations sont obligatoirement séparées par des points virgules (;).

Code CSS :

body

color:red ;

font-family: "Times new roman";

}

Il est d'usage d'écrire les déclarations ligne par ligne. Sachant que c'est facultatif, il est tout à fait possible de les écrire sur la même ligne. C'est juste une question de lisibilité. On peut omettre le point virgule sur la dernière déclaration. Il vaut mieux quand même le mettre partout afin d'éviter les oublis.

Le CSS n'est pas sensible à la casse. C'est-à-dire que cela ne change rien si vous écrivez 'MENU', ou 'MeNu' au lieu de 'menu'. Cependant, il est plus convenable de tout écrire en minuscules.

Les commentaires en CSS

Il est très conseillé de mettre des commentaires dans votre code CSS. L'avantage de les mettre est qu'ils permettent à d'autres utilisateurs de comprendre votre code facilement en cas de travail en groupe par exemple. Sinon, c'est aussi dans votre intérêt personnel. Si vous décidez de reprendre le code après un long moment sans l'ouvrir, les commentaires vous aideront beaucoup à vous rafraîchir la mémoire.

De plus, les commentaires permettent de structurer le code et le rend plus lisible. Délimités par slash étoile et étoile slash, les commentaires ne sont pas interprétés par les navigateurs. Vous pouvez mettre tout ce que vous voulez dedans, ils n'apparaîtront pas sur l'écran. N'ayez donc aucune crainte, ils n'ont aucune influence sur l'affichage des contenus.

Code CSS :

/*commentaire */

Par contre, il ne faut jamais les mettre en imbriqué comme suit :

Code CSS :

/* commentaire

/* encore un commentaire */

A retenir dans ce tutoriel

Afin que nous puissions partir du bon pied, voici les essentiels à retenir :

  • Il faut toujours bien fermer { .... } les "accolades" quand on définit des blocs
  • N'hésitez pas à mettre une déclaration par ligne, pour plus de clarté
  • Ne jamais oublier d'utiliser les " : " deux-points pour séparer la propriété de sa valeur
  • Mettre un " ; " point-virgule en fin des blocs en cas de plusieurs déclarations
  • Placer les commentaires entre /*et */ , ne jamais les emboîter

Les sélecteurs de type en CSS

Un sélecteur de type est un des moyens les plus simples pour appliquer un style. Il nous permet d'affecter un style à un élément XHTML. En spécifiant son nom, vous pouvez appliquer directement le style à une balise. Pour appliquer un style à la balise p par exemple on peut faire comme ceci :

p{

color : green

}

Les classes CSS

Dans le sélecteur de type, on n'a utilisé qu'un seul bloc de déclaration pour les paragraphes. Mais supposons que vous voulez définir 2 types de paragraphe : des paragraphes en vert et des paragraphes en rouge. Vous ne pouvez pas définir ces deux propriétés dans un même style. Cela est réalisable avec les classes. La première étape sera de définir 2 classes. Les noms des classes sont donc : .vert et .rouge et sont toujours suivis d'un point.

Code CSS :

p.vert{

color:green

}

P.rouge {

color : red

}

Pour appliquer ces styles aux documents XHTML, il suffit de mettre le nom de la classe comme valeur de l'attribut class.

Code XHTML :

<p class="vert">

Ce paragraphe est de couleur verte.

</p>

<p class="rouge">

Ce paragraphe est de couleur rouge.

</p>

Nous pouvons aussi omettre le nom de la balise ( 'p' ) dans le sélecteur pour définir par exemple un style qui sera utilisé par d'autres balises XHTML. Dans l'exemple suivant, tout élément ayant comme classe .vert sera coloré en vert.

Code CSS :

.vert{

color:green

}

Code XHTML :

<h1 class="vert">Ce titre est coloré en vert</h1>

<p class="vert">

Tout comme le titre ci-dessus, ce paragraphe est aussi de couleur verte.

</p>

L'intérêt d'utiliser les classes c'est de pouvoir regrouper des propriétés de style dans une classe et d'appliquer ces styles à différents éléments, et en différents endroits. Définissons par exemple trois groupes de propriété :

  • Premier groupe de propriété ou style : centré en bleu, avec des textes plus petits
  • Deuxième groupe de propriété ou style : aligné à droite en rouge, avec des textes plus grands
  • Troisième groupe de propriété ou style : normal en noir, avec des textes moyens.

Et mieux encore nous avons la possibilité de donner n'importe quel nom à notre classe à condition de bien respecter les règles de syntaxe (il ne doit pas contenir d'espace). Profitons alors de cette possibilité et donnons à nos classes des noms significatifs que l'on pourra retenir facilement.

Nous voulons par exemple assigner : aux remarques, le premier groupe de style, aux notes, le deuxième groupe de style et aux paragraphes normaux, le troisième groupe de style. On va créer trois classes :

  • remarque pour dire qu'il s'agit d'une remarque
  • note pour dire que c'est 'à noter'
  • normal pour dire qu'il s'agit d'un paragraphe normal

Code CSS :

.remarque {

font-size:small;

text-align:center;

color:blue;

}

.note {

font-size: large;

text-align:right;

color:red;

}

.normal {

font-size: medium;

}

Code XHTML :

<p class="remarque">

Ce paragraphe est une remarque.

</p>

<p class="note">

Ce passage est à noter. C'est quelque chose de très important donc à retenir.

</p>

<p class="normal">

C'est un paragraphe normal.

</p>

Les 3 éléments ont bien la même balise HTML ('p'), mais des styles différents, qui les présentent de manière différente.

Les id en CSS

Contrairement aux classes, un id s'applique à un objet unique. Il n'est pas possible d'avoir deux éléments de même id dans une même page. Autrement dit, si un élément XHTML possède déjà un id, cet id ne peut plus être utilisé pour un autre élément XHTML.

Alors qu'il est tout à fait possible que deux éléments utilisent la même classe, bien au contraire. La définition d'un ID en CSS est identique à celle d'une classe, excepté le dièse qui précède le sélecteur :

test-id {

color :green ;

}

Comme pour la classe, pour appliquer le style à une balise div, on spécifie le nom de l'id comme valeur de l'attribut id :

<div id="test-id" >un exemple d'id</div>

Rappel : Il ne peut y avoir qu'un seul élément dont l'id est test-id dans la même page. On utilise généralement l'id pour placer des blocs dans une page (menu droit, menu gauche, contenu principal, etc...) . L'id peut aussi servir d'ancre nommée. Cela veut dire que si on est en bas de page, et qu'on veut y retourner rapidement en haut, il suffit de faire un lien sur la même page. L'id spécifie l'endroit où l'on doit se rendre.

Rappel pour renvoi vers une ancre :

<a href="#test-id">retour à test-id</a>

Pour plus d'explications, voir le chapitre sur les liens dans le tuto XHTML.

Comment réaliser un groupement de sélecteurs ?

On peut grouper les sélecteurs. Pour cela, il faut juste les lister et séparer les éléments de la liste par une virgule. Dans l'exemple ci-dessous on a groupé tous les titres. Cela permet d'avoir des titres qui ont tous la couleur verte

h1,h2,h3,h4,h5,h6{

color: green

}

<h1>Un titre h1 en vert</h1>

<h2>Un titre h2 en vert aussi</h2>

...

<h6>Un titre h6 en vert aussi</h6>

On peut même grouper des sélecteurs de types différents. C'est-à-dire qu'il est possible de définir un style à plusieurs éléments, classes, identifiants. Comme tout à l'heure, il suffit de lister les éléments en les séparant par une virgule.

Code CSS :

h1, .uneclasse, #idspecial {

color : red;

font-weight : bold;

}

Ainsi, Ies éléments h1, les classes uneclasse et l'identifiant idspecial auront les mêmes styles : colorés en rouge et mis en gras.

Code XHTML :

<div id="idspecial">Un id avec le même style</div>

<h1>Un titre avec le même style</h1>

<p class= "uneclasse">Un paragraphe avec le même style</p>

Et l'inverse alors ?

Un élément XHTML peut avoir plusieurs classes. On peut ainsi combiner les styles comme on veut.Pour appliquer plusieurs classes à un élément, la syntaxe est presque la même que celle définie ci-dessus. Il suffit de mettre comme valeur de l'attribut class la liste des noms des classes séparés par un espace.

Code CSS :

.vert {

color:green;

}

.centre{

text-align : center;

}

.gras {

font-weight:bold;

}

.fondjaune {

background-color:yellow;

}

Code XHTML :

<h1 class="vert centre fondjaune">Application de 3 classes pour le titre </h1>

<p class="vert gras">On n'applique que deux styles au paragraphe : .vert et .gras.</p>

<p class="vert">Et là, c'est un paragraphe avec un seul style. Donc une seule classe : .vert.</p>

Comment fonctionne l'héritage en CSS ?

On a pu voir que chaque élément XHTML peut avoir chacun soit sa propre classe, soit son propre style. Mais les balises XHTML peuvent aussi s'emboîter les unes dans les autres.

Dans ce cas, comment le navigateur effectue t-il la mise en forme ? En d'autres termes, dans le cas d'emboîtement des balises comme celui-ci, comment cela se passe t-il :

Code XHTML :

<body class="stylebody">

<p class= "stylep"> </p>

< /body>

On veut savoir quel style sera appliqué au contenu de la balise <p> qui fait aussi partie du contenu de la balise body. C'est là qu'intervient la notion d'héritage. On appellera donc "parent", le style du niveau supérieur (le stylebody dans notre cas) et enfant les styles de la balise en dessous (stylep dans notre cas). La balise "body", avec ses différents styles, se voit hériter des styles de la classe transmise.

En l'occurrence "stylebody". Les éléments de "body", comme le paragraphe "p" par exemple, seront donc conformes au style de "body", auquel on aura appliqué le style de la classe "stylebody". En tant qu'enfant de body, de stylebody, et de p, , stylep hérite des propriétés de ses parents. S'il y a deux valeurs différentes pour la même propriété, l'enfant garde la sienne, sinon on remonte l'arborescence pour connaître le style associé. Voyons ça plus explicitement à l'aide d'un exemple.

Code CSS :

.stylebody {

font-size: 10pt;

font-family: arial, verdana, sans-serif;

color: green;

text-align: left;

background-color: #FFFFFF ;

}

.stylep {

background-color:yellow;

font-style:italic;

text-align:center;

}

Code XHTML :

<body class="stylebody">

<p>Voici un paragraphe sans style, il hérite donc entièrement de body, puis de stylebody .</p>

<p class= "stylep">Un paragraphe avec style, qui hérite encore de body et de stylebody, mais qui garde ses propres styles, définis par la classe ‘stylep'..</p>

Explication de l'exemple

Dans le paragraphe avec style les 3 propriétés de la balise body sont gardées:

  • font-size: 10pt ;
  • font-family: arial, verdana, sans-serif
  • color: green ;

Les 2 autres propriétés : text-align: left et background-color: #FFFFFF ont été remplacées respectivement par text-align:center et background-color:yellow qui sont des propriétés propres à lui-même. Et il a une autre propriété qu'il n'a pas hérité mais qui lui est aussi propre font-style:italic;

Le tableau suivant nous résume la fusion des styles par héritage dans cet exemple.

Fusion des styles par héritage

Classes Styles

Styles dans .stylebody font-size: 10pt ;

font-family: arial, verdana, sans-serif ;

color: green ;

text-align: left ;

background-color: #FFFFFF ;

Styles dans le .stylep font-style:italic;

text-align:center;

background-color:yellow;

Styles appliqués au paragraphe de classe stylep par héritagefont-style:italic; text-align:center;

background-color:yellow;

font-size: 10pt ;

font-family: arial, verdana, sans-serif ;

color: green ;

Attention, le principe de l'héritage n'est pas toujours valable. C'est applicable pour certains styles comme la couleur par exemple. Cependant, il y a des exceptions pour certains propriétés des éléments de type bloc tels que padding, marging...

Ces propriétés ne se transmettent pas aux balises emboîtées. Autrement dit, un élément de type en-ligne emboités dans un type bloc et n'ayant pas de marge n'héritera jamais des marges de son conteneur. Néanmoins, la notion d'héritage est très pratique aux niveaux des CSS donc ça valait la peine de l'avoir étudié.

Comment est géré l'ordre de priorité des styles ?

Priorité entre les classes et les sélecteurs de type

Dans l'exemple suivant on applique la couleur verte et la mise en gras à toutes les balises p.

Code CSS> :

p {

color:red;

font-weight:bold;

}

.pspecial {

color:green;

}

Au niveau du code XHTML, voyons ce qui se passe si on utilise la classe .pspecial dans une balise p particulier.

Code XHTML> :

<p> Ce paragraphe s'affiche en rouge, et en gras.</p> </p> <p class=".pspecial">test<p> Ce paragraphe s'affiche en vert parce que le style de classe est prioritaire par rapport au style standard de la balise p. <p> Ce paragraphe s'affiche aussi en gras rouge. </p>

Remarquons que tous les paragraphes sont colorés en rouge sauf un. Il s'agit du paragraphe où l'on a appliqué le style .pspecial. Par contre, le paragraphe en question a gardé la mise en gras. Les propriétés des deux sélecteurs (p et .pspecial) se combinent donc entre elles.

S'il y a des propriétés communes (color par exemple), c'est la valeur définie dans la classe (color:green) qui sera considérée. En d'autres termes, les classes (.pspecial) sont prioritaires par rapport aux styles standards définis à l'aide des sélecteurs de type (p)

Priorité entre deux classes de même nom

Si deux classes de même nom sont définies avec des propriétés différentes, c'est celle de la dernière classe définie qui sera prise en compte.

Code CSS :

.pspecial {

color:red;

}

.pspecial {

color:yellow;

}

Lorsqu'on utilise la classe .pspecial dans une balise p par exemple, le paragraphe sera coloré en jaune mais pas en rouge puisque c'est la dernière définition qui est prioritaire.

Code XHTML :

<p class="pspecial"> C'est la dernière définition qui sera prise en compte. </p>

Priorité entre les classes et les id

Définissons maintenant deux types de styles, un à l'aide d'un id et un autre en utilisant une classe.

Code CSS :

#unid {

color:blue; }

.uneclasse

{

color:red;

font-weight:bold;

}

Code XHTML :

<p id="unid" class="une-classe">

Eh voilà, c'est l'id qui emporte.

</p>

Le paragraphe s'affiche en bleu puisque c'est le style de l'id qui est prioritaire sur la classe. Priorité entre les styles internes et la feuille externe css

Par exemple, vous réunissez tout votre style dans une feuille de style CSS. Dans cette feuille de style, vous spécifiez que tous les paragraphes des pages XHTML auxquelles sera attachée cette feuille de style auront une taille de police de 20px.

Pour une raison ou pour une autre, vous auriez besoin de définir un autre style qui est local à votre page tout en rattachant la feuille de style externe. Il se peut que dans cette page, il y ait un paragraphe spécial qui doit être spécifié en taille plus grande. Dans ce cas c'est le style défini en interne qui est prioritaire par rapport au style externe.

Voici par exemple le code dans la feuille de style externe qu'on va nommer feuille.css :

Code CSS :

p {

font-size: 20px;

}

Voici la page XHTML à laquelle on rattache la feuille de style feuille.css :

Code XHTML :

<html xmlns="…/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Priorité des balises</title>

<style type="text/css">

p.italic {

font-style:italic;

font-size: 40px;

}

</style>

</head>

<body>

<p>

Ce paragraphe suit le style externe.

</p>

<p class="italic">

Ce paragraphe suit le style interne.

</p>

</body>

</html>

Le style en interne p.italic est appliqué parce qu'il est prioritaire par rapport au style externe.


96