⭐スタイルシートを読み込む順番
<link>タグの中でスタイルシートのファイルを読んだ(背景は赤という設定)
↓
その次の行で<style>タグがあった(背景は灰色)
↓
<body>内にインラインでスタイル属性で書いてある(背景は青)
すると背景は青になる。
インラインで書いてあるものが最強に強い。他のファイルからここを変えたいと思っても、インラインに属性で書いてあったら変わらない。(だから、更新が大変なのでインラインでは書かないようになった)
⭐css
>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
とか。