********* よく使用される CSS 属性 **********
---------------------------- ------------------------ ------------------ font-family: 設定または取得オブジェクト内のテキストに使用されるフォント名のシーケンス。 デフォルト値: ユーザーエージェントによって決定されます シーケンスには埋め込みフォントを含めることができます。 一般的なフォント参照は引用符なしで引用できます。フォント名にスペース、数字、または記号 (コネクタなど) が含まれている場合は、エラーの発生を避けるために引用符が必要です。 ユーザー エージェントは、特定のフォントが一致するまで、定義されたフォント シーケンスをたどります。 body{font-family:helvetica,verdana,sans-serif;}上記のフォント定義のように、マシンに helvetica フォントはなく、verdana があると仮定すると、テキストは次のように表示されます。ベルダナ。 : フォント名。優先順位順に。カンマで区切ります。フォント名にスペースまたは漢字が含まれている場合は、引用符で囲む必要があります : フォント シーケンス名。 ---------------------------------------------- --- --------------------------------------------------- ---
font-size: オブジェクトのフォント サイズを設定または取得します。 : オブジェクトのフォントに応じて調整します。オプションのパラメータ値: xx-小 | x-小 | 中 大: 8/9 (h5)、大: 6/5 (h3) large: 3/2 (h2)、xx-large: 2/1 (h1 )、: 親オブジェクトのフォント サイズを基準に調整します。比例 em 単位を使用して計算されます。オプションのパラメーター値: 小さい | 大きい : 長さの値を使用してテキスト サイズを指定します。負の値は許可されません。 : テキストのサイズをパーセンテージで指定します。パーセント値は、親オブジェクトのフォントのサイズに基づきます。負の値は許可されません。 ---------------------------------------------- --- --------------------------------------------------- --- ---- font-stretch: オブジェクト内のテキストを水平方向に引き伸ばすかどうかを設定または取得します。 テキストは、ブラウザによって表示されるフォントの通常の幅に対して引き伸ばされます。 超凝縮: 通常のテキスト幅よりも 4 塩基狭いです。 エクストラコンデンス: 通常のテキスト幅よりも 3 塩基狭いです。 condensed: 通常のテキスト幅よりも 2 ベース狭くなります。 セミコンデンス: 通常のテキスト幅よりも 1 ベース狭いです。 normal: 通常のテキスト幅 semi-expanded: 通常のテキスト幅より 1 ベース幅です。 拡張: 通常のテキスト幅よりも 2 ベース幅が広くなります。 エクストラエキスパンド: 通常のテキスト幅よりも 3 ベース幅が広くなります。 超拡張: 通常のテキスト幅よりも 4 ベース幅が広くなります。 ---------------------------------------------- --- -------- font-style: オブジェクト内のテキストのフォント スタイルを設定または取得します。 normal: テキストのフォント スタイルを通常のフォントとして指定します。 italic: テキストのフォント スタイルをイタリックとして指定します。イタリックでデザインされていない特殊なフォントの場合、イタリックの外観を使用したい場合は、oblique が適用されます oblique: テキストのフォント スタイルをイタリック フォントとして指定します。フォントの斜体を選択する代わりに、テキストを人為的に斜めにします ---------------------------------- -------------------------------------------------- ------------font-variant: オブジェクト内のテキストがスモールキャップであるかどうかを設定または取得します。 normal: 通常のフォント small-caps: 小さな大文字フォント ------------------------------------- --- ------------------------font-weight: オブジェクト内のテキスト フォントのウェイトを設定または取得します。 効果は、クライアント システムにインストールされているフォントの特定のフォント変数マッピングによって決まります。システムは最も近いものを選択します
マッチ。つまり、ユーザーには異なる値の違いが分からない可能性があります。
normal: 通常のフォント。番号 400 に相当
太字: 太字。 700番相当。
太字: 非常に太字です。これは、strong オブジェクトと B オブジェクトの役割にも相当します。
lighter: 細いフォント
: テキストのフォントの太さを表すのに数字を使用します。値の範囲: 100 | 300 | 600 | 900 | ------------------------------------------------- - ---------------------------------
************* *********** ************************************** ************ ************************************* *******
display:inlineはブロック要素のインライン表示をインライン表示にします
display:inlineはinline要素として表示するオブジェクトを設定するのがデフォルト値です。インラインオブジェクト
DIV1
DIV2
ここで、DIV1とDIV2はそれぞれ1行を占めていますが、属性を追加すると変更されます
DIV1
DIV2
DIV1とDIV2が同じ行に表示されるようになりました
display:block は要素をブロック レベルの Element として表示します。
display:inline-block はオブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングされます。隣接するインライン オブジェクトは同じ行にレンダリングされ、スペースを入れることができます。
---------------------------------------------- --- --------------------------------------------------- --- --------------------------
******************* ***** ******************************************** ****** ******************************************
【border】複合属性。オブジェクトの境界線のプロパティを設定します。
この複合属性を使用して単一のパラメーターを定義する場合、他のパラメーターのデフォルト値は、対応する単一の属性設定を無条件にオーバーライドします。
border-color: オブジェクトの境界線の色を設定または取得します。
4 つのパラメータ値をすべて指定すると、上、右、下、左の順に 4 つの辺に適用されます。
1枚のみご用意の場合は4面全てに使用します。
2つある場合、1つ目は上下用、2つ目は左右用となります。
3つある場合、1つ目は上用、2つ目は左右用、3つ目は下用となります。
border-width が 0 に等しい場合、または border-style が none に設定されている場合、この属性は無視されます。
---------------------------------------------- --- --------------------------------
ボーダー画像複合属性。画像で塗りつぶすオブジェクトの境界線スタイルを設定または取得します。
境界線スタイルを定義するには、境界線スタイルの代わりに画像を使用します。 border-image が none または画像が非表示の場合、border-style で定義されたボーダー スタイル効果が表示されます。
[ border-image-source ]: オブジェクトの境界線が画像定義スタイルまたは画像ソース パスを使用するかどうかを設定または取得します。
[ border-image-slice ]: オブジェクトの境界背景画像のセグメンテーション方法を設定または取得します。
[ border-image-width ]: オブジェクトの境界線の太さを設定または取得します。
[ border-image-outset ]: オブジェクトの境界背景画像の拡張子を設定または取得します。
[ border-image-repeat ]: オブジェクトの境界画像のタイリング方法を設定または取得します。
---------------------------------------------- --- -------------------
border-radius 丸い境界線を使用してオブジェクトを設定または取得します。 2 つのパラメータを「/」で区切って指定します。各パラメータには 1 ～ 4 つのパラメータ値を設定できます。2 番目のパラメータが省略された場合は、2 番目のパラメータが垂直半径を表します。デフォルトは最初のパラメータと同じです
水平半径: 4 つのパラメータ値がすべて指定されている場合、左上 (左上)、右上 (右上)、右下 (右下) )、左下(左下)の順で四隅に作用します。
1本のみの場合は四隅に使用します。
2 つ指定した場合、1 つ目は左上と右下に使用され、2 つ目は右上と左下に使用されます。
3 つ指定されている場合、1 つ目は左上に使用され、2 つ目は右上と左下に使用され、3 つ目は右下に使用されます。
垂直半径も上記の4点に従います。
: 長さの値を使用して、オブジェクトのフィレット半径の長さを設定します。負の値は許可されません
: オブジェクトの角の半径の長さをパーセンテージで設定します。負の値は許可されません
-------------------------------------- --------- ----------------------------
border-width ボーダーの幅を設定または取得しますオブジェクトの。
4 つのパラメータ値をすべて指定すると、上、右、下、左の順に 4 つの辺に適用されます。
1枚のみご用意の場合は4面全てに使用します。
2つある場合、1つ目は上下用、2つ目は左右用となります。
3つある場合、1つ目は上用、2つ目は左右用、3つ目は下用となります。
border-style が none に設定されている場合、この属性は効果がありません。
: 長さの値を使用して境界線の太さを定義します。負の値は許可されません
medium: 境界線のデフォルトの太さを定義します。
thin: デフォルトの太さよりも細い境界線を定義します。
thick: デフォルトの太さよりも太い境界線を定義します。
-----------------------------------------------------
ボーダー-left-style オブジェクトの左境界線スタイルを設定または取得します。
border-width が 0 に等しい場合、この属性は効果がありません。
none: アウトラインはありません。 border-color と border-width は無視されます
hidden: 境界線を非表示にします。 IE7 以下はまだ
dotted: 点線のアウトラインをサポートしていません。 IE6 では破線効果として表示されます
破線: 点線の輪郭。
solid: 実線の輪郭
double: 二重線の輪郭。 2 本の単線とその間隔の合計は、指定された境界幅の値に等しくなります。
groove: 3D 溝の輪郭。
リッジ: 3D 凸状溝プロファイル。
挿入図: 3D 凹面エッジ輪郭。
アウトセット: 3D 凸エッジのアウトライン。
---------------------------------------------- --- --------
ボーダートップ複合属性。オブジェクトの上端のプロパティを設定します。
この複合属性を使用して単一のパラメーターを定義する場合、他のパラメーターのデフォルト値は、対応する単一の属性設定を無条件にオーバーライドします。
[ border-top-width ]: オブジェクトの上端の幅を設定または取得します。
[ border-top-style ]: オブジェクトの上の境界線スタイルを設定または取得します。
[ border-top-color ]: オブジェクトの上部の境界線の色を設定または取得します。
---------------------------------------------- --- ------------------
box-shadow オブジェクトのシャドウを設定または取得します。
エフェクトの複数のセットを設定でき、パラメータ値の各セットはカンマで区切られます。
none: 影なし
①: 最初の長さの値は、オブジェクトの影の水平オフセット値を設定するために使用されます。負の値も可能です
②: 2 番目の長さの値は、オブジェクトの影の垂直オフセット値を設定するために使用されます。負の値も可能です
③: 3 番目の長さの値が指定されている場合、それはオブジェクトのシャドウブラー値を設定するために使用されます。負の値は許可されません
④: 4 番目の長さの値が指定された場合、オブジェクトのシャドウ拡張値の設定に使用されます。負の値も可能です
: オブジェクトの影の色を設定します。
inset: オブジェクトのシャドウ タイプをインナー シャドウに設定します。値が空の場合、オブジェクトのシャドウ タイプはアウター シャドウです
----------------------------- - --------------------------------------
透明性
{
filter: alpha(opacity=10); //针对ie
}このようにして、基本的にすべてのブラウザで透明性を実現できます
上記は 4 番目の一般的な CSS プロパティの概要です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.ん）！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
