この記事は、として知られている興味深く重要なトピックをもたらします セレクターとそれをサポートする実用的なデモンストレーションでフォローアップします。この記事では、次のポイントについて説明します。
それでは始めましょう、
HTML要素のスタイリング
CSSセレクターに入る前に、CSSとは何かを理解しましょう。 HTMLをスケルトンと見なす場合、CSS（Cascading Style Sheets）は筋肉や皮膚のようなものです。頭脳はJavaScriptです。したがって、Webページの場合、CSSスタイルは基本的にレイアウトとデザインです。 CSSは、画像やテキストの配置からフォントサイズや背景色まで、ブラウザでのHTML要素の外観を制御します。
CSSセレクターとは何かをよく理解していれば、CSSをよりよく理解できます。これらのセレクターを使用すると、特定のHTML要素をターゲットにして、適切なスタイルを適用できます。
HTML要素を選択する方法を理解しましょう。
要素を選択する方法は？
たとえば、特定の見出しをWebページの他のコンテンツとは異なるスタイルにする必要があるとします。これで、CSSセレクターを使用して、そのHTML要素をターゲットにして別のスタイルにすることができます。 CSSセレクターは、CSSルールの特定のセットが適用される要素を定義するのに役立ちます。スタイルを設定する要素を正確に選択できるCSSセレクターにはさまざまな種類があります。 Webページ全体に一般的なスタイルを設定してから、ページの他の要素のスタイルを設定することができます。
セレクターはCSSルールの一部であり、これらのセレクターはCSSブロックの宣言の直前にあります。理解を深めるために、下の画像を参照してください。
CSSセレクターの記事に進む
CSSセレクター
このセレクターを使用すると、HTML要素をその名前で選択できます。
以下のコードを検討してください。
p {text-align：center color：magenta}このスタイルはすべての段落に適用されます。
段落1
パラグラフ2
このコードは、次の出力を提供します。
このスタイルはすべての段落に適用されます
段落1
パラグラフ2
上記のコードでは、HTML要素は中央揃えで、色は「マゼンタ」です。
CSSセレクターの記事に進む
CSSIDセレクター
HTML要素のid属性を選択することにより、その特定の要素を選択できます。 idはページに固有であるため、id属性を使用して適切な要素を選択できます。
「＃」に続けてその要素のIDを使用して、HTML要素を選択できます。たとえば、「＃firstname」は、idが「firstname」である要素を選択します。
次のコードについて考えてみます。
＃para1 {text-align：center color：orange}こんにちは世界
この段落は影響を受けません。
上記のコードの出力は次のとおりです。
こんにちは世界
javascriptとjqueryの違いは何ですか
この段落は影響を受けません。
上記の出力でわかるように、id =” para1”を含めることで、その要素の色をオレンジ色に変更することができました。これを持たない他の要素は影響を受けません。
CSSセレクターの記事に進む
CSSクラスセレクター
クラスセレクターを使用して、特定のクラス属性を持つHTML要素を選択できます。ピリオド（ピリオド記号）とそれに続くクラス名を使用してセレクターを定義できます。たとえば、.introは、クラスが「intro」である要素を選択します。覚えておくべきことの1つは、クラス名を数字で始めることはできないということです。
次のコードについて考えてみます。
.center {text-align：center color：pink}この見出しはピンクで中央揃えです。
この段落はピンク色で中央揃えです。
上記のコードの出力は次のとおりです。
Javaの仮想関数とは
この見出しはピンクで中央揃えです。
この段落はピンク色で中央揃えです。
特定の要素にCSSクラスセレクターを使用できます。特定の要素を1つだけスタイル設定する場合は、クラスセレクターと一緒に要素名を使用できます。
たとえば、次のコードについて考えてみます。
p.center {text-align：center color：pink}この見出しは影響を受けません
この段落はピンク色で中央揃えです。
上記のコードの出力は次のとおりです。
この見出しは影響を受けません
この段落はピンク色で中央揃えです。
出力からわかるように、見出しh2はスタイルの影響を受けません。 「p.center」を指定したため、スタイルの影響を受けるのは段落のみです。
このCSSセレクターの記事に進むと、
CSSユニバーサルセレクター
このタイプのセレクターは、ページ内のすべての要素を選択するワイルドカード文字と見なすことができます。ページ上のすべての要素を選択し、「*」で指定します。
たとえば、次のコードについて考えてみます。
* {color：darkgreen font-size：30px}これはテストです（小さいフォント）
これは段落です。
上記のコードの出力は次のとおりです。
こんにちは世界
これはテストです（小さいフォント）
これは段落です。
出力からわかるように、グループセレクターを使用して定義されたすべての要素は、同じスタイル定義を持っています。それらは中央揃えで、フォントの色はシアンです。
これで、この記事は終わりです。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか？記事のコメントセクションにその旨を記載してください。折り返しご連絡いたします。