HTML vol.7

Study, html

• CSS vol.2
  • セレクタ

セレクタ

• 要素を指し示すもの。

HTMLで

<div id="intro">
     hogehoge
</div>

とあるものをCSSで

#intro {
       background-color: pink;
}

と指し示すことができる。

• 要素名をそのまま示すものもセレクタという。

h1 {
   background-color: pink;
}

• ブラウザにはデフォルトのスタイルがある。
• CSSではそのデフォルトの設定を殺して指定ができる。
• 複数の指定で優先される物は細かく指定されている物が優先。

名前の付け方

• 文章中にひとつだけ
• デザインに関する名前はつけてはいけない。
  • HTML文章の構造に関する名前にする。

class

<div class="hogeclass">
     hogehoge
</div>

.hogeclass {

}

• 複数の要素にスタイルを指定するのに使うセレクタ
• 特定の場所を指定したい場合に使う。
• 要素を特定してスタイルを当てることもできる。

子孫セレクタ

• セレクタを二つ並べることによりセレクタ内の特定セレクタにだけ適応が可能。

<div id="content">
     <p>It's a Sony</p>
</div>

#content p {
	 color: red;
}

全要素に当てることもできる。

 * {
  background-color: blue;
 }

a要素に指定できる疑似クラス

• link
  • まだ訪問していないとき
• visited
  • 一度でもリンク先を訪問したとき
• hover
  • マウスカーソルがa要素の範囲内にいるとき
• active
  • ブラウザがアクセスしているとき

a {
  text-decoration: none;
}
a:link {
  color: red;
}
a:visited {
  color: green;
}
a:active,a:hover {
  text-decoration: underline;
}

Permalink | コメント(0)