スタイルシートを読み込む順番
<link>タグの中でスタイルシートのファイルを読む(背景は赤)
→その次の行で<style>タグがある(背景は灰色)
→<body>内にインラインでスタイル属性で書いてある(背景は青)
すると背景は青になる
インラインで書いてあるものが一番に強い
他のファイルからここを変えたいと思っても、
インラインに属性で書いてあったら変わらない
(だから更新が大変なのでインラインでは書かないようになった)
css
(Cascading Style Sheets)とはカスケーディング・スタイル・シートの略称
カスケーディング
→継承が起こる、みたいな意味
前に書いたものよりも後に書いたものが優先して適用される
<h1>の文字の色を変えてみる
h1{
color:pink;
background:lightgreen;
}
cssの基本の書き方
セレクター{
プロパティ:値;
}
セレクターは場所を指定している。
<h1>とも書けるし、<body h1>とも書ける
(<body>の中にある<h1>という意味。半角スペースを空けて子孫を書いていく)
タグ名で指定しているのではなく、あくまで「場所」を指定しているので注意
セレクターの設定の仕方によって、実はさっきの実行の順番も
ひっくり返すことができるらしい
プロパティは複数書くこともできる
セレクター{
プロパティ:値;
プロパティ:値;
}
htmlが汚くなってきたので新しいのを作りましょう
新規ファイル
→名前を付けて保存
→hobby.html
階層はindex.htmlと同じところでいい
<!DOCTYPE html>から必要項目を打ち込む
今度は<h2>の下に文章をつけましょう
<p>タグを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF=8">
<title>趣味のページ</title>
</head>
<body>
<h1>趣味</h1>
<h2>ドライブ</h2>
<p>ドライブが好きな理由を書くところやで</p>
<h2>釣り</h2>
<p>釣りが好きな理由を書くところですよ</p>
</body>
</html>
index.htmlに戻って、リンクをhobby.htmlに張る
<h2>趣味</h2>というところを、<a>タグでマークアップし、リンク先を指定する
<h2><a href="hobby.html">趣味</a></h2>
書けたらhobby.htmlとindex.htmlを保存し動作確認
hobby.htmlにもcssを適用させる
<title>タグの下に<link>タグを追加する
<link rel="stylesheet" href="css/style.css">
これで、hobby.htmlにもcssが適用
相対パス
"css/style.css"と書いた部分と、
"hobby.html"と書いた部分がある
これは「相対パス」という書き方
↑
↓
絶対パス
http://google.com
とか