CSS reference
Sử dụng tham chiếu CSS này để duyệt qua chỉ mục theo thứ tự bảng chữ cái của tất cả các thuộc tính, lớp giả, phần tử giả, kiểu dữ liệu, ký hiệu hàm và at-rule tiêu chuẩn của CSS. Bạn cũng có thể duyệt qua các khái niệm CSS chính và danh sách bộ chọn được tổ chức theo loại. Ngoài ra còn có tham chiếu ngắn gọn về DOM-CSS / CSSOM.
Cú pháp quy tắc cơ bản
>Cú pháp quy tắc kiểu
style-rule ::=
selectors-list {
properties-list
}
Trong đó:
selectors-list ::=
selector[:pseudo-class] [::pseudo-element]
[, selectors-list]
properties-list ::=
[property : value] [; properties-list]
Xem chỉ mục của bộ chọn, lớp giả, và phần tử giả bên dưới. Cú pháp cho mỗi giá trị được chỉ định phụ thuộc vào kiểu dữ liệu được định nghĩa cho mỗi thuộc tính được chỉ định.
Ví dụ quy tắc kiểu
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
Để có phần giới thiệu cấp độ người mới bắt đầu về cú pháp của bộ chọn, hãy xem hướng dẫn về Bộ chọn CSS. Lưu ý rằng bất kỳ lỗi cú pháp nào trong định nghĩa quy tắc sẽ làm mất hiệu lực toàn bộ quy tắc đó. Các quy tắc không hợp lệ bị trình duyệt bỏ qua. Lưu ý rằng định nghĩa quy tắc CSS hoàn toàn dựa trên văn bản (Unicode), trong khi DOM-CSS / CSSOM (hệ thống quản lý quy tắc) dựa trên đối tượng.
Cú pháp at-rule
Do cấu trúc của at-rule thay đổi đáng kể, vui lòng xem At-rule để tìm cú pháp của at-rule cụ thể bạn muốn.
Chỉ mục
Note: Chỉ mục này không bao gồm các thuộc tính trình bày dành riêng cho SVG, có thể được sử dụng như các thuộc tính CSS trên các phần tử SVG.
Note: Tên thuộc tính trong chỉ mục này không bao gồm các tên JavaScript khác với tên tiêu chuẩn CSS.
-
A
Attribute selectorsabs()<absolute-size>accent-coloracos():active:active-view-transition:active-view-transition-type()additive-symbols (@counter-style)::afteralign-contentalign-itemsalign-selfalignment-baselineall<alpha-value>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:any-linkappearanceascent-override (@font-face)asin()aspect-ratioatan()atan2()attr():autofill<axis>
B
::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-repeat-xbackground-repeat-ybackground-sizebase-palette (@font-palette-values)<baseline-position>baseline-shiftbaseline-source<basic-shape>::before:blank<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-widthbottombox-decoration-break<box-edge>box-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness():buffering
C
Class selectorsCustom properties (--*): CSS variablescalc()<calc-keyword>calc-size()<calc-sum>caption-sidecaretcaret-animationcaret-colorcaret-shape@charset:checked::checkmarkcircle()clamp()clearclip-pathclip-rule<color>colorcolor()color-interpolationcolor-interpolation-filters<color-interpolation-method>color-mix()@color-profilecolor-scheme::columncolumn-countcolumn-fillcolumn-gapcolumn-heightcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumn-wrapcolumnsconic-gradient()containcontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-width@containercontainercontainer-namecontainer-typecontent<content-distribution><content-position>content-visibilitycontrast()contrast-color()corner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shapecorner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shapecorner-right-shapecorner-shape<corner-shape-value>corner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shapecos()counter()counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue:currentcursor<custom-ident>@custom-mediacxcy
D
d<dashed-function>: hàm tùy chỉnh CSS<dashed-ident>:default:defineddescent-override (@font-face)::details-contentdevice-cmyk()<dimension>:dir()direction:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dominant-baselinedrop-shadow()dynamic-range-limitdynamic-range-limit-mix()
E
F
fallback (@counter-style)field-sizing::file-selector-buttonfillfill-opacityfill-rulefilter<filter-function>:first:first-child::first-letter::first-line:first-of-typefit-contentfit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatflood-colorflood-opacity:focus:focus-visible:focus-withinfontfont-display (@font-face)font-display (@font-feature-values)@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)font-widthfont-width (@font-face)forced-color-adjust<frequency><frequency-percentage>:fullscreen@function:future
G
gap<generic-family><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
hanging-punctuation:has():has-slotted:heading:heading()height<hex-color>::highlight():host:host():hoverhsl()<hue><hue-interpolation-method>hue-rotate()hwb()hyphenate-characterhyphenate-limit-charshyphenshypot()
I
ID selectors<ident>if()<image>image()image-orientationimage-renderingimage-resolutionimage-set()@import!important:in-range:indeterminateinheritinherits (@property)initialinitial-letterinitial-value (@property)inline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>interactivityinterest-delayinterest-delay-endinterest-delay-start:interest-source:interest-targetinterpolate-size:invalidinvert():is()isolation
J
K
L
lab():lang():last-child:last-of-type@layerlayer()lch():leftleft<length><length-percentage>letter-spacinglight-dark()lighting-colorline-breakline-clampline-gap-override (@font-face)line-heightline-height-step<line-style>linear()linear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-type:local-linklog()
M
marginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim::markermarkermarker-endmarker-midmarker-startmaskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemath-depthmath-shiftmath-stylematrix()matrix3d()max()max-block-sizemax-contentmax-heightmax-inline-sizemax-width@mediamin()min-block-sizemin-contentmin-heightmin-inline-sizemin-widthminmax()mix-blend-modemod():modal:muted
N
Namespace separator<named-color>@namespacenegative (@counter-style)& nesting selector:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type()<number>
O
object-fitobject-positionobject-view-boxoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateoklab()oklch():only-child:only-of-typeopacityopacity():open:optionalorderorphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-width<overflow>overflowoverflow-anchoroverflow-blockoverflow-clip-marginoverflow-inline<overflow-position>overflow-wrapoverflow-xoverflow-yoverlayoverride-colors (@font-palette-values)overscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-y
P
pad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepagepage-orientation (@page)paint()paint-orderpalette-mix()::part():pastpath():paused<percentage>perspectiveperspective()perspective-origin::picker()::picker-icon:picture-in-pictureplace-contentplace-itemsplace-self::placeholder:placeholder-shown:playingpointer-eventspolygon():popover-open<position>positionposition-anchor<position-area>position-area@position-tryposition-tryposition-try-fallbacksposition-try-orderposition-visibilitypow()prefix (@counter-style)print-color-adjustprogress()@property
Q
R
rradial-gradient()random()range (@counter-style)<ratio>ray():read-only:read-writereading-flowreading-orderrect()<relative-size>rem()repeat()repeating-conic-gradient()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrevert-layerrgb():rightright:rootrotaterotate()rotate3d()rotateX()rotateY()rotateZ()round()row-gapruby-alignruby-overhangruby-positionrule-listrxry
S
Selector listsaturate()scalescale()scale3d()scaleX()scaleY()scaleZ():scope@scopescroll()scroll-behavior::scroll-button()scroll-initial-targetscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-top::scroll-marker::scroll-marker-groupscroll-marker-groupscroll-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-target-groupscroll-timelinescroll-timeline-axisscroll-timeline-namescrollbar-colorscrollbar-gutterscrollbar-width::search-text:seeking::selection<self-position>sepia()shape()shape-image-thresholdshape-marginshape-outsideshape-renderingsibling-count()sibling-index()sign()sin()size (@page)size-adjust (@font-face)skew()skewX()skewY()::slotted()speak-asspeak-as (@counter-style)::spelling-errorsqrt()src (@font-face):stalled@starting-style:state()steps()stop-colorstop-opacity<string>strokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthsuffix (@counter-style)superellipse()@supportssymbols (@counter-style)symbols()syntax (@property)system (@counter-style)<system-color>
T
Type selectorstab-sizetable-layouttan():target:target-after:target-before:target-current::target-texttext-aligntext-align-lasttext-anchortext-autospacetext-boxtext-box-edgetext-box-trimtext-combine-uprighttext-decorationtext-decoration-colortext-decoration-insettext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thickness<text-edge>text-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-range-name>timeline-scopetoptouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-behaviortransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translateX()translateY()translateZ()type()
U
Universal selectorsunicode-bidiunicode-range (@font-face)unset<url>url():user-invaliduser-select:user-valid
V
:validvar()vector-effectvertical-alignview()view-timelineview-timeline-axisview-timeline-insetview-timeline-name::view-transition@view-transitionview-transition-class::view-transition-group()::view-transition-image-pair()view-transition-name::view-transition-new()::view-transition-old()visibility:visited:volume-locked
W
X
Y
Z
Bộ chọn
Sau đây là các bộ chọn khác nhau, cho phép các kiểu phụ thuộc vào nhiều tính năng khác nhau của các phần tử trong DOM.
Bộ chọn cơ bản
Bộ chọn cơ bản là các bộ chọn cơ sở; đây là các bộ chọn cơ bản nhất thường được kết hợp để tạo ra các bộ chọn phức tạp hơn.
- Bộ chọn phổ quát
* - Bộ chọn theo loại
elementname - Bộ chọn theo class
.classname - Bộ chọn theo ID
#idname - Bộ chọn theo thuộc tính
[attr=value]
Bộ chọn nhóm
- Danh sách bộ chọn
A, B -
Chỉ định rằng cả phần tử
AvàBđều được chọn. Đây là phương thức nhóm để chọn nhiều phần tử phù hợp.
Bộ kết hợp
Bộ kết hợp là các bộ chọn thiết lập mối quan hệ giữa hai hoặc nhiều bộ chọn đơn giản, chẳng hạn như "A là con của B" hoặc "A ở liền kề với B", tạo ra một bộ chọn phức tạp.
- Bộ kết hợp anh em kế tiếp
A + B -
Chỉ định rằng các phần tử được chọn bởi cả
AvàBcó cùng cha và phần tử được chọn bởiBngay sau phần tử được chọn bởiAtheo chiều ngang. - Bộ kết hợp anh em tiếp theo
A ~ B -
Chỉ định rằng các phần tử được chọn bởi cả
AvàBcó cùng cha và phần tử được chọn bởiAxuất hiện trước - nhưng không nhất thiết là ngay trước - phần tử được chọn bởiB. - Bộ kết hợp con trực tiếp
A > B -
Chỉ định rằng phần tử được chọn bởi
Blà con trực tiếp của phần tử được chọn bởiA. - Bộ kết hợp hậu duệ
A B -
Chỉ định rằng phần tử được chọn bởi
Blà hậu duệ của phần tử được chọn bởiA, nhưng không nhất thiết là con trực tiếp. - Bộ kết hợp cột
A || BExperimental -
Chỉ định rằng phần tử được chọn bởi
Bnằm trong cột bảng được chỉ định bởiA. Các phần tử trải dài nhiều cột được coi là thành viên của tất cả các cột đó.
Lớp giả và phần tử giả
- Lớp giả
: -
Chỉ định trạng thái đặc biệt của các phần tử được chọn.
- Phần tử giả
:: -
Đại diện cho các thực thể không được bao gồm trong HTML.
Xem thêm bộ chọn trong đặc tả Selectors và đặc tả pseudo-element.
Khái niệm
>Cú pháp và ngữ nghĩa
Giá trị
Bố cục
DOM-CSS / CSSOM
>Các loại đối tượng chính
Các phương thức quan trọng
Xem thêm
- Phần mở rộng CSS của Mozilla (có tiền tố
-moz-) - Phần mở rộng CSS của WebKit (chủ yếu có tiền tố
-webkit-)