忍者ブログ

からすまる日誌 css

授業noteからcss部分を抜粋

序章(5) スタイルシートを読み込む順番

×

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

序章(5) スタイルシートを読み込む順番

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

コメント

ただいまコメントを受けつけておりません。