it-swarm.com.de

so legen Sie in einer Anweisung verschiedene Farben in HTML fest

Hallo, ich denke daran, unterschiedliche Textfarben in einer Zeile zu haben, wie das möglich sein könnte: 

<p style="color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20"> My Name is: 

 <"color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20"> Tintincute </p>

Ich hätte gerne eine andere Farbe für Tintincute, aber in einer Zeile ging das Problem damit einher, der Name ging um ein Feld nach unten. 

Dies ist das Codebeispiel: 

<p style="color:#4C4C4C;font-weight:bold">All fields marked with   <style="color:#FF0000;font-weight:bold">*</color> <style="color:#4C4C4C;font-weight:bold">are required</p>

@Phil: Ich habe versucht, den Code zu verwenden, aber es hat nicht funktioniert. Der Code selbst wurde auf der Seite angezeigt. So habe ich es gemacht: 

<div style="color:red">[+validationmessage+]</div>
p.detail {color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name {color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
<p class="detail">My Name is: <span class="name">Tintincute</span> </p>
9
tintincutes

Sie können dazu CSS verwenden und Klassen für die Elemente erstellen. Also hättest du so etwas 

p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }

Dann würde Ihr HTML lesen:

<p class="detail">My Name is: <span class="name">Tintinecute</span> </p>

Es ist viel schlauer als Inline-Stylesheets, ist einfacher zu warten und bietet eine bessere Wiederverwendung.

Hier ist der vollständige HTML-Code, um zu zeigen, was ich meine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
    p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
    span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
    </style>
</head>
<body>
    <p class="detail">My Name is: <span class="name">Tintinecute</span> </p>
</body>
</html>     

Sie werden sehen, dass ich die Stylesheet-Klassen in einem Style-Tag in der Kopfzeile habe, und dann wende ich nur diese Klassen im Code an, z. B. <p class="detail"> ... </p>. Gehen Sie das w3schools-Tutorial durch, es dauert nur ein paar Stunden und wird Sie wirklich umdrehen, wenn Sie Ihre HTML-Elemente gestalten möchten. Wenn Sie diese ausschneiden und in ein HTML-Dokument einfügen, können Sie die Stile bearbeiten und sehen, welche Auswirkungen sie haben, wenn Sie die Datei in einem Browser öffnen. So zu experimentieren ist eine großartige Möglichkeit zu lernen.

20
Phil

Verwenden Sie den Tag span

<style>
    .redText
    {
        color:red;
    }
    .blackText
    {
        color:black;
        font-weight:bold;
    }
</style>

<span class="redText">My Name is:</span>&nbsp;<span class="blackText">Tintincute</span>

Es ist auch eine gute Idee, Inline-Styling zu vermeiden. Verwenden Sie stattdessen eine benutzerdefinierte CSS-Klasse.

8
James Hill

Wie wäre es mit einem FONT-Tag?

Mögen:

H<font color="red">E</font>LLO.

Beispiel kann hier nicht angezeigt werden, da diese Site die Verwendung von Font-Tags nicht zulässt.

Span Style ist schnell und einfach.

2
JSiren

.Rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<h2><span class="Rainbow">Rainbows are colorful and scalable and lovely</span></h2>

1
Aashish