1

I want my title "Bully-Free Zone" to appear in different colors. I put five titles in order to assign a color for each so that they can kind of look like a gradient. For example, the firs title I want to appear light gray, the second one gray, the third one dark grey, the fourth one gray, and the fifth one light gray. How do I go about assigning different colors because they are all 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;
  }
4

3 回答 3

2

由于页面实际上不应该有多个<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;
}
于 2012-04-18T03:07:44.733 回答
2

在每个标题周围添加一个跨度，并为每个标题分配不同的类。然后您可以通过 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; }
于 2012-04-18T03:08:48.063 回答
1

是你想要的吗？

HTML：

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

CSS：

h1.gray {color: #333}
h1.lightgray {color: #eee}
于 2012-04-18T03:04:57.593 回答