Comment faire de la rubrique apparaissent dans des couleurs différentes

Je veux mon titre "Bully-Free Zone" apparaissent dans des couleurs différentes. J'ai mis cinq titres, afin d'attribuer une couleur pour chacun d'eux afin qu'ils puissent sorte de ressembler à un gradient. Par exemple, le premier titre que je veux à apparaître à la lumière du gris, la seconde gris, le troisième d'un gris foncé, le quatrième gris, et le cinquième gris clair. Comment dois-je aller sur l'attribution de différentes couleurs car ils sont tous h1 http://imgur.com/tiU0z

HTML

  <html>
  <head>
  <link rel="stylesheet" type="text/css" href="body.css"/>
  </head>
  <body>
  <h1>Bully-Free Zone<br/> Bully-Free Zone <br/> Bully-Free Zone <br/> 
  Bully-Free Zone <br/>
  Bully-Free Zone </h1>

  <h2>"Online harassment lhas an off-line impact"</h2>
  <!--Menu-->
  <div id="nav">
  <a href="mainpage.htm" class="nav-link">HOME</a>
  <a href="page1.htm" class="nav-link">ASSISTANCE</a>
  <a href="page2.htm" class="nav-link">CYBER-BULLYING SIGNS</a> 
  <a href="page3.htm" class="nav-link">REPORT</a>
  </div>
  <div id="content"> Your Content Here Your Content Here Your Content Here <br/>
  Your Content Here Your Content Here<br/>
  Your content here </div> 
  <img src="nobullying.jpg" id="picture"/>
  <!--Copyright-->
  <div id="center">
  <td> Copyright © 2012 Bully-FreeZone.net</td>
  </div>

  </body>
  </html>

CSS:

  body{/* IE10 */ 
background-image: -ms-linear-gradient(top left, #555BB5 0%, #FC5B5B 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top left, #555BB5 0%, #FC5B5B 100%);
/* Opera */ 
background-image: -o-linear-gradient(top left, #555BB5 0%, #FC5B5B 100%, );
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top left, #555BB5 0%, #FC5B5B 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(top left, #555BB5 0%, #FC5B5B 100% );
}
h1{color:black;text-align:center;font-size:40px;font-family:broadway;
}
h2{color:black; text-align:center;font-size:27px;font-style:italic;}
/*Menu Buttons Orange*/
a.nav-link:link
{
color: black;
text-decoration: underline;
}
a.nav-link:visited
{
color: black;
text-decoration: none;
}
a.nav-link:hover
{
color:black;
text-decoration: overline;
}
a.nav-link:active
{
color: black;
text-decoration: none;
}
/*Menu button styles*/
#nav{text-align:center; font-family:"Bernard MT Condensed"; font-size:30px;
}
#center{text-align:center;}
#picture{background-image: url(nobullying.jpg);
width:200px;
height:400px;
position:absolute;
left:10px;
Top:190px;
bottom:10px;
}
#content {
text-align:left;
width:550px;
margin:20 auto;
}

InformationsquelleAutor Backtrack | 2012-04-18

css html

2

Ajouter un span autour de chacun des titres et attribuer une classe différente pour chacun. Ensuite, vous pouvez changer les couleurs via CSS.
```
<h1>
<span class="gray1">Bully-Free Zone</span><br/>
<span class="gray2">Bully-Free Zone</span><br/>
<span class="gray3">Bully-Free Zone</span><br/>
<span class="gray2">Bully-Free Zone</span><br/>
<span class="gray1">Bully-Free Zone</span>
</h1>
And the CSS...
.gray1 { color: #efefef; }
.gray2 { color: #aaaaaa; }
.gray3 { color: #999999; }
```
- Ok et aussi à l'intérieur de l' .gray1,2, et 3 je suis l'insertion de texte-align:center et de ne pas aller au centre. J'ai déjà enveloppé <div align="center" et il a travaillé sur htm je ne sais pas pourquoi pas sur css
- Ajout de texte-align: center ne fonctionne pas sur une plage depuis sa inline; l'élément est aussi large que le contenu. Si vous avez ajouté display: block; il serait de travailler. Bien qu'il serait probablement préférable de réécrire le balisage à ce point pour être plus sémantiques.
InformationsquelleAutor sbeliv01

C'est cela que vous voulez?

HTML:

<h1 class="gray">Bully-Free Zone</h1>
<h1 class="lightgray">Bully-Free Zone</h1>

css:

h1.gray {color: #333}
h1.lightgray {color: #eee}

InformationsquelleAutor username

1

Depuis les pages ne sont pas vraiment censé avoir plusieurs <h1> balises, vous pouvez différencier l'intérieur de la balise elle-même via <span>.

Vous pouvez configurer votre balise h1 comme suit...
```
<h1>
<span class="light-grey">Bully-Free Zone</span>
<span class="med-grey">Bully-Free Zone</span>
<span class="dark-grey">Bully-Free Zone</span>
<span class="med-grey">Bully-Free Zone</span>
<span class="light-grey">Bully-Free Zone</span>
</h1>
```
CSS:
```
h1 span {
display: block;
}
h1 span.light-grey {
color: lightgrey;
}
h1 span.med-grey {
color: grey;
}
h1 span.dark-grey {
color: darkgrey;
}
```
- bonjour, où avez-vous eu l'info sur une seule balise h1? qui n'a pas de sens pour moi.
- Je pense que les gens ont eu peur d'être pénalisé par les moteurs de recherche pour plusieurs balises h1 pour la plupart, mais aussi 5 h1s dans une rangée de ne pas séparer les principales sections de contenu comme je l'ai imaginer une balise h1 doit faire.
InformationsquelleAutor mayhewr

Vous devez vous connecter pour publier un commentaire.