CSSの基本はこれで十分です

CSS の基本は十分です [ガイド]

この章では主にCSSの基礎知識を整理します。始める前に、簡単なクイズに答えてください。

CSSのインポート方法にはどのようなものがありますか？
:root #myApp input:required重さはどれくらいですか？
a要素は親要素の色を継承できますか?幅はどうなりますか?
CSS変数ってご存知ですか？

まずはコメント欄に答えを書いて、何問答えられるかを確認してください。

スタイルの紹介

CSS を導入するには、インラインスタイル、内部スタイルシート、外部スタイルシートの 3 つの方法があります。

インラインスタイル

インラインスタイルは、インラインスタイルとも呼ばれます。インラインスタイルは、次のように、タグのstyle属性。

<h1 style="color:red;">style 属性的应用</h1>
<p style="font-size:14px;color:green;">直接在 HTML 标签中设置的样式</p>
<p style="display:none;">影藏的内容</p>

インラインスタイルは優先度が高く、特別なスタイルを設定したり、要素のスタイルを微調整したりするために使用できます。すべてのスタイルをインラインスタイルシートに含めることはお勧めできません。スタイルが多すぎると要素が「肥大化」し、ドキュメントの構造が不明瞭になり、メンテナンスが困難になるためです。

内部スタイルシート

内部スタイルシートは、styleタグ。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>内部样式表</title>
  <style>
    h1 {
    
    
      color: red;
    }

    p {
    
    
      font-size: 14px;
      color: green;
    }
  </style>
</head>

<body>
  <h1>style 属性的应用</h1>
  <p>直接在 HTML 标签中设置的样式</p>
</body>

</html>

内部スタイルシートによって構造とスタイルの分離が実現され、HTML が Web ページの構造構築に重点を置くのに対し、CSS は要素スタイルの調整に重点を置くことができるという利点があります。この方法は、CSS プロパティを学習またはデモンストレーションする場合、または小さな関数をデバッグする場合に非常に便利です。現在、Vue や Svelte などの一部のフロントエンドフレームワークがこの方法を使用しています。大規模なWebサイトではページ数が多く、共有できるCSSスタイルも多いため、この書き方はあまり親切ではなく、各ページを書き換えたり手動で割り当てたりする必要があると、かなり苦痛です。したがって、別の CSS ファイルが存在します。

外部スタイルシート

外部スタイルシートとは、別のスタイルファイルにスタイルを記述し、ファイルパスを通じてそれを参照することを指します。

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="utils.css">
<link rel="stylesheet" href="main.css">

スタイルファイルにスタイルを個別に記述します。スタイルファイルは、必要に応じてlinkタグを変更する場合は、一度変更するだけで、このファイルに依存するすべての Web ページが有効になります。さらに、独自のスタイルシートをライブラリの形式でインターネット上に公開することもでき、必要に応じて他の Web サイトから参照することもできますが、これはあまり便利ではありません。

CSSセレクター

スタイルシート (styleタグまたは別のスタイルファイル) にスタイルを記述するには、問題を解決する必要があります。このスタイルは誰のために書かれたのか、またはこのスタイルを誰が必要とするのか、そのスタイルをあらゆる種類の衣服に作成する必要がある場合は、次のことを行います。要素スタイルを適用するプロセスは、服を着るのと似ています。ドレスアップのプロセスはスタイルを適用するプロセスであり、CSS は CSS セレクターを通じて要素にスタイルを適用します。

ラベルセレクター

タグセレクターは、要素タグ名によってタグを選択します。例:

h1 {
    
    
  color: red;
}

すべての h1 タグのフォントの色が赤に設定されます。

IDセレクター

ID セレクターは ID 値を持つタグを選択します。

<style>
  #tom {
      
      
    color: grey;
  }

  #garfield {
      
      
    color: orange;
  }
</style>

<h1 id="tom">我是汤姆猫</h1>
<h1 id="garfield">我是加菲猫</h1>

