Embedded StyleSheet（エンべデットスタイルシート）

授業

埋め込みスタイルシート

  • [ head ]〜[ /head ]内に[ style ]〜[ /style ]を入れる

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<title>初めてのスタイルシート</title>
<style>


h1 {
  color: #ff0000;       
  font-size: 2.0em;
}
/* 16pxが基準値となる大きさ */
/* [em]（エン）は基準値を１とする大きさ */


</style>
</head>
<body>
<h1>大見出し要素</h1>
<p>本文本文本文本文本文本文本文本文</p>
<h2>中見出し要素</h2>
<p>本文本文本文本文本文本文本文本文</p>


</body>
</html>


ブラウザで表示

bodyの指定位置(セレクターによる優先値)

  • [ h ],[ p ]より[ body ]を先に入れる
<!DOCTYPE html>
<html lang="ja">
<head>
<title>初めてのスタイルシート</title>
<style>


body {
  background-color: #8fbc8b;
}
/* [ body ]タグが先に来る */
/* 背景の表示 */


h1 {
  color: #ff0000;
  font-size: 2.0em;
}

h2 {
  color: white;
  font-size: 20px;

}


</style>
</head>
<body>
<h1>大見出し要素</h1>
<p>本文本文本文本文本文本文本文本文</p>
<h2>中見出し要素</h2>
<p>本文本文本文本文本文本文本文本文</p>


</body>
</html>


ブラウザで表示