CSS 参考

本页面按字母序列出了所有标准的 CSS 属性、伪类、伪元素、@规则、单位和选择器。您可以快速访问到各个词条的详细内容。在这里不仅列出了 CSS1 和 CSS2.1 的属性，还列出了 CSS3 中已标准化或已固定的属性和概念。

另外，您可以通过查看 Mozilla CSS 扩展页面了解那些 Gecko 私有的 CSS 属性、WebKit CSS 扩展页面了解那些 WebKit 私有的 CSS 属性，以及带前缀的 CSS 属性页面查看所有非标准的 CSS 属性.

1. A
   1. :active
   2. additive-symbols
   3. ::after (:after)
   4. align-content
   5. align-items
   6. align-self
   7. all
   8. <angle>
   9. animation
   10. animation-delay
   11. animation-direction
   12. animation-duration
   13. animation-fill-mode
   14. animation-iteration-count
   15. animation-name
   16. animation-play-state
   17. animation-timing-function
   18. @annotation
   19. annotation()
   20. attr()
2. B
   1. ::backdrop
   2. backface-visibility
   3. background
   4. background-attachment
   5. background-blend-mode
   6. background-clip
   7. background-color
   8. background-image
   9. background-origin
   10. background-position
   11. background-repeat
   12. background-size
   13. <basic-shape>
   14. ::before (:before)
   15. <blend-mode>
   16. block-size
   17. blur()
   18. border
   19. border-block-end
   20. border-block-end-color
   21. border-block-end-style
   22. border-block-end-width
   23. border-block-start
   24. border-block-start-color
   25. border-block-start-style
   26. border-block-start-width
   27. border-bottom
   28. border-bottom-color
   29. border-bottom-left-radius
   30. border-bottom-right-radius
   31. border-bottom-style
   32. border-bottom-width
   33. border-collapse
   34. border-color
   35. border-image
   36. border-image-outset
   37. border-image-repeat
   38. border-image-slice
   39. border-image-source
   40. border-image-width
   41. border-inline-end
   42. border-inline-end-color
   43. border-inline-end-style
   44. border-inline-end-width
   45. border-inline-start
   46. border-inline-start-color
   47. border-inline-start-style
   48. border-inline-start-width
   49. border-left
   50. border-left-color
   51. border-left-style
   52. border-left-width
   53. border-radius
   54. border-right
   55. border-right-color
   56. border-right-style
   57. border-right-width
   58. border-spacing
   59. border-style
   60. border-top
   61. border-top-color
   62. border-top-left-radius
   63. border-top-right-radius
   64. border-top-style
   65. border-top-width
   66. border-width
   67. bottom
   68. box-decoration-break
   69. box-shadow
   70. box-sizing
   71. break-after
   72. break-before
   73. break-inside
   74. brightness()
3. C
   1. calc()
   2. caption-side
   3. ch
   4. @character-variant
   5. character-variant()
   6. @charset
   7. :checked
   8. circle()
   9. clear
   10. clip
   11. clip-path
   12. cm
   13. color
   14. <color>
   15. columns
   16. column-count
   17. column-fill
   18. column-gap
   19. column-rule
   20. column-rule-color
   21. column-rule-style
   22. column-rule-width
   23. column-span
   24. column-width
   25. content
   26. contrast()
   27. <counter>
   28. counter-increment
   29. counter-reset
   30. @counter-style
   31. cubic-bezier()
   32. cursor
   33. <custom-ident>
4. D
   1. :default
   2. deg
   3. :dir()
   4. direction
   5. :disabled
   6. display
   7. @document
   8. dpcm
   9. dpi
   10. dppx
   11. drop-shadow()
5. E
   1. element()
   2. ellipse()
   3. em
   4. :empty
   5. empty-cells
   6. :enabled
   7. ex
