style

概要

styleは表示する要素のスタイルを表します。

styleに指定できる主なサブ属性を次の表に示します。

主なスタイル
サブ属性	意味	値の例
border	要素の境界を指定する。	solid,dashed blue,thick double
border-color	要素の境界の色を指定する。	black, red, #2266AA, rgba(170, 50, 220, .6)
border-width	要素の境界の幅（太さ）を指定する。	1px, 2px, thick, 1.25em
border-style	要素の境界のスタイルを指定する。	none, dotted, dashed solid
font-size	テキストのフォントのサイズを指定する。	24px, 8em
font-weight	テキストのフォントの太さを指定する。	bold（ボールドで表示する）
text-align	テキストの水平方向の配置を指定する。	left,center,right

次の例は、テキストを左揃え、中央揃え、右揃えで表示する例です。


  <div class="result">
  <p style="text-align:left;">"text-align:left"</p>
  <p style="text-align:center;">"text-align:center"</p>
  <p style="text-align:right;">"text-align:right"</p>
  </div>

これは次のようなテキストを描きます。

"text-align:left"

"text-align:center"

"text-align:right"

スタイルだけを別にして要素名、ID、クラス名でスタイルを適用することもできます。
次の例は上のスタイル指定と同じことを<style>要素に記述する例です。


  <style>
    p {
      text-align:left;
    }
    #pid {
      text-align:center;
    }
    .pcls {
      text-align:right;
    }
  </style>
  <p >"text-align:left"</p>
  <p id="pid">"text-align:center"</p>
  <p class="pcls">"text-align:right"</p>

これは次のようなテキストを描きます。

"text-align:left"

"text-align:center"

"text-align:right"

style

概要

関連項目