スタイルの継承
スタイルの継承-3
- 準備作業で作成した「keisyou .html」を「keisyou0.3html」という名前でtextフォルダーに保存します。
- brackts編集画面を左右に分割し、左側に「keisyou03.html」を配置します。右側に新規ファイルを作成します。
- 新規ファイルについてファイルの種類を「css」に設定し、下記を記載し「style」フォルダーに「keisyou03.css」として保存します。
- 「keisyou03.html」のhead要素内に「keisyou03.css」を呼び込むlinkを設定し上書き保存します。
<link rel="stylesheet" href="../style/keisyou03.css" type="text/css"> - <h1>と</h1>の間に「スタイルの継承-3」に書き換えます。
全てのプロパティが継承されるわけではありません。backgroundやborderなどは継承されないプロパティの為、ある要素にプロパティの値を設定しても子要素や孫要素にはプロパティの値は継承されません。
borderプロパティは値の継承が行われませんので、子要素や孫要素のborderプロパティの値はデフォルトのままです。
このようにプロパティには継承されるものと継承されないものに分かれています。現在設定しているプロパティがどちらのタイプなのか認識しながら設定するようにして下さい。
- HTML
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>スタイルの継承-3</title>
- <link rel="stylesheet" href="../style/back.css" type="text/css">
- <link rel="stylesheet" href="../style/keisyou03.css" type="text/css">
- </head>
- <body>
- <h1>スタイルの継承-3</h1>
- <div>
- <p>
- 本の<em>カテゴリ</em>
- </p>
- <ul>
- <li>SF</li>
- <li>時代小説</li>
- </ul>
- </div>
- <p class="back"><a href="../index.html">トップページへ戻る</a></p>
- </body>
- </html>
- CSS
- @charset"UTF-8";
- body{
- border: 1px dotted #ffa500;
- }
