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

Wartości CSS

  1. #RGB
  2. #RGBA
  3. #RRGGBB
  4. #RRGGBBAA
  5. attr()
  6. blur()
  7. bottom
  8. brightness()
  9. calc()
  10. center
  11. circle()
  12. ciąg znaków
  13. contrast()
  14. counter()
  15. counters()
  16. cubic-bezier()
  17. currentColor
  18. dashed
  19. dotted
  20. double
  21. drop-shadow()
  22. długość absolutna
  23. długość relatywna
  24. ellipse()
  25. formuła czterech wartości
  26. grayscale()
  27. groove
  28. grupa wartości
  29. hidden
  30. hsl()
  31. hsla()
  32. hue-rotate()
  33. inherit
  34. initial
  35. inset
  36. inset()
  37. invert()
  38. kombinacja wartości
  39. left
  40. liczby
  41. linear-gradient()
  42. matrix()
  43. matrix3d()
  44. medium
  45. none
  46. notacja naukowa
  47. opacity()
  48. outset
  49. paleta podstawowa
  50. paleta rozszerzona
  51. perspective()
  52. polygon()
  53. pozycja złożona
  54. procenty
  55. radial-gradient()
  56. rect()
  57. repeating-linear-gradient()
  58. repeating-radial-gradient()
  59. rgb()
  60. rgba()
  61. ridge
  62. right
  63. rotate()
  64. rotate3d()
  65. rotateX()
  66. rotateY()
  67. rotateZ()
  68. rozmiary
  69. saturate()
  70. scale()
  71. scale3d()
  72. scaleX()
  73. scaleY()
  74. scaleZ()
  75. sekwencja wartości
  76. sepia()
  77. skew()
  78. skewX()
  79. skewY()
  80. solid
  81. steps()
  82. thick
  83. thin
  84. top
  85. translate()
  86. translate3d()
  87. translateX()
  88. translateY()
  89. translateZ()
  90. transparent
  91. unset
  92. url()
  93. wartość lokalna
  94. wartość własna
  95. 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 (FLEX) normal flex-start flex-end center space-between space-around space-evenly stretch
align-content (GRID) normal start end center space-between space-around space-evenly stretch
align-items (FLEX) normal flex-start flex-end center stretch
align-items (GRID) normal start end center self-start self-end stretch
align-self (FLEX) auto normal flex-start flex-end center stretch
align-self (GRID) auto normal start end center self-start self-end 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
backdrop-filter none grayscale() sepia() saturate() hue-rotate() invert() brightness() contrast() blur() opacity() drop-shadow() kombinacja
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 grubość 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 grubość linii
border-radius grupa
border-right grupa
border-right-color kolor
border-right-style styl linii
border-right-width rozmiar grubość 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 grubość 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
caret-color auto kolor
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 grubość 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 grid inline-grid 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
grid grid-template pierwszy wzorzec drugi wzorzec
grid-area grupa
grid-auto-columns rozmiar kombinacja
grid-auto-flow wzorzec
grid-auto-rows rozmiar kombinacja
grid-column grupa
grid-column-end auto numer linii nazwa linii nazwa krawędzi nazwa obszaru pierwszy wzorzec drugi wzorzec
grid-column-gap rozmiar
grid-column-start auto numer linii nazwa linii nazwa krawędzi nazwa obszaru pierwszy wzorzec drugi wzorzec
grid-gap grupa
grid-row grupa
grid-row-end auto numer linii nazwa linii nazwa krawędzi nazwa obszaru pierwszy wzorzec drugi wzorzec
grid-row-gap rozmiar
grid-row-start auto numer linii nazwa linii nazwa krawędzi nazwa obszaru pierwszy wzorzec drugi wzorzec
grid-template grupa wzorzec none
grid-template-areas none wzorzec
grid-template-columns none pierwszy wzorzec drugi wzorzec
grid-template-rows none pierwszy wzorzec drugi wzorzec
height auto rozmiar stretch min-content max-content fit-content
hyphens manual auto none
image-orientation rozmiar
isolation auto isolate
justify-content (FLEX) normal flex-start flex-end center left right space-between space-around space-evenly
justify-content (GRID) normal start end center left right space-between space-around space-evenly stretch
justify-items (GRID) normal start end center left right self-start self-end stretch
justify-self (GRID) auto normal start end center left right self-start self-end stretch
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 stretch min-content max-content fit-content
max-width none rozmiar stretch min-content max-content fit-content
min-height rozmiar stretch min-content max-content fit-content auto
min-width rozmiar stretch min-content max-content fit-content auto
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 grubość 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
place-content (FLEX) grupa
place-content (GRID) grupa
place-items (GRID) grupa
place-self (GRID) grupa
pointer-events auto none
position static relative absolute fixed
quotes none wzorzec
resize none horizontal vertical both
right auto rozmiar
scroll-behavior auto smooth
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-justify auto none inter-word inter-character
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 grubość 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 stretch min-content max-content fit-content
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