Modifier une balise avec CSS mais pas toutes celle du code html
Bonjour,
Je débute en programation et j'aimerais savoir comment fait-on pour ajouter du style à une balise mais sans modifier toute les balises du code html , je ne sais pas si je suis très claire . Pour être plus précis j'aimerais mettre de style différents sur la balise <hr> mais le problème c'est que dans mon code elle porte tout deux le meme nom .
Merci d'avance à celui qui aura le courage de me rep .. ;)
Je débute en programation et j'aimerais savoir comment fait-on pour ajouter du style à une balise mais sans modifier toute les balises du code html , je ne sais pas si je suis très claire . Pour être plus précis j'aimerais mettre de style différents sur la balise <hr> mais le problème c'est que dans mon code elle porte tout deux le meme nom .
Merci d'avance à celui qui aura le courage de me rep .. ;)
3 réponses
-
HELPP please :'(
-
bonjour,
Dans ce cas tu crées des "class" :
.mon-hr-1 {border-color:#91c225;}
.mon-hr-2 {border-color:#ccc;}
et dans ton code html tu défini ton choix selon tes <hr>
bla bla bla ...
<hr class="mon-hr-1">
bla bla bla ...
bla bla bla ...
bla bla bla ...
<hr class="mon-hr-2">
bla bla bla ...
bla bla bla ... -
ContributeurSalut
il faut juste donner une identification a la balise hr avec un id si il est unique ou une class si il y en as plusieurs de la meme couleur, et les styler en CSS !
exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
hr#rouge{
color: #FF2E2E;
background-color: #FF2E2E;
height: 2px;
border: 0;
}
hr#bleu{
color: #2560FF;
background-color: #2560FF;
height: 2px;
border: 0;
}
hr.vert{
color: #90FF45;
background-color: #90FF45;
height: 2px;
border: 0;
}
/*]]>*/
</style>
</head>
<body>
<hr id="rouge" />
<p>
blabla
</p>
<hr id="bleu" />
<p>
blabla
</p>
<hr class="vert" />
<p>
blabla
</p>
<hr class="vert" />
<p>
blabla
</p>
<hr class="vert" />
</body>
</html>
a+
