CSS 速用表

A

align-content	stretch｜center｜flex-start｜flex-end｜space-between｜space-around
align-items	stretch｜center｜flex-start｜flex-end｜baseline
align-self	auto｜stretch｜center｜flex-start｜flex-end｜baseline
all	initial
animation	name duration timing-function delay iteration-count direction fill-mode play-state
animation-delay	time
animation-direction	normal｜reverse｜alternate｜alternate-reverse
animation-duration	time
animation-fill-mode	none｜forwards｜backwards｜both
animation-iteration-count	number｜infinite
animation-name	keyframename｜none
animation-play-state	paused｜running
animation-timing-function	linear｜ease｜ease-in｜ease-out｜ease-in-out｜step-start｜step-end｜steps(int,start｜end)｜cubic-bezier(n,n,n,n)

B

backface-visibility	visible｜hidden
background	background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment
background-attachment	scroll｜fixed｜local
background-blend-mode	normal｜multiply｜screen｜overlay｜darken｜lighten｜color-dodge｜saturation｜color｜luminosity
background-clip	border-box｜padding-box｜content-box
background-color	color｜transparent
background-image	url(path)｜none｜conic-gradient([from angle] [at position,] color degree,color degree, ...)｜linear-gradient(direction,color-stop1,color-stop2, ...)｜radial-gradient(shape size at position,start-color, ...,last-color)｜repeating-conic-gradient([from angle] [at position,] color degree,color degree, ...)｜repeating-linear-gradient(angle or side-or-corner,color-stop1,color-stop2, ...)｜repeating-radial-gradient(shape size at position,start-color, ...,last-color)
background-origin	padding-box｜border-box｜content-box
background-position	left top｜left center｜left bottom｜right top｜right center｜right bottom｜center top｜center center｜center bottom｜% %｜xpos ypos
background-repeat	repeat｜repeat-x｜repeat-y｜no-repeat｜space｜round
background-size	auto｜length｜cover｜contain
border	border-width border-style border-color
border-bottom	border-width border-style border-color
border-bottom-color	color｜transparent
border-bottom-left-radius	length｜% [length｜%]
border-bottom-right-radius	length｜% [length｜%]
border-bottom-style	none｜hidden｜dotted｜dashed｜solid｜double｜groove｜ridge｜inset｜outset
border-bottom-width	medium｜thin｜thick｜length
border-collapse	separate｜collapse
border-color	color｜transparent
border-image	border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
border-image-outset	length｜number
border-image-repeat	stretch｜repeat｜round｜space
border-image-slice	number｜%｜fill
border-image-source	none｜image
border-image-width	number｜length｜auto
border-left	border-width border-style border-color
border-left-color	color｜transparent
border-left-style	none｜hidden｜dotted｜dashed｜solid｜double｜groove｜ridge｜inset｜outset
border-left-width	medium｜thin｜thick｜length
border-radius	1~4｜% / 1~4｜%
border-right	border-width border-style border-color
border-right-color	color｜transparent
border-right-style	none｜hidden｜dotted｜dashed｜solid｜double｜groove｜ridge｜inset｜outset
border-right-width	medium｜thin｜thick｜length
border-spacing	length
border-style	none｜hidden｜dotted｜dashed｜solid｜double｜groove｜ridge｜inset｜outset
border-top	border-width border-style border-color
border-top-color	color｜transparent
border-top-left-radius	length｜% [length｜%]
border-top-right-radius	length｜% [length｜%]
border-top-style	none｜hidden｜dotted｜dashed｜solid｜double｜groove｜ridge｜inset｜outset
border-top-width	medium｜thin｜thick｜length
border-width	medium｜thin｜thick｜length
bottom	auto｜length
box-decoration-break	slice｜clone
box-shadow	none｜h-offset v-offset blur spread color｜inset
box-sizing	content-box｜border-box
break-after	auto｜all｜always｜avoid｜avoid-column｜avoid-page｜avoid-region｜column｜left｜page｜recto｜region｜right｜verso
break-before	auto｜all｜always｜avoid｜avoid-column｜avoid-page｜avoid-region｜column｜left｜page｜recto｜region｜right｜verso
break-inside	auto｜avoid｜avoid-column｜avoid-page｜avoid-region

C

