CSS3学習メモ 1_html/css_WEB-ITnose

セレクター:

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

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

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

: ターゲット セレクターはターゲット セレクターと呼ばれ、ドキュメント (ページ) の

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

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

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

「:last-child」セレクターは、「:last-child」セレクターが要素を選択することを除いて、「:first-child」セレクターと似ています。の要素。

「:nth-child(n)」セレクターは、

親要素 を見つけるために使用されます。 🎜>。ここで、「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」セレクターは、

要素のタイプを指定することを除いて、「:first-child」セレクターと似ています

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

「: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 フォームでは、一部のフォーム要素が使用可能 (

「:enabled」

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

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

「:enabled」

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

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

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

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

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

::before と ::after は主に要素の前または後ろにコンテンツを挿入するために使用されます。これら 2 つはよく「コンテンツ」と組み合わせて使用​​されます。シナリオはフロートをクリアすることです。

角丸効果:

border-radius 20px 20px 20px 20px;

1 つの値または複数の値をサポートします。 1値の場合は四隅の角丸を意味し、4値の場合は左上角、右上角、右下角、左下角となります。時計回り

シャドウ効果:

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

パラメータ:

注: inset は最初または最後のパラメータに記述できます。その他の位置は無効です。複数のシャドウを追加する場合は、それらをカンマで区切ってください。

ボーダーアプリケーション背景画像

RGBAの色

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

RGBとは、赤(R)、緑(G)、青(B)を変化させ重ね合わせて得られる様々な色を表す色の規格です。 RGBA は RGB に基づいており、

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

グラデーションカラー

パラメータ:

最初のパラメータ:

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

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

。省略された場合、デフォルトは「180deg」で、これは「下まで」に相当します。

2 番目と 3 番目のパラメーター

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

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

text-overflow は word-wrap とともに使用されます

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

構文:

ただし、

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

word-wrap

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

は、

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

normal

はブラウザのデフォルト値、

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

テキストシャドウ

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

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

Y オフセット: 値が正の場合は影が下にオフセットされ、それ以外の場合は上にオフセットされます。 >

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

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

background-origin

要素の背景画像の

元の開始位置

を設定します。

構文:

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

参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法：

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

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

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

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、d059fd61b64dafe822b895706790cc04：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、0cf9fadf93ed56ec91465bb2f6c16d1a：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。