web-dev-qa-db-ja.com

HTMLのフォントサイズを変更する方法

Webサイトを作成しようとしていますが、段落内のテキストのサイズを変更する方法を知りたいです。パラグラフ1をパラグラフ2よりも大きくしたいのです。それが大きければ、どれだけ大きくてもかまいません。どうすればいいですか？

私のコードは次のとおりです。

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

彼らにクラスを与え、スタイルをクラスに追加します。

<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>

これを確認してください[〜＃〜] example [〜＃〜]

18
Thanos

または、スタイルをインラインで追加します。

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

オンラインパブリケーションで使用される効果であるドキュメントの最初の段落のフォントサイズを大きくしたいだけの場合は、first-child擬似クラスを使用して目的の効果を実現できます。

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

ただし、これにより、他の要素の最初の子であるすべてのp要素のフォントサイズが変更されます。 body要素の最初のp要素のサイズを設定したい場合は、次を使用します。

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

上記のコードは、body要素の子であるp要素でのみ機能します。

7
DisinterestedObserver

クラスを追加せずにこれを行いたい場合...

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

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

または

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

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

HTMLではできません。 CSSでできます。新しいCSSファイルを作成して、次のように記述します。

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

それでもうまくいかない場合は、コードを少し小さくする「pre」タグがないことを確認してください。

0
AwesomePicassom