忍者ブログ

からすまる日誌

20191023pm02 スタイルシートを読み込む順番

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

20191023pm02 スタイルシートを読み込む順番

⭐スタイルシートを読み込む順番
 
<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
とか。
PR

コメント

ブログ内検索

カレンダー

03 2025/04 05
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30