Création de site internet : Créer son site internet
les feuilles de style (Cascading Style Sheet)
Le but des feuilles de styles est de regrouper sur un seul endroit toute la mise en forme de la page web, ceci afin d'alléger le code source qui ne devrait contenir idéalement que le texte brut. Dans le chapitres des ancres et des liens, nous avons vu que le contenu d'une page web, en particulier d'un frame dans l'exemple qui a été développé, pouvait être ventilé dans plusieurs fichiers sources. Regrouper dans un seul endroit la mise en page permettrait de faciliter la maintenance du site puisque la modification peut se faire dans un seul fichier. De plus, certaines balises ne seront plus supportées par les standards de programmation web comme <FONT>, il est donc recommandé de définir la police au travers d'une feuille de style.
Les CSS reposent sur le principe d'héritage. On peut créer en cascade un jeu de mises en forme à partir d'un jeu préalablement défini, le jeu fils héritant des propriétés du jeu père. Une classe est un jeu de propriétés qui peut être transmis par héritage à une balise dont l'utilisation dépend directement d'une autre balise. Par exemple, nous avons vu précédemment que pour créer un tableau, la balise <TR> dépendait de la balise <TABLE>, puisqu'elle ne peut être correctement interprétée par le navigateur comme une ligne de tableau si on n'indique pas clairement où commence et où finit le tableau. Ainsi, la balise <TABLE> est une balise mère et la balise <TR>, une balise fille. À son tour, la balise <TR> est une balise mère pour la balise <TD>. Surcharger une classe signifie que l'on va ajouter des propriétés aux balises filles qui vont hériter de la classe de la balise mère.
Il y a deux manières de définir les CSS :
o Dans l'en-tête du document Web : entre les balises <STYLE> et </STYLE> :
Ce code signifie que le texte compris entre les balises <BODY> et </BODY>, ainsi qu'entre les balises <A> et </A>, sera affiché avec la police Verdana et une taille de 22 pixels.
o Dans un fichier à part : si on veut utiliser ce style pour plusieurs page web, on peut ouvrir le bloc note, copier le style de cette façon :
body, a {
font-family: Verdana;
font-size: 22px;
et enregistrer le fichier sous « defaut.css ». Puis, dans l'en-tête de la page web, entre les balises <HEAD> et </HEAD> :
<head>
……
<link rel="stylesheet" type="text/css" href="defaut.css">
……
</head>
Cette manière d'appeler les feuilles de style est très utile lorsque l'on utilise les frames, il suffit simplement d'insérer ce code dans chaque fichier HTML.
Nous allons surcharger cette mise en forme pour les hyperliens définis par balises <A> et </A> (voir chapitre 7). On souhaite, par exemple, que le texte en hyperlien change de couleur quand la souris passe dessus mais que les liens visités soient de la même couleur que ceux qui ne l'ont pas été. Cette balise contient déjà des enfants, c'est à dire des propriétés dépendantes :
o :link - lien par défaut
o :visited - lien déjà visité
o :hover - lien au survol du curseur de la souris
o :active - lien actif
Les liens apparaissent en gris et soulignés et quand la souris survole un lien, celui-ci devient noir et le soulignage disparaît. La police et la taille restent toujours les mêmes.
o On peut définir une mise en forme personnalisée qui peut être reprise ou surchargée par plusieurs balises :
.maclasse {
Propriété 1 : valeur 1 ;
}
Si on veut appliquer cette classe à un élément d'une liste, alors il faut écrire <LI class="maclasse">.
o Si on veut surcharger cette classe de nouvelles propriétés à appliquer à l'ensemble des balises enfants, alors il vaut mieux écrire :
.maclasse balise_enfant {
Propriété 2 : valeur 2 ;
}
En appliquant cette classe à une balise parent, la balise enfant héritera automatiquement des propriétés de la balise parent auxquelles s'ajouteront les propriétés définies pour la balise enfant. Dans le cas d'une liste, la balise parent est <UL>. On définit des propriétés spécifiques aux éléments de cette liste, éléments qui utilisent les balises enfants <LI> :
.maclasse li {
Propriété 2 : valeur 2 ;
}
On applique la classe à la balise <UL> :
<ul class="maclasse">
<li>100g de farine </li>
<li>50g de sucre </li>
<li>2 oeufs</li>
</ul>
La balise <LI> aura ainsi les propriétés 1 et 2.
o On veut créer une nouvelle classe uniquement pour les éléments d'une liste, alors la manière convenant le mieux est:
li.maclasse {
Propriété 1 : valeur 1 ;
}
Cette écriture implique aussi d'ajouter à chaque élément <LI class="maclasse">.
Pour terminer le chapitre, voici un exemple qui reprend la mise en page générée avec des frames par l'exemple fourni dans le chapitre des ancres et des liens, mais cette fois ci en n'utilisant que les feuilles de styles. Personnellement, je trouve cette façon de faire plus facile à utiliser et permet au code source d'être beaucoup plus lisible. En effet, cette page n'utilise qu'un fichier au lieu de quatre avec les frames. La mise en page est simplifiée puisqu'elle ne se fait qu'à un seul endroit, de plus, cette page peut être lue par des navigateurs ne supportant pas les frames, notamment ceux utilisés par les handicapés.
<html">
<head>
<title>Frames en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
La propriété font peut être utilisée pour définir plusieurs propriétés à la fois :
P { font: italic bold 12pt/14pt Times, serif }
Spécifie un paragraphe dont la police serait en italique, gras, taille de 12 point et une hauteur de ligne de 14 points.
===============================================
Syntaxe: color: <color>
Valeur par défaut: déterminée par le navigateur
S'applique à: Toutes les balises
La propriété color spécifie la couleur d'un élément, elle va définir par exemple la couleur du texte dans la cellule d'un tableau.
Un élément de niveau bloc est un élément qui peut éventuellement être subdivisé en d'autres blocs, contenir du texte ou des éléments unilignes comme les ancres ou les balises de mise en forme (<FONT>, <B>…). Certains de ces éléments ont une largeur intrinsèque connue comme les images.
INPUT.button { width: 10em }
===============================================
Syntaxe: height: <value>
Valeurs possibles: <length> | auto
Valeur par défaut: auto
S'applique à: élément de niveau bloc
Un élément de niveau bloc est un élément qui peut éventuellement être subdivisé en d'autres blocs, contenir du texte ou des éléments unilignes comme les ancres ou les balises de mise en forme (<FONT>, <B>…). Certains de ces éléments ont une largeur intrinsèque connue comme les images.
La propriété float permet d'aligner le texte autour d'un élément, comme un tableau ou une image. On peut placer une image par exemple à droite, le texte se place automatiquement sur la gauche.
La propriété background pour toutes les proriétés relatives aux arriéres-plan. En voici quelques exemples :
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE { background: #0c0 url(leaves.jpg) non-repeat bottom right }
A value nont specified will receive its Valeur par défaut. For example, in the first three rules above, the background-position property will be set to 0% 0%.
Pour éviter les conflits avec les autres styles, les propriétés background et color devraient toujours être spécifiées ensemble.
Valeurs possibles: left | right | center | justify
Valeur par défaut: Determined by browser
S'applique à: éléments d'un niveau block
La propriété text-align s'applique aux éléments de bloc niveau (P, H1, etc.) pour aligner le texte de l'élément. Quelques exemples :
H1 { text-align: center }
P.newspaper { text-align: justify }
===============================================
Syntaxe: margin: <value>
Valeurs possibles: [<length> | <percentage> | auto ]{1,4}
Valeur par défaut: aucune
S'applique à: Toutes les balises
La propriété margin détermine les marges d'un élément en initialisant une à quatre valeurs, chacune étant soit un pourcentage, une longueur fixe ou la valeur auto. Les pourcentages se réfèrent à la largeur de l'élément, les valeurs fixes peuvent être négatives.
Si quatre valeurs sont données, elles s'appliquent aux marges du haut, de droite, du bas et de gauche. Si une seule valeur est donnée, elle s'applique pour tous les côtés. Si deux ou trois valeurs sont données, les valeurs des côtés manquants sont complétées par celles des côtés opposées.
Voici quelques exemples :
BODY { margin: 5em } /* all margins 5em */
P { margin: 2em 4em } /* top and bottom margins 2em,
left and right margins 4em */
DIV { margin: 1em 2em 3em 4em } /* top margin 1em, right margin 2em, bottom margin 3em, left margin 4em */
La propriété padding est un raccourci permettant de paramétrer les propriétés padding-top, padding-right, padding-bottom, et padding-left.
La propriété padding détermine l'espace entre le bord d'un élément et son contenu en initialisant une à quatre valeurs, chacune étant soit un pourcentage, une longueur fixe ou la valeur auto. Les pourcentages se réfèrent à la largeur de l'élément, les valeurs fixes ne peuvent pas être négatives.
Si quatre valeurs sont données, elles s'appliquent aux marges du haut, de droite, du bas et de gauche. Si une seule valeur est donnée, elle s'applique pour tous les côtés. Si deux ou trois valeurs sont données, les valeurs des côtés manquants sont complétées par celles des côtés opposées.
La propriété border ne peut paramétrer chacun des quatre bords séparément. Elle ne s'applique qu'aux quatre à la fois. Pour définire une des quatre bordures, il y a les propriétés : border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, et border-left-width.
Pour conclure sur cette liste, j'aimerais ajouter une note concernant les couleurs ou les unités.
Une longueur fixe est formée d'un nombre et de deux lettres formant l'unité de mesure, il n'y a pas d'espace entre le nombre et l'unité.
o in (inches; 1in=2.54cm)
o cm (centimeters; 1cm=10mm)
o mm (millimeters)
o pt (points; 1pt=1/72in)
o px (pixel)
o em (hauteur relative d'un élément)
Une couleur s'exprime en mode RVB (Rouge Vert Bleu) et peut être données de quatre manières :
o #rrggbb (ex. #00cc00)
o #rgb (ex. #0c0)
o rgb(x,x,x) avec x un entier compris 0 et 255 (ex rgb(0,204,0))
o rgb(y%,y%,y%) avec y un nombre compris 0.0 et 100.0 (ex. rgb(0%,80%,0%))
Un petit utilitaire gratuit peut vous aider à élaborer les codes couleurs pour le HTML, il s'agit de colorpick (mot clé : colorpick sur Google).
Création de votre site
Gagner de l'argent avec votre site....
les feuilles de style (Cascading Style Sheet)
Annuaire et moteur de recherche
Annuaire de sites adultes
Hébergement
