CSS3学習メモ 1_html/css_WEB-ITnose

セレクター:

: ルート セレクター。文字通り、ルート セレクターとして明確に理解できます。これは、要素 E がルート要素に配置されているドキュメントと一致することを意味します。 HTML ドキュメントでは、ルート要素は常に です。

: not セレクターは ネガティブ セレクター と呼ばれます。これは、 が選択できる点を除いて、jQuery の :not セレクターとまったく同じです。要素 を除くすべての要素。

: 空のセレクターは空を意味します。コンテンツのない要素を選択するために使用されます。ここでのコンテンツなしは、スペース であっても、まったくコンテンツがないことを意味します。

url の特定の識別子のターゲット要素 と一致するために使用されます。 ）。

が親要素の最初の子要素である要素 E を選択することを意味します。簡単に理解すると、要素内の最初の子要素を選択することになります。これは子孫要素ではなく、 の子要素 ​​ であることを覚えておいてください。

親要素 を見つけるために使用されます。 🎜>。ここで、「n」はパラメータであり、整数値 (1、2、3、4)、式 (2n+1、-n+5)、およびキーワード (奇数、偶数) を指定できますが、パラメータ nの開始値は 0 ではなく、常に 1 です。つまり、パラメーター n の値が 0 の場合、セレクターは一致する要素を選択しません。

「:nth-last-child(n)」セレクターは、以前の「:nth-child(n)」セレクターとよく似ていますが、さらに多くの点があります。 「last」は「:nth-child(n)」セレクターとは異なる役割を果たし、親要素の最後の子要素から数えて特定の要素を選択します。

「:first-of-type」セレクターは、

これは主に、親要素の下にある特定の型の最初の子要素を見つけるために使用されます。

「:nth-of-type(n)」セレクターは、「:nth-child(n)」セレクターとよく似ていますが、 parent 要素内の指定された型の子要素。要素内の子要素が同じ型の子要素だけではない場合、「:nth-of-type(n)」セレクターを使用して親内の特定の型の子要素を見つけると非常に便利で便利です。の要素。同じことが、「:nth-of-type(n)」セレクターの「n」パラメーターと「:nth-child(n)」セレクターの「n」パラメーターにも当てはまります。これらは、特定の

、式、またはキーワードの場合もあります。

「:last-of-type」セレクターは、「:first-of-type」セレクターと同じ機能を持ちます。違いは、親要素を選択することです。 . 型の最後の子要素。

「:nth-last-of-type(n)」セレクターは、「:nth-of-type(n)」セレクターと同じで、 parent 要素内で指定された特定の子要素タイプですが、その開始方向は最後の子要素からであり、その使用法は前のセクションで紹介した「:nth-last-child(n)」セレクターと似ています。

「:only-child」セレクターは、親要素内の子要素を 1 つだけ選択し、子要素も 1 つだけ選択します。つまり、一致する要素は親要素内に子要素を 1 つだけ持ち、それは

です。

「:only-of-type」セレクターは、親要素と同じ型の唯一の子要素である要素を選択するために使用されます。これは理解しにくいかもしれませんが、別の言い方をしましょう。 「:only-of-type」は、要素に多くのサブ要素があり、一意のサブ要素は 1 種類だけであることを意味します。この要素内の唯一のサブ要素を選択するには、「:only-of-type」セレクターを使用します。 . type 子要素。

Web フォームでは、一部のフォーム要素が使用可能 (

) と使用不可 (「:disabled」) あります。入力ボックス、パスワードボックス、チェックボックスなどの状態。デフォルトでは、これらのフォーム要素が使用可能です。次に、疑似セレクター ":enabled" を通じてこれらのフォーム要素にスタイルを設定できます。

Web フォームでは、一部のフォーム要素が使用可能 (

) と使用不可 (「:disabled」) あります。入力ボックス、パスワードボックス、チェックボックスなどの状態。デフォルトでは、これらのフォーム要素が使用可能です。次に、疑似セレクター ":enabled" を通じてこれらのフォーム要素にスタイルを設定できます。

フォーム要素では、ラジオ ボタンとチェック ボタンの両方に チェック済み と チェックなし の状態があります。 (周知のとおり、これら 2 つのボタンのデフォルト スタイルをオーバーライドするのは困難です)。 CSS3 では、ステータス セレクター「:checked」を他のタグと組み合わせて、カスタム スタイル を実装できます。そして、「:checked」は選択された状態を意味します。

「::selection」擬似要素は、 が強調表示された のテキスト (テキストが強調表示されたときのテキスト) と一致するために使用されます。をマウスで選択します）。デフォルトでは、ブラウザはマウスで Web ページのテキストを選択すると、「濃い青色の背景と白いフォント」で Web ページのテキストを表示します

":read-only 「擬似クラスセレクターは、読み取り専用状態の要素のスタイルを指定するために使用されます。簡単に理解すると、"readonly='readonly'"

" がelement :read-write" セレクターは、":read-only" セレクター の逆であり、主に要素が 非読み取り専用状態 スタイル。

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

color：rgba(R,G,B,A)

alpha の透明度を制御するパラメータを追加します。上記の 3 つのパラメータ R、G、B の正の整数値の範囲は 0 ～ 255 です。パーセンテージ値の範囲は 0.0% ～ 100.0% です。範囲外の値は、最も近い値の制限に丸められます。すべてのブラウザがパーセンテージ値の使用をサポートしているわけではありません。 A は透明度パラメータで、値は 0 ～ 1 であり、負の値にすることはできません。

グラデーションカラー

指定キーワード "angle" または "English"

で表されるグラデーションの方向

は、色 の開始点と終了点を表し、複数の色の値を持つことができます。

例如：background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

text-overflow オブジェクト内のテキストのオーバーフローをマークするために 省略記号 (...) を使用するかどうかを設定します。

text-overflow は、オーバーフローを実現するためにテキストを表示する方法を説明するためにのみ使用されます。省略記号 の効果を得るには、テキストを強制的に 1 行で表示する (white-space:nowrap) と オーバーフロー コンテンツを非表示にする も定義する必要があります。 > (overflow:hidden) この方法でのみ実現できます。 オーバーフロー テキストは省略記号 の効果を表示します。コードは次のとおりです: 同時に、

text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

テキストの動作、つまり、指定されたコンテナーの境界を超えたときに現在の行を改行するかどうかを設定するために使用することもできます。 構文:

normal

ブレイクワード は ロングワードに設定されます または URL アドレス は、通常は使用されません。ブラウザーのデフォルト値を使用してください。

テキストシャドウ

X-Offset: 値が正の場合、シャドウは次のようにオフセットされます。それ以外の場合は左にオフセットします。

text-shadow: X-Offset Y-Offset blur color;

ぼかし: 値が大きいほど、影がぼやけます。ぼかし値は 0 に設定できます。

Color : 影の色を指します。RGBA カラーを使用できます。

要素の背景画像の

を設定します。

構文:

background-origin ： border-box | padding-box | content-box;

background-clip ： border-box | padding-box | content-box | no-clip

background-size: auto | <长度值> | <百分比> | cover | contain