CSS
教程
CSS 基础
CSS 第一步
CSS 构建
样式化文本
CSS 布局概述
参考
Modules
Properties
1. -moz-*
  1. -moz-float-edge (en-US) 非标准已弃用
  2. -moz-force-broken-image-icon (en-US) 非标准已弃用
  3. -moz-image-region (en-US) 非标准
  4. -moz-orient (en-US) 非标准
  5. -moz-outline-radius 非标准已弃用
  6. -moz-outline-radius-bottomleft 非标准已弃用
  7. -moz-outline-radius-bottomright 非标准已弃用
  8. -moz-outline-radius-topleft 非标准已弃用
  9. -moz-outline-radius-topright 非标准已弃用
  10. -moz-user-focus (en-US) 非标准
  11. -moz-user-input 非标准已弃用
2. -webkit-*
  1. -webkit-border-before 非标准
  2. -webkit-box-reflect 非标准
  3. -webkit-line-clamp
  4. -webkit-mask-attachment 非标准
  5. -webkit-mask-box-image (en-US) 非标准
  6. -webkit-mask-composite (en-US) 非标准
  7. -webkit-mask-position-x (en-US) 非标准
  8. -webkit-mask-position-y (en-US) 非标准
  9. -webkit-mask-repeat-x (en-US) 非标准
  10. -webkit-mask-repeat-y (en-US) 非标准
  11. -webkit-overflow-scrolling 非标准
  12. -webkit-tap-highlight-color 非标准
  13. -webkit-text-fill-color (en-US)
  14. -webkit-text-security (en-US) 非标准
  15. -webkit-text-stroke
  16. -webkit-text-stroke-color (en-US)
  17. -webkit-text-stroke-width (en-US)
  18. -webkit-touch-callout 非标准
3. accent-color (en-US)
4. align-*
  1. align-content
  2. align-items
  3. align-self
  4. align-tracks (en-US) 实验性
5. all
6. animation-*
7. appearance
8. aspect-ratio
9. backdrop-filter
10. backface-visibility
11. background-*
12. block-size
13. border-*
14. bottom
15. box-*
  1. box-align (en-US) 非标准已弃用
  2. box-decoration-break
  3. box-direction (en-US) 非标准已弃用
  4. box-flex (en-US) 非标准已弃用
  5. box-flex-group (en-US) 非标准已弃用
  6. box-lines (en-US) 非标准已弃用
  7. box-ordinal-group (en-US) 非标准已弃用
  8. box-orient 非标准已弃用
  9. box-pack (en-US) 非标准已弃用
  10. box-shadow
  11. box-sizing
16. break-*
17. caption-side
18. caret-color
19. clear
20. clip 已弃用
21. clip-path
22. color
23. color-scheme
24. column-*
25. columns
26. contain-*
  1. contain
  2. contain-intrinsic-block-size (en-US)
  3. contain-intrinsic-height (en-US)
  4. contain-intrinsic-inline-size (en-US)
  5. contain-intrinsic-size (en-US)
  6. contain-intrinsic-width (en-US)
27. container-*
28. content
29. content-visibility (en-US) 实验性
30. counter-*
31. cursor
32. direction
33. display
34. empty-cells
35. filter
36. flex-*
37. float
38. font-*
39. forced-color-adjust (en-US)
40. gap
41. grid-*
  1. grid
  2. grid-area
  3. grid-auto-columns
  4. grid-auto-flow
  5. grid-auto-rows
  6. grid-column
  7. grid-column-end (en-US)
  8. grid-column-start (en-US)
  9. grid-row
  10. grid-row-end (en-US)
  11. grid-row-start (en-US)
  12. grid-template
  13. grid-template-areas
  14. grid-template-columns
  15. grid-template-rows
42. hanging-punctuation
43. height
44. hyphenate-character (en-US)
45. hyphenate-limit-chars (en-US)
46. hyphens
47. image-*
48. initial-letter (en-US) 实验性
49. initial-letter-align (en-US) 实验性
50. inline-size
51. inset-*
52. isolation
53. justify-*
  1. justify-content
  2. justify-items
  3. justify-self
  4. justify-tracks (en-US) 实验性
54. left
55. letter-spacing
56. line-*
  1. line-break
  2. line-height
  3. line-height-step (en-US) 实验性