ID セレクターの文法形式はです#id-name。一般的に言えば、ID は Web ページ内で一意です。同じ ID 値を持つ 2 つの要素がある場合はどうなりますか? つまり、その ID 値を持つすべての要素は、対応するスタイルを身に着けます。

クラスセレクター

クラスセレクターは、class属性。その宣言メソッドは次のとおりです。

<style>
  .grey {
    
    
    color: grey;
  }

  .orange {
    
    
    color: orange;
  }
</style>

<h1 class="grey">我是汤姆猫</h1>
<h1 class="orange">我是加菲猫</h1>

クラスの選択は、組み合わせることができるクラススタイル.class-nameを宣言する。

<style>
  .grey {
    
    
    color: grey;
  }

  .orange {
    
    
    color: orange;
  }

  .underline {
    
    
    text-decoration: underline;
  }
  
  .small{
    
    
    font-size: 14px;
  }
</style>

<h1 class="grey underline">我是汤姆猫</h1>
<h1 class="orange small">我是加菲猫</h1>

それぞれのスタイルには独自の効果があり、口紅は大人っぽく、ネックレスはリッチに、リボンはキュートに、ストッキングはシックに、女の子の服装と同じように、スタイルを組み合わせることで複雑な効果が得られます。セクシーで、何にでも合わせられます。好きなエフェクトを加えたスタイルなので、特に女の子はフロントエンドを学びたいですよね？

属性セレクター

属性セレクターは、特定の属性を持つ要素を選択できます。構文は次のとおりです。

<style>
  [hello] {
    
    
    color: green;
  }
</style>

<h1 hello>我是汤姆猫</h1>
<h1>我是加菲猫</h1>

もちろん、属性値を設定することもできます。

<style>
  [hello=world] {
    
    
    color: green;
  }
</style>

<h1 hello="world">我是汤姆猫</h1>
<h1 hello>我是加菲猫</h1>

より強力なセレクター¹ :

/* href 中含有 "example" */
a[href*="example"] {
    
    
  font-size: 2em;
}

/* href 以 ".org" 结尾 */
a[href$=".org"] {
    
    
  font-style: italic;
}

/* 样式表包含 "logo" */
a[class~="logo"] {
    
    
  padding: 2px;
}

/* href 包含 "insensitive" 忽略大小写，与正则开关类似 */
a[href*="insensitive" i] {
    
    
  color: cyan;
}

子孫セレクター

要素を個別に選択することに加えて、要素間のネストされた関係を通じて選択することもできます。最も一般的に使用されるのは子孫セレクターです。

<style>
  .summer .plant {
    
    
    color: green;
  }

  .autumn .plant {
    
    
    color: gold;
  }
</style>

<div class="summer">
  <div class="plant">玉米</div>
</div>

<div class="autumn">
  <div class="plant">玉米</div>
</div>

2 つの独立したセレクターの間にスペースを追加することは、何の中に何があるか、つまり、誰と誰と誰と誰の子孫であることを意味します。いずれにせよ、空間は子孫関係を示しており、分離することも可能であり、その中にある限り効力を発揮します。上の例では、夏の植物と秋の植物がそれぞれ同じスタイルであることを示しています。

直接子セレクター

直接の子セレクターの構文は次のとおりですparent>child。

<style>
  .summer>.plant {
      
      
    color: green;
  }

  .autumn>.plant {
      
      
    color: gold;
  }
</style>

<div class="summer">
  <div class="north">
    <div class="plant">玉米</div>
  </div>
</div>

<div class="autumn">
  <div class="plant">玉米</div>
</div>

世代が分かれている場合は機能しません。直接の子ノードである必要があります。

兄弟愛

隣接する兄弟セレクターone+two+three:

<style>
  .one+.two {
      
      
    color: red;
  }

  .two+.three {
      
      
    color: green;
  }

  .one+.three {
      
      
    color: blue;
  }
</style>

<div class="box">
  <div class="one">大娃</div>
  <div class="two">二娃</div>
  <div class="three">三娃</div>
</div>

