| Accueil | table XHTML-CSS | index XHTML-CSS | précédent | suivant |

La boîte <span> .... </span>

La balise <span> permet de modifier le style du texte en cours de paragraphe. Elle se comporte comme une boîte avec tous ses attributs. L'exemple suivant montre comment l'utiliser :


/* Fichier Style20.css */

body
{
background-color : rgb(245,235,204);
}

/* titre */
h1
{
font-family : Arial;
font-size : 15pt;
text-align : center;
line-height : 150%;
}

/* conteneur du paragraphe */
#texte1
{
position : absolute;
left : 7cm;
top : 1.5cm;
width : 400px;
padding : 10px;
text-align : center;
background-color : rgb(80,0,0);
font-family : Verdana;
font-size : 11pt;
font-weight : bold;
color : rgb(255,255,255);
line-height : 150%;
}

.span1
{
font-family : Arial;
font-style : italic;
color : rgb(240,240,0);
}

.span2
{
border-width : 1px;
border-style : solid;
border-color : rgb(255,255,255);
font-family : Arial;
font-style : italic;
color : rgb(0,255,0);
padding-left : 5px;
padding-right : 5px;
}

.span3
{
font-family : Arial;
font-style : italic;
color : rgb(80,0,0);
background-color : rgb(255,250,250);
padding-left : 5px;
padding-right : 5px;
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titre de cette page : exemple020</title>
<meta name="description" content="Phrase décrivant clairement cette page" />
<meta name="keywords" content="mot1 mot2, mot3 mot4 mot5, mot6" />
<link rel="stylesheet" type="text/css" href="Style20.css" />
</head>

<body>

<div id="texte1">

<h1>Emploi de la boite <b>span</b></h1>

<p>
Ce texte montre que la balise <b><span></b> permet de modifier momentanément le style du texte à l'intérieur d'un paragraphe. Voici par exemple l'effet obtenu <span class="span1">avec le style span1</span> et voici l'effet obtenu <br/><span class="span2">avec le style span2 <br/>qui comporte une bordure</span><br/>
Notons que l'emploi de bordures est à éviter en cas de retour à la ligne <br/> <span class="span3">comme le montre cet exemple</span>
</p>

</div>

</body>
</html>


Afficher cette page




suivant