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 名称。
-
--*-webkit-line-clamp-webkit-text-fill-color-webkit-text-stroke-webkit-text-stroke-color-webkit-text-stroke-width
A
abs()accent-coloracos():activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfalign-tracksall<an-plus-b>anchor()anchor-nameanchor-scopeanchor-size()<angle><angle-percentage>animationanimation-compositionanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-rangeanimation-range-endanimation-range-startanimation-timelineanimation-timing-function@annotation:any-linkappearanceascent-override (@font-face)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)<basic-shape>::before (:before):blankbleed (@page)<blend-mode>block-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-left-cornerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()
C
calc()calc-size()caption-sidecaretcaret-colorcaret-shape@character-variant@charset:checkedcircle()clamp()clearclip-pathclip-rule<color>colorcolor-interpolation-filterscolor-schemecolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-widthcontainercontainer-namecontainer-typecontentcontent-visibilitycontrast()cos()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-region:currentcursor<custom-ident>cxcylength#caplength#chlength#cm
D
angle#degd<dashed-ident>:default:defineddescent-override (@font-face)<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dominant-baselinedrop-shadow()resolution#dpcmresolution#dpiresolution#dppx
E
F
fallback (@counter-style)field-sizingfillfill-opacityfill-rulefilter<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#frfloatflood-colorflood-opacity:focus:focus-visible:focus-withinfontfont-display (@font-face)@font-facefont-familyfont-family (@font-face)font-family (@font-palette-values)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-palette@font-palette-valuesfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weightfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)forced-color-adjustformat()<frequency><frequency-percentage>:fullscreen:future
G
angle#gradgap<gradient>::grammar-errorgrayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
H
frequency#Hzhanging-punctuation:hasheight@historical-forms:host():host-context():hoverhsl()hue-rotate()hwb()hyphenate-characterhyphenate-limit-charshyphenshypot()
I
<ident><image>image()image-orientationimage-renderingimage-resolutionimage-set()@import:in-range:indeterminateinheritinherits (@property)initialinitial-letterinitial-letter-aligninitial-value (@property)inline-sizeinput-securityinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>interpolate-size:invalidinvert():isisolationlength#iclength#in
J
K
L
lab():lang:last-child:last-of-type@layerlayer()layer() (@import)lch()leader():leftleft@left-top<length><length-percentage>letter-spacinglight-dark()lighting-colorline-breakline-clampline-gap-override (@font-face)line-heightline-height-step<line-style>linear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal():local-linklog()
M
length#mmmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim::markermarkermarker-endmarker-midmarker-startmarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemasonry-auto-flowmath-depthmath-shiftmath-stylematrix()matrix3d()max()max-block-sizemax-heightmax-inline-sizemax-linesmax-width@mediamin()min-block-sizemin-heightmin-inline-sizemin-widthminmax()mix-blend-modemod()time#ms
N
@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>
O
object-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateoklab()oklch():only-child:only-of-typeopacityopacity():optionalorder@ornamentsorphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-anchoroverflow-blockoverflow-clip-marginoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverlayoverride-colors (@font-palette-values)overscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-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@pagepagepage-break-afterpage-break-beforepage-break-insidepage-orientation (@page)paint()paint-orderpalette-mix()::part:pastpath():paused<percentage>perspectiveperspective()perspective-origin:picture-in-pictureplace-contentplace-itemsplace-self::placeholder:placeholder-shown:playingpointer-eventspolygon()<position>positionposition-anchorposition-area@position-tryposition-tryposition-try-fallbacksposition-try-orderposition-visibilitypow()prefix (@counter-style)print-color-adjust@property
Q
R
angle#radlength#remrradial-gradient()range (@counter-style)<ratio>ray():read-only:read-writerect()rem()repeat()repeating-conic-gradient()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>reversed()revertrgb():rightright@right-top:rootrotaterotate()rotate3d()rotateX()rotateY()rotateZ()round()row-gapruby-alignruby-mergeruby-positionrxry
S
saturate()scalescale()scale3d()scaleX()scaleY()scaleZ():scope@scopescroll()scroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-timelinescroll-timeline-axisscroll-timeline-namescrollbar-colorscrollbar-gutterscrollbar-width::selectionselector()sepia()shape-image-thresholdshape-marginshape-outsideshape-renderingsign()sin()size (@page)size-adjust (@font-face)skew()skewX()skewY()::slottedspeak-as (@counter-style)::spelling-errorsqrt()src (@font-face)@starting-stylesteps()stop-colorstop-opacity<string>strokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-width@styleset@stylisticsuffix (@counter-style)@supportssupports() (@import)@swashsymbols (@counter-style)symbols()syntax (@property)system (@counter-style)time#s
T
angle#turntab-sizetable-layouttan():targettarget-counter()target-counters()::target-texttarget-text():target-withintext-aligntext-align-lasttext-anchortext-boxtext-box-edgetext-box-trimtext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-spacing-trimtext-transformtext-underline-offsettext-underline-positiontext-wraptext-wrap-modetext-wrap-style<time><time-percentage>timeline-scopetop@top-left-cornertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-behaviortransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translateX()translateY()translateZ()type()
U
V
length#vhlength#vmaxlength#vminlength#vw:validvar()vector-effectvertical-alignview()view-timelineview-timeline-axisview-timeline-insetview-timeline-name::view-transition::view-transition-group::view-transition-image-pairview-transition-name::view-transition-new::view-transition-oldvisibility:visited
W
:wherewhite-spacewhite-space-collapsewidowswidthwill-changeword-breakword-spacingword-wrapwriting-mode
X
Y
Z
选择器
以下是一些选择器的列表,它们允许根据 DOM 内元素的各种特征对样式进行条件限制。
基本选择器
分组选择器
- 选择器列表
A, B -
指定同时选择
A和B元素。这是一种选择多个匹配元素的分组方法。
组合选择器
组合选择器是在两个或多个简单选择器之间建立关系的选择器,例如“A 是 B 的子代”或“A 与 B 相邻”,它们构成了比较复杂的选择器。
伪类
概念
语法和语义
值
布局
DOM-CSS / CSSOM
主要对象类型
DocumentOrShadowRoot.styleSheetsstyleSheets[i].cssRulescssRules[i].cssText(选择器 & 样式)cssRules[i].selectorTextHTMLElement.styleHTMLElement.style.cssText(仅样式)Element.classNameElement.classList
重要方法
参见
- Mozilla CSS 扩展(以
-moz前缀) - WebKit CSS 扩展(大多数时候以
-webkit前缀) - Microsoft CSS 扩展(以
-ms前缀)