6. F
   1. fallback
   2. filter
   3. :first
   4. :first-child
   5. ::first-letter (:first-letter)
   6. ::first-line (:first-line)
   7. :first-of-type
   8. flex
   9. flex-basis
   10. flex-direction
   11. flex-flow
   12. flex-grow
   13. flex-shrink
   14. flex-wrap
   15. float
   16. :focus
   17. font
   18. @font-face
   19. font-family
   20. font-family
   21. font-feature-settings
   22. @font-feature-values
   23. font-kerning
   24. font-language-override
   25. font-size
   26. font-size-adjust
   27. font-stretch
   28. font-stretch
   29. font-style
   30. font-style
   31. font-synthesis
   32. font-variant
   33. font-variant
   34. font-variant-alternates
   35. font-variant-caps
   36. font-variant-east-asian
   37. font-variant-ligatures
   38. font-variant-numeric
   39. font-variant-position
   40. font-weight
   41. font-weight
   42. <frequency>
   43. :fullscreen
7. G
   1. grad
   2. <gradient>
   3. grayscale()
   4. grid
   5. grid-area
   6. grid-auto-columns
   7. grid-auto-flow
   8. grid-auto-position
   9. grid-auto-rows
   10. grid-column
   11. grid-column-start
   12. grid-column-end
   13. grid-row
   14. grid-row-start
   15. grid-row-end
   16. grid-template
   17. grid-template-areas
   18. grid-template-rows
   19. grid-template-columns
8. H
   1. height
   2. height
   3. :hover
   4. hsl()
   5. hsla()
   6. hue-rotate()
   7. hyphens
   8. hz
9. I
   1. <image>
   2. image()
   3. image-rendering
   4. image-resolution
   5. image-orientation
   6. ime-mode
   7. @import
   8. in
   9. :indeterminate
   10. inherit
   11. initial
   12. inline-size
   13. :in-range
   14. inset()
   15. <integer>
   16. :invalid
   17. invert()
   18. isolation
10. J
    1. justify-content
11. K
    1. @keyframes
    2. khz
12. L
    1. :lang()
    2. :last-child
    3. :last-of-type
    4. left
    5. :left
    6. <length>
    7. letter-spacing
    8. linear-gradient()
    9. line-break
    10. line-height
    11. :link
    12. list-style
    13. list-style-image
    14. list-style-position
    15. list-style-type
13. M
    1. margin
    2. margin-block-end
    3. margin-block-start
    4. margin-bottom
    5. margin-inline-end
    6. margin-inline-start
    7. margin-left
    8. margin-right
    9. margin-top
    10. marks
    11. mask
    12. mask-type
    13. matrix()
    14. matrix3d()
    15. max-block-size
    16. max-height
    17. max-height
    18. max-inline-size
    19. max-width
    20. max-width
    21. max-zoom
    22. @media
    23. min-block-size
    24. min-height
    25. min-height
    26. min-inline-size
    27. minmax()
    28. min-width
    29. min-width
    30. min-zoom
    31. mix-blend-mode
    32. mm
    33. ms
14. N
    1. @namespace
    2. negative
    3. :not()
    4. :nth-child()
    5. :nth-last-child()
    6. :nth-last-of-type()
    7. :nth-of-type()
    8. <number>
15. O
    1. object-fit
    2. object-position
    3. offset-block-end
    4. offset-block-start
    5. offset-inline-end
    6. offset-inline-start
    7. :only-child
    8. :only-of-type
    9. opacity
    10. opacity()
    11. :optional
    12. order
    13. orientation
    14. @ornaments
    15. ornaments()
    16. orphans
    17. outline
    18. outline-color
    19. outline-offset
    20. outline-style
    21. outline-width
    22. :out-of-range
    23. overflow
    24. overflow-wrap
    25. overflow-x
    26. overflow-y
16. P
    1. pad
    2. padding
    3. padding-block-end
    4. padding-block-start
    5. padding-bottom
    6. padding-inline-end
    7. padding-inline-start
    8. padding-left
    9. padding-right
    10. padding-top
    11. @page
    12. page-break-after
    13. page-break-before
    14. page-break-inside
    15. pc
    16. <percentage>
    17. perspective
    18. perspective()
    19. perspective-origin
    20. pointer-events
    21. polygon()
    22. position
    23. <position>
    24. prefix
    25. pt
    26. px
