Les feuilles de style cours complet


Télécharger Les feuilles de style cours complet

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

Télécharger aussi :


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  :

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 :

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 placées entre les tags et .

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 et , 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 pageXHTML
  • 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 fichierCSS 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 :



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 :

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

Code CSS :




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 :


Ce paragraphe est de couleur verte.

 


Ce paragraphe est de couleur rouge.

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 :

Ce titre est coloré en vert

 


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

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 :


Ce paragraphe est une remarque.

 


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

 


C'est un paragraphe normal.

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 :

un exemple d'id

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 :

retour à test-id

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
}

Un titre h1 en vert

 

Un titre h2 en vert aussi


...

Un titre h6 en vert aussi

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 :

Un id avec le même style

 

Un titre avec le même style

 

Un paragraphe avec le même style

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 :

Application de 3 classes pour le titre

 

On n'applique que deux styles au paragraphe : .vert et .gras.

 

Et là, c'est un paragraphe avec un seul style. Donc une seule classe : .vert.

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>

On veut savoir quel style sera appliqué au contenu de la balise

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 :



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



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'..

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.

.. ... ...

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> :

Ce paragraphe s'affiche en rouge, et en gras.

test

Ce paragraphe s'affiche en vert parce que le style de classe est prioritaire par rapport au style standard de la balise p.

Ce paragraphe s'affiche aussi en gras rouge.

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 :

C'est la dernière définition qui sera prise en compte.

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 :


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

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 :




Priorité des balises






Ce paragraphe suit le style externe.

 


Ce paragraphe suit le style interne.



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

Les unités de mesure

La spécification de certaines valeurs en CSS nécessite l'utilisation d'un certain nombre d'unités de mesure. Cette notion est importante pour que l'on ne s'y perde pas nous-mêmes dans nos spécifications.

Il y a plusieurs façons d'indiquer des valeurs en CSS et en fonction de celles-ci, on utilise différentes unités de mesure. Pour spécifier une valeur en CSS on l'exprime parfois juste avec des termes en anglais.

Parfois il est jugé utile d'employer des valeurs numériques pour être plus précis. En général, les propriétés en CSS prennent le plus souvent un des cinq types de valeurs suivantes :

  • Mots-clés: Par exemple : bold
  • Valeurs en pourcentage: % (par exemple 50%)
  • Couleurs: #RRVVBB, #RVB, rgb, mot clé (par exemple #D9BB7A, #C9B, red)
  • Valeursde longueur : Par exemple : 1cm

Dans ce chapitre, nous allons nous intéresser surtout aux valeurs de longueur. Quant aux autres valeurs, on va en parler très prochainement dans les tutoriels suivants. Il faut tout simplement les noter quelque part pour l'instant.

Les valeurs de longueur

Les valeurs de longueur sont données en valeur numérique. Pour cela, il y a deux sortes d'unités :

  • unités absolues : in, mm, cm, pt, pc
  • unités relatives : em, ex, px

Les unités de longueur absolues

Les unités absolues ont un certain rapport entre elles comme l'indiquent les valeurs suivantes :

  • cm ( centimeter = 1cm = 10 mm )
  • in ( inche = 1in = 2.54 cm )
  • mm ( millimeter )
  • pc ( pica = 1pc = 12pt )
  • pt ( point = 1pt = 1/72 in )

Par contre, elles n'ont pas de rapport avec le contexte, avec le reste du document. Nous allons voir maintenant les unités de longueur relatives

L'unité em

L'unité em se rapporte à la taille de la police. Avec elle on peut affecter une mesure relative à la taille de police de l'élément parent. Elle permet d'avoir des feuilles de style plus facilement adaptables d'un média à un autre. Les nombres décimaux sont autorisés, mais il faut tout simplement remplacer la virgule par un point. Cette valeur em est utilisable pour d'autres propriétés acceptant la mention de longueur.

L'unité ex

L'unité ex est utilisée souvent pour exprimer la hauteur des caractères. Le point de référence est la hauteur des minuscules souvent appelée hauteur "x" lowercase. En d'autres termes, dans le cas où la taille est donnée avec une unité "ex", celle-ci est alors mesurée par rapport à la hauteur de la minuscule x de l'élément parent.

Tout comme l'unité em, cette unité est utilisée pour toutes les propriétés acceptant la mention de longueur. Toutefois, la plupart des navigateurs ont encore une certaine hésitation à traduire correctement cette valeur.

L'unité px

L'écran d'un ordinateur ou moniteur est formé par plusieurs petits "carrés". Ces carrés définissent la résolution ou densité de l'écran en pixels d'affichage selon l'unité de sortie, c'est-à-dire l'écran de l'ordinateur. L'unité px qui veut dire pixel correspond à un de ces petits carrés.

C'est en fait le plus petit élément de la résolution d'écran. Cette unité peut être utilisée pour toutes les propriétés acceptant les mentions de longueur.

Comment mettre en forme les polices de caractères ?

En parcourant les exemples des tutoriels précédents, vous avez dû vous apercevoir que l'on a souvent utilisé des propriétés telles que font-size, font-family, color etc. Pour autant, on n'a pas encore expliqué ce que cela signifie exactement. Dans les chapitres qui suivent, on essaiera de voir tout cela plus en détail.



Commençons d'abord par tout ce qui concerne la typographie : les fonts, ou polices de caractères. La mise en forme nous permet d'avoir des polices de caractère personnalisées à notre goût. Choix de la police

Le pouvoir de l'informatique nous permet d'avoir une multitude de polices de caractères qui ont chacune leur forme. Parmi les standards on distingue par exemple les times new roman, arial, etc Dans ce cas, il ne vous reste plus qu'à choisir les polices selon votre préférence. Ensuite, vous spécifierez votre choix dans la feuille de style en utilisant la propriété font-familly comme suit :

Code CSS :

p {
font-family: "Agency FB"; /* font fantaisiste ;) */
}

Cependant, il ne faut surtout pas oublier que vos pages web seront visitées. La police ne s'affichera pas forcément telle que vous souhaiteriez la voir apparaître sur l'écran de l'internaute. En effet, Il se peut que la police que vous avez spécifiée n'existe pas sur le système du visiteur. Vous avez donc la possibilité de lui proposer d'autres choix alternatifs.

Code CSS :

p {
font-family: "Agency FB", Calibri, "Californian FB", serif
}

Le navigateur essaiera d'abord de mettre la police en Agency FP. Si ne le visiteur ne l'a pas, il essaiera de mettre la Calibri et ainsi de suite. Il faut séparer par une virgule la liste des polices. Si le nom de la police contient un espace, il faut le mettre entre guillemets comme "Californian FB".

En principe, on a intérêt à mettre en tout dernier une police standard. C'est-à-dire une police dont on est certain qu'elle existe partout. Comme ça on est sûr que l'affichage sera toujours correct, au moins dans cette police. Il ne faut néanmoins pas oublier de tester l'affichage dans cette police également. Il y a deux familles distinctes

  • famille classique : arial, times new roman, etc.
  • famille générique : serif, sans-serif,etc.

La plupart du temps, on met les polices de la famille générique au moins en dernier, particulièrement les serifs. Style de la police

Comme son nom l'indique, la propriété font-style permet de définir le style de la police. Grâce à cette propriété, on peut avoir des polices en italique ou normale.

Code CSS :

.normale {
font-style:normal
}

.italique {
font-style:italic
}

Code XHTML :

Police normale

 

Police italique

Mettre en gras en CSS

La mise en gras en CSS permet de mettre du poids sur les polices. D'où le nom de la propriétéCSS font-weight .Cette propriété définit l'épaisseur de la police. On l'utilise souvent dans les titres, dans les paragraphes, etc Elle peut prendre la valeur bold pour gras ou normal pour le normal (pas gras)

Code CSS :

.normale {
font-weight:normal
}

.bold {
font-weight:bold
}

Code XHTML :

pas gras

 

Police gras