57. list-*
58. margin-*
  1. margin
  2. margin-block
  3. margin-block-end
  4. margin-block-start
  5. margin-bottom
  6. margin-inline
  7. margin-inline-end
  8. margin-inline-start
  9. margin-left
  10. margin-right
  11. margin-top
  12. margin-trim (en-US) 实验性
59. mask-*
60. masonry-auto-flow (en-US) 实验性
61. math-*
  1. math-depth (en-US) 实验性
  2. math-shift (en-US) 实验性
  3. math-style (en-US)
62. max-*
63. min-*
64. mix-blend-mode
65. object-fit
66. object-position
67. offset-*
68. opacity
69. order
70. orphans (en-US)
71. outline-*
72. overflow-*
  1. overflow
  2. overflow-anchor
  3. overflow-block
  4. overflow-clip-margin (en-US)
  5. overflow-inline
  6. overflow-wrap
  7. overflow-x
  8. overflow-y
73. overscroll-*
  1. overscroll-behavior
  2. overscroll-behavior-block (en-US)
  3. overscroll-behavior-inline (en-US)
  4. overscroll-behavior-x
  5. overscroll-behavior-y
74. padding-*
75. page-*
  1. page (en-US)
  2. page-break-after
  3. page-break-before (en-US)
  4. page-break-inside
76. paint-order
77. perspective
78. perspective-origin
79. place-*
80. pointer-events
81. position
82. print-color-adjust (en-US)
83. quotes
84. resize
85. right
86. rotate
87. row-gap
88. ruby-align (en-US) 实验性
89. ruby-position (en-US)
90. scale
91. scroll-*
  1. scroll-behavior
  2. scroll-margin
  3. scroll-margin-block (en-US)
  4. scroll-margin-block-end (en-US)
  5. scroll-margin-block-start (en-US)
  6. scroll-margin-bottom (en-US)
  7. scroll-margin-inline (en-US)
  8. scroll-margin-inline-end (en-US)
  9. scroll-margin-inline-start (en-US)
  10. scroll-margin-left (en-US)
  11. scroll-margin-right (en-US)
  12. scroll-margin-top
  13. scroll-padding (en-US)
  14. scroll-padding-block (en-US)
  15. scroll-padding-block-end (en-US)
  16. scroll-padding-block-start (en-US)
  17. scroll-padding-bottom (en-US)
  18. scroll-padding-inline (en-US)
  19. scroll-padding-inline-end (en-US)
  20. scroll-padding-inline-start (en-US)
  21. scroll-padding-left (en-US)
  22. scroll-padding-right (en-US)
  23. scroll-padding-top (en-US)
  24. scroll-snap-align (en-US)
  25. scroll-snap-coordinate 非标准已弃用
  26. scroll-snap-destination 非标准已弃用
  27. scroll-snap-points-x 非标准已弃用
  28. scroll-snap-points-y 非标准已弃用
  29. scroll-snap-stop (en-US)
  30. scroll-snap-type
  31. scroll-snap-type-x (en-US) 非标准已弃用
  32. scroll-snap-type-y (en-US) 非标准已弃用
  33. scroll-timeline (en-US) 实验性
  34. scroll-timeline-axis (en-US) 实验性
  35. scroll-timeline-name (en-US) 实验性
