La balise SPAN est utilisée en CSS pour modifier l'aspect d'une zone limitée de données.
Des styles CSS il en existe d'innombrables, mais concernant le TEXTE il est intéressant de pouvoir s'affranchir des règles contenues dans un ensemble pré-établie par la méthode interne (règles placées en source du fichier) ou par la méthode externe (sur un fichier séparé).
Lorsque dans votre page page pour certains cas particuliers vous avez besoin d'utiliser rarement une déclaration , pour un caractère, un mot ou un groupe de mots, alors l'emploi de la balise SPAN est l'application adéquate à utiliser.
Page suivante vous allez découvrir que pour appliquer cette présentation non plus seulement à un mot ou un groupe de mots, mais à un ou plusieurs paragraphes placés dans un texte, il suffira d'utiliser la balise DIV.
En résumé la balise SPAN ne sert pas à structurer votre document mais à appliquer une mise en forme différente sur des éléments du texte. Vous pouvez si besoin imbriquer des SPAN dans d'autres SPAN.
Source de cette page dans HEAD
</TITLE>
<style type="text/css">
p.grand { font-size: 14pt ; color: blue ; }
.red { color: red ; font-size: 8pt ; }
.vert { background-color:#00FFCC ; }
</style>
<HEAD>
Code 1 avec SPAN dans BODY
<P> Si 2001 a été l'année <span style= "font-size: 16pt ; color: fuchsia ; background-color: #FFFFFF ; " >"ADSL"</span>,2002 pourrait-elle être l'année <span style= "font-size: 16pt ; color: fuchsia ; >"satellite"</span>dans le petit monde de l'accès Internet ? En effet, le géant .... / .... lancer en Europe une offre d'accès à Internet par satellite <SPAN class="red";>courant 2002.</SPAN> </P>
Résultat exemple 1
Si 2001 a été l'année "ADSL" , 2002 pourrait-elle être l'année "satellite" dans le petit monde de l'accès Internet ? En effet, le géant Tiscali (qui possède Liberty Surf, Infonie, WorldOnline et Freesbee en France) a confirmé son intention de lancer en Europe une offre d'accès à Internet par satellite courant 2002.</p>
Analyse 1
Ci-dessus vous remarquez deux mots "ADSL" et "satellite" qui sont en rose et de corps 16pt (taille) supérieur au reste du texte, ainsi qu'un passage "courant 2002." qui se trouve lui en rouge et de corps 8pt.
Première possibilité - En rose vous avez utilisé SPAN STYLE et vous avez choisi suivant votre besoin ponctuel les divers styles qui modifient le ou les mots concernés. < span style= "font-size: 16pt ; color: fuchsia ;" >
Deuxième possibilité - En rouge et caractères plus petits vous avez appliqué SPAN CLASS, en faisant appel à une règle présente dans le code source de cette page, en l'occurrence la sous-classe ".red". Il en aurait été de même si vous aviez fait appel à une règle présente sur un fichier externe.
Il est évident que pour souligner l'intérêt d'un mot, d'une lettre, d'un groupe de quelques mots et surtout pas systématiquement, l'utilisation de la balise SPAN est la bienvenue.
Mais n'en abusez pas sous peine de voir le langage CSS détourné de son intérêt de base et votre texte tourner en guirlande de sapin !
Outre ces facilités de mise en page avec la balise SPAN, il est parfois agréable pour la présentation par exemple des titres dans une page (mais toujours avec modération et une couleur ou deux au maximum) de créer de nouveaux effets pour attirer l'attention du visiteur et agrémenter la présentation générale.
Code 2 avec SPAN dans BODY
Un accès satellite < span style=" background-color:#CCFFFF ; " > "uni directionnel" </span> (uniquement en réception de données, pour l'upload, il fallait recourir à un modem traditionnel, donc à sa ligne téléphonique),trop cher,< span style= "background-color: yellow ; font-size: 12pt ; font-weight : bold ; " > trop compliqué à installer, </span> débits pas meilleurs qu'avec une < span class= "vert" >ligne téléphonique...</span>
Résultat exemple 2
Un accès satellite "uni directionnel" (uniquement en réception de données, pour l'upload, il fallait recourir à un modem traditionnel, donc à sa ligne téléphonique),trop cher, trop compliqué à installer, débits pas meilleurs qu'avec une ligne téléphonique...
Analyse 2
Ci-dessus deux mots sur fond bleu : background-color: #CCFFFF, ensuite passage sur fond jaune : background-color: yellow, avec corps gras, en 12 pt, et au final en vert avec la sous-classe "vert".
Première possibilité - Fond bleu vous avez utilisé SPAN STYLE dont vous avez choisi suivant votre besoin la couleur de fond tout en conservant le reste des déclarations de base du paragraphe "p".
Deuxième possibilité - Fond jaune, corps plus grand et en gras tout en respectant encore les autres règles de "p".
Troisième possibilité
- Comme il existe une sous-classe .vert { background-color:#00FFCC;
} dans les déclarations de cette page il suffit d'en profiter si besoin,
avec <span class= "vert" ; >
Code 3 avec SPAN normal plus SPAN imbriqué, dans BODY
<span style=" color: blue ; "> Les balises spéciales <span style= " font-size : 16pt ; font-weight : bold ; color : red ; " > SPAN et DIV </span> permettent de mettre en forme des éléments (en ligne ou en bloc). </span>
Résultat exemple 3
Les balises spéciales SPAN et DIV permettent de mettre en forme des éléments (en ligne ou en bloc).
Analyse 3
Voici la possibilité d'imbriquer deux balises SPAN comme indiqué ci-dessus : La première en bleu couvre l'ensemble de la ligne, alors que celle en marron encadre les mots "SPAN et DIV" en rouge et de corps plus grand. Tout le monde hérite pour le reste de l'élément parent "p".
SPAN, vous le retrouverez plus tard dans d'autres applications mais soufflez d'abord et apprenez bien cette page car la suivante qui traite de la balise DIV en est une "copie" ou presque.
Sommaire CSS ... @ ... Sélecteur DIV