一番上の赤ちゃんと3番目の赤ちゃんの間に2番目の赤ちゃんがいる場合、3番目の赤ちゃんの青色は反映されないことに特に注意してください。

まとめ

上記のセクションでは、よく使用されるセレクターをいくつかまとめました。CSS セレクターは多すぎます。その他のセレクターについては、参考記事²を参照してください。

[演習] 最初の子ノードを除くすべての子ノードを選択するにはどうすればよいですか?

ul li:not(:first-child){
    
    ...}

CSSセレクターの優先順位

CSS (Cascading Style Sheets) カスケードスタイルシートでは、ワイルドカード *、タグ名、クラスなどの複数のスタイルルールによって要素を同時に選択できます。ブラウザはどのスタイルを使用する必要がありますか? このとき、優先度に応じてスタイルを設定する必要があります。ブラウザデバッグツールを開くと、要素のスタイルが [スタイル] 列に表示され、優先度の高いスタイルが上に表示され、優先度の低いスタイルが下に表示され、同じものが多数表示されます。 style 属性は取り消し線で表示されます。これは、優先度の高いスタイルが優先度の低いスタイルをオーバーライドするためです。

ここに画像の説明を挿入

【知識ポイント】スタイルの重みは ID、クラス、タイプ³の 3 つのレベルに分かれており、要素に適用されるスタイルの重みは 1-1-1 となります。

【例】ul#nav li.active a重みはです。1-1-3これには ID セレクター#nav、クラスセレクター.active、および 3 つのタイプセレクターがありますul, li, a。

[知識のポイント] 優先順位の高いものから低いものまで比較する重み計算ルールをスタイル設定します。

[例]1-3-2より大きい場合1-3-1、最初に ID: を比較し1==1、次に Class: を比較し3==3、次に Type: を比較します2>1。

各レベルのセレクターは何ですか?

IDレベル。1 つだけ: #id、重み:1-0-0
クラスレベル。1) クラス.class、2) 属性: [attr], [attr=value], [lang|="zh"]、3) 疑似クラス: :hover, :nth-of-type(3n), :required 、重み:0-1-0
タイプレベル。1) タグ名: div, p , a、2) 疑似要素: ::before, ::placeholder、重み:0-0-1

【例外】

ワイルドカード*、疑似クラス:where()、およびそれらのパラメータは重みに影響しません。0-0-0
コンビネータ+、、、、" "、およびそれ自体は>ん~。||
疑似クラスおよびは:not()、:is():has()それ自体は重みに寄与しませんが、そのパラメータが重みを計算します。
継承されたスタイルの重みはゼロです。

[練習問題] 次のルールの重みを計算します。

[type="password"]             /* 0-1-0 */
input:focus                   /* ? */
:root #myApp input:required   /* ? */
h2:has(~ h2)                  /* ? */

【インラインスタイル】

インラインスタイルにはセレクターがなく、その重みは次のようにみなされる1-0-0-0か、どのスタイルシートよりも高い優先順位を持ちます。インラインスタイルシートをオーバーライドする唯一の方法は、を使用することです!important。

CSSスタイルの継承

子要素の一部の属性値は親要素から継承でき、この機能を使用すると、反復的なコードを大幅に削減できます。

継承されたプロパティ

フォントファミリー属性

font-family: フォントファミリー
font-weight: フォントの太さ
font-size: フォントのサイズ
font-style: フォントのスタイル

テキストシリーズのプロパティ

text-indent: テキストのインデント
text-align: テキストの水平方向の配置
line-height: 行の高さ
word-spacing: 単語間の間隔
文字間隔: 中国語または文字間の間隔
text-transform: テキストの大文字と小文字を制御します (つまり、大文字、小文字、これら 3 つを大文字にします)
色: 文字の色

要素の可視性

可視性: コントロール要素の表示非表示

リストレイアウトのプロパティ

list-style: list-style-type、list-style-image などを含むリストスタイル。

カーソルのプロパティ

カーソル: カーソルがどのような形で表示されるか