92. scrollbar-*
93. shape-*
94. tab-size
95. table-layout
96. text-*
97. top
98. touch-action
99. transform-*
100. transition-*
101. translate
102. unicode-bidi
103. user-modify (en-US) 非标准已弃用
104. user-select
105. vertical-align
106. view-transition-name (en-US) 实验性
107. visibility
108. white-space
109. widows
110. width
111. will-change
112. word-break
113. word-spacing
114. writing-mode
115. z-index
116. zoom (en-US) 非标准
Selectors
Combinators
Pseudo-classes
Pseudo-elements
1. ::-moz-color-swatch (en-US) 非标准
2. ::-moz-focus-inner (en-US) 非标准
3. ::-moz-page (en-US) 非标准
4. ::-moz-page-sequence (en-US) 非标准
5. ::-moz-progress-bar 非标准
6. ::-moz-range-progress 非标准
7. ::-moz-range-thumb (en-US) 非标准
8. ::-moz-range-track (en-US) 非标准
9. ::-moz-scrolled-page-sequence (en-US) 非标准
10. ::-webkit-inner-spin-button (en-US) 非标准
11. ::-webkit-meter-bar (en-US) 非标准
12. ::-webkit-meter-even-less-good-value (en-US) 非标准
13. ::-webkit-meter-inner-element (en-US) 非标准
14. ::-webkit-meter-optimum-value (en-US) 非标准
15. ::-webkit-meter-suboptimum-value (en-US) 非标准
16. ::-webkit-outer-spin-button (en-US) 非标准
17. ::-webkit-progress-bar 非标准
18. ::-webkit-progress-inner-element 非标准
19. ::-webkit-progress-value 非标准
20. ::-webkit-scrollbar 非标准
21. ::-webkit-search-cancel-button (en-US) 非标准
22. ::-webkit-search-results-button (en-US) 非标准
23. ::-webkit-slider-runnable-track 非标准
24. ::-webkit-slider-thumb 非标准
25. ::after
26. ::backdrop
27. ::before
28. ::cue
29. ::cue-region (en-US)
30. ::file-selector-button
31. ::first-letter
32. ::first-line
33. ::grammar-error 实验性
34. ::highlight() (en-US) 实验性
35. ::marker
36. ::part()
37. ::placeholder
38. ::selection
39. ::slotted()
40. ::spelling-error 实验性
41. ::target-text (en-US) 实验性
42. ::view-transition (en-US) 实验性
43. ::view-transition-group (en-US) 实验性
44. ::view-transition-image-pair (en-US) 实验性
45. ::view-transition-new (en-US) 实验性
46. ::view-transition-old (en-US) 实验性
At-rules
Functions
1. -moz-image-rect 实验性非标准
2. abs() (en-US) 实验性
3. acos() (en-US)
4. asin() (en-US)
5. atan() (en-US)
6. atan2() (en-US)
7. attr()
8. calc()
9. clamp()
10. cos() (en-US)
11. counter()
12. counters()
13. cross-fade() (en-US)
14. element() 实验性
15. env()
16. exp() (en-US) 实验性
17. fit-content()
18. hypot() (en-US) 实验性
19. log() (en-US) 实验性
20. max()
21. min()
22. minmax()
23. mod() (en-US) 实验性
24. path() (en-US)
25. pow() (en-US) 实验性
26. rem() (en-US) 实验性
27. repeat()
28. round() (en-US) 实验性
29. sign() (en-US) 实验性
30. sin() (en-US)
31. sqrt() (en-US) 实验性
32. symbols() (en-US)
33. tan() (en-US)
34. url()
35. var()
Types
指南
动画
1. 运用 CSS 动画
背景和边框
1. 多个背景的应用
2. 重设背景图片的大小
盒子的对齐方式
1. 块布局中的对齐方式 (en-US)
2. Flex 布局中的对齐方式
3. Grid 布局中的盒模型对齐 (en-US)
4. 多栏式布局中的对齐方式 (en-US)
盒子模型
1. 盒子模型基础简介
2. 外边距重叠
列
条件规则
1. 运用查询特性
CSS 对象模型视图
1. 坐标系
Flex 布局
流布局
字体
1. OpenType 字体特性指南
2. 可变字体
Grid 布局
图片
1. 使用 CSS 渐变
列表和计数器
1. 运用 CSS 计数器
2. 调整列表缩进
逻辑属性
媒体查询
1. 运用媒体查询
2. 无障碍相关的媒体查询 (en-US)
3. 运用编程方法测试媒体查询
定位
1. CSS z-index
Scroll snap
1. scroll snap 基础概念 (en-US)
形状
1. 形状概述
2. 使用 box 值指定形状
3. 基础的形状 (en-US)
4. 从图片中指定形状 (en-US)
文本
1. 包装文本和文本断行 (en-US)
变换
1. 运用变换
过渡
1. 运用过渡
布局的 cookbook
1. 媒体对象
2. 列
3. 居中一个元素
4. 固定的页脚 (en-US)
5. 分块导航
6. 面包屑导航
7. 带有图标的列表 (en-US)
8. 分页 (en-US)
9. 卡片
10. Grid 布局包装器 (en-US)
工具
1. 取色器
2. Box shadow 生成器
3. 图片边框生成器

CSS 生成内容

参考

属性

规范

浏览器兼容性