Mapa Składników CSS

Selektory CSS

  1. *
  2. E
  3. #ID
  4. .CLASS
  5. S S
  6. S > S
  7. S + S
  8. S ~ S
  9. [A]
  10. [A="V"]
  11. [A~="V"]
  12. [A^="V"]
  13. [A$="V"]
  14. [A*="V"]
  15. [A|="V"]
  16. :active
  17. ::after
  18. ::before
  19. :checked
  20. :default
  21. :disabled
  22. :empty
  23. :enabled
  24. :first-child
  25. ::first-letter
  26. ::first-line
  27. :first-of-type
  28. :focus
  29. :hover
  30. :in-range
  31. :indeterminate
  32. :lang()
  33. :last-child
  34. :last-of-type
  35. :link
  36. :not()
  37. :nth-child()
  38. :nth-last-child()
  39. :nth-last-of-type()
  40. :nth-of-type()
  41. :only-child
  42. :only-of-type
  43. :optional
  44. :out-of-range
  45. ::placeholder
  46. :placeholder-shown
  47. :read-only
  48. :read-write
  49. :required
  50. :root
  51. ::selection
  52. :target
  53. :visited

Właściwości CSS

  1. align-content
  2. align-items
  3. align-self
  4. all
  5. animation
  6. animation-delay
  7. animation-direction
  8. animation-duration
  9. animation-fill-mode
  10. animation-iteration-count
  11. animation-name
  12. animation-play-state
  13. animation-timing-function
  14. appearance
  15. backface-visibility
  16. background
  17. background-attachment
  18. background-blend-mode
  19. background-clip
  20. background-color
  21. background-image
  22. background-origin
  23. background-position
  24. background-position-x
  25. background-position-y
  26. background-repeat
  27. background-size
  28. border
  29. border-bottom
  30. border-bottom-color
  31. border-bottom-left-radius
  32. border-bottom-right-radius
  33. border-bottom-style
  34. border-bottom-width
  35. border-collapse
  36. border-color
  37. border-image
  38. border-image-outset
  39. border-image-repeat
  40. border-image-slice
  41. border-image-source
  42. border-image-width
  43. border-left
  44. border-left-color
  45. border-left-style
  46. border-left-width
  47. border-radius
  48. border-right
  49. border-right-color
  50. border-right-style
  51. border-right-width
  52. border-spacing
  53. border-style
  54. border-top
  55. border-top-color
  56. border-top-left-radius
  57. border-top-right-radius
  58. border-top-style
  59. border-top-width
  60. border-width
  61. bottom
  62. box-decoration-break
  63. box-reflect
  64. box-shadow
  65. box-sizing
  66. caption-side
  67. clear
  68. clip
  69. clip-path
  70. color
  71. column-count
  72. column-fill
  73. column-gap
  74. column-rule
  75. column-rule-color
  76. column-rule-style
  77. column-rule-width
  78. column-span
  79. column-width
  80. columns
  81. content
  82. counter-increment
  83. counter-reset
  84. cursor
  85. direction
  86. display
  87. empty-cells
  88. filter
  89. flex
  90. flex-basis
  91. flex-direction
  92. flex-flow
  93. flex-grow
  94. flex-shrink
  95. flex-wrap
  96. float
  97. font
  98. font-family
  99. font-size
  100. font-style
  101. font-variant
  102. font-weight
  103. height
  104. hyphens
  105. isolation
  106. justify-content
  107. left
  108. letter-spacing
  109. line-height
  110. list-style
  111. list-style-image
  112. list-style-position
  113. list-style-type
  114. margin
  115. margin-bottom
  116. margin-left
  117. margin-right
  118. margin-top
  119. mask
  120. mask-clip
  121. mask-composite
  122. mask-image
  123. mask-mode
  124. mask-origin
  125. mask-position
  126. mask-repeat
  127. mask-size
  128. max-height
  129. max-width
  130. min-height
  131. min-width
  132. mix-blend-mode
  133. object-fit
  134. object-position
  135. opacity
  136. order
  137. orphans
  138. outline
  139. outline-color
  140. outline-offset
  141. outline-style
  142. outline-width
  143. overflow
  144. overflow-x
  145. overflow-y
  146. padding
  147. padding-bottom
  148. padding-left
  149. padding-right
  150. padding-top
  151. page-break-after
  152. page-break-before
  153. page-break-inside
  154. perspective
  155. perspective-origin
  156. pointer-events
  157. position
  158. quotes
  159. resize
  160. right
  161. scrollbar-arrow-color
  162. scrollbar-base-color
  163. scrollbar-face-color
  164. scrollbar-shadow-color
  165. scrollbar-track-color
  166. shape-image-threshold
  167. shape-margin
  168. shape-outside
  169. tab-size
  170. table-layout
  171. text-align
  172. text-align-last
  173. text-decoration
  174. text-decoration-color
  175. text-decoration-line
  176. text-decoration-style
  177. text-emphasis
  178. text-emphasis-color
  179. text-emphasis-position
  180. text-emphasis-style
  181. text-fill-color
  182. text-indent
  183. text-orientation
  184. text-overflow
  185. text-shadow
  186. text-stroke
  187. text-stroke-color
  188. text-stroke-width
  189. text-transform
  190. top
  191. transform
  192. transform-origin
  193. transform-style
  194. transition
  195. transition-delay
  196. transition-duration
  197. transition-property
  198. transition-timing-function
  199. unicode-bidi
  200. user-select
  201. vertical-align
  202. visibility
  203. white-space
  204. widows
  205. width
  206. will-change
  207. word-break
  208. word-spacing
  209. word-wrap
  210. writing-mode
  211. z-index
  212. zoom