[例外]aラベルのフォントサイズと色は継承されません。これは、初期化スタイルシートに追加できるブラウザスタイル (ユーザーエージェントスタイルシート) の存在によるものです。

a{
    
    
    font-size: inherit;
    color: inherit;
}

デフォルトのスタイルに別れを告げることができます。

[例外]通常のドキュメントフローのブロックレベル要素の幅は継承されます。要素を追加することを好む生徒もいますwidth: 100%;。実際、多くの場合、そうする必要はありません。一部の生徒は、フローティングボックスまたは位置決めボックスを中央に配置しても、中央に配置できないことに気づきます。これは、非フローボックスが要素の幅を継承しないためです。親要素であり、その幅はコンテンツによって決まります。

【練習問題】問123 色は何色ですか？

<style>
    .main{
      
      
        color:blue
    }
    span{
      
      
        color:green
    }
</style>
<div style="color:red !important" class="main">
    <span>123</span>
</div>

継承されていないプロパティ

継承のある属性は覚えておけば十分ですが、まぐれ思考にならないように、継承のない属性も参考に参照する必要があります。注：ボックスモデルの幅は特殊な場合です。

display : 要素が生成するボックスのタイプを指定します
特別なテキスト属性:

vertical-align: テキストの垂直配置
text-decoration: テキストに追加する装飾を指定します。
text-shadow: テキストシャドウ効果
ホワイトスペース: 空白文字の処理
unicode-bidi: テキストの方向を設定します。

ボックスモデルの属性: 幅、高さ、マージン、境界線、パディング、アウトライン、最小幅、最小高さ、最大幅、最大高さ、オーバーフロー、クリップ、
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
フローティング属性と位置決め属性: float、clear、position、top、right、bottom、left、z-index
コンテンツ属性の生成: コンテンツ、カウンタリセット、カウンタインクリメント
ページスタイル属性: サイズ、改ページ前、改ページ後
サウンドスタイル属性: 前ポーズ、後ポーズ、一時停止、キュー前、キュー後、キュー、再生中

CSS変数

画面の前で CSS 変数について聞いたことがあるかどうかはわかりませんが、いくつかの Web サイトのソースコードをチェックしているときに、CSS 変数の優れた点を偶然発見しました。

ここに画像の説明を挿入

CSS 変数を使用すると、Web ページのスタイルを簡単に調整できます。特に JavaScript と組み合わせると、スタイルをよりエレガントに調整でき、CSS 変数を使用して Web ページのスキンを変更する機能を簡単に実現できます。

CSS 変数を理解する⁴

ステートメント:--var-name: var-value;

読んでください：var(--var-name, [fallback-value])

タイプ:

通常: 属性値としてのみ使用でき、属性名としては使用できません。
数値: 数値単位calc()とともにvar(--width) * 10px

スコープ: 現在の要素のブロックスコープとその子要素のブロックスコープで有効です。

JavaScript API

JavaScript でCSS 変数を操作するための API は主に 3 つあります。これらはシンプルで覚えやすいように見えます。次のとおりです。

変数を読み取ります。elem.style.getPropertyValue()
変数を設定します。elem.style.setProperty()
変数を削除します:elem.style.removeProperty()

参考記事

♥ 私はフロントエンドエンジニアです。あなたの恋人、セン。いいねや注目をしていただきありがとうございます。ディスカッションやコラボレーションへの参加を歓迎します。

★ この記事はオープンソースであり、CC BY-SA 4.0 プロトコルを使用しています。転載する場合は出典を示してください:フロントエンドエンジニアの自己啓発. GitHub.com@xiayulu。

★ クリエイティブ協力や採用情報については、プライベートメッセージまたはメール:[email protected] に件名を「クリエイティブ協力またはフロントエンドエンジニア募集」と明記してお送りください。
tribute_selector)。

MDN。属性セレクター。↩︎
MDN。CSS セレクター。↩︎
MDN。特異性。↩︎
JowayYoung. CSS 変数を使用して CSS をよりエキサイティングなものにします. レアアースナゲット↩︎