CSS 面接の 29 の質問の要約 (知識ポイントの分析)

この記事では、CSS インタビューの 29 の知識ポイントを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

CSS とは、Cascading Style Sheets の略で、HTML などのマークアップを記述するために使用されるスタイルシート言語です。言語。これは Web ページのデザインに使用される三銃士の 1 つで、他の 2 つは HTML と Javascript です。

CSS は、レイアウト、色、フォントなどのスタイルとコンテンツを分離するように設計されています。この分離により、コンテンツのアクセシビリティが向上し、スタイル機能の仕様の柔軟性と制御が向上し、複数の Web ページで形式を共有できるようになり、構造化コンテンツの複雑さと重複が軽減されます。 これは単純な構文を持ち、多数の英語のキーワードを使用してさまざまなスタイル属性の名前を指定します。

CSS の基本について説明したので、CSS ベースの重要な面接の質問を見てみましょう。

は、HTML 要素にとって非常にシンプルなスタイル言語です。これは Web デザインで非常に人気があり、そのアプリケーションは XHTML でも一般的です。

は、Web 開発者が作成している Web ページのレイアウトをデザインする方法として 1997 年に開発されました。その目的は、開発者が Web サイトのコードのコンテンツと構造をビジュアル デザインから分離できるようにすることです。 この構造とデザインの分離により、HTML は本来よりも多くの機能を実行できるようになります。

[推奨チュートリアル:

]

CSS のさまざまなバージョン:

CSS1
CSS2
CSS2.1
CSS3

スタイル ルールは 3 つの部分で構成されます:

• セレクター

  – セレクターは、スタイルを選択するために使用される HTML タグです。セット内容。 ID、クラス、名前に基づいて HTML 要素を選択します。

• 属性

  – 属性は HTML タグの属性です。つまり、すべての HTML プロパティが CSS プロパティに変換されます。

• Values

  – CSS の値は、CSS プロパティの有効な値のセットを定義します。

#質問 5: CSS を Web ページに統合する方法は何通りありますか

#CSS は 3 つの方法で統合できます

Inline

<p>hello world</p>

<link>

     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>

World Wide Web Consortium は CSS 仕様を管理しています。

質問 7: 擬似要素とはどういう意味ですか?

疑似要素は、選択した要素の特定の部分のスタイルを可能にするセレクターに追加されるキーワードです。 CSS は HTML マークアップ内にスタイルを適用するために使用され、実際のドキュメントに影響を与えることなくドキュメントにマークアップを追加できます。

• コンテンツの挿入

• 文法:

Selector: :pseudo-element
{Property1 :value;
Property2 :value;}

質問 8: CSS の利点は何ですか?

CSS の利点は次のとおりです:

一貫性
• – CSS は、デザイナーが他のものを構築するために使用できる一貫したフレームワークの構築に役立ちます。サイト。その結果、Webデザイナーの効率も向上します。

使いやすさ
• – CSS は学習が非常に簡単で、Web サイトの開発が簡素化されます。すべてのコードは 1 ページに配置されます。つまり、コード行の改善や編集を複数のページにわたって繰り返す必要はありません。

*サイトの速度
• * – 通常、Web サイトでは最大

  2 ページ以上のコードを使用できます。しかし、CSS を使用すれば、これは問題になりません。必要なコードは 2 ～ 3 行のみであるため、Web サイトのデータベースはクリーンなままであり、Web サイトの読み込みの問題は発生しません。

デバイスの互換性
• – 人々はさまざまな種類のスマート デバイスを使用してインターネットにアクセスするため、レスポンシブ Web デザインが必要です。ここでの CSS の役割は、Web ページの応答性を高め、すべてのデバイスで同じように表示されるようにすることです。

マルチブラウザのサポート
• – CSS はマルチブラウザをサポートしており、すべての主要なインターネット ブラウザと互換性があります。

• 再配置 – CSS を使用すると、ページ上の Web 要素の位置の変更を定義できます。この実装により、開発者は、ページの美的魅力やその他の考慮事項に合わせて、好きな場所に HTML 要素を配置できます。

質問 9: CSS グラデーションとは何ですか?

グラデーションとは、2 つの画像の間に中間フレームを作成して最初の画像の外観を取得し、その後 2 番目の画像に展開するプロセスであり、主にアニメーションの作成に使用されます。

質問 10: CSS の特異性とは何ですか?

CSS 特異性は、要素がどのスタイル宣言を使用する必要があるかを決定するスコアまたはレベルです。 CSS には、特定のレベルのセレクターを付与できる次の 4 つのカテゴリがあります。

