CSS font-size funktioniert nicht für h1 nur in einem block

Ist, habe ich mich um eine Lösung für dieses, aber es muss etwas sein, was ein bisschen seltsam isnce bith die CSS-und html überprüfen mit dem w3c-checker.

CSS-Snippet:

body{
    background-color: #ffffff;
    color:#000000;
    text-align: left;
  height:100%;
}

h1{
  font-size: 250%;
  font-weight: normal;
  text-align: center;
}
h2{
  font-size:150%;
}
h1{
  font-size:120%;
}
#MainHeader{
  background-color:#efefef;
  background: url("http://www.wou.edu/images/spotlight/wounews.png") no-repeat;
  padding:15px 0px 15px 0px;
}
#MainContent{
  background: url("http://stuff.bodestone.net/jr/construction.gif");
  padding: 8px 8px 8px 8px;
  clear:both;
  background-color:#ff00ff;
  overflow:auto;
  height: auto;
}
#MenuBar{
  background-color:#dfdfff;
  float:left;
    padding: 15px 0px 15px 0px;
    overflow: auto;
  height: 100%;
}
#PageContent{
  float:left;
  background-color:#dedebe;
  overflow: auto;
    padding: 15px 15px 15px 15px;
  overflow: auto;
}

Und HTML:

  <body>
    <div id="MainHeader">
      <h1>A random template site to work some stuff out</h1>
    </div>
    <div id="MainContent" class="clearfix">
      <div id="MenuBar">
        <a href="index.html" class="here">Page 1</a><br>
        <a href="page2.html">Page 2</a><br>
        <a href="page3.html">Page 3</a><br>
      </div>
      <div id="PageContent">
        <h2>This is page 1</h2>
        <p>lar</p>
      </div>
    </div>
    <div id="Footer" class="clearfix">
      <span style="float:left">And here we have a footer.</span><span style="float:right">Style info for left and right defined separately in the html.</span>
    </div>
  </body>

Wenn ich die schriftart ändern-Gewicht h1 es änderungen. Wenn ich die schriftart ändern, die Größe tut es nicht.
Ändern kann ich Gewicht und Größe des h2 in den PageContent DIV.

Als eine Nebenbemerkung, die ich verwendet habe, * bevor für Globale Definitionen am Anfang des Stylesheets. Ist das die gleiche wie root?

  • Das * ist nicht die Wurzel, es ist eine wildcard-passt zu jedem element. Verwenden Sie Körper-oder html als root.
InformationsquelleAutor Bodestone | 2011-03-06
  1. 3

    Erscheinen Sie definieren die Schriftgröße für h1 zweimal:

    h1{
  font-size: 250%;     /* Here */
  font-weight: normal;
  text-align: center;
}
h2{
  font-size:150%;
}
h1{
  font-size:120%;      /* And here */
}

    Je nachdem, welche Sie ändern, Sie können nicht sehen, die Ergebnisse, weil die zweite h1 Regel überschreiben die des ersten. Wenn Sie geändert wird, die erste Deklaration, dann wird es überschrieben werden, indem die zweite Erklärung.

    Der validator gibt keine Warnung über die Regeln mit identischen Selektoren, die möglicherweise überschreiben Sie eine andere, so müssen Sie aufpassen, dass Sie sich selbst, oder überprüfen Sie mit einem tool wie Firebug um zu sehen, die berechneten Stil für ein element.

    Als eine Nebenbemerkung, die ich verwendet habe, * bevor für Globale Definitionen am Anfang des Stylesheets. Ist das die gleiche wie root?

    Nein, * ist der universal-Selektor passt auf jedes element. Das root-element ist html, aber auch durch anwenden von Stilen auf, dass element, nicht jeder Stil wird vererbt body Elemente drin.

    InformationsquelleAutor BoltClock
  2. 0

    Scheinen Sie h1 definiert, die zweimal in Ihrer CSS - oben und unten h2.

    Beide zu haben scheinen font-size definiert. Löschen die zweite.

    • OK, so machtest du meine daftness auch, aber die andere Antwort war die erste und zitiert für die Vollständigkeit, so haben die Antwort.
    • Wenn Sie möchten, akzeptieren Sie eine Antwort auf der Basis, wer zuerst kam-gut, ich habe.
    • Sorry, ich habe diese geöffnet, auf dem lappy mit sehr wenig vertikale Bildschirm-res ein Häkchen falsch. Ihnen wurde auch die komplette Angabe der Fehler auch.
    • Oh, es ist in Ordnung. Ich war nicht beschweren oder irgendetwas 🙂
    InformationsquelleAutor djdy
  3. 0

    Anscheinend haben Sie definiert h1 zweimal in der css. 

    h1{
  font-size: 500%;
  font-weight: bold;
  text-align: center;
}

h1{
  font-size:120%;
}

    Erste Wert wird überschrieben, indem der zweite Wert. Also die Größe nicht ändern 🙂

    • Ich bin ein muppet! Einfach Schnitt und paste Fehler, starrte mir ins Gesicht entlang. Ich wusste, es würde etwas bescheuert, aber Lesen und re-Lektüre mein Gehirn automatisch aus der letzten 3.
    • Aw, das sind die schlimmsten. Habe ich nicht gelesen Ihr neben die Frage auf den ersten, aber wie BoltClock sagte, das Sternchen entspricht einem element. Es ist im Grunde ein Platzhalter. Einige Leute benutzen es zurücksetzen, um Ihre Margen und Polsterung an den Anfang eines Dokuments, jedoch ich benutze lieber Meyer ' s reset.css (verbinden würde, wenn ich wüsste wie).
    • Ja, * ist performant, ziemlich schlecht. Es nicht sichtbar zu verlangsamen, browser, natürlich, aber es ist immer noch genug, um nicht verwendet reset styles überhaupt.
    InformationsquelleAutor cabaret
Schreibe einen Kommentar