Thu >スタイルシート >CSS

文書構造と視覚表現を分離する…これがホームページの主流になっています。その視覚表現を決めるCSSを取り上げます。

タグの記述・スタイルの記述

タグの記述(HTML)

要素=<a href="thu.html">スタイルシート</a> 要素=タグ+要素内容+タグ
タグ=<a href="thu.html"> タグ=要素名+属性+値

上記の場合、aが要素名、hrefが属性、thu.htmlが値となります。

スタイルの記述(CSS)

@media screen { a { color: #0000ff; } }
@media print { a { color: #0000ff; } }
At-rule { Rule set }
@規則 { 規則集合 }
規則集合=a { color: #0000ff; } 規則集合=セレクタ { 宣言ブロック }
宣言ブロック=color: #0000ff; 宣言ブロック=プロパティ: 値;

▲ページの先頭へ

セレクタの種類

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

1.要素セレクタ font、h2、p 設定したすべての要素名が対象
2.クラスセレクタ .open、.slide、.clear クラス属性を設定した要素名のみ対象、複数回使用可
3.IDセレクタ #navi、#container、#footer id属性を設定した要素名のみ対象、ページで1回使用
4.子孫セレクタ #container h3、#container p id属性内の対象要素に適用

▲ページの先頭へ

スタイルの記述場所

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

    <p style="text-align: right; font-size: 83%;">……</p>

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

    <p class="style1">……</p>

    HTML文書のhead内に…
    <style>
      .style1 {
        text-align: right;
        font-size: 83%;
      }
    </style>
    </head>
    
  3. リンク : CSS専用の外部スタイルシートに記述して、HTML文書に読み込ませる。

    <div id="container"><p>……</p></div>

    HTML文書のhead内に…
    <link href="style.css" rel="stylesheet" />
    style.cssの中身は…
    #container p {
      text-align: right;
      font-size: 83%;
    }
    

    #container p は、子孫セレクタです。#container内のすべてのp要素名に適用されます。

▲ページの先頭へ