CSS 参考
使用此 CSS 参考页面以浏览按字母索引的所有标准 CSS 属性、伪类、伪元素、数据类型、功能表记以及@ 规则。你也可以浏览CSS 关键概念和按类型排列的 CSS 选择器列表。还有一份简短的 DOM-CSS / CSSOM 参考。
基本规则语法
样式规则语法
css
style-rule ::=
selectors-list {
properties-list
}
其中:
css
selectors-list ::=
selector[:pseudo-class] [::pseudo-element]
[, selectors-list]
properties-list ::=
[property : value] [; properties-list]
参阅后面的选择器、伪元素、伪类列表。每个指定值的语法取决于为每个指定属性定义的数据类型。
样式规则示例
css
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
有关 CSS 选择器语法的初学者介绍,请参阅 CSS 选择器教程。注意,规则定义中的任何 CSS 语法错误都将使整个规则无效,无效的规则将被浏览器忽略。注意 CSS 定义完全是基于(ASCII)文本的,而 DOM-CSS / CSSOM(规则管理系统)是基于对象的。
@规则语法
由于 @规则间的结构变化很大,请参阅 @规则以找到你所想要的特定规则语法。
索引
备注: 此索引中的属性名称不包括与 CSS 标准名称不同的 JavaScript 名称。
-
A
abs()(en-US)accent-coloracos():activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfalign-tracks(en-US)all<an-plus-b><angle><angle-percentage>animationanimation-composition(en-US)animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timeline(en-US)animation-timing-function@annotationannotation():any-linkappearanceascent-override (@font-face)(en-US)asin()aspect-ratioatan()atan2()attr()
B
::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizebase-palette (@font-palette-values)(en-US)<basic-shape>::before (:before):blankbleed (@page)<blend-mode>block-overflowblock-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()
C
calc()caption-sidecaretcaret-colorcaret-shape@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-path<color>colorcolor-schemecolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-width(en-US)columnsconic-gradient()(en-US)containcontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-widthcontainer(en-US)container-name(en-US)container-type(en-US)contentcontent-visibilitycontrast()cos()<counter>counter-incrementcounter-resetcounter-set(en-US)@counter-stylecounters()cross-fade()(en-US)cubic-bezier()(en-US)::cue::cue-region(en-US):current(en-US)cursor<custom-ident>length#caplength#chlength#cm
D
angle#deg:default:defineddescent-override (@font-face)(en-US)<dimension>:dirdirection:disableddisplay<display-box><display-inside>(en-US)<display-internal><display-legacy><display-listitem>(en-US)<display-outside>drop-shadow()resolution#dpcmresolution#dpiresolution#dppx
E
F
fallback (@counter-style)(en-US)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapflex_value#frfloat:focus:focus-visible:focus-withinfontfont-display (@font-face)@font-facefont-familyfont-family (@font-face)font-family (@font-palette-values)(en-US)font-feature-settingsfont-feature-settings (@font-face)(en-US)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizing(en-US)font-palette@font-palette-values(en-US)font-sizefont-size-adjustfont-stretchfont-stretch (@font-face)(en-US)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)(en-US)font-variant-alternatesfont-variant-capsfont-variant-east-asian(en-US)font-variant-emoji(en-US)font-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)(en-US)font-weightfont-weight (@font-face)(en-US)forced-color-adjust(en-US)format()<frequency><frequency-percentage>(en-US):fullscreen:future(en-US)
G
angle#gradgap<gradient>::grammar-errorgrayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-end(en-US)grid-column-start(en-US)grid-rowgrid-row-end(en-US)grid-row-start(en-US)grid-templategrid-template-areasgrid-template-columnsgrid-template-rows
H
frequency#Hzhanging-punctuation:hasheightheight (@viewport)(en-US)@historical-forms:host():host-context():hoverhsl()hsla()hue-rotate()(en-US)hwb()hyphenate-character(en-US)hyphenate-limit-chars(en-US)hyphenshypot()
I
<ident>(en-US)<image>image()image-orientationimage-renderingimage-resolution(en-US)image-set()(en-US)@import:in-range:indeterminateinheritinherits (@property)initialinitial-letter(en-US)initial-letter-align(en-US)initial-value (@property)inline-sizeinput-securityinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()(en-US):isisolationlength#iclength#in
J
K
L
lab():lang:last-child:last-of-type@layerlayer()layer() (@import)lch()leader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-clampline-gap-override (@font-face)(en-US)line-heightline-height-step(en-US)<line-style>(en-US)linear-gradient()(en-US):linklist-stylelist-style-imagelist-style-positionlist-style-typelocal():local-link(en-US)log()
M
length#mmmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim(en-US)::markermarks (@page)maskmask-bordermask-border-modemask-border-outset(en-US)mask-border-repeatmask-border-slicemask-border-source(en-US)mask-border-widthmask-clip(en-US)mask-composite(en-US)mask-imagemask-modemask-origin(en-US)mask-position(en-US)mask-repeatmask-size(en-US)mask-type(en-US)masonry-auto-flow(en-US)math-depth(en-US)math-shift(en-US)math-style(en-US)matrix()matrix3d()max()max-block-size(en-US)max-heightmax-height (@viewport)(en-US)max-inline-sizemax-linesmax-widthmax-width (@viewport)(en-US)max-zoom (@viewport)(en-US)@mediamin()min-block-sizemin-heightmin-height (@viewport)(en-US)min-inline-sizemin-widthmin-width (@viewport)(en-US)min-zoom (@viewport)(en-US)minmax()mix-blend-modemod()(en-US)time#ms
N
@namespacenegative (@counter-style)(en-US):not:nth-child:nth-col(en-US):nth-last-child:nth-last-col(en-US):nth-last-of-type:nth-of-type<number>
O
object-fitobject-positionoffsetoffset-anchor(en-US)offset-distance(en-US)offset-path(en-US)offset-position(en-US)offset-rotate(en-US):only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)(en-US)@ornamentsornaments()orphans(en-US):out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-width<overflow>overflow-anchoroverflow-blockoverflow-clip-margin(en-US)overflow-inlineoverflow-wrapoverflow-xoverflow-yoverride-colors (@font-palette-values)(en-US)overscroll-behavioroverscroll-behavior-block(en-US)overscroll-behavior-inline(en-US)overscroll-behavior-xoverscroll-behavior-y
P
Pseudo-classesPseudo-elementslength#pclength#ptlength#pxpad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage(en-US)page-break-afterpage-break-before(en-US)page-break-insidepage-orientation (@page)(en-US)paint()(en-US)paint-order::part:past(en-US)path()(en-US):paused<percentage>perspectiveperspective()perspective-origin:picture-in-pictureplace-contentplace-itemsplace-self(en-US)::placeholder:placeholder-shown:playingpointer-eventspolygon()<position>positionpow()prefix (@counter-style)(en-US)print-color-adjust(en-US)@property
Q
R
angle#radlength#remradial-gradient()(en-US)range (@counter-style)(en-US)<ratio>ray()(en-US):read-only:read-writerect()(en-US)rem()(en-US)repeat()repeating-conic-gradient()(en-US)repeating-linear-gradient()(en-US)repeating-radial-gradient()(en-US):requiredresize<resolution>reversed()revert(en-US)rgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotateX()rotateY()rotateZ()round()(en-US)row-gapruby-align(en-US)ruby-mergeruby-position(en-US)
S
saturate()(en-US)scalescale()scale3d()(en-US)scaleX()scaleY()scaleZ()(en-US):scopescroll()(en-US)scroll-behaviorscroll-marginscroll-margin-block(en-US)scroll-margin-block-end(en-US)scroll-margin-block-start(en-US)scroll-margin-bottom(en-US)scroll-margin-inline(en-US)scroll-margin-inline-end(en-US)scroll-margin-inline-start(en-US)scroll-margin-left(en-US)scroll-margin-right(en-US)scroll-margin-topscroll-padding(en-US)scroll-padding-block(en-US)scroll-padding-block-end(en-US)scroll-padding-block-start(en-US)scroll-padding-bottom(en-US)scroll-padding-inline(en-US)scroll-padding-inline-end(en-US)scroll-padding-inline-start(en-US)scroll-padding-left(en-US)scroll-padding-right(en-US)scroll-padding-top(en-US)scroll-snap-align(en-US)scroll-snap-stop(en-US)scroll-snap-type@scroll-timeline(en-US)scroll-timeline(en-US)scroll-timeline-axis(en-US)scroll-timeline-name(en-US)scrollbar-colorscrollbar-gutter(en-US)scrollbar-width::selectionselector()sepia()(en-US)<shape>(en-US)shape-image-thresholdshape-marginshape-outsidesign()(en-US)sin()size (@page)(en-US)size-adjust (@font-face)(en-US)skew()skewX()skewY()::slottedspeak-as (@counter-style)::spelling-errorsqrt()src (@font-face)steps()(en-US)<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)(en-US)@supportssupports() (@import)@swashswash()symbols (@counter-style)(en-US)symbols()(en-US)syntax (@property)system (@counter-style)(en-US)time#s
T
angle#turntab-sizetable-layouttan():targettarget-counter()target-counters()::target-texttarget-text():target-within(en-US)text-aligntext-align-lasttext-combine-upright(en-US)text-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-skip-ink(en-US)text-decoration-styletext-decoration-thicknesstext-emphasis(en-US)text-emphasis-color(en-US)text-emphasis-position(en-US)text-emphasis-style(en-US)text-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>(en-US)top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translateX()translateY()translateZ()(en-US)type()
U
unicode-bidiunicode-range (@font-face)(en-US)unset<url>url():user-invalid(en-US)user-select:user-valid(en-US)user-zoom (@viewport)(en-US)
V
length#vhlength#vmaxlength#vminlength#vw:validvar()vertical-align::view-transition(en-US)::view-transition-group(en-US)::view-transition-image-pair(en-US)view-transition-name(en-US)::view-transition-new(en-US)::view-transition-old(en-US)@viewportviewport-fit (@viewport)(en-US)visibility:visited
W
:wherewhite-spacewidowswidthwidth (@viewport)(en-US)will-changeword-breakword-spacingword-wrapwriting-mode
X
Z
Others
选择器
以下是一些选择器的列表,它们允许根据 DOM 内元素的各种特征对样式进行条件限制。
基本选择器
分组选择器
- 选择器列表
A, B -
指定同时选择
A和B元素。这是一种选择多个匹配元素的分组方法。
组合选择器
组合选择器是在两个或多个简单选择器之间建立关系的选择器,例如“A 是 B 的子代”或“A 与 B 相邻”,它们构成了比较复杂的选择器。
伪类
概念
语法和语义
值
布局
DOM-CSS / CSSOM
主要对象类型
DocumentOrShadowRoot.styleSheetsstyleSheets[i].cssRulescssRules[i].cssText(选择器 & 样式)cssRules[i].selectorTextHTMLElement.styleHTMLElement.style.cssText (en-US)(仅样式)Element.classNameElement.classList
重要方法
参见
- Mozilla CSS 扩展 (en-US)(以
-moz前缀) - WebKit CSS 扩展(大多数时候以
-webkit前缀) - Microsoft CSS 扩展(以
-ms前缀)