Wartości CSS

  1. #RGB
  2. #RRGGBB
  3. attr()
  4. blur()
  5. bottom
  6. brightness()
  7. calc()
  8. center
  9. circle()
  10. ciąg znaków
  11. contrast()
  12. counter()
  13. counters()
  14. cubic-bezier()
  15. currentColor
  16. dashed
  17. dotted
  18. double
  19. drop-shadow()
  20. długość absolutna
  21. długość relatywna
  22. ellipse()
  23. formuła czterech wartości
  24. grayscale()
  25. groove
  26. grupa wartości
  27. hidden
  28. hsl()
  29. hsla()
  30. hue-rotate()
  31. inherit
  32. initial
  33. inset
  34. inset()
  35. invert()
  36. kombinacja wartości
  37. left
  38. liczby
  39. linear-gradient()
  40. matrix()
  41. matrix3d()
  42. medium
  43. none
  44. notacja naukowa
  45. opacity()
  46. outset
  47. paleta podstawowa
  48. paleta rozszerzona
  49. perspective()
  50. polygon()
  51. pozycja złożona
  52. procenty
  53. radial-gradient()
  54. rect()
  55. repeating-linear-gradient()
  56. repeating-radial-gradient()
  57. rgb()
  58. rgba()
  59. ridge
  60. right
  61. rotate()
  62. rotate3d()
  63. rotateX()
  64. rotateY()
  65. rotateZ()
  66. rozmiary
  67. saturate()
  68. scale()
  69. scale3d()
  70. scaleX()
  71. scaleY()
  72. scaleZ()
  73. sekwencja wartości
  74. sepia()
  75. skew()
  76. skewX()
  77. skewY()
  78. solid
  79. steps()
  80. thick
  81. thin
  82. top
  83. translate()
  84. translate3d()
  85. translateX()
  86. translateY()
  87. translateZ()
  88. transparent
  89. unset
  90. url()
  91. wartość lokalna
  92. wartość własna
  93. wzorzec wartości

Jednostki CSS

  1. ch
  2. cm
  3. deg
  4. em
  5. ex
  6. grad
  7. in
  8. mm
  9. ms
  10. pc
  11. pt
  12. px
  13. q
  14. rad
  15. rem
  16. s
  17. turn
  18. vh
  19. vmax
  20. vmin
  21. vw

Właściwości CSS wraz z wartościami

