Feuilles de style CSS ::..

Depuis la normalisation HTML 4.x, l'introduction des feuilles de style a été normalisée. puis, avec la normalisation HTML5, beaucoup de balises ne sont plus que renseignées via la feuille de style CSS. L'ensemble des navigateurs sont maintenant aux normes html5 et ccs.

Les feuilles de style sont donc à utiliser sur l'ensemble des pages web. Le but de la feuille de style externe est d'unifier les présentations de vos pages Web et de supprimer aussi la répétition des certaines de commandes en doublon.
Lorsque vous désirez changer le look de vos pages, vous pouvez alors intervenir uniquement sur la feuille de style ou en créer un autre (style00, style01, style03 :). Vous pouvez ainsi changer les polices de caractères, leur taille, la couleur. Vous pouvez changer la couleur de fond, la présentation des titres (H1, H2, etc), les paragraphes, ainsi que les tableaux.

Il est bien clair, que les images, les sons et les textes seront à modifier dans leurs propres pages, ainsi que leurs positions.

Sommaire :.

les thèmes à disposition sont :

Mise en place
Textes décorés
De beaux cadres
De jolis titres

Feuille interne ou externe au document :.

<HEAD>

// feuille de style interne
<STYLE type="text/css">
<!--
BODY{
font-family : arial;
font-size : 10pt;
color : #003080;
}
ADDRESS{
font-size : 7pt;
text-align : right;
}
// -->
</STYLE>


// ou pour une seule balise HTML, avec une définition directe

<b style="font-size:12pt">TEXTE</b>

<b style="cursor:wait">TEXTE</b>

// ou pour une feuille déclarée en externe

<LINK HREF="st.css" REL="stylesheet" TYPE="text/css">

</HEAD>

Voici comment introduire dans votre document HTML une feuille de style.

le deuxième exemple met un sytle directement sur une balise.

Pour unifier vos pages, la dernière solution est idéale.

Remarque: Attention, seules quelques commandes sont reconnues par les deux browsers.

Des beaux cadres pour vos pages :.


<HEAD>
<STYLE type="text/css">
<!--
// définition d'une classe
.cadre	{
	border-style : ridge;
	border-width : 10;
	border-color : #00FFFF ;
	padding      : 10;
	}
// -->
</STYLE>

<BODY>
<P class=cadre>
VOTRE TEXTE
</p>

...
...

Voici des cadres pour vos titres ou ...

BORDER-STYLE : ridge

BORDER-STYLE : groove

BORDER-STYLE : inset

BORDER-STYLE : outset

Remarque: Avec Netscape 4.x les cadres présentent des différences.

De jolis titres :.


// dans la feuille de style
// définition d'une classe
.titre1	{
	width  : 400;
	height : 40;
	font-family : arial;
	font-size   : 40pt;
	font-weight : 900;
	filter      : dropShadow
      	(color=#00CCFF,offX=5,
	offY=5,positive=1)
	}

// dans le corps
<font face="arial" size=8 color=#FF0000>
<span class=titre1>
BONJOUR
</span>
</font>

Des beaux titres sans avoir recours aux images.

BONJOUR

Seulement utilisable avec I.E.4x et plus

Textes décorés :.


<p style="width=100%; 
filter:Glow(color=#FF80C0, strength=15)">
<font size="28" color=#ffffff>Votre texte</font>
</p>

Voici une manière amusante de donner un style à vos textes
La valeur de strength donne l'intensité de l'effet (1 à 255)

Feuille de style
Voici un moyen sympathique
de faire une jolie décoration...

Seulement utilisable avec I.E.4x et plus

[Haut de la page] [Informatique] [Home Page]

Jean-Pierre Perroud, Switzerland
Dernière mise à jour : 2023-05-14