【解決方法】この CSS コードを修正します

プログラミングQA


手順は次のとおりです。

styles.css ファイルを開きます。

背景色を #E0E0E2 に設定する body 要素の CSS ルールを追加します。

テキストの色を #721817 に設定する h1 要素の CSS ルールを追加します。

テキストの色を #721817 に設定する h2 要素の CSS ルールを追加します。

テキストを中央揃えにする center-text CSS クラスの CSS ルールを追加します。

id ロゴを持つ HTML 要素の CSS ルールを追加します。 左右のマージンを auto に設定し、表示をブロック要素に変更します。

h2 要素の子であるすべての span 要素に対して、テキストの色を #FA9F42 に設定し、フォント サイズを 0.75em に設定する CSS ルールを追加します。

id copyright を持つ HTML 要素の CSS ルールを追加します。 上部パディングを 12 ピクセルに、フォント サイズを 0.75em に設定します。

CSS
body{
    background-color:#E0E0E2;
}
h1{
    color: #721817;
}
h2{
    color: #721817;
}
.center-text{
text-align: center;
}
#logo{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
#span {
    color: #FA9F42;
    font-size: 0.75em;
}
#copyright {
    padding-top: 12px;
    font-size: 0.75em;
}

発生するエラーは次のとおりです。

xxThe 'NEW' labels within <h2> tags should have a color of '#fa9f42' 
xxThe element with the ID 'copyright' should have a font-size of 0.75em

私が試したこと:

色を再入力し、求められているフォントサイズを再入力しようとしました。

解決策 1

エラーは、何が間違っているかを正確に示しています。 CSS を調べて h2 要素記述子を見つけ、そのプロパティを調べると、値が期待どおりに設定されていません。

「著作権」についてもまったく同じことが言えます。

これはあなたの宿題なので、訂正しません。 私がそうしたとしても、あなたは何も学べないでしょう。

解決策 3

警告: 私は CSS の初心者ですが、いくつか読んだ後、 span 内側のタグ h2 タグは h2 > span. したがって、「テキストの色を #FA9F42 に設定し、フォント サイズを 0.75em に設定する、h2 要素の子であるすべての span 要素に CSS ルールを追加する」というルールが適用されます。 になります:

h2 > span {color: #FA9F42; font-size: 0.75em;}

ネストされた span タグを選択しないことに注意してください。

解決策 2

ご意見ありがとうございます。 h2記述子を見て、色を入れます。 1 つの記述子に 2 つの色を含めることはできますか? id 要素の「copyright」については、CSS の id にハッシュタグ記号が使用されているような印象を受けました。 私が感謝しているこの資料を私に学んでほしいと思っていることは知っていますが、私は本当に立ち止まっています.

body{
    background-color:#E0E0E2;
}
h1{
    color: #721817;
}
h2{
    color: #721817;
}
.center-text{
text-align: center;
}
#logo{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
span h2{
    color: #FA9F42;
    font-size: 0.75em;
}
#copyright {
    padding-top: 12px;
    font-size: 0.75em;
}

解決策 7

このようになるはずです
コードを適切に実行できる

CSS
body{
    background-color:#e0e0e2;
}
h1{
    color: #721817;
}
h2{
    color: #721817;
}
.center-text{
text-align: center;
}
#id{
    display: block;
}
#copyright {
padding-top: 12px;
font-size: 0.75em;
 }
h2 > span{ 
    color: #fa9f42; 
    font-size: 0.75em 
}
#logo{
margin-left: auto;
margin-right: auto;
display: block;
}

チップ :
1. 子供であり、h2 が親であるスパンにルールを適用する必要があるため
h2>スパンである必要があります
2. id がないので # は不要

解決策 9

h2 内に別のスパン クラスを追加して、色を #721817 (赤) から #174672 (青) に変更できます。

コメント

タイトルとURLをコピーしました