caption-side	top｜bottom
caret-color	auto｜color
@charset	"encoding"
clear	none｜left｜right｜both
clip	auto｜rect(top,right,bottom,left)
clip-path	clip-source｜basic-shape｜margin-box｜border-box｜padding-box｜content-box｜fill-box｜stroke-box｜view-box｜none
color	color
column-count	number｜auto
column-fill	balance｜auto
column-gap	length｜normal
column-rule	column-rule-width column-rule-style column-rule-color
column-rule-color	color
column-rule-style	none｜hidden｜dotted｜dashed｜solid｜double｜groove｜ridge｜inset｜outset
column-rule-width	medium｜thin｜thick｜length
column-span	none｜all
column-width	auto｜length
columns	auto｜column-width column-count
content	normal｜none｜counter｜attr(attribute)｜string｜open-quote｜close-quote｜no-open-quote｜no-close-quote｜url(path)
counter-increment	none｜id
counter-reset	none｜id number
cursor	alias｜all-scroll｜auto｜cell｜context-menu｜col-resize｜copy｜crosshair｜default｜e-resize｜ew-resize｜grab｜grabbing｜help｜move｜n-resize｜ne-resize｜nesw-resize｜ns-resize｜nw-resize｜nwse-resize｜no-drop｜none｜not-allowed｜pointer｜progress｜row-resize｜s-resize｜se-resize｜sw-resize｜text｜url(path)｜vertical-text｜w-resize｜wait｜zoom-in｜zoom-out

D

direction	ltr｜rtl
display	inline｜block｜contents｜flex｜grid｜inline-block｜inline-flex｜inline-grid｜inline-table｜list-item｜run-in｜table｜table-caption｜table-column-group｜table-header-group｜table-footer-group｜table-row-group｜table-cell｜table-column｜table-row｜none

E

empty-cells

show｜hide

F

filter	none｜blur(px)｜brightness(%)｜contrast(%)｜drop-shadow(h-shadow,v-shadow,blur,spread,color)｜grayscale(%)｜hue-rotate(deg)｜invert(%)｜opacity(%)｜saturate(%)｜sepia(%)｜url(path)
flex	flex-grow flex-shrink flex-basis｜auto
flex-basis	number｜auto
flex-direction	row｜row-reverse｜column｜column-reverse
flex-flow	flex-direction flex-wrap
flex-grow	number｜auto
flex-shrink	number｜auto
flex-wrap	nowrap｜wrap｜wrap-reverse
float	none｜left｜right
font	font-style font-variant font-weight font-size/line-height font-family｜caption｜icon｜menu｜message-box｜small-caption｜status-bar
@font-face{ 　font-family; 　src; 　font-stretch; 　font-style; 　font-weight; 　unicode-range }
font-family	family-name｜Cursive｜Fantasy｜Monospace｜Sans-serif｜Serif
font-feature-settings	normal｜{1｜0｜on｜off}
font-kerning	auto｜normal｜none
font-size	medium｜xx-small｜x-small｜small｜large｜x-large｜xx-large｜smaller｜larger｜length
font-size-adjust	number｜none
font-stretch	ultra-condensed｜extra-condensed｜condensed｜semi-condensed｜normal｜semi-expanded｜expanded｜extra-expanded｜ultra-expanded
font-style	normal｜italic｜oblique
font-variant	normal｜small-caps
font-variant-caps	normal｜small-caps｜all-small-caps｜petite-caps｜all-petite-caps｜unicase｜titling-caps
font-weight	normal｜bold｜bolder｜lighter｜100~900

G

gap	row-gap column-gap
grid	none｜grid-template-rows / grid-template-columns｜grid-template-areas｜grid-template-rows / [grid-auto-flow] grid-auto-columns｜[grid-auto-flow] grid-auto-rows / grid-template-columns
grid-area	grid-row-start / grid-column-start / grid-row-end / grid-column-end｜itemname
grid-auto-columns	auto｜fit-content(stretch)｜max-content｜min-content｜minmax(min,max)｜length
grid-auto-flow	row｜column｜dense｜row dense｜column dense
grid-auto-rows	auto｜max-content｜min-content｜length
grid-column	grid-column-start / grid-column-end
grid-column-end	auto｜span n｜column-line
grid-column-gap	length
grid-column-start	auto｜span n｜column-line
grid-gap	grid-row-gap grid-column-gap
grid-row	grid-row-start / grid-row-end
grid-row-end	auto｜row-line｜span n
grid-row-gap	length
grid-row-start	auto｜row-line
grid-template	none｜grid-template-rows / grid-template-columns｜grid-template-areas
grid-template-areas	none｜itemnames
grid-template-columns	none｜auto｜max-content｜min-content｜length
grid-template-rows	none｜auto｜max-content｜min-content｜length

