top 30 popular css interview questions
最も人気のあるCSSインタビューの質問と回答のリスト:
ザ・ CSS ほぼすべての基本および高度なCSSカテゴリをカバーする質問が例で説明されています。
CSSは、Web開発の最も重要な機能の1つです。これは、Webページの外観を説明するための言語です。
したがって、CSSの基本部分と高度な部分をすべてカバーすることが不可欠です。優れたWeb開発者になり、Web開発者のインタビューを成功させるには、CSSを学ぶ必要があります。
よくあるCSSインタビューの質問
以下に、CSSインタビューで最もよく寄せられる質問と回答のリストを簡単に説明します。
はじめましょう!!
Q#1)CSSとは何ですか?
回答: CSSは、HTMLWebページのスタイルの概要を示します。これは、HTMLWebページの動作を設定できる言語です。 HTMLコンテンツが画面にどのように表示されるかを説明します。
CSSは、いくつかのHTMLWebページのレイアウトを制御します。 CSSはカスケードスタイルシートと呼ばれます。
Q#2)現在のバージョンのCSSで使用されているすべてのモジュールに名前を付けます。
回答:CSSには、以下に示すようにいくつかのモジュールがあります。
- セレクター
- ボックスモデル
- 背景と境界線
- テキスト効果
- 2D / 3D変換
- アニメーション
- 複数列のレイアウト
- ユーザーインターフェース。
Q#3)CSS2とCSS3を区別します。
回答: CSS2とCSS3の違いは次のとおりです。
- CSS3は、モジュールと呼ばれる2つのさまざまなセクションに分かれています。一方、CSS2では、すべての情報が含まれる1つのドキュメントにすべてがアクセスされます。
- CSS3モジュールはほとんどすべてのブラウザでサポートされていますが、CSSとCSS2のモジュールはすべてのブラウザでサポートされているわけではありません。
- CSS3では、Border-radiusやbox-shadow、flexboxなど、グラフィックに関連する多くの特性が導入されていることがわかります。
- CSS3では、ユーザーは、background-image、background-position、background-repeatスタイルなどのプロパティを使用して、Webページ上の複数の背景画像を正確にすることができます。
Q#4)さまざまな種類のCSSを引用してください。
回答:以下に説明するように、CSSには3つのタイプがあります。
- 外部: これらは別々のファイルに書き込まれます。
- 内部: これらは、Webページのコードドキュメントの上部に引用されています。
- 列をなして: これらはテキストのすぐ隣に書かれています。
Q#5)外部スタイルシートが役立つのはなぜですか?
回答: 外部スタイルシートは、すべてのスタイリングコードを1つのファイルに記述し、その外部スタイルシートファイルのリンクを参照するだけでどこでも使用できるため、非常に便利です。
したがって、その外部ファイルに変更を加えると、その変更はWebページでも確認できます。したがって、これは非常に便利であり、大きなファイルでの作業を簡単にすることができます。
Q#6)埋め込みスタイルシートの用途は何ですか ?
回答: 埋め込まれたスタイルシートは、HTMLドキュメントの1か所でスタイルを定義する特権を与えてくれます。
埋め込まれたスタイルシートを使用して複数のクラスを生成し、Webページの複数のタグタイプで使用できます。また、情報をインポートするために追加のダウンロードは必要ありません。
例:
p { font-family: georgia, serif; font-size: x-large; color:#ff9900; } a:hover { color: LimeGreen; text-decoration: none; } Embedded style sheet gives us the privilege to define styles at one place in a HTML document. We can generate multiple classes using embedded style sheet to use on multiple tag types a web page and also there is no extra downloading required importing the information.
Q#7)CSSセレクターの使い方は?
回答: CSSセレクターを使用することで、スタイルシートとHTMLファイルの間の架け橋であると言えるように、スタイルを設定するコンテンツを選択できます。
CSSセレクターの構文は、ID、クラス、タイプなどで作成されたHTML要素を「選択」します。
Q#8)トゥイーンの概念を説明してください。
回答: トゥイーンは、2つの画像の間に中間フレームを作成して、最初の画像の外観を取得し、それが2番目の画像に発展するプロセスです。
主にアニメーションの作成に使用されます。
Q#9)CSSイメージスクリプトを定義します。
回答: CSS画像スクリプトは、1つの画像に配置される画像のグループです。複数の画像を単一のWebページに投影しながら、サーバーへのロード時間とリクエスト数を削減します。
Q#10)レスポンシブウェブデザインという用語を説明してください。
回答: これは、画面のサイズ、さまざまなデバイスでのWebページの移植性など、さまざまなコンポーネントに基づいて、ユーザーのアクティビティや条件に応じてWebページを設計および開発する方法です。さまざまな柔軟なレイアウトとグリッド。
Q#11)CSSカウンターとは何ですか?
回答: CSSカウンターは、変数が使用された回数をインスペクターが追跡するCSSのルールによってインクリメントできる変数です。
Q#12)CSSの特異性とは何ですか?
回答: CSSの特異性は、要素に使用する必要のあるスタイル宣言を決定するスコアまたはランクです。 (*)このユニバーサルセレクターは特異性が低く、IDセレクターは特異性が高い。
CSSには、セレクターの特異性レベルを承認する4つのカテゴリーがあります。
- インラインスタイル
- ID
- クラス、属性、および疑似クラス。
- 要素と疑似要素。
Q#13)特異度を計算するにはどうすればよいですか?
回答: 特異性を計算するには、0から始め、IDごとに1000を追加し、各要素名または疑似要素を持つ属性、クラス、または疑似クラスに10を追加し、後でそれらに1を追加する必要があります。 。
例:
h2 #content h2 heading
Q#14)CSSを使用して角を丸くするにはどうすればよいですか?
回答: プロパティ「border-radius」を使用して、角を丸くすることができます。このプロパティは任意の要素に適用できます。
例:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
Q#15)HTML要素に境界線画像をどのように追加しますか?
回答: CSSの「border-image」のプロパティを使用して、要素と一緒に境界線画像として使用する画像を設定できます。
例:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }
Q#16)CSSのグラデーションとは何ですか?
回答: これはCSSのプロパティであり、2つまたは3つ以上の指定された色の間でスムーズな変換を表示できます。
CSSに存在するグラデーションには2つのタイプがあります。 彼らです:
- 線形勾配
- 放射状グラデーション
Q#17)CSSフレックスボックスとは何ですか?
回答: これにより、CSSのfloatまたはpositioningプロパティを使用せずに、柔軟でレスポンシブなレイアウト構造を設計できます。 CSSフレックスボックスを使用するには、最初にフレックスコンテナを定義する必要があります。
例:
.flex-container { display: flex; background-color: #f4b042; } .flex-container > div { background-color: #d60a33; margin: 10px; padding: 20px; font-size: 30px; } 1 2 3 Example of flex box.
Q#18)フレックスボックスのすべてのプロパティを記述します。
回答: HTMLWebページで使用されるフレックスボックスにはいくつかのプロパティがあります。
彼らです:
- フレックス方向
- フレックスラップ
- フレックスフロー
- 正当化-コンテンツ
- 整列アイテム
- 整列コンテンツ
Q#19)Webページ全体に垂直にまたがる分割で画像を垂直に配置するにはどうすればよいですか?
回答: これは、要素でverticle-align:middleという構文を使用して実行でき、2つのテキストスパンを別のスパンでバインドすることもできます。その後、コンテンツ#iconでverticle-align:middleを使用する必要があります。
Q#20)パディングとマージンの違いは何ですか?
回答: CSSでは、マージンは要素の周囲にスペースを作成できるプロパティです。外部で定義された境界線にスペースを作成することもできます。
CSSには、次のようなマージンプロパティがあります。
- マージントップ
- マージン右
- マージンボトム
- マージン左
マージンプロパティには、以下に示すようにいくつかの定義済みの値があります。
- 自動– このプロパティブラウザを使用して、マージンを計算します。
- 長さ– マージン値をpx、pt、cmなどで設定します。
- %- 要素の幅%を設定します。
- 継承– このプロパティにより、親要素からmarginプロパティを継承できます。
CSSでは、パディングは、要素のコンテンツの周囲や既知の境界線の内側にスペースを生成できるプロパティです。
CSSパディングには、次のようなプロパティもあります。
- パディングトップ
- パディング-右
- パディングボトム
- パディング-左
負の値はパディングに使用できません。
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }
Q#21)CSSでのボックスモデルの使用は何ですか?
回答: CSSでは、ボックスモデルはすべてのHTML要素をバインドするボックスであり、マージン、境界線、パディング、実際のコンテンツなどの機能が含まれています。
ボックスモデルを使用することで、要素の周囲に境界線を追加する権限を取得し、要素間のスペースを定義することもできます。
Q#22)Webページにアイコンを追加するにはどうすればよいですか?
回答: font-awesomeのようなアイコンライブラリを使用して、HTMLWebページにアイコンを追加できます。
指定されたアイコンクラスの名前をインラインHTML要素に追加する必要があります。 (( または)。アイコンライブラリのアイコンは、CSSでカスタマイズできるスケーラブルなベクターです。
Q#23)CSS疑似クラスとは何ですか?
回答: これは、HTML要素の特別な状態を定義するために使用されるクラスです。
このクラスは、ユーザーが要素をスヌープしたときに要素のスタイルを設定することで使用できます。また、フォーカスを取得したときにHTML要素のスタイルを設定することもできます。
selector:pseudo-class { property:value; }
Q#24)CSSの疑似要素の概念を説明してください。
回答: これは、要素の特定の部分のスタイルを設定するために使用されるCSSの機能です。
例えば 、HTML要素の最初の文字または行のスタイルを設定できます。
selector::pseudo-element { property:value; }
Q#25)CSSの不透明度とは何ですか?
回答: 要素の透明度を詳しく説明するプロパティです。
このプロパティにより、0.0〜1.0の値をとることができる画像を透明にすることができます。値が低いほど、画像はより透明になります。 IE8以前のバージョンのブラウザーは、0〜100の値をとることができます。
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}
Q#26)CSSで使用されるすべての位置状態を記述します。
回答:CSSには、以下に示す4つの位置状態があります。
- 静的(デフォルト)
- 相対的
- 修繕
- 絶対の
Q#27)CSSのナビゲーションバーとは何ですか?
回答: ナビゲーションバーを使用することで、通常のHTMLページをユーザー固有のより動的なWebページにすることができます。基本的にはリンクのリストなので、
- そして
- 要素は完全に理にかなっています。
ul { list-style-type: none; margin: 0; padding: 0; }
Q#28)CSSの相対と絶対の違いは何ですか?
回答: 相対と絶対の主な違いは、CSSの同じタグに「相対」が使用されていることです。つまり、left:10pxと書くと、パディングは左側の10pxにシフトしますが、absoluteは完全に非相対的です。静的な親。
つまり、left:10pxと書くと、結果は親要素の左端から10px離れたものになります。
Q#29)CSSで使用される「重要な」宣言を定義します。
回答: 重要な宣言は、通常の宣言よりも重要な宣言として定義されます。
実行中、これらの宣言は重要性の低い宣言を上書きします。
例えば、 重要な宣言を持つ2人のユーザーがいる場合、宣言の1つが別のユーザーの宣言をオーバーライドします。
例えば:
本文{背景:#FF00FF!重要;青色}IPアドレストラッカーソフトウェアの無料ダウンロード
このボディでは、背景は色よりも重みがあります。
Q#30)カスケード順序内で使用できるさまざまなカスケード方法を定義します。
回答: カスケード順序は、それ自体が他の多くの異なる並べ替え方法を可能にする並べ替え方法です。
a)起源でソート: 次のように定義された代替方法を提供できるいくつかのルールがあります。
- 特定のプロバイダーのスタイルシートの通常の重みは、ユーザーのスタイルシートの重みの増加によって上書きされます。
- 特定のユーザーのスタイルシートルールは、プロバイダーのスタイルシートの通常の幅によって上書きされます。
b)セレクターの特異性で並べ替えます。 より具体的なセレクターは、より具体的なセレクターによってオーバーライドされます。
例えば 、コンテキストセレクターは、より具体的なIDセレクターと比較して、より具体的ではなく、そのコンテキストセレクターはIDセレクターによってオーバーライドされます。
c)指定された順序で並べ替えます。 これは、2つのセレクターの重みが同じで、オーバーライドで表示される仕様以外のプロパティである場合に発生します。
例:
style属性がインラインスタイルに使用されている場合、他のすべてのスタイルはオーバーライドされて表示されます。
また、リンク要素が外部スタイルに使用されている場合は、インポートされたスタイルが上書きされます。
Q#31)インライン要素とブロック要素を区別します。
回答: インライン要素には、幅と高さを設定する要素がなく、改行もありません。
例: em、strongなど。
ブロック要素の仕様:
- 改行があります。
- コンテナを設定して幅を定義し、高さも設定できます。
- インライン要素で発生する要素を含めることもできます。
例:
幅と高さ
最大幅と最大高さ
最小幅と最小高さ
こんにちは(i = 1-6)-見出し要素
p-段落要素。Q#32)継承の概念はCSSでどのように適用されますか?
回答: 継承は、子クラスがその親クラスのプロパティを継承するという概念です。これは多くの言語で使用されている概念であり、同じプロパティを再度定義する簡単な方法です。
CSSでは、トップレベルからボトムレベルまでの階層を定義するために使用されます。子が同じ名前を使用している場合、継承されたプロパティは子のクラスによって上書きされる可能性があります。
例:
本文{フォントサイズ:15ポイント;}
そして別の定義が子クラスで定義されています
本文{フォントサイズ:15ポイント;}
H1 {font-size:18pt;}すべての段落テキストはプロパティを使用して表示され、フォント18でのみテキストを表示するH1スタイルを除いて、本文で定義されます。
Q#33)IDとクラスを区別します。
回答: IDとクラスの両方がHTMLで使用され、CSSから値を割り当てます。
以下の違いをご覧ください。
- IDは、特定の要素に一意に名前を割り当てる一種の要素ですが、クラスには、ブロック全体に使用できる特定のプロパティセットを持つ要素があります。
- IDは一意に識別できるため、要素として使用できますが、クラスは要素をブロックするように定義されており、使用される場所に適用されるタグが多すぎます。
- IDは、そのプロパティを1つの特定の要素に使用するための制限を提供しますが、クラスでは、継承は要素の特定のブロックまたはグループに適用されます。
結論
このインタビューの質問と回答のリストは、Web開発者のインタビューをクラックして、経験レベルだけでなく、より新鮮なものにするのに役立ちます。これらはインタビューでよく聞かれる質問です。
この記事が、Web開発者向けのCSSに関連するインタビューをクラックして直面するのに役立つことを願っています。
推奨読書= >> Web開発者インタビューの質問と回答
皆様のご成功をお祈り申し上げます!!
推奨読書