Question

我希望我的标题“Bully-Free Zone”以不同的颜色显示。我放了五个标题，以便为每个标题指定一种颜色，使它们看起来像一个渐变。例如，我想要的第一个标题是浅灰色，第二个是灰色，第三个是深灰色，第四个是灰色，第五个是浅灰色。如何分配不同的颜色，因为它们都是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;
  }

Answer 1

在每个标题周围添加一个范围，并为每个标题指定一个不同的类。然后你可以通过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; }

Answer 2

这是你想要的吗？

HTML：

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

的CSS：

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

Answer 3

由于页面实际上不应该包含多个<h1>标记，因此您可以通过<span>在标记内区分。

您可以将h1标签设置如下......

<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;
}

如何使标题以不同的颜色显示

3 个答案: