CSS の基礎を強化するために収集する価値のある CSS 面接の質問 26 個!-CSSチュートリアル-php.cn

CSS は、構造化コンテンツの複雑さと繰り返しを軽減するために Web デザインで非常によく使われています。この記事では、CSS の基礎を強化できる、CSS ベースの面接での 26 の質問を紹介します。

CSS の基礎を強化するために収集する価値のある CSS 面接の質問 26 個!

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

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

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

質問 1: CSS とは何ですか?

CSS (Cascading Style Sheets)

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

質問 2: CSS を開発する理由は何ですか?

CSS

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

質問 3: CSS のメジャーバージョンは何ですか?

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

質問 4: CSS スタイルのコンポーネントは何ですか?

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

セレクター
– セレクターは、スタイルを選択するために使用される HTML タグです。セット内容。 ID、クラス、名前に基づいて HTML 要素を選択します。
属性
– 属性は HTML タグの属性です。つまり、すべての HTML プロパティが CSS プロパティに変換されます。
Values
– CSS の値は、CSS プロパティの有効な値のセットを定義します。

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

Inline

: HTML 要素で直接使用されます

<p style=”colour:skyblue;”>hello world</p>

ログイン後にコピー

外部

: ワークスペースに個別の CSS ファイルを作成し、作成された各 Web ページにリンクします

<head>

<link rel="text/css" href="your_CSS_file_location"/>

</head>

ログイン後にコピー

Internal

: Web ページの head 要素には内部 CSS が実装されています。

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

ログイン後にコピー

質問 6: CSS 仕様は誰が管理していますか?

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
クラス、属性、疑似クラス
要素と疑似要素

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

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

#バージョンが多すぎる – CSS には、HTML や Javascript などの他のパラメーターと比較して多くのバージョンがあります。 CSS1、CSS2、CSS2.1、CSS3。その結果、CSS は、特に初心者にとって非常にわかりにくくなります。
セキュリティの欠如 - CSS はオープンテキストベースのシステムであるため、上書きを防ぐセキュリティシステムが組み込まれていません。読み取り/書き込みアクセス権があれば、誰でも CSS ファイルを変更したり、リンクを変更したりできます。
断片化 - CSS を使用すると、ブラウザーによっては機能しない可能性があります。したがって、Web サイトを公開する前に、Web 開発者は複数のブラウザでプログラムを実行して互換性をテストする必要があります。
複雑さ – Microsoft FrontPage などのサードパーティソフトウェアを使用すると、CSS が複雑になる可能性があります。

#質問 13: RWD (レスポンシブ Web デザイン) とは何ですか?

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

質問 14: CSS エルフの利点は何ですか?

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

質問 15: CSS コンテキストセレクターとは何ですか?

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

子孫結合セレクター

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

質問 16: プログレッシブエンハンスメントとスムーズデグラデーションとは何ですか?

プログレッシブエンハンスメントの概念

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

スムーズデグラデーションの概念

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

質問 17: Web ページにアイコンを追加するにはどうすればよいですか?

font-awesome

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

質問 18: 境界線の幅を指定する属性はどれですか?

border-width

境界線の幅を指定します。 <h2><strong>问题 19：如何区分物理标签和逻辑标签?</strong></h2><p>物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。</p><p>如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">//物理元素 <b>我想用b标签加粗</b> //逻辑元素 <strong>我想用strong标签加粗</strong> //两段文字都加粗了，而且视觉效果完全一样</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><h2><strong>问题 20：如何在CSS中定义一个伪类?它们是用来干什么的</strong></h2><p>CSS伪类是用来添加一些选择器的特殊效果。伪类的语法</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">selector:pseudo-class{property:value;}</pre><div class="contentsignin">ログイン後にコピー</div></div></p> <h2><strong>问题 21：CSS和SCSS有什么区别？</strong></h2> <p><code>CSS 和 SCSS 之间的区别如下：