HTML vol.7

Study html

セレクタ

  • 要素を指し示すもの。

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
  • active
    • ブラウザがアクセスしているとき
a {
  text-decoration: none;
}
a:link {
  color: red;
}
a:visited {
  color: green;
}
a:active,a:hover {
  text-decoration: underline;
}