Właściwość Wartość
align-content stretch flex-start flex-end center space-between space-around
align-items stretch flex-start flex-end center baseline
align-self auto flex-start flex-end center baseline stretch
all initial inherit unset
animation grupa sekwencja
animation-delay czas sekwencja
animation-direction normal reverse alternate alternate-reverse sekwencja
animation-duration czas sekwencja
animation-fill-mode none backwards forwards both sekwencja
animation-iteration-count liczba całkowita infinite sekwencja
animation-name none nazwa sekwencja
animation-play-state running paused sekwencja
animation-timing-function ease ease-in ease-out ease-in-out linear step-start step-end steps() cubic-bezier() sekwencja
appearance auto none
backface-visibility visible hidden
background grupa sekwencja
background-attachment scroll fixed local sekwencja
background-blend-mode normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity sekwencja
background-clip border-box padding-box content-box sekwencja
background-color kolor
background-image none url() linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient() sekwencja
background-origin padding-box border-box content-box sekwencja
background-position grupa wzorzec sekwencja
background-position-x rozmiar left center right sekwencja
background-position-y rozmiar top center bottom sekwencja
background-repeat repeat repeat-x repeat-y no-repeat round space wzorzec sekwencja
background-size auto cover contain wzorzec sekwencja
border wzorzec
border-bottom grupa
border-bottom-color kolor
border-bottom-left-radius wzorzec
border-bottom-right-radius wzorzec
border-bottom-style styl linii
border-bottom-width rozmiar rozmiar linii
border-collapse separate collapse
border-color grupa
border-image grupa
border-image-outset wzorzec
border-image-repeat stretch repeat round space wzorzec
border-image-slice wzorzec
border-image-source none url()
border-image-width wzorzec
border-left grupa
border-left-color kolor
border-left-style styl linii
border-left-width rozmiar rozmiar linii
border-radius grupa
border-right grupa
border-right-color kolor
border-right-style styl linii
border-right-width rozmiar rozmiar linii
border-spacing wzorzec
border-style grupa
border-top grupa
border-top-color kolor
border-top-left-radius wzorzec
border-top-right-radius wzorzec
border-top-style styl linii
border-top-width rozmiar rozmiar linii
border-width grupa
bottom auto rozmiar
box-decoration-break slice clone
box-reflect none wzorzec
box-shadow none wzorzec sekwencja
box-sizing content-box border-box
caption-side top bottom
clear none left right both
clip auto rect()
clip-path none inset() circle() ellipse() polygon()
color kolor
column-count auto liczba całkowita
column-fill balance auto
column-gap normal rozmiar
column-rule grupa
column-rule-color kolor
column-rule-style styl linii
column-rule-width rozmiar rozmiar linii
column-span none all
column-width auto rozmiar
columns grupa
content normal none ciąg znaków url() attr() counter() counters() open-quote close-quote no-open-quote no-close-quote kombinacja
counter-increment none wzorzec
counter-reset none wzorzec
cursor typ kursora auto pointer progress wait crosshair move help text vertical-text alias copy all-scroll context-menu cell col-resize row-resize not-allowed zoom-in zoom-out grab grabbing no-drop none n-resize e-resize s-resize w-resize ne-resize se-resize sw-resize nw-resize ns-resize ew-resize nesw-resize nwse-resize default wzorzec
direction ltr rtl
display inline block none inline-block list-item table inline-table table-caption table-column-group table-column table-header-group table-row-group table-footer-group table-row table-cell flex inline-flex ruby ruby-base ruby-text ruby-text-container
empty-cells show hide
filter none grayscale() sepia() saturate() hue-rotate() invert() brightness() contrast() blur() opacity() drop-shadow() kombinacja
flex grupa none
flex-basis auto rozmiar
flex-direction row row-reverse column column-reverse
flex-flow grupa
flex-grow liczba
flex-shrink liczba
flex-wrap nowrap wrap wrap-reverse
float none left right
font grupa
font-family wzorzec
font-size rozmiar rozmiar absolutny rozmiar relatywny
font-style normal italic oblique
font-variant normal small-caps
font-weight normal bold grubość relatywna stopień grubości
height auto rozmiar
hyphens manual auto none
isolation auto isolate
justify-content flex-start flex-end center space-between space-around
left auto rozmiar
letter-spacing normal rozmiar
line-height normal liczba rozmiar
list-style grupa
list-style-image none url()
list-style-position outside inside
list-style-type typ wyróżnika disc circle square disclosure-open disclosure-closed none decimal decimal-leading-zero lower-roman upper-roman georgian armenian lower-armenian upper-armenian arabic-indic bengali cambodian khmer cjk-decimal devanagari gujarati gurmukhi hebrew kannada lao malayalam mongolian myanmar oriya persian tamil telugu thai tibetan lower-alpha upper-alpha lower-latin upper-latin lower-greek cjk-earthly-branch cjk-heavenly-stem hiragana hiragana-iroha katakana katakana-iroha japanese-informal japanese-formal korean-hangul-formal korean-hanja-informal korean-hanja-formal simp-chinese-informal simp-chinese-formal trad-chinese-informal trad-chinese-formal cjk-ideographic
margin grupa
margin-bottom rozmiar auto
margin-left rozmiar auto
margin-right rozmiar auto
margin-top rozmiar auto
mask grupa sekwencja
mask-clip border-box padding-box content-box sekwencja
mask-composite add subtract intersect exclude sekwencja
mask-image none url() linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient() sekwencja
mask-mode auto alpha luminance sekwencja
mask-origin border-box padding-box content-box sekwencja
mask-position wzorzec 1~2 wzorzec 3~4 sekwencja
mask-repeat repeat repeat-x repeat-y no-repeat round space wzorzec sekwencja
mask-size auto cover contain wzorzec sekwencja
max-height none rozmiar
max-width none rozmiar
min-height rozmiar
min-width rozmiar
mix-blend-mode normal multiply screen overlay darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity
object-fit fill contain cover none scale-down
object-position wzorzec
opacity liczba
order liczba całkowita
orphans liczba całkowita
outline grupa
outline-color invert kolor
outline-offset rozmiar
outline-style styl linii
outline-width rozmiar rozmiar linii
overflow visible hidden scroll auto
overflow-x visible hidden scroll auto
overflow-y visible hidden scroll auto
padding grupa
padding-bottom rozmiar
padding-left rozmiar
padding-right rozmiar
padding-top rozmiar
page-break-after auto always avoid
page-break-before auto always avoid
page-break-inside auto avoid
perspective none rozmiar
perspective-origin wzorzec
pointer-events auto none
position static relative absolute fixed
quotes none wzorzec
resize none horizontal vertical both
right auto rozmiar
scrollbar-arrow-color kolor
scrollbar-base-color kolor
scrollbar-face-color kolor
scrollbar-shadow-color kolor
scrollbar-track-color kolor
shape-image-threshold liczba
shape-margin rozmiar
shape-outside none margin-box border-box padding-box content-box inset() circle() ellipse() polygon() obrazek wzorzec
tab-size liczba całkowita rozmiar
table-layout auto fixed
text-align start end left right center justify match-parent
text-align-last auto start end left right center justify
text-decoration grupa
text-decoration-color kolor
text-decoration-line none underline overline line-through kombinacja
text-decoration-style solid double dotted dashed wavy
text-emphasis grupa
text-emphasis-color kolor
text-emphasis-position wzorzec
text-emphasis-style none znak wzorzec
text-fill-color kolor
text-indent rozmiar
text-orientation mixed upright sideways
text-overflow clip ellipsis
text-shadow none wzorzec sekwencja
text-stroke grupa
text-stroke-color kolor
text-stroke-width rozmiar rozmiar linii
text-transform none capitalize uppercase lowercase
top auto rozmiar
transform none perspective() translateX() translateY() translate() translateZ() translate3d() scaleX() scaleY() scale() scaleZ() scale3d() skewX() skewY() skew() rotate() rotateX() rotateY() rotateZ() rotate3d() matrix() matrix3d() kombinacja
transform-origin wzorzec
transform-style flat preserve-3d
transition grupa sekwencja
transition-delay czas sekwencja
transition-duration czas sekwencja
transition-property all none nazwa sekwencja
transition-timing-function ease ease-in ease-out ease-in-out linear step-start step-end steps() cubic-bezier() sekwencja
unicode-bidi normal embed bidi-override
user-select auto text none all
vertical-align baseline rozmiar sub super text-top text-bottom top middle bottom
visibility visible hidden collapse
white-space normal pre nowrap pre-wrap pre-line
widows liczba całkowita
width auto rozmiar
will-change auto scroll-position contents nazwa sekwencja
word-break normal keep-all break-all
word-spacing normal rozmiar
word-wrap normal break-word
writing-mode horizontal-tb vertical-lr vertical-rl
z-index auto liczba całkowita
zoom normal liczba