CSS

CSSとはHTML文章やXHTML文章のレイアウトやデザインをするスタイルシートのことです。
スタイルシートを使用する際には次のことを注意しなければなりません。

  • HTMLファイルとは別にCSSファイルを制作すること!
     
  • 名前は半角英数ならなんでもOK!拡張子は.cssとしないといけません!
    (一般的にはstyle.cssと付けるのが多い。)
    例 index.html style.css
     
  • スタイルシートの保存場所はできるだけindex.htmlの階層(同じとこ)に置くこと!
     
  • 必ず半角英数で入れること!
     
  • 制作したCSSファイルをHTMLに適用するにはHTMLファイルの<head>内に書くこと!
    (titleの上くらいに書くとよいかな?w)

    <link rel="stylesheet" href="●.css" type="text/css">

    と記入します。(●は自分で作ったCSSの名前を入れます。)
     
  • CSSファイルは何枚も作れますが、名前がかぶらないようにしないといけません。
    例 style01.css style02.css

  • スタイルシートを書くとき一番上に「@charset "Shift_JIS";」と記載します。
    これはこのスタイルシートがShift_JISという文字コードで書かれますよという意味になります。

詳しくは…こちら!

セレクタ

セレクタとはスタイルシートを適用する対象を示す部分を「セレクタ」と言います。
セレクタには4種類ありますがおもに3種類を使います。

  • タイプセレクタ
    要素名のみをセレクタとすること。
    指定した要素に対してスタイルを適用させる。
    例 h1 {
    color: #ff0000:
    }
  • クラスセレクタ
    特定の要素のみにスタイルを適用させる。
    クラスセレクタを使う場合は、必ず文頭に「.(ドット)」を付ける。
    クラス名は任意の名前を付けることができます。
    XHTML文章側では、class属性でクラス名を指定します。
    複合セレクタ
    要素名.クラス名{ プロパティ―: 値:}

    CSS
    .ra {
    color:#ff0000;
    }

    XHTML
    <p class="ra">
    ここを赤色にします。
    <⁄p>

親要素と子要素

CSS 26p

よく親要素と子要素と言葉が出てきますが、よくわからない思います。
実際僕もよくわかりませんw
教科書には…

  • 親要素
    ある要素から見て1つ上の階層にある要素(外側にある要素)
  • 子要素
    ある要素から見て1つ下の階層にある要素(外側にある要素)

とありますが…やっぱりよくわかりませんwww
おそらくですが、

<body>
<p>
ここに
<em>
文字
<⁄em>
入れてください。
<⁄p>

という文章があったとします。
<p>から見て1つ上の階層にある<body>が親要素で、
<p>から見て1つ下(p要素の中にある)<em>が子要素となる。
ってことではないでしょうか?
間違ってたらすいませんm(__)m

トップに戻る