H

hanging-punctuation	none｜first｜last｜allow-end｜force-end
height	auto｜length
hyphens	none｜manual｜auto

I

image-rendering	auto｜smooth｜high-quality｜crisp-edges｜pixelated
@import	url(path)｜string [list of media queries]
isolation	auto｜isolate

J

justify-content

flex-start｜flex-end｜center｜space-between｜space-around｜space-evenly

K

@keyframes animationname{
　keyframes-selector{
　　css-styles;
　}
}

L

left	auto｜length
letter-spacing	normal｜length
line-height	normal｜number｜length
list-style	list-style-type list-style-position list-style-image
list-style-image	none｜url(path)
list-style-position	inside｜outside
list-style-type	disc｜armenian｜circle｜cjk-ideographic｜decimal｜decimal-leading-zero｜georgian｜hebrew｜hiragana｜hiragana-iroha｜katakana｜katakana-iroha｜lower-alpha｜lower-greek｜lower-latin｜lower-roman｜none｜square｜upper-alpha｜upper-greek｜upper-latin｜upper-roman

M

margin	length｜auto｜margin-top margin-right margin-bottom margin-left｜[margin-top and margin-bottom] [margin-right and margin-left]
margin-bottom	length｜auto
margin-left	length｜auto
margin-right	length｜auto
margin-top	length｜auto
mask-image	none｜image｜url(path)
mask-mode	match-source｜luminance｜alpha
mask-origin	border-box｜content-box｜padding-box｜margin-box｜fill-box｜stroke-box｜view-box
mask-position	left top｜left center｜left bottom｜right top｜right center｜right bottom｜center top｜center center｜center bottom｜x% y%｜xpos ypos
mask-repeat	repeat｜repeat-x｜repeat-y｜space｜round｜no-repeat
mask-size	auto｜size｜contain｜cover
max-height	none｜length
max-width	none｜length
@media 　not｜only 　all｜print｜screen｜speech 　and( 　　any-hover; 　　any-pointer; 　　aspect-ratio; 　　color; 　　color-gamut; 　　color-index; 　　grid; 　　height; 　　hover; 　　inverted-colors; 　　light-level; 　　max-aspect-ratio; 　　max-color; 　　max-color-index; 　　max-height; 　　max-monochrome; 　　max-resolution; 　　max-width; 　　min-aspect-ratio; 　　min-color; 　　min-color-index; 　　min-height; 　　min-monochrome; 　　min-resolution; 　　min-width; 　　monochrome; 　　orientation; 　　overflow-block; 　　overflow-inline; 　　pointer; 　　resolution; 　　scan; 　　scripting; 　　update; 　　width; 　　and｜or｜not　同上　){ 　CSS }
min-height	length
min-width	length
mix-blend-mode	normal｜multiply｜screen｜overlay｜darken｜lighten｜color-dodge｜color-burn｜difference｜exclusion｜hue｜saturation｜color｜luminosity

O

object-fit	fill｜contain｜cover｜scale-down｜none
object-position	position
opacity	0.0~1.0
order	number
orphans	integer
outline	outline-width outline-style outline-color
outline-color	invert｜color
outline-offset	length
outline-style	none｜hidden｜dotted｜dashed｜solid｜double｜groove｜ridge｜inset｜outset
outline-width	medium｜thin｜thick｜length
overflow	visible｜hidden｜scroll｜auto
overflow-wrap	normal｜anywhere｜break-word
overflow-x	visible｜hidden｜scroll｜auto
overflow-y	visible｜hidden｜scroll｜auto

P

