CSS

HTMLとCSS

webページはHTMLで記述されています。標準化を進めているW3Cはwebページを文書構造と視覚表現に分け、文書構造をHTMLで、視覚表現をCSSでそれぞれ記述することを推奨しています。

タグ･スタイルの記述

セレクタの種類

以下が代表的なセレクタです。これ以外に子孫セレクタ、子供セレクタ、疑似セレクタなどがあります。

セレクタ	説明
1．要素セレクタ	設定したすべての要素名が対象になります。
2．クラスセレクタ	クラス属性を設定した要素名のみ対象、複数回使用可
3．IDセレクタ	id属性を設定した要素名のみ対象、ページで1回使用

スタイルの記述場所

1. インライン ： Body内の適用したい要素に直接style属性で指定する。

   HTMLの記述：<p style="text-align: right; font-size: 83%;">……</p>

2. エンベッド : head内にstyleを宣言する。

   <style type="text/css">
     .style1  {
       color: #ff6666;
     }
   </style>
   

   HTMLの記述：<span class="style1">……</span>

3. リンク : CSS専用の外部スタイルシートに記述して、HTML文書に読み込ませる。

   HTML文書のhead内に…
   <link rel="stylesheet" href="style.css" type="text/css" />
   style.cssの中身は…
   #masthead {
     padding: 10px 10px 0px 10px;
   }
   

   HTMLの記述：<div id="masthead">……</div>

▲ページの先頭へ