Il est possible également de définir un poids avec un attribut numérique : 100, 200... 900. 400 correspond alors à 'normal', alors que '700' correspond au 'gras' traditionnel. L'échelle va de 100 en 100.

Taille de la police avec différentes valeurs en CSS

En CSS, on a différentes façons de définir la valeur de la taille d'une propriété. Pour définir la taille de la police on utilise la propriété font-size.

Il y a deux façons de spécifier les valeurs de la taille de la police. On peut donner une valeur soit en la spécifiant par des mots clés, soit en indiquant sa valeur numérique à l'aide des unités de mesure que l'on a vues tout à l'heure.

Spécifier la taille par des mots clé

On peut donner une valeur relative de la taille par rapport à celle de l'élément parent. Les mots-clés utilisés sont :

  • smaller
  • medium
  • larger

Sachant que sur Internet Explorer, la police par défaut est medium. Lorsque l'on spécifie ainsi la taille, la valeur de base est alors le navigateur de l'internaute.

Code XHTML :


Police small

Police medium

Police large

On peut spécifier de façon absolue la taille de la police tout en utilisant toujours des mots clés comme précédemment. Sauf que donner la valeur absolue consiste à juste dire si c'est petit, moyen ou grand sans spécifier la taille exacte et sans donner une référence. Les mots clés possibles par ordre croissant de la valeur sont :

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Code CSS :


Police xx-small

Police x-small

Police small
 
Police medium

Police large

Police x-large

Police xx-large

En termes de taille, les polices fonctionnent comme les tee-shirts. Il y en a pour toutes les tailles, il y a juste à employer le mot clé convenable et vous trouvez facilement ce dont vous avez besoin. Spécifier la taille de la police grâce aux valeurs numériques

La taille de la police peut aussi être indiquée en pourcentages par rapport à celle de l'élément parent. La taille de l'élément parent sera servira donc de référence pour le calcul de la valeur de la taille de l'élément. Pour cela, on indique la valeur numérique et après on met le signe % tout simplement.

Code CSS:

p.taille150{font-size: 150%}
p.taille130 {font-size: 130%}
p.taille100{font-size: 100%}

Code XHTML :

taille 15O pourcent

 

taille 130 pourcent

 

taille 100 pourcent

 

Taille normal

On peut aussi spécifier la taille de police de façon absolue mais en utilisant des valeurs numériques exactes. Autrement dit, la taille spécifiée est indépendante de la table des tailles de police du visiteur.

Code CSS :

p.taille12pt{font-size: 12pt;}
p.taille50px {font-size: 50px;}
p.taille2mm{font-size: 2mm;}

Code XHTML :

taille 12 point

 

taille 50 pixel

 

taille 4mm

La syntaxe de définition est la même que celle la précédente sauf qu'à la place du signe % on met l'unité de mesure. Il suffit donc de donner la valeur numérique, suivie de l'unité de mesure em, ex, px, in, cm, mm, pc, pt (voir le cours sur l'unité de mesure).

En revanche, il ne faut pas mettre de valeurs négatives. Ne pas mettre non plus d'espace entre la valeur et l'unité (16 px ne marche pas toujours)

Mettre des textes en majuscules et minuscules

Les propriétés CSS permettent de mettre automatiquement des textes en majuscules dans un texte. Pour cela, il y a 2 sortes de propriétés.

Premièrement, voyons la propriété font-variant. Elle peut prendre 2 valeurs différentes :

  • small-caps qui donnera un texte en petites majuscules
  • normal qui est la valeur par défaut et donnera un texte normal

Code CSS :

p.normale {
font-variant: normal;
}

p.petite {
font-variant: small-caps;
}

Code XHTML :

texte normale

texte en capitale

Il y a aussi une autre propriété CSS qui permet de forcer les majuscules: text-transform d'un texte. Elle peut prendre ces valeurs :

  • none : ne met aucun effet sur le texte
  • lowercase : met toutes les lettres de chaque mot en minuscules
  • uppercase : met toutes les lettres de chaque mot en majuscules
  • capitalize : met uniquement la première lettre de chaque mot en majuscule


139