3つのこと（ほとんど）CSSについて誰も知りません

CSSヒントテスト：CSSを本当に理解していますか？

キーポイントのレビュー

• ダブルラインの高さを設定する最良の方法は、ユニットレス数（例：2）を使用することです。これにより、異なるフォントサイズの子要素が正しいラインの高さ比を継承できるようにします。
• z-indexそれ自体がオーバーラップを引き起こすという一般的な誤解は、html要素をmargin属性（特に負のマージンを設定する）によって実際に重複する可能性があります。
• 擬似要素と擬似クラスは、CSSの非常に異なる機能です：擬似クラスは特定の条件下で実際のHTML要素に適用され、擬似要素は、実際のHTML要素ではないドキュメントの部分のスタイリングを可能にします。
• W3Cは、擬似エレメントセレクターに2つのコロン（::first-line）と擬似要素のセレクターに1つのコロン（:hover

あなたはCSSに熟練していると思いますか？過去6か月間オンラインで提供した無料のCSSテスト結果が参照されている場合、多くの経験豊富な開発者はCSSについて考えていません。これまでにテストに参加した3,000人以上のうち、平均スコアはわずか55％です。

しかし、平均自体はそれほど面白くありません。人々が間違っている場所についてもっと知りたいです。この記事を書くために、データを分析し、人々が特に低いスコアを獲得した3つの問題に焦点を当てました。各質問を1つずつ説明し、ほとんどの人が選択した答えを示し、正しい答えを説明します。

この記事を読んだ後に自分でテストを受けると、不公平な利点があると言っても安全です！

問題1：ラインハイトを設定する最良の方法

最初の質問は、テキストスタイルに定期的に作業する人にとって簡単なものでなければなりません：

デフォルトでは、Webサイト上のテキストをダブルライン高くする必要があります。これを達成するための最良の方法は次のうちどれですか

値はどれですか？ line-height

• 200%
• 2em
• 2
• double

選択する回答は4つあります。25％の人が運がよかったと予想していますが、この質問に正しく答えるのは31％だけです。時間をかけて自分の答えを選択し、読み続けてください。

まず、

は気を散らすものです。 double唯一の受け入れられているキーワード値はline-heightです。このオプションを選んだのは9％だけだと言ってうれしいです。他の3つの答えは非常に人気があります。 normal

ほとんどの人が選んだ答えは

（39％がこの答えを選択しました）。実際、2emは確かにそれを適用する要素に二重の高さを提供します。 EMはパーセンテージよりも人気があるか、人々が実際に理解していません。 2em ただし、正解は200%です。

私はこのレッスンをずっと前に植え付けられました。この方法でline-heightを常に指定します。

ページのデフォルトのフォントサイズは12ptですが、フォントサイズの24ptのタイトルも含まれているとします。ボディのline-heightを2em（または200%）に設定すると、ドキュメント全体で24pt（ボディフォントのサイズの2倍）ラインの高さを取得します。したがって、タイトルはダブルラインの高さではなく、ダブルラインの高さになります！

代わりに、

を設定すると、フォントサイズが変更された場合でも、line-heightに2

質問2：要素を重ねる方法

この質問は少し難しいです。 CSSレイアウトには頻繁に必要な「スキル」エクスペリエンスが必要です。

次のCSS属性のうち、HTML要素が重複する可能性があるのはどれですか？

• z-index
• margin
• overflow
• background

答えを選びましたか？わかりました、より深く入りましょう。

繰り返しますが、除外しやすいオプションがあります：

。テスターの2％を除くすべての人は、背景の色と画像を制御することを知っていたため、それを避けました。

background残念ながら、ほとんどの人は

直接選択します。最大46％がこの答えを選択しました。誰も

の仕組みを本当に理解していないからだと思います。実際、z-index属性のみを設定しても、z-indexの属性を設定する必要はありません。要するに、z-indexを使用すると、重複する要素の積み重ね順序を制御できますが、最初にオーバーラップする必要があります。 MDNには、「CSS Z-Indexの理解」というタイトルの非常に良い記事があります。詳細については、読む価値があります。 position z-indexz-indexを使用したことがある場合は、簡単に除外できるはずです。ボックスのサイズには適していないコンテンツの動作を制御します。それが切り捨てられているかどうか、ボックスの端から流れるかどうかなどです。繰り返しますが、これはボックスサイズが他のプロパティによって制約されているかどうかに依存します。それでも、22％がそうだと思っています。

これにより、overflowのみが残ります。これは正しい答えです。正しく答えたのはわずか30％でした。要素間に距離を作成する属性がどのように重複するか興味があるかもしれません。実際のCSSレイアウトを行った場合、答えは明らかです。負のマージンは要素を重複させます。

これを実証するには、2つのDiv要素を持つページを作成します。 2番目のdivのmargin-topを-100pxなどの負の値に設定します。強打！ 2番目のDivは、最初のDivの下部100ピクセルをカバーします。

実際には、このようなブロックを意図的に重ねることはほとんどありませんが、マイナスマージンは、HTML要素を通常行かない場所に絞るのに非常に役立ちます。私はそれらを使用して、左または右に浮かぶ要素を親ボックスの塗りつぶし領域に押し込みます。

Webデザインの履歴愛好家の場合、2005年に負のマージンオーバーラップ要素を使用すると、いわゆる1つの真のレイアウト（および後の聖杯レイアウト）を含む3つの列ページレイアウトが行われました。

問題3：擬似要素と擬似クラス

私は認めます、最後の質問は少し卑劣です。しかし、テスターの23％だけがこの質問に正しく答えることができました（これは運よりも悪いです！）。

次の効果のうち、擬似要素を使用して実装するのに最も適した効果はどれですか？

ユーザーがハイパーリンクの上に浮かんだときに、ユーザーに影を追加します。
チェックボックスが選択されると、チェックボックスのラベルが異なる色で表示されます。
異なる背景色を、テーブルの奇妙な列、さらには割り当てます。
柔軟なページレイアウトで、段落の最初の行を太字のテキストとして表示します。

これらの3つの選択はすべて、擬似クラスを使用して実装されています。それらを区別できますか？

擬似クラスは、実際のHTML要素がある可能性がある特定の状態です。ブラウザが特定の条件下で要素に自動的に適用される仮想クラスと考えてください。

擬似要素はドキュメントの一部であり、実際のHTML要素ではない場合でも、CSSを使用するとスタイルができます。それは仮想HTML要素のようなものです - その周りに実際のHTMLタグがない場合でも、スタイルをスタイルできます。

この違いがあるため、これらのオプションを見てみましょう。

ユーザーがハイパーリンクの上に浮かんだときに、ユーザーに影を追加します。

ハイパーリンクは実際のHTML要素です。特定の場合にのみスタイルを適用すること（マウスがその上にホバリングしている場合）は、擬似クラスを使用していることを意味します。この場合、使用する擬似クラスは

です。

テスターの22％は、これを擬似要素であると考えました。 :hover

チェックボックスが選択されると、チェックボックスのラベルが異なる色で表示されます。

同様に、タグは実際のHTML要素であり、仮想要素ではありません。チェックボックスが選択されている場合、ブラウザは

pseudoクラスを適用します。その後、セレクターで使用してチェックボックスをスタイリングしたり、その隣のラベルをスタイルしたりすることもできます（たとえば、隣接する兄弟セレクター

を使用して）。

:checkedテスターの20％は、これを擬似要素であると考えました。

異なる背景色を、テーブルの奇妙な列、さらには割り当てます。

これは本当に人々をだましている質問ですが、再び、実際のHTML要素（この場合はtr要素）にスタイルを適用することについて話しています。 trそれは奇妙なのか、それとも親要素の子要素のセットでさえ、それはあなたが擬似クラスと一致させることができる別のケースにすぎません。

この場合、擬似クラスは、偶数の要素の場合は

（または:nth-child(even)）、奇妙な要素の場合は:nth-child(2n)（または:nth-child(odd)）です。 :nth-child(2n 1)

これは、

と擬似要素が通常非常にあいまいなCSS機能のように聞こえるからだと思いますが、テスターの36％がこれを擬似要素として選択しました。 :nth-child

柔軟なページレイアウトで、段落の最初の行を太字のテキストとして表示します。

もちろん、これは正しい答えです。これまでのところ、うまくいけば、違いが明らかになっています。柔軟なページレイアウトでは、ページのHTMLコードを表示して「そこにある要素には、段落テキストの最初の行のみが含まれている」と言うことはできません。ブラウザは、パラグラフの幅に応じて行をラップします。これは、柔軟なページレイアウトで制御できません。

は、最初の行が2行目に壊れる場所に関係なく、ブロック内のテキストの最初の行にスタイルを適用できる擬似要素です。

:first-lineあなたが「大丈夫、それは合理的に聞こえるが、擬似要素と擬似クラスの違いを誰も知らない」と思っているなら、W3Cはあなたに同意します。 CSS3セレクターの仕様では、2つを区別するために構文を変更して、擬似エレメントセレクターが2つのコロン（

）を使用し、擬似クラスはまだ1つのコロン（

）を使用します。もちろん、後方互換性のために、ブラウザは両方のバージョンをサポートする必要があります。 ::first-line :hoverそうだね、私が言ったように：質問を意味します。でも、もしあなたが私のようなCSSオタクなら、あなたはあなたの擬似要素と擬似クラスの違いを知っていると思います。

スコアはどうですか？

このようなものです。テストでは3つのパズルです。これらの質問の1つに自信を持って答えると、あなたは良い仕事をしています。 2つに正しく答えましたか？悪くない。 3つすべてに正しく答えたら、あなたの考えを聞きたいです！特に、これらの回答を行った後、もっと難しいCSSの質問が必要です。コメントに投稿してください！

これらの質問が気に入ったら、残りのテストを試してみたいと思うかもしれません。安心してください、他の質問はこれらよりもはるかに簡単です...それらのほとんど！

以上が3つのこと（ほとんど）CSSについて誰も知りませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。