it-swarm.com.de

Wie kann ich die Schriftgröße in HTML ändern?

Ich versuche, eine Website zu erstellen, und ich möchte wissen, wie die Textgröße in einem Absatz geändert wird. Ich möchte, dass Absatz 1 größer als Absatz 2 ist. Es spielt keine Rolle, wie viel größer ist, solange es größer ist. Wie mache ich das?

Mein Code ist unten:

<html>
<head>
<style>
  p {
    color: red;
  }
</style>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</body>
</html>
16
Pancake_Senpai

Geben Sie ihnen eine Klasse und fügen Sie der Klasse Ihren Stil hinzu.

<style>
  p {
    color: red;
  }
  .paragraph1 {
    font-size: 18px;
  }
  .paragraph2 {
    font-size: 13px;
  }
</style>

<p class="paragraph1">Paragraph 1</p>
<p class="paragraph2">Paragraph 2</p>

Überprüfen Sie dieses BEISPIEL

18
Thanos

Oder fügen Sie Styles inline hinzu:

<p style="font-size:18px">Paragraph 1</p>
<p style="font-size:16px">Paragraph 2</p>
12
Roel Magdaleno

Wenn Sie nur die Schriftgröße nur des ersten Absatzes eines Dokuments erhöhen möchten, ein Effekt, der von Onlinepublikationen verwendet wird, können Sie die Pseudoklasse der ersten Kinder verwenden, um den gewünschten Effekt zu erzielen. 

p:first-child
{
   font-size:   115%; // Will set the font size to be 115% of the original font-size for the p element.
}

Dies ändert jedoch die Schriftgröße jedes p-Elements, das das erste untergeordnete Element eines anderen Elements ist. Wenn Sie daran interessiert sind, die Größe des ersten p-Elements des body-Elements festzulegen, verwenden Sie Folgendes:

body > p:first-child
{
   font-size:   115%;
}

Der obige Code funktioniert nur mit dem p-Element, das dem body-Element untergeordnet ist. 

Wenn Sie dies tun möchten, ohne Klassen hinzuzufügen ...

p:first-child {
    font-size: 16px;
}

p:last-child {
    font-size: 12px;
}

oder

p:nth-child(1) {
    font-size: 16px;
}

p:nth-child(2) {
    font-size: 12px;
}
1
doitlikejustin

Sie können es nicht in HTML machen. Sie können in CSS. Erstellen Sie eine neue CSS-Datei und schreiben Sie:

p {
 font-size: (some number);
}

Wenn dies nicht funktioniert, stellen Sie sicher, dass Sie keine "pre" -Tags haben, wodurch Ihr Code etwas kleiner wird.

0
AwesomePicassom