知っておくべきバニラ CSS の基本-CSSチュートリアル-php.cn

知っておくべきバニラ CSS の基本

DDD

リリース： 2024-12-28 05:29:10

オリジナル

512 人が閲覧しました

VANILLA CSS BASICS YOU SHOULD KNOW

CSS（カスケードスタイルシート）の基礎

ここでは CSS でターゲットを取得し、Web ページから作業したい特定の要素を選択します。

CSS の仕組み。

CSS には主に 2 つの部分があります。

セレクター
宣言:これも、プロパティと値に分割されます。

3 つのレベルの CSS。

インライン CSS

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`

ログイン後にコピー

内部 CSS

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.

ログイン後にコピー

外部 CSS

この場合、CSS ファイルはindex.html ファイルにリンクされます。
CSS コードをコンパイルするとき、CSS は優先順位にも基づきます。このような場合、インライン CSS が常に最も優先され、次に内部 CSS、外部 CSS の順になります。

CSSセレクター

これらのセレクターを使用すると、HTML ファイルから要素を選択する方法を知ることができます。 CSS セレクターの場合、使用するセレクターのタイプと、それがターゲット要素に何を行うかを知る必要があるだけです。

次に、使用される一般的な CSS セレクターの一部を示します。

ユニバーサルセレクター: このようなセレクターを使用すると、HTML ファイル内のすべて (すべての HTML タグ) がターゲットまたは選択されます。

例:
*{
背景色: グレー
}
これは、すべての Web ページの背景色が灰色になることを意味します

個別セレクター

これは、たとえば、
などの個々の要素を対象としています。それに応じて、index.html 内のすべての段落をターゲットにします。
各段落に独自の色や外観を持たせたい場合は、*クラスまたは ID セレクターを使用できます。

クラスおよび ID セレクター

クラスセレクターの場合は、適用時にドットを使用します。次に、ID セレクターの場合、適用時にハッシュ (#) を使用します。

例:
.warning{
項目を整列: 中央;
}

ID 名は複数回適用または使用しないでください。ただし、そうした場合でも、コンパイル中にファイルにエラーがスローされることはありません。しかし、これは悪いコーディング習慣になります。
クラス名については、同じ名前を複数回使用できます。

子セレクター

このセレクターでは、親要素の子をターゲットとします。
例: nav ul{ ディスプレイ: フレックス }
これは、親である nav の子である ul 要素をターゲットにしていることを意味します。

他のセレクターもあります

n 番目の子セレクターのように。

最も一般的に使用されるセレクターは、クラスセレクターと ID セレクターです

注記：

CSS に色を使用する場合は、赤や緑などの単語の色とは異なり、標準のカラーコード (#4d4d4d など) を使用することが常にベストプラクティスです。
これは、ブラウザーごとに色の見え方が異なるためですが、カラーコードを使用すると、ブラウザーが異なっても同じ色として見える標準的な全体の色のように機能するためです。

マージンとパディング。

マージンは外側からのスペースの量であり、パディングはテキストが存在する内側からのスペースの量です。*

注: FOCUS は入力タグにのみ適用されます。

CSS 上の位置

絶対;

これにより、親 Web ページに応じてターゲットの位置、つまり Web ページ全体の境界が与えられます。

相対;

これは、現在のターゲットが含まれるボディまたはボックスに応じて、つまりターゲットの元の位置に応じて、ターゲット要素に位置を与えます。

粘着性;

これによりターゲットに位置が与えられ、その後は別の位置に移動することはありません。

修正済み;

これを適用した後、ターゲットは変更または修正されません。割り当てられたとおりにこの位置に固定されます。