Die ersten H1 Buchstabe von jedem Wort größer und farbig für ein einzelnes H1

Ich habe eine h1 Zeile 5 Wörter und ich will erhöhen Sie die Größe des 3., 4. und 5. Anfangsbuchstaben nur, unterstreichen Sie und machen Sie Sie dann in einer anderen Farbe.

Ich habe es getan, aber WC3 sagt, dass mein code ungültig ist, werden alle Attribute und Elemente, die in jedem Fall von der Größe, Unterstreichung und die Farbe.

Hier ist, was funktioniert in den Browsern, aber nicht Valide ist:

<p><h1>Welcome to <br /><font size="120%" color=Red><u>M</u></font>y <font size=120% color=Red><u>F</u></font>vourite
<font size=120% color=Red><u>W</u></font>ebsite</h1></p>

Er mir nur meine Fehler (15 insgesamt), die auf dieses design.

Bitte kann mir jemand helfen, mit der HTML und oder CSS um dies zu beheben, so dass es überprüft.

Ich habe versucht, Variationen in Größe und Farbe, und obwohl Sie arbeiten im Browser, werden Sie nicht überprüfen.

Danke 🙂

  • Alle, die ich empfehlen kann, ist die :first-letter pseudo-Klasse, aber das wird nicht zu erweitern, um zusätzliche Wörter. Nur können die Nutzung von jQuery/JavaScript für diese.
InformationsquelleAutor liam | 2011-02-10
  1. 6

    Sie nicht Valide Ursache der font-tag veraltet ist lange her, und so können alle seine Parameter,

    Verwenden Sie diese Funktion in CSS:

    h1 {
margin:5px;
}
#title span {
font-size: 1.2em;
color: #c13636;
text-decoration: underline;
}

    Und wickeln Sie das Wort hervorgehoben werden in span-tags:

    <span>TEST</span>

    Angewendet, um Ihren code:

    <h1 id="title">Welcome to <br /><span>M</span>y <span>F</span>avourite <span>W</span>ebsite</h1>

    Demo:

    http://jsfiddle.net/Mutant_Tractor/SBbcu/

    • Wahrscheinlich ein mis-Typ, aber vergessen Sie nicht, Sie benötigen eine '.' vor Ihrem Klassennamen in der CSS
    • danke 🙂
    • Könnte sein, ordentlicher zu tun <h1 id="title">Welcome to <br /><span>M</span> .. und #title span { .. }
    • Schön gedacht, ich ändere meine Antwort.
    • Hängen.. da ist ein <h1> innerhalb eines <p>. Das wird nicht validieren.
    • Na dann können wir nur hinzufügen Polsterung an den <h1> zu handeln wie ein <p>
    • Ja, werde es tun. Ich werde aufhören, Kommissionierung Ihre ansonsten völlig in Ordnung Antwort jetzt!
    • Haha, kein problem, Mann, ich brauchte, legte die Rechte auf das 🙂

    InformationsquelleAutor Myles Gray
  2. 2
    <font></font> and <u></u>

    veraltet sind. Verwenden Sie eine <span></span> mit CSS angewendet.

    • In der Tat span:first-letter{font-size:x-large;text-decoration:underline;} und <h1><span>word</span> <span>word</span></h1> vielleicht beste Wette.
    InformationsquelleAutor Kris
  3. 1

    Verwenden span element mit einem style - Attribut, wie in:

    <span style="font-size: 120%; color: red; text-decoration: underline;">M</span>

    Alternativ definieren von CSS-Klassen für verschiedene Kombinationen und verwenden Sie diese stattdessen.

    • Mit class ist bevorzugt über style.
    • Ich bin völlig einverstanden, aber ich war einfach nur indem das OP die einfachste Antwort auf sein dilemma.
    InformationsquelleAutor Eric Giguere
  4. 0

    So, wie eine Zusammenfassung

    • kann nicht innerhalb einer

    • nicht verwenden <font> oder <u>
    • HTML steht für markup, CSS für das styling

    Mit "reiner" HTML/CSS-Sie haben mehrere Möglichkeiten, das zu erreichen, was Sie wollen. Hier sind ein paar Variationen. Sie sollten wahrscheinlich hinzufügen class Attribute span - Elemente, aber habe ich es unterlassen, Sie hier der Kürze halber.

    1°

    HTML-Datei:

    <h1>Welcome to <span>M</span>y <span>F</span>vourite <span>W</span>ebsite</h1>

    CSS-Datei:

    h1 span {
  font-size: 120%;
  color: red;
  text-decoration: underline;
}

    2°

    HTML-Datei:

    <h1>Welcome to <span>My</span> <span>Favourite</span> <span>Website</span></h1>

    CSS-Datei:

    h1 span:first-letter {
  font-size: 1.2em;
  color: red;
  text-decoration: underline;
}
    • Danke Jungs, werde versuchen, alles was du gesagt hast - sehr hilfreich (und schnell Antworten zu) 🙂
    InformationsquelleAutor Jawa
  5. 0

    Haben Sie einige ungültige tags <font> und <u>.

    Ich würde so etwas tun zu validieren und zu bereinigen-code:

    <style>
    .big {
         font-size: 1.2em;
    }

    .red {
         color: red;
    }
</style>

<h2>Welcome to</h2>
<h1>
    <span class="big red">M</span>y 
    <span class="big red">F</span>avorite 
    <span class="big red">W</span>ebsite
</h1>

    oder auch:

    <style>
    h1 span:first-letter {
        font-size: 1.2em;
        color: red;
    }
</style>

<h2>Welcome to</h2>
<h1>
    <span>My</span>
    <span>Favorite</span> 
    <span>Website</span>
</h1>
    InformationsquelleAutor Stephen Watkins
Schreibe einen Kommentar