あなたの知らないCSSの常用属性(絶えず更新して、未完は続きます)

6565 ワード

  • HEX(16進数:color:#FFF 000).
  • RGB(赤緑青:color:rgb(255,255,0)またはcolor:rgb(100%,100%,20%)
  • RGBA(赤緑青透明度:color:rgba(255,255,0,0.5).
  • HSL(CSS 3有効、H:色相、S:飽和度、L:輝度.color:hsl(360100%、50%)
  • HSLA(HSLと同様、AはAlpha透明度を表し、0~1の値をとる).
  • 全透明:color:transparent.
  • filter:alpha(opacity:20))は、初期のIEブラウザにのみ適用されます.

  • フォント

  • フォントサイズ(absolute-size):xx-small、x-small、small、medium、large、x-large、xx-large.
  • フォントサイズ(relative-size):親ラベルのフォントサイズに対して調整します:smaller、larger.
  • フォントサイズ(percentage):パーセンテージで文字サイズを指定します.
  • フォントサイズ(length):長さ値は文字サイズを指定します.
  • フォント名:font-family:one、two、three.優先度は前から後ろに、システムに現在のフォントがない場合は後ろに探します.

  • テキストのプロパティ


    white-space:要素内の空白の処理方法を設定する
  • normal、デフォルト.
  • pre、スペースを保持し、文字が境界を超えた場合は改行しません.
  • nowrapは、スペースを残さず、テキストが終了するかbrラベルにぶつかるまで、同じ行にすべてのテキストを強制的に表示します.
  • pre-wrap、スペースを保持し、文字が境界にぶつかったときに改行します.
  • pre-line、スペースを残さず、文字の改行を保留し、文字が境界にぶつかったときに改行する.

  • Direction:テキストの方向を定める
  • ltr、rtl、テキストは左から右と右から左です.

  • vertical-align:テキストの行の高さの垂直位置合わせ
  • baseline、デフォルト.
  • sub、テキストの下付きラベルを垂直に揃え、ラベルと同じ効果を得ます.
  • super、テキストの上付き文字を垂直に揃え、ラベルと同じ効果を得ます.
  • topで、オブジェクトの先端がコンテナの先端に位置合わせされます.
  • text-top、オブジェクトの先端が行の文字の先端に位置合わせされます.
  • middle、要素オブジェクトがベースラインに整列します.
  • bottomで、オブジェクトの下端が行のテキストの下部に位置合わせされます.
  • text-bottomで、オブジェクトの下端が行の文字の下端に揃えられます.

  • text-indent:テキストのインデント.
    letter-spacing:アルファベット間の空白を追加します.
    word-spacing:各単語間の空白を追加します.
    text-transform:属性制御テキストの大文字と小文字
  • capitalize:テキスト内の各単語は大文字で始まります.
  • uppercase:すべて大文字です.
  • lowercase:すべて小文字です.

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

  • clip:テキストをトリムします.
  • ellipsis:省略記号を表示...トリミングされたテキストを表します.
  • string:トリミングされたテキストを表すために、指定された文字列を使用します.

  • text-shadow:左右、上下、虚化、色;


    word-wrap:break-word;を選択します。


    リストのプロパティ


    list-style
  • list-style-type:none除去、decimal-leading-zero;02、squareボックス、circle中空円、upper-aph、disc中空円.
  • list-style-image:画像をリスト項目フラグに設定します.
  • list-style-position:inside、outside、リスト項目フラグの位置.

  • 枠線のプロパティ


    border-radius略記
  • パラメータ:四角.
  • パラメータ:左上右下、左下右上.
  • の3つのパラメータ:左上、左下右上、右下.
  • 4個のパラメータ:左上、右上、右下、左下(時計回り)
  • box-shadow:左右、上下、虚化、色

    margin

  • パラメータ:4辺.
  • パラメータ:上下、左右.
  • の3つのパラメータ:上、左右、下.

  • display

  • list-item:リスト要素.
  • run-in:コンテキストに基づいてブロックレベル要素またはインライン要素として表示されます.
  • table:ブロックレベルのテーブル要素として使用します.
  • inline-table:インラインテーブル要素として使用します.
  • table-row-group:tbodyのように、1つ以上の行のパケットとして表示されます.
  • table-header-group:theadのように、1つ以上の行のパケットとして表示されます.
  • table-footer-group:tfootのように、1つ以上の行のパケットとして表示されます.
  • table-row:trのようにテーブル行として表示されます.
  • table-colunm-group:colgroupのように、1つ以上の列のパケットとして表示されます.
  • table-colunm:colのようにセル列として表示されます.
  • table-cell:tdとthのように、表のセルとして表示されます.
  • table-caption:captionのように、テーブルタイトルとして表示されます.

  • visibility

  • visible:要素が表示されます.
  • hidden:要素は表示されません.
  • collapse:テーブル要素で使用すると、テーブルのレイアウトに影響を与えない行または列を削除できます.

  • clipクリップ画像

    rect      :clip:rect(0px,10px,10px,0px);        。auto   ,   。          。    position:absolute。
    

    z-index

    z-index         :position:absolute
    

    zoom:normal、number、percentage


    cursorマウスのタイプ形状:


    Auto:デフォルトDefault:デフォルトe-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize Crosshair Point wait help not-allowed

    Transition遷移

  • transition-property:変換された属性、none(属性変更なし)、all(すべての属性変更)、具体的な属性.
  • transition-duration:変換期間.
  • transition-timing-function:変換速度(ease:徐々に遅くなる)、(liner:均一速度)、(ease-in:加速)、(ease-out:減速)、(ease-in-out:加速して減速する)、(cubic-bezier:カスタム時間曲線).
  • transition-delay:変換遅延時間.
  • 属性対応タイプ
     1、color:    、 、         (        ), :background-color,border-color,color,outline-color CSS  ;
     2、length:     , :word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position   ;
     3、percentage:     , :word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position   ;
     4、integer     (    ),        ,    floor()        , :outline-offset,z-index   ;
     5、number   (   )  , :zoom,opacity,font-weight   ;
     6、transform list。
     7、rectangle:  x、 y、 width height(    )  , :crop;
     8、visibility:    , 0 1      ,0  “  ”,1    “  ”, :visibility;
     9、shadow:   color、x、y、 blur(  )  , :text-shadow;
     10、gradient:                 。          (         )              , :background-image;
     11、paint server (SVG):        : gradient gradient  color color,         ;
     12、space-separated list of above:            ,                 ,     ;
     13、a shorthand property:                ,               。
    
  • を指定する.
  • transition効果を実行するプロパティをサポートするProperty Name Type background-color as color background-position as repeatable list of simple list of length,percentage, or calc border-bottom-color as color border-bottom-width as length border-left-color as color border-left-width as length border-right-color as color border-right-width as length border-spacing as simple list of length border-top-color as color border-top-width as length bottom as length, percentage, or calc clip as rectangle color as color font-size as length font-weight as font weight height as length, percentage, or calc left as length, percentage, or calc letter-spacing as length line-height as either number or length margin-bottom as length margin-left as length margin-right as length margin-top as length max-height as length, percentage, or calc max-width as length, percentage, or calc min-height as length, percentage, or calc min-width as length, percentage, or calc opacity as number outline-color as color outline-width as length padding-bottom as length padding-left as length padding-right as length padding-top as length right as length, percentage, or calc text-indent as length, percentage, or calc text-shadow as shadow list top as length, percentage, or calc vertical-align as length visibility as visibility width as length, percentage, or calc word-spacing as length z-index as integer