• #インライン スタイル

• ID

• クラス、属性、疑似クラス

• 要素と疑似要素

質問 11: CSS の欠点は何ですか?

• #バージョンが多すぎる – CSS には、HTML や Javascript などの他のパラメーターと比較して多くのバージョンがあります。 CSS1、CSS2、CSS2.1、CSS3。その結果、CSS は、特に初心者にとって非常にわかりにくくなります。

• セキュリティの欠如 - CSS はオープン テキスト ベースのシステムであるため、上書きを防ぐセキュリティ システムが組み込まれていません。読み取り/書き込みアクセス権があれば、誰でも CSS ファイルを変更したり、リンクを変更したりできます。

• 断片化 - CSS を使用すると、ブラウザーによっては機能しない可能性があります。したがって、Web サイトを公開する前に、Web 開発者は複数のブラウザでプログラムを実行して互換性をテストする必要があります。

• 複雑さ – Microsoft FrontPage などのサードパーティ ソフトウェアを使用すると、CSS が複雑になる可能性があります。

RWD (レスポンシブ Web デザイン) テクノロジーは、あらゆる画面サイズとモバイル、タブレット、デスクトップ、ラップトップなどのデバイスでデザイン ページを完璧に表示できるため、デバイスごとに異なるページを作成する必要がなくなります。

CSS エルフの利点は次のとおりです:

組み合わせることでさまざまな小さな画像が 1 つの画像に結合され、Web ページの読み込み時間が短縮されます。
HTTP リクエストを削減し、ロード時間を短縮します。

コンテキスト セレクターは、厳密には

と呼ばれ、スペースで区切られたタグ名のセットです。指定された祖先要素の子孫であるタグを選択するために使用されます。タグの階層内にそのような祖先が「上流」にある限り、そのタグは選択されます。タグとその祖先であるコンテキストの間にレベルがいくつあるかは関係ありません。

は、最も基本的なユーザビリティから始めることを指します。サイト ページが低レベルのブラウザーでの使いやすさとアクセシビリティに基づいて構築され、徐々に機能が追加され、ユーザー エクスペリエンスが向上します。基本的に、最初にマークアップ言語を使用してページを作成し、次にスタイル シートを介してページ スタイルを制御するなど、私たちの日常的な開発習慣の一部はすべてプログレッシブ エンハンスメントの概念に属します。その他のより明白な動作には、次のような新しいテクノロジの使用が含まれます。 HTML5 および CSS3 として、高度なブラウザー向けに、ページのユーザー エクスペリエンスの豊かさを向上させます。

とは、まず最新のテクノロジーを使用して、高度なブラウザー向けの最強の機能とユーザー エクスペリエンスを構築し、次にブラウザーの制限に基づいてサポートできない機能とユーザー エクスペリエンスを徐々に削減することを指します。低レベルのブラウザ、機能とエクスペリエンス。日常の開発では、スムーズな機能低下の典型的な例は、最初に Chrome 用のページ コードを作成し、次に IE の例外を修正するか、IE に実装できない機能を削除することです。つまり、これら 2 つの概念的な方法は、実際には私たちの日々の開発作業の中で長い間共存してきましたが、「プログレッシブ エンハンスメント」と「スムーズ デグラデーション」という用語が一般的になり始めたのは近年のことです。現在の HTML5 と CSS3 の実用化において、この 2 つの概念は特に重要であり、常に変化する新しいテクノロジーを使用して、主流のブラウザーで基本的な使いやすさを備えたサイトを構築し、高度なブラウザーのエクスペリエンスを向上させるにはどうすればよいでしょうか?開発プロセス中に明確にする必要があるアイデアです。

や Alibaba の iconfont などのアイコン ライブラリを使用して、HTML Web ページにアイコンを追加できます。指定されたアイコン クラスの名前をインライン HTML 要素に追加する必要があります。 (<i></i> または <span></span>)。アイコン ライブラリのアイコンはスケーラブルなベクターであり、CSS を使用してカスタマイズできます。

