2010年03月20日

背景色 文字色をスタイルシートで指定

スポンサード リンク

colorプロパティ background-colorプロパティ
文字色 要素の背景色の指定。

  スタイルシート
 ボックスに文字色、背景色設定
         背景色と文字色のコントラストはシッカリと

p要素 背景色はtransparent(透明)   背景 赤色 文字色は白

h5 要素の背景色 色の名前で指定 khaki

要素にインラインで指定
今のブログで満足ですか?
FC2レンタルサーバーLiteでホームページを作る!

サンプルソース

<html>
<head>
<title>文字の色、背景色 css</title>
<style type="text/css">
<!--
#div00{
   color:#ffff1e; /* 文字色 */
   background-color: #3300ff; /* 背景色 */
   width: 400px; /* ボックスの幅 */
   height: 60px; /* 高さ */
   font-size: 1.5em;/* 文字サイズ */
   padding: 8px;/* 内側余白 */
      }
#pID{
  color : brown;
  background-color: transparent; /* 背景色 透明 (初期値)*/
   }
#redID{
  background-color : red;
  color : white;
   }
H5{
  background-color : khaki;
  color : teal;
    }
-->
</style>
</head>
<body>
  <div id="div00">  スタイルシート<br>
    ボックスに文字色、背景色設定
     </div>
  <p id="pID">p要素背景色はtransparent(透明)
     <span id="redID">背景 赤色 文字色は白</span>
      </p>
  <h5>h5 要素の背景に khaki
      </h5>
  <p style="color: fuchsia; background-color: #fafecb;">
   要素にインラインで指定
     </p>
</body>
</html>

color プロパティ
  文字の色を指定します。
 color: 色の値;
background-color プロパティ
   要素の背景色を指定します。
  background-color: 色の値;
色の値には カラーコードあるいは色の名前を指定します。
 background-color の値に transparent を指定した場合は,
要素の背景色は'透明'になり,その親要素の背景が適用されます。
  背景色と文字色はセットで指定するようにしましょう。観る人の
ブラウザの設定によっては文字が読みづらくなります。

文字の色,背景色の 色の組み合わせのチェック
グラデーション文字作成ツール
背景画像 background-attachment プロパティ
背景画像の配置 background-positionプロパティ
背景画像の繰り返し background-repeat プロパティ
背景画像を付ける background-imageプロパティ
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 20:44 | 大阪 | 背景 背景画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。