以下のように記述ることにより、その記述された<p>で囲まれた箇所のボックスの幅を100ピクセルに指定することができます。
<p style="width:100px;border-style:solid;border-width:1px;"> |
このボックスの幅を100pxに指定しています。
上の赤文字の部分が、ボックスの幅を100ピクセルにするという記述になります。
さらに高さにも100ピクセルの指定を加えてみます。
<p style="width:100px;height:100px;border-style:solid;border-width:1px;"> |
このボックスの幅と高さを100pxに指定しています。
赤文字の部分が、ボックスの高さを100ピクセルにするという記述になります。
ページの<head>内に記述する場合、外部のCSSファイルに記述する場合もこの赤文字の部分は同じになります。
以下のように<head>内に記述することにより、その記述されたページの<p>で囲まれた箇所全てのボックスの大きさを幅100ピクセル、高さ100ピクセルに指定することができます。
解りやすいよう、<head>から記述します。この場合の表示は前のものと同じなので省きます。
<head> <style type="text/css"> <!--p{width:100px;height:100px;border-style:solid;border-width:1px;}--> </style> </head> |
以下のように外部CSSファイルに記述することにより、そのファイルの読み込まれたページの<p>で囲まれた箇所全てのボックスの大きさを幅100ピクセル、高さ100ピクセルに指定することができます。この場合の表示も前のものと同じなので省きます。