css(2)

この記事は、一部の作成者が長期的なコーディングでまとめた一般的な CSS クエリをまとめたもので、将来のクエリを容易にするためにこのブログに書かれています。

1. 色の属性:

カラー

• HEX (16進数カラー: カラー: #FFFF00 --> 略称: #FF0)
• RGB (赤、緑、青、使用法: color:rgb(255,255,0) または color:rgb(100%,100%,0%))
• RGBA (赤、緑、青の透明度、Aは0~1の透明度の値。使用方法: color:rgba(255,255,0,0.5))
• HSL (CSS3が有効、Hは色相を表します、Sは彩度を表します、Lは明るさを表します、使用方法: color:hsl(360,100%,50%))
• HSLA (HSL と同様、A は 0 から 1 の範囲のアルファ透明度を表します。)

透明

• 完全に透明、使用: 色: 透明;

不透明度

• 要素の透明度、構文: opacity: 0.5;
• 属性値は 0.0 ～ 1.0 の範囲で、0 は透明、1 は不透明を意味します。
• filter フィルター属性 (初期の IE ブラウザーにのみ適用可能、構文: filter:alpha(opacity:20);)。

2. フォント属性:

font-style: 斜体のテキストを指定するために使用されます

• 通常 テキストが通常通り表示されます
• 斜体テキスト斜体
• oblique テキスト斜め表示

font-weight: テキストの太さを設定します

• 通常 (デフォルト)
• 太字
• 太字 ( タグと タグに相当)
• ライター（レギュラー）
• 100 ~ 900 100 (400=通常、700=太字)

font-size: フォントサイズを設定します

• デフォルト値: 中
• オプションのパラメータ値: xx-small、x-small、small、medium、large、x-large、xx-large
• 親タグのフォントのサイズを基準にして調整します。オプションのパラメーター値: 小さい、大きい
• パーセントはテキストのサイズを指定します。
• 長さの値を使用してテキストのサイズを指定します。負の値は許可されません。

フォントファミリー: フォント名

• 複数のフォントを区切るにはカンマを使用します (優先順位は前から後ろにあり、現在のフォントがシステムで見つからない場合は逆方向に検索します)

フォント：略語属性

• 構文: font: フォント サイズ/行の高さのフォント (フォントは最後にある必要があります)

3. テキスト属性:

white-space: 要素内の空白の処理方法を設定します

• normal: デフォルトの処理方法。
• pre: スペースを保持し、テキストが境界を超える場合は折り返さない
• nowrap: スペースを保持せず、テキストの終わりまたは br タグに到達するまで、すべてのテキストを強制的に同じ行に表示します
• 折り返し前: スペースを保持し、境界に達したときにテキストを折り返します
• 行前: スペースを保持せず、テキストの行折り返しを保持し、テキストが境界に達したときに折り返されます

direction: テキストの方向を指定します

• ltr デフォルトでは、テキストの方向は左から右です。
• rtl テキストの方向は右から左です。

text-align: テキストの水平方向の配置

• 左
• センター
• そうです

line-height: テキスト行の高さ

• 通常のデフォルト

vertical-align: テキストの行の高さの垂直方向の配置

• ベースラインデフォルト
• sub はテキストの下付き文字を垂直方向に配置します。 _{タグと同じ効果があります}
• super はテキストの上付き文字を垂直方向に配置します。 ^{タグと同じ効果があります}
• 一番上のオブジェクトの上部がコンテナの上部と揃えられます
• text-top オブジェクトの上部をライン上のテキストの上部に揃えます
• 中央の要素オブジェクトはベースラインに基づいて垂直方向に整列されます
• 一番下のオブジェクトの下部が行内のテキストの下部に揃えられます
• text-bottom オブジェクトの下部は、行内のテキストの下部に揃えられます

text-indent: テキストのインデント

文字間隔: 文字の間にスペースを追加します

単語間隔: 各単語の間にスペースを追加します

text-transform: 属性はテキストの大文字と小文字を制御します

• 大文字にする テキスト内のすべての単語は大文字で始まります。
• uppercase は大文字のみを定義します。
• 小文字の定義には小文字のみが含まれます。

text-overflow: テキストオーバーフロースタイル

• クリップ テキストをトリミングします。
• ellipsis は、トリミングされたテキストを表す省略記号を表示します。
• string 指定された文字列を使用して、トリミングされたテキストを表します。

テキスト装飾: テキスト装飾

• デフォルトは何もありません。
• 下線下線。
• オーバーラインオーバーライン。
• ラインスルーセンターライン。

text-shadow: テキストシャドウ

• 最初のパラメータは左右の位置です
• 2番目のパラメータは上下の位置です
• 3番目のパラメータはぼかし効果です
• 4番目のパラメータは色です
• テキストシャドウ: 5px 5px 5px #888;

word-wrap: 自動行折り返し

• ワードラップ: ブレークワード;

4. 背景のプロパティ

背景色

background-image 画像を背景として設定します

• url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png");

背景画像:線形グラデーション(緑、青、黄、赤、黒);
background-positionは背景画像の位置座標を設定します

background-position: center center; 画像は中央、x 軸の中心、y 軸の中心です

• 1px -195px 画像の特定の部分を切り取り、それぞれ x 軸と y 軸の座標を表します
background-repeatは、背景画像が繰り返しタイル表示されないように設定します

no-repeat 画像を繰り返さないように設定します。よく使用されます

• ラウンドは、コンテナ全体に収まるまで自動的にスケールします

• スペースが同じ間隔でタイル状に並べられ、コンテナ全体を埋めます

background-attachment 背景画像が固定されているか、ページの残りの部分と一緒にスクロールするか

背景の略語

背景: url("o_ns.png") 繰り返しなし 0 -196px;

• 背景: url("o_ns.png") リピートなし中央下 15 ピクセル;

• 背景: url("o_ns.png") 繰り返しなし左 30 ピクセル下 15 ピクセル;

5. 属性をリストする

list-style-type: リスト項目フラグのタイプ

ロゴを削除しない

• 10 進数の先行ゼロ 02.
• スクエアボックス
• サークル
• アッパーアルファ&ディスク
list-style-image: 画像をリスト項目のロゴとして設定します

list-style-position: リスト項目マークの位置

内部

• 外
リストスタイル: 略語

1.ボーダー

ボーダースタイル: ボーダースタイル

実線デフォルト、実線

二重二重線

• 点線
• 一点鎖線
• border-color: 境界線の色

border-width: ボーダーの幅

border-radius: 丸い角

1パラメータ: 四隅すべてに適用

2 つのパラメーター: 最初のパラメーターは左上と右下に適用され、2 番目のパラメーターは左下と右上に適用されます。

3 つのパラメーター: 最初のパラメーターは左上に適用され、2 番目のパラメーターは左下と右上に適用されます
4 つのパラメータ: 左上、右上、右下、左下 (時計回り)
• ボーダー: 略語

境界線: 2ピクセルの黄色の実体

box-shadow: 境界線の影

最初のパラメータは左右の位置です 2番目のパラメータは上下の位置です

3番目のパラメータはぼかし効果です
4番目のパラメータは色です
ボックスシャドウ: 10px 10px 5px #888;
• 境界線の実装例:

コード:

リーリー

コードを表示

Border はさまざまな三角形のシンボルを実装します:

リーリー

コードを表示

リーリー

コードを表示

z-index 要素の重なり順

• z-index は位置決めされた要素でのみ有効です (例:position:absolute;)
• 負の属性値を指定できます(例: -1;)

コード:

リーリー

コードを表示

輪郭 境界線の輪郭

• outline-width アウトライン幅
• 輪郭の色 輪郭の色
• アウトラインスタイル アウトラインスタイル

ズームズーム率

リーリー

コードを表示

cursor 鼠标的类型形状

鼠标放在以下单词上，There will be a miracle：

  url: 自定义光标

 Auto: 默认
  Default: 默认
  e-resize
  ne-resize
  nw-resize
  n-resize
  se-resize
  sw-resize
  s-resize
  w-resize
  Crosshair
  Pointer
  Move
  text
  wait
  help

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Title<span style="color: #0000ff;"></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #008000;"><!--</span><span style="color: #008000;"><link href="cc2.css" rel="stylesheet" type="text/css"></span><span style="color: #008000;">--></span>
    <span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        body </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            cursor</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url("mouse.png"), auto</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
            <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png</span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="100%"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span><span style="color: #000000;">

自定义光标实例</span></span></span></span></span></span></span></span></span></span>

自定义光标实例

 transform、transition 动画效果

transform 转换，变形

• origin 定义旋转基点（left top center right bottom 坐标值）    transform-origin: 50px 50px; transform-origin: left;。