2013-08-02 10 views
15

私はウェブサイトを作ろうとしており、段落内のテキストのサイズを変更する方法を知りたいと思います。私はパラグラフ1をパラグラフ2より大きくしたいと思っています。それがもっと大きい限り、それはどれほど大きくても問題ありません。これはどうすればいいですか?htmlでフォントサイズを変更する方法は?

私のコードは以下の通りです:

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

答えて

18

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

<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

+0

ブラウザ固有です。ブラウザ間でデフォルトを使用する場合は、それを自分で設定する必要があります。 –

1

あなたがクラスを追加することなく、これを実行したい場合は...

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; 
} 
12

または追加のスタイルのインライン:

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

それは実際には望ましくない... – Meryovi

+1

ありがとう。それは完全に動作します。あなたは、デフォルトのフォントサイズが何であるか考えていますか?私はそれが約16/17pxだと思う... –

+1

インラインスタイルが悪いです! –

7

あなたが任意の文書のちょうど最初の段落のフォントサイズを増大させるのにちょうど興味があるなら、効果オンライン出版物で使用される場合は、最初の子疑似クラスを使用して目的の効果を達成できます。

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要素で動作します。

0

HTMLで行うことはできません。あなたはCSSですることができます。新しいCSSファイルを作成し、書き込み:

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

それはあなたのコードを少し小さくする任意の「前」のタグを、持っていないことを確認してください動作しない場合。

関連する問題