スタイルの継承
スタイルの継承-2
- 準備作業で作成した「keisyou .html」を「keisyou02.html」という名前でtextフォルダーに保存します。
- brackts編集画面を左右に分割し、左側に「keisyou02.html」を配置します。右側に新規ファイルを作成します。
- 新規ファイルについてファイルの種類を「css」に設定し、下記を記載し「style」フォルダーに「keisyou02.css」として保存します。
- 「keisyou02.html」のhead要素内に「keisyou02.css」を呼び込むlinkを設定し上書き保存します。
<link rel="stylesheet" href="../style/keisyou02.css" type="text/css"> - <h1>と</h1>の間に「スタイルの継承-2」を挿入します。
ul要素およびem要素の文字の色を黒に設定しました。ul要素に設定したcolorプロパティは継承されますので、子要素のli要素も継承されることになります。
ただ全てのプロパティが継承されるわけではありません。
- HTML
- <!DOCTYPE html>
- <html lang="ja">
- <head>
- <meta charset="UTF-8">
- <title>スタイルの継承-2</title>
- <link rel="stylesheet" href="../style/back.css" type="text/css">
- <link rel="stylesheet" href="../style/keisyou02.css" type="text/css">
- </head>
- <body>
- <h1>スタイルの継承</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{
- color: #ff0000;
- }
- ul,
- em{
- color: #000000;
- }