padding	length｜auto｜padding-top padding-right padding-bottom padding-left｜[padding-top and padding-bottom] [padding-right and padding-left]
padding-bottom	length｜auto
padding-left	length｜auto
padding-right	length｜auto
padding-top	length｜auto
page-break-after	auto｜always｜avoid｜left｜right
page-break-before	auto｜always｜avoid｜left｜right
page-break-inside	auto｜avoid
perspective	length｜none
perspective-origin	{left｜center｜right｜length} {top｜center｜bottom｜length}
pointer-events	auto｜none
position	static｜absolute｜fixed｜relative｜sticky

Q

quotes

none｜string string string string

R

resize	none｜both｜horizontal｜vertical
right	auto｜length
row-gap	length｜normal

S

scroll-behavior

auto｜smooth

T

tab-size	number｜length
table-layout	auto｜fixed
text-align	left｜right｜center｜justify
text-align-last	auto｜left｜right｜center｜justify｜start｜end
text-decoration	text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness
text-decoration-color	color
text-decoration-line	none｜underline｜overline｜line-through
text-decoration-style	solid｜double｜dotted｜dashed｜wavy
text-decoration-thickness	auto｜from-font｜length
text-indent	length
text-justify	auto｜inter-word｜inter-character｜none
text-overflow	clip｜ellipsis｜string
text-shadow	h-shadow v-shadow blur-radius color｜none
text-transform	none｜capitalize｜uppercase｜lowercase
top	auto｜length
transform	none｜matrix(n,n,n,n,n,n)｜matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)｜perspective(n)｜rotate(angle)｜rotate3d(x,y,z,angle)｜rotateX(angle)｜rotateY(angle)｜rotateZ(angle)｜scale(x,y)｜scale3d(x,y,z)｜scaleX(x)｜scaleY(y)｜scaleZ(z)｜skew(x-angle,y-angle)｜skewX(angle)｜skewY(angle)｜translate(x,y)｜translate3d(x,y,z)｜translateX(x)｜translateY(y)｜translateZ(z)
transform-origin	{left｜center｜right｜length｜%} {top｜center｜bottom｜length｜%} length
transform-style	flat｜preserve-3d
transition	property duration timing-function delay
transition-delay	time
transition-duration	time
transition-property	none｜all｜property
transition-timing-function	linear｜ease｜ease-in｜ease-out｜ease-in-out｜step-start｜step-end｜steps(int,start｜end)｜cubic-bezier(n,n,n,n)

U

unicode-bidi	normal｜embed｜bidi-override｜isolate｜isolate-override｜plaintext
user-select	auto｜none｜text｜all

V

vertical-align	baseline｜length｜sub｜super｜top｜text-top｜middle｜bottom｜text-bottom
visibility	visible｜hidden｜collapse

W

white-space	normal｜nowrap｜pre｜pre-line｜pre-wrap
widows	integer
width	auto｜length
word-break	normal｜break-all｜keep-all｜break-word
word-spacing	normal｜length
word-wrap	normal｜break-word
writing-mode	horizontal-tb｜vertical-rl｜vertical-lr

Z

z-index

auto｜number

Selectors

Element

* element element element element > element element , element element + element element ~ element :root

Child

:empty :first-of-type :last-of-type :nth-of-type(value) :nth-last-of-type(value) :only-of-type :first-child :last-child :nth-child(value) :nth-last-child(value) :only-child

Content

::after ::before ::first-letter ::first-line

Attribute

.class #id :lang(language) [attribute] [attribute=value] [attribute|=value] [attribute~=value] [attribute^=value] [attribute$=value] [attribute*=value]

Link

:link :visited :active :hover :target

Input

:checked :disabled :enabled :focus :in-range :invalid :optional :out-of-range :read-only :read-write :required :valid

Other

:not(selector) ::selection

以斜體字標示者，表示並非關鍵字，而是識別名稱或任意條件。

Values

Global

inherit initial unset

Number

0 1 2 3 4 5 6 7 8 9

Length,size

% in cm mm em ex pt pc px

Color

rgb(0~255, 0~255, 0~255) rgba(0~255, 0~255, 0~255, 0.0~1.0) hsl(0~360, 0~100%, 0~100%) hsla(0~360, 0~100%, 0~100%, 0.0~1.0) #000000~#FFFFFF HTML COLOR NAME

Functions

calc(expression) counter(countername, counterstyle) max(value1, value2, ...) min(value1, value2, ...) var(--name, value)