境界線の幅を指定します。 <h4><strong>问题 18：如何区分物理标签和逻辑标签?</strong></h4> <p>物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。</p> <p>如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">//物理元素 &lt;b&gt;我想用b标签加粗&lt;/b&gt;   //逻辑元素 &lt;strong&gt;我想用strong标签加粗&lt;/strong&gt;   //两段文字都加粗了，而且视觉效果完全一样</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>确实，文字加粗了，两者都达到了我们想要的目的，但是我们忽略了一个问题，既然b标签可以加粗，那么strong这个标签同样是加粗，存在的 意义又是什么呢？既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？</p> <p><strong>物理元素</strong></p> <p>物理元素，又叫实体标签，它所做的是一种物理行为，比如上面我把一段文字用b标签加粗了，它所传达的给浏览器，告诉浏览器 我要加粗这段文字，从单词Bold中也可以看出来，英文中仅仅是加粗的意思，并没有其他作用。总结来说就是一句话： 物理元素就是告诉浏览器该怎么显示出来。</p> <p><strong>逻辑元素</strong></p> <p>逻辑元素，从英文字面上Strong就可以看出它是强调的意思，所以我们用这个逻辑元素(如上strong)来向浏览器传达 一个强调某段文字重要性的消息，说明此文字较为重要，也有利于搜索引擎收录。</p> <p>Web标准主张XHTML不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用别的方式强调，也可以通过css来改变strong的具体表现 ，还有就是并不是有了strong逻辑标签，就不用b标签来表示字体加粗了，b标签和strong标签默认情况下强调的效果一致，strong完全可以定义成别的样式，用来强调 效果，但是最好符合W3C标准，它更提倡内容与样式分离，所以单纯为了达到加粗而使用b标签不建议这样做， 从XHTML文档有意义性及用户体验角度来说，strong逻辑标签更加合适，而SEO方面，则针对优化情况而定。</p> <h4><strong>问题19：如何在CSS中定义一个伪类?它们是用来干什么的</strong></h4> <p>CSS伪类是用来添加一些选择器的特殊效果。伪类的语法</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">selector:pseudo-class{property:value;}</pre><div class="contentsignin">ログイン後にコピー</div></div> <h4><strong>问题 20：CSS和SCSS有什么区别？</strong></h4> <p><code>CSS 和 SCSS 之间的区别如下：

• CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。

• SCSS 提供了一些变量，可以使用这些变量来缩短代码，这是与 CSS 相比的一大优势。

问题 21：嵌入式样式表的优缺点是什么？

嵌入式样式表的优点:

• 可以在一个文档中创建多种标签类型。

• 在复杂情况下，可以使用选择器和分组方法来应用样式。

• 无需额外下载。

嵌入式样式表的缺点：

无法控制多个文档。

问题 22：列出使用的各种媒体类型。

不同的介质不区分大小写，因此它们具有不同的属性。 他们是：

• aural - 用于语音和音频合成器

• print - 用于打印机

• projection - 用于方案展示，比如幻灯片

• handheld -     用于小的手持的设备

• screen -  用于电脑显示器

问题 23：font 的属性有哪些？

• Font-style

• Font-variant

• Font-weight

• Font-size/line-weight

• Font-family

问题 24：“规则集”是什么意思？

该指令告诉浏览器如何在HTML页面上渲染特定元素。 它由一个选择器和一个遵循规则集的声明块组成。 选择器可以附加到其他选择器，以通过规则集进行标识。

问题 25：什么是 CSS 框架？

CSS 框架是一个库，它允许使用CSS语言进行更轻松，更符合标准的Web设计。 这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。 一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。

質問 26: 画像の Base64 エンコードを使用する利点と欠点を簡単に紹介します。

base64 エンコードは、特定のアルゴリズムを使用して画像を長い文字列にエンコードする画像処理形式です。ページに表示されるときに、その文字列を使用して画像の
を置き換えることができます。 .url 属性。
base64 を使用する利点は次のとおりです。
(1) 画像の HTTP リクエストを削減します。
base64 を使用する欠点は次のとおりです。
(1) Base64 のエンコード原則によると、エンコードされたサイズは元のファイルよりも大きくなります サイズは 1/3 大きくなります 大きな画像を HTML/CSS にエンコードすると、ファイル サイズが大きくなり、ファイルの読み込み速度に影響するだけでなく、読み込みにかかる時間も長くなりますブラウザーが HTML または CSS ファイルを解析してレンダリングします。
(2) Base64 を使用して直接キャッシュすることはできません。キャッシュするには、HTML や CSS など、base64 を含むファイルのみをキャッシュできます。これは、ドメイン内の画像を直接キャッシュする効果よりもはるかに悪いです。

(3) 互換性の問題により、ie8 より前のブラウザはサポートされていません。
一般に、一部の Web サイトの小さなアイコンは、base64 イメージを使用して導入できます。

質問 27: BFC 仕様 (ブロック フォーマット コンテキスト) について理解していますか?

一般に、ルート要素は BFC 領域です。浮動要素や絶対配置要素も BFC を形成します。表示属性の値が inline-block や flex などの
属性の場合も BFC が作成されます。また、要素のオーバーフロー値が表示されない場合にも BFC が作成されます。

IFC は行レベルの書式設定コンテキストを指し、次のようなレイアウト ルールがあります。

(2) 1行で足りない場合は自動的に次の行に切り替わります。
(3) 行レベルのコンテキストの高さは、最も高い内部インライン ボックスの高さによって決まります。

質問 29: CSS を最適化してパフォーマンスを向上させる方法は何ですか?

読み込みパフォーマンス:
(1) CSS 圧縮: 記述された CSS をパックして圧縮すると、ボリュームを大幅に削減できます。
(2) CSS 単一スタイル: 下と左のマージンが必要な場合、margin:top 0bottom 0; が選択されることが多いですが、margin-bottom:bot
tom;margin-left:left; を実行した方が効率的です。 。
(3) @import の使用を減らし、link を使用することをお勧めします。これは、後者はページのロード時に一緒にロードされ、前者はページがロードされるのを待ってからロードされるためです。
セレクター性能:
(1) キーセレクター（キーセレクター）。セレクターの最後の部分はキー セレクター (つまり、ターゲット要素と一致するために使用される部分) です。 CSS セレクターは右から #​​##left に一致します。子孫セレクターを使用する場合、ブラウザーはすべての子要素を走査して、それが指定された要素であるかどうかなどを判断します。
(2) ルールのキー セレクターとして ID セレクターがある場合は、ルールにタグを追加しないでください。無関係なルールをフィルタリングして除外します (スタイル システムがルールの一致に時間を浪費することがなくなります)。
(3) *{} などのワイルドカード ルールの使用は避けてください。計算量は膨大です。使用する必要がある要素のみを選択してください。
(4) 選択するタグはできるだけ少なくしてください。ただし、クラスを使用してください。
(5) 子孫セレクターの使用をできる限り少なくし、セレクターの重さを軽減します。子孫セレクターのコストが最も高くなります。セレクターの深さを最小限に抑えるようにしてください。最大値は
3 レベルを超えてはなりません。各タグ要素を関連付けるには、より多くのクラスを使用してください。
(6) どの属性を継承できるかを理解し、これらの属性に対するルールを繰り返し指定しないようにします。
レンダリング パフォーマンス:
(1) フローティングとポジショニングなどの高パフォーマンス属性を慎重に使用してください。
(2) ページの再配置と再描画を最小限に抑えます。
(3) 空のルールを削除します: {}。空のルールの理由は通常、スタイルを予約するためです。これらの空のルールを削除すると、間違いなく CSS ドキュメントのサイズが削減されます。
(4) 属性値が0の場合、ユニットは付加されません。
(5) 属性値は浮動小数点 0.** で、小数点前の 0 は省略可能です。
(6) さまざまなブラウザーのプレフィックスを標準化します。ブラウザーのプレフィックスを持つものが最初になります。標準プロパティが続きます。
(7) @import プレフィックスは使用しないでください。CSS の読み込み速度に影響します。
(8) セレクターのネストを最適化し、深すぎるレベルを避けるようにしてください。
(9) CSS スプライト画像は、同じページ内の同様の部分にある小さなアイコンであり、使いやすくページリクエストの数を減らしますが、同時に画像自体が大きくなります。使用する前にメリットとデメリットをよく検討してください。
(10) 表示属性を正しく使用します。表示の役割により、一部のスタイルの組み合わせは無効になり、スタイルのサイズが増大するだけであり、解析パフォーマンスにも影響します。
(11) Web フォントを乱用しないでください。 WebFont は中国の Web サイトでは馴染みがないかもしれませんが、海外では非常に人気があります。 Web フォントはサイズが大きいことが多く、ブラウザによっては Web フォントのダウンロード時にページのレンダリングがブロックされ、パフォーマンスが低下することがあります。
保守性と堅牢性:
(1) 同じ属性を持つスタイルを抽出し、クラスを介して統合してページ内で使用することで、CSS の保守性が向上します。
(2) スタイルとコンテンツの分離: CSS コードを外部 CSS に定義します。


元のアドレス: https://codersera.com/blog/top-css-interview-questions-and-answers/

プログラミング関連の知識については、

プログラミングビデオ

にアクセスしてください! ！

以上がCSS 面接の 29 の質問の要約 (知識ポイントの分析)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。