17. Q
    1. quotes
18. R
    1. rad
    2. radial-gradient()
    3. range
    4. <ratio>
    5. :read-only
    6. :read-write
    7. rect()
    8. rem
    9. repeat()
    10. ::repeat-index
    11. ::repeat-item
    12. repeating-linear-gradient()
    13. repeating-radial-gradient()
    14. :required
    15. resize
    16. <resolution>
    17. rgb()
    18. rgba()
    19. right
    20. :right
    21. :root
    22. rotate()
    23. rotatex()
    24. rotatey()
    25. rotatez()
    26. rotate3d()
    27. ruby-align
    28. ruby-merge
    29. ruby-position
19. S
    1. s
    2. saturate()
    3. scale()
    4. scalex()
    5. scaley()
    6. scalez()
    7. scale3d()
    8. :scope
    9. scroll-behavior
    10. scroll-snap-coordinate
    11. scroll-snap-destination
    12. scroll-snap-points-x
    13. scroll-snap-points-y
    14. scroll-snap-type
    15. scroll-snap-type-x
    16. scroll-snap-type-y
    17. ::selection
    18. sepia()
    19. <shape>
    20. shape-image-threshold
    21. shape-margin
    22. shape-outside
    23. skew()
    24. skewx()
    25. skewy()
    26. speak-as
    27. src
    28. steps()
    29. <string>
    30. @styleset
    31. styleset()
    32. @stylistic
    33. stylistic()
    34. suffix
    35. @supports
    36. @swash
    37. swash()
    38. symbols
    39. symbols()
    40. system
    T
    1. table-layout
    2. tab-size
    3. :target
    4. text-align
    5. text-align-last
    6. text-combine-upright
    7. text-decoration
    8. text-decoration-color
    9. text-decoration-line
    10. text-decoration-style
    11. text-indent
    12. text-orientation
    13. text-overflow
    14. text-rendering
    15. text-shadow
    16. text-transform
    17. text-underline-position
    18. <time>
    19. <timing-function>
    20. top
    21. touch-action
    22. transform
    23. transform-box
    24. transform-origin
    25. transform-style
    26. transition
    27. transition-delay
    28. transition-duration
    29. transition-property
    30. transition-timing-function
    31. translate()
    32. translatex()
    33. translatey()
    34. translatez()
    35. translate3d()
    36. turn
20. U
    1. unicode-bidi
    2. unicode-range
    3. :unresolved
    4. unset
    5. <uri>
    6. url()
    7. user-zoom
21. V
    1. :valid
    2. var()
    3. vertical-align
    4. vh
    5. @viewport
    6. visibility
    7. :visited
    8. vmax
    9. vmin
    10. vw
22. W
    1. white-space
    2. widows
    3. width
    4. width
    5. will-change
    6. word-break
    7. word-spacing
    8. word-wrap
    9. writing-mode
23. X Y Z
    1. z-index
    2. zoom

选择器

• 基本选择器
  • 元素选择器 elementname
  • 类选择器 .classname
  • ID选择器 #idname
  • 通配选择器 * ns|* *|*
  • 属性选择器 [attr=value]
• 组合选择器
  • 相邻兄弟选择器 A + B
  • 通用兄弟选择器 A ~ B
  • 子选择器 A > B
  • 后代选择器 A B
• 伪元素
• 伪类

CSS3 教程

下面的文章教你如何使用一些 CSS3 中新出现的技术:

• 如何使用媒体查询
• 如何使用 CSS 计数器
• 如何使用 CSS 渐变
• 如何使用 CSS 变形
• 如何使用 CSS 动画
• 如何使用 CSS 过渡
• 如何使用 CSS 多背景
• 如何使用 CSS 弹性盒
• 如何使用 CSS 多列布局

概念

• CSS 语法
• @规则
• 注释
• 权重
• 初始值
• 继承
• 指定值
• 计算值
• 使用值
• 实际值
• 盒式模型
• 替换元素
• 属性值定义语法

文章来源：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference