語法- CSS

串接式樣式表 (CSS) 語言的基礎目標是是讓瀏覽器引擎用特定的功能將元素寫在頁面上，像是顏色、位置與裝飾。

CSS 語法反映出了目的，而它的基本組 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage給開發者的網頁技術文件CSS語法ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.CSS宣告CSS宣告區塊CSSrulesetsCSSstatementsSeealsoRelatedTopics LearnCSS CSSfirststeps CSSfirststepsoverview WhatisCSS? GettingstartedwithCSS HowCSSisstructured(en-US) HowCSSworks Usingyournewknowledge(en-US) CSSbuildingblocks CSSbuildingblocksoverview(en-US) Cascadeandinheritance(en-US) CSSselectors(en-US) Theboxmodel(en-US) Backgroundsandborders(en-US) Handlingdifferenttextdirections(en-US) Overflowingcontent(en-US) Valuesandunits(en-US) SizingitemsinCSS(en-US) Images,media,andformelements(en-US) Stylingtables(en-US) DebuggingCSS(en-US) OrganizingyourCSS(en-US) 樣式化文字 樣式化文字概述 基礎的文字與字型樣式化(en-US) 樣式化列表(en-US) 樣式化連結(en-US) Web字型(en-US) 親合度：設定社區大學首頁的版面(en-US) CSS版面配置 CSS版面配置概述 IntroductiontoCSSlayout(en-US) NormalFlow(en-US) 彈性區塊(en-US) 格線(en-US) 浮動(en-US) 定位(en-US) Multiple-columnLayout(en-US) Responsivedesign(en-US) Beginner'sguidetomediaqueries(en-US) LegacyLayoutMethods(en-US) SupportingOlderBrowsers(en-US) FundamentalLayoutComprehension(en-US) Reference ModulesCompositingandBlending(en-US)CSSAnimationsCSSBackgroundsandBordersCSSBasicUserInterface(en-US)CSSBoxModelCSSCharsets(en-US)CSSColorsCSSMulti-columnLayout(en-US)CSSConditionalRules(en-US)CSSCounterStyles(en-US)CSSDeviceAdaptation(en-US)CSSDisplay(en-US)CSSFlexibleBoxLayoutCSSFonts(en-US)CSSFragmentation(en-US)CSSGeneratedContent(en-US)CSSGridLayout Experimental CSSHoudini(en-US)CSSImages(en-US)CSSListsCSSLogicalPropertiesandValues(en-US)CSSMasking(en-US)CSSMiscellaneous(en-US) Experimental CSSMotionPath(en-US)CSSNamespaces(en-US)CSSPagedMedia(en-US)CSSPositionedLayoutCSSRubyLayout(en-US)CSSScrollSnap(en-US)CSSScrollSnapPoints(en-US)CSSScrollbars(en-US)CSSselectorsCSSShapes(en-US)CSSTable(en-US)CSSText(en-US)CSSTextDecoration(en-US)CSSTransforms(en-US)CSSTransitionsCSSdatatypes(en-US)CSSCustomPropertiesforCascadingVariables(en-US)CSSWritingModes(en-US)CSSOMView(en-US)FilterEffects(en-US)MediaqueriesPseudo-classesPseudo-elements(en-US)CSSreference Propertiesaccent-color(en-US)align-content(en-US)align-items(en-US)align-self(en-US)all(en-US)animation(en-US)animation-delay(en-US)animation-direction(en-US)animation-duration(en-US)animation-fill-modeanimation-iteration-count(en-US)animation-name(en-US)animation-play-state(en-US)animation-timeline(en-US)animation-timing-function(en-US)appearance(en-US)aspect-ratio(en-US)backdrop-filter(en-US)backface-visibility(en-US)background(en-US)background-attachmentbackground-blend-mode(en-US)background-clip(en-US)background-colorbackground-image(en-US)background-origin(en-US)background-position(en-US)background-position-x(en-US)background-position-y(en-US)background-repeat(en-US)background-size(en-US)block-size(en-US)borderborder-block(en-US)border-block-color(en-US)border-block-end(en-US)border-block-end-color(en-US)border-block-end-style(en-US)border-block-end-width(en-US)border-block-start(en-US)border-block-start-color(en-US)border-block-start-style(en-US)border-block-start-width(en-US)border-block-style(en-US)border-block-width(en-US)border-bottom(en-US)border-bottom-color(en-US)border-bottom-left-radius(en-US)border-bottom-right-radius(en-US)border-bottom-style(en-US)border-bottom-width(en-US)border-collapse(en-US)border-colorborder-end-end-radius(en-US)border-end-start-radius(en-US)border-imageborder-image-outset(en-US)border-image-repeat(en-US)border-image-slice(en-US)border-image-source(en-US)border-image-width(en-US)border-inline(en-US)border-inline-color(en-US)border-inline-end(en-US)border-inline-end-color(en-US)border-inline-end-style(en-US)border-inline-end-width(en-US)border-inline-start(en-US)border-inline-start-color(en-US)border-inline-start-style(en-US)border-inline-start-width(en-US)border-inline-style(en-US)border-inline-width(en-US)border-left(en-US)border-left-color(en-US)border-left-style(en-US)border-left-width(en-US)border-radius(en-US)border-right(en-US)border-right-color(en-US)border-right-style(en-US)border-right-width(en-US)border-spacing(en-US)border-start-end-radius(en-US)border-start-start-radius(en-US)border-style(en-US)border-top(en-US)border-top-color(en-US)border-top-left-radius(en-US)border-top-right-radius(en-US)border-top-style(en-US)border-top-width(en-US)border-width(en-US)bottom(en-US)box-decoration-break(en-US)box-shadowbox-sizingbreak-after(en-US)break-before(en-US)break-inside(en-US)caption-side(en-US)caret-color(en-US)clear(en-US) Deprecated clipclip-path(en-US)color(en-US)color-scheme(en-US)column-count(en-US)column-fill(en-US)column-gap(grid-column-gap)(en-US)column-rule(en-US)column-rule-color(en-US)column-rule-style(en-US)column-rule-width(en-US)column-span(en-US)column-width(en-US)columns(en-US)contain(en-US)content(en-US)content-visibility(en-US)counter-increment(en-US)counter-reset(en-US)counter-set(en-US)cursordirection(en-US)display(en-US)empty-cells(en-US)filter(en-US)flex(en-US)flex-basis(en-US)flex-direction(en-US)flex-flow(en-US)flex-grow(en-US)flex-shrink(en-US)flex-wrap(en-US)float(en-US)font(en-US)font-family(en-US)font-feature-settings(en-US)font-kerning(en-US)font-language-override(en-US)font-optical-sizing(en-US)font-size(en-US)font-size-adjust(en-US)font-stretch(en-US)font-style(en-US)font-synthesis(en-US)font-variant(en-US)font-variant-alternates(en-US)font-variant-caps(en-US)font-variant-east-asian(en-US)font-variant-ligatures(en-US)font-variant-numeric(en-US)font-variant-position(en-US)font-variation-settings(en-US)font-weight(en-US)forced-color-adjust(en-US)gap(grid-gap)(en-US)grid(en-US)grid-area(en-US)grid-auto-columns(en-US)grid-auto-flow(en-US)grid-auto-rows(en-US)grid-column(en-US)grid-column-end(en-US)grid-column-start(en-US)grid-rowgrid-row-end(en-US)grid-row-start(en-US)grid-templategrid-template-areas(en-US)grid-template-columnsgrid-template-rows(en-US)hanging-punctuation(en-US)heighthyphenate-character(en-US)hyphens(en-US)image-rendering(en-US) Experimental image-resolution(en-US) Deprecated ime-mode Experimental initial-letter(en-US) Experimental initial-letter-align(en-US)inline-size(en-US)inset(en-US)inset-block(en-US)inset-block-end(en-US)inset-block-start(en-US)inset-inline(en-US)inset-inline-end(en-US)inset-inline-start(en-US)isolation(en-US)justify-content(en-US)justify-items(en-US)justify-self(en-US)left(en-US)letter-spacing(en-US)line-breakline-height(en-US)line-height-step(en-US)list-style(en-US)list-style-image(en-US)list-style-position(en-US)list-style-type(en-US)margin(en-US)margin-block(en-US)margin-block-end(en-US)margin-block-start(en-US)margin-bottom(en-US)margin-inline(en-US)margin-inline-end(en-US)margin-inline-start(en-US)margin-left(en-US)margin-right(en-US)margin-top(en-US) Experimental margin-trim(en-US)mask(en-US)mask-border(en-US)mask-border-mode(en-US)mask-border-outset(en-US)mask-border-repeat(en-US)mask-border-slice(en-US)mask-border-source(en-US)mask-border-width(en-US)mask-clip(en-US)mask-composite(en-US)mask-image(en-US)mask-mode(en-US)mask-origin(en-US)mask-position(en-US)mask-repeat(en-US)mask-size(en-US)mask-type(en-US)max-block-size(en-US)max-height(en-US)max-inline-size(en-US)max-width(en-US)min-block-size(en-US)min-height(en-US)min-inline-size(en-US)min-width(en-US)mix-blend-mode(en-US)object-fitobject-position(en-US)offset(en-US)offset-anchor(en-US)offset-distance(en-US)offset-path(en-US) Experimental offset-position(en-US)offset-rotate(en-US)opacity(en-US)order(en-US)orphans(en-US)outline(en-US)outline-color(en-US)outline-offset(en-US)outline-style(en-US)outline-width(en-US)overflow(en-US)overflow-anchor(en-US)overflow-block(en-US)overflow-clip-margin(en-US)overflow-inline(en-US)overflow-wrap(en-US)overflow-x(en-US)overflow-y(en-US)overscroll-behavior(en-US)overscroll-behavior-block(en-US)overscroll-behavior-inline(en-US)overscroll-behavior-x(en-US)overscroll-behavior-y(en-US)padding(en-US)padding-block-end(en-US)padding-block-start(en-US)padding-bottom(en-US)padding-inline-end(en-US)padding-inline-start(en-US)padding-left(en-US)padding-right(en-US)padding-top(en-US)page-break-after(en-US)page-break-before(en-US)page-break-inside(en-US)perspective(en-US)perspective-origin(en-US)place-content(en-US)place-items(en-US)place-self(en-US)pointer-events(en-US)position(en-US)print-color-adjust(en-US)quotes(en-US)resize(en-US)right(en-US)rotate(en-US)row-gap(grid-row-gap)(en-US)ruby-align(en-US)ruby-positionscale(en-US)scroll-behavior(en-US)scroll-margin(en-US)scroll-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-top(en-US)scroll-padding(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) Deprecated scroll-snap-coordinate(en-US) Deprecated scroll-snap-destination(en-US) Deprecated scroll-snap-points-x(en-US) Deprecated scroll-snap-points-y(en-US)scroll-snap-type(en-US)scrollbar-color(en-US)scrollbar-width(en-US)shape-image-threshold(en-US)shape-margin(en-US)shape-outside(en-US)tab-size(en-US)table-layout(en-US)text-align(en-US)text-align-last(en-US)text-combine-upright(en-US)text-decoration(en-US)text-decoration-color(en-US)text-decoration-line(en-US) Experimental text-decoration-skip(en-US)text-decoration-skip-ink(en-US)text-decoration-style(en-US)text-emphasis(en-US)text-emphasis-color(en-US)text-emphasis-position(en-US)text-emphasis-style(en-US)text-indent(en-US)text-justify(en-US)text-orientation(en-US)text-overflow(en-US)text-rendering(en-US)text-shadow(en-US) Experimental text-size-adjust(en-US)text-transform(en-US)text-underline-position(en-US)top(en-US)touch-action(en-US)transformtransform-box(en-US)transform-origintransform-style(en-US)transitiontransition-delay(en-US)transition-durationtransition-property(en-US)transition-timing-functiontranslate(en-US)unicode-bidi(en-US)user-select(en-US)vertical-align(en-US)visibility(en-US)white-spacewidows(en-US)widthwill-change(en-US)word-break(en-US)word-spacing(en-US)writing-mode(en-US)z-index(en-US) SelectorsAdjacentsiblingcombinator(en-US)Attributeselectors(en-US)Childcombinator(en-US)Classselectors(en-US) Experimental Columncombinator(en-US)DescendantcombinatorGeneralsiblingcombinator(en-US)IDselectors(en-US)Selectorlist(en-US)TypeselectorsUniversalselectors(en-US) Pseudo-classes:active(en-US):any-link(en-US):autofill(en-US) Experimental :blank(en-US):checked(en-US):default(en-US):defined(en-US):dir()(en-US):disabled(en-US):empty(en-US):enabled(en-US):first(en-US):first-child:first-of-type:focus(en-US):focus-visible(en-US):focus-within(en-US):fullscreen(en-US):has()(en-US):host(en-US):host-context()(en-US):host()(en-US):hover(en-US):in-range(en-US):indeterminate(en-US):invalid(en-US):is()(:matches(),:any())(en-US):lang():last-child(en-US):last-of-type(en-US):left(en-US):link(en-US):not()(en-US):nth-child()(en-US):nth-last-child()(en-US):nth-last-of-type()(en-US):nth-of-type()(en-US):only-child(en-US):only-of-type(en-US):optional(en-US):out-of-range(en-US):paused(en-US):picture-in-picture(en-US):placeholder-shown(en-US):playing(en-US):read-only(en-US):read-write(en-US):required(en-US):right(en-US):root(en-US):scope(en-US):target:user-invalid(:-moz-ui-invalid)(en-US):user-valid(:-moz-ui-valid)(en-US):valid(en-US):visited(en-US):where()(en-US)Privacyandthe:visitedselector(en-US)Pseudo-classes Pseudo-elements::after(:after)(en-US)::backdrop(en-US)::before(:before)(en-US)::cue(en-US)::cue-region(en-US)::file-selector-button(en-US)::first-letter(:first-letter)::first-line(:first-line)(en-US) Experimental ::grammar-error(en-US)::marker(en-US)::part()(en-US)::placeholder(en-US)::selection(en-US)::slotted()(en-US) Experimental ::spelling-error(en-US)::target-text(en-US)Pseudo-elements(en-US) At-rules@charset(en-US)@color-profile(en-US)@counter-style(en-US) Deprecated @document(en-US)@font-face@font-feature-values(en-US)@import(en-US)@keyframes(en-US)@layer(en-US)@media@namespace(en-US)@page(en-US) Experimental @property(en-US) Experimental @scroll-timeline(en-US)@supports(en-US) Deprecated @viewport Types(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)CSSFunctionalNotation(en-US)CSSdatatypes(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US)(en-US) Deprecated (en-US)(en-US)(en-US)(en-US)(en-US) Guides Animations UsingCSSanimations BackgroundsandBorders Usingmultiplebackgrounds Resizingbackgroundimages(en-US) Boxalignment Boxalignmentinblocklayout(en-US) Boxalignmentinflexbox(en-US) Boxalignmentingridlayout(en-US) Boxalignmentinmulti-columnlayout(en-US) Boxmodel IntroductiontotheCSSbasicboxmodel(en-US) Masteringmargincollapsing Columns BasicconceptsofMulticol(en-US) Stylingcolumns(en-US) Spanningandbalancing(en-US) HandlingoverflowinMulticol(en-US) ContentbreaksinMulticol(en-US) Conditionalrules Usingfeaturequeries(en-US) CSSOMview Coordinatesystems(en-US) 彈性區塊 BasicconceptsofFlexbox Comparisonwithotherlayoutmethods(en-US) Aligningitemsinaflexcontainer(en-US) Orderingflexitems(en-US) Controllingflexitemratios(en-US) Masteringwrappingofflexitems(en-US) TypicalusecasesofFlexbox(en-US) BackwardscompatibilityofFlexbox(en-US) Flowlayout BlockandInlinelayoutinnormalflow(en-US) InflowandOutofflow(en-US) Formattingcontextsexplained(en-US) Flowlayoutandwritingmodes(en-US) Flowlayoutandoverflow(en-US) Fonts OpenTypefontfeaturesguide(en-US) Variablefontsguide(en-US) Grid Basicsconceptsofgridlayout Relationshiptootherlayoutmethods(en-US) Line-basedplacement(en-US) Gridtemplateareas(en-US) Layoutusingnamedgridlines(en-US) Auto-placementingridlayout(en-US) Boxalignmentingridlayout(en-US) undefined(en-US) Gridlayoutandaccessibility(en-US) GridLayoutandprogressiveenhancement(en-US) Realizingcommonlayoutsusinggrids(en-US) Subgrid(en-US) Masonrylayout(en-US) Images UsingCSSgradients(en-US) Listsandcounters UsingCSScounters(en-US) Consistentlistindentation Logicalproperties Basicconcepts(en-US) Floatingandpositioning(en-US) undefined(en-US) Sizing(en-US) Beginner'sguidetomediaqueries Usingmediaqueries(en-US) Usingmediaqueriesforaccessibility(en-US) Testingmediaqueriesprogrammatically 定位 UnderstandingCSSz-index Scrollsnap Basicconceptsofscrollsnap(en-US) Browsercompatibilityandscrollsnap(en-US) Shapes Overviewofshapes(en-US) Shapesfromboxvalues(en-US) Basicshapes(en-US) Shapesfromimages(en-US) Text Wrappingandbreakingtext(en-US) Transforms Usingtransforms(en-US) Transitions Usingtransitions Layoutcookbook Mediaobjects(en-US) Columns(en-US) Centeranelement(en-US) Stickyfooters(en-US) Splitnavigation(en-US) Breadcrumbnavigation(en-US) Listgroupwithbadges(en-US) Pagination(en-US) Card(en-US) Gridwrapper(en-US) Tools Colorpicker Boxshadowgenerator(en-US) Borderimagegenerator(en-US) CSS宣告CSS宣告區塊CSSrulesetsCSSstatementsSeealso語法 串接式樣式表 (CSS)語言的基礎目標是是讓瀏覽器引擎用特定的功能將元素寫在頁面上，像是顏色、位置與裝飾。

CSS語法反映出了目的，而它的基本組成為： 屬性為人可閱讀的識別碼，定義使用哪項功能。

參數描述了引擎必須如何處理這項功能。

每個屬性都有一套有效的參數，由形式的文法與語意所定義，並由瀏覽器引擎執行。

CSS宣告設定特定參數值給CSS屬性是CSS語言的核心功能。

一對屬性與參數叫做宣告，而為了適當的排版與套用樣式，任何CSS引擎會演算每個頁面上的元素該套用哪個宣告。

在CSS中屬性與參數都預設為不區分大小寫。

它們由冒號區隔，':'(U+003ACOLON)，而在屬性與參數前、中間與後面並不需要有空白，空白會被忽略。

在CSS中有超過100種不同的屬性與接近無限個不同的參數。

並非所有的屬性與參數組都是被准許的，且每個屬性定義了哪些是有效的參數。

當一個參數對屬性無效的時候，宣告會被認為是無效的且會完全被CSS引擎忽略。

CSS宣告區塊Declarationsaregroupedinblocks,thatisinastructuredelimitedbyanopeningbrace,'{'(U+007BLEFTCURLYBRACKET),andaclosingone,'}'(U+007DRIGHTCURLYBRACKET).Blockssometimescanbenested,soopeningandclosingbracesmustbematched. Suchblocksarenaturallycalleddeclarationblocksanddeclarationsinsidethemareseparatedbyasemi-colon,';'(U+003BSEMICOLON).Adeclarationblockmaybeempty,thatiscontainingnulldeclaration.Whitespacesarounddeclarationsareignored.Thelastdeclarationofablockdoesn'tneedtobeterminatedbyasemi-colon,thoughitisoftenconsideredgoodstyletodoitasitpreventsforgettingtoadditwhenextendingtheblockwithanotherdeclaration. ThecontentofaCSSdeclarationblock,thatisalistofsemi-colon-separateddeclarations,withouttheinitialandclosingbraces,canbeputinsideanHTMLstyleattribute.CSSrulesetsIfstylesheetscouldonlyapplyadeclarationtoeachelementofaWebpage,theywouldbeprettyuseless.Therealgoalistoapplydifferentdeclarationstodifferentpartsofthedocument. CSSallowsthisbyassociatingconditionswithdeclarationsblocks.Each(valid)declarationblockisprecededbyoneormorecomma-separatedselectorswhichareconditionsselectingsomeelementsofthepage.Thepairselectorgroup-declarationsblockiscalledaruleset,oroftensimplyarule. Asanelementofthepagemaybematchedbyseveralselectors,andthereforebyseveralrulespotentiallycontainingagivenpropertyseveraltimes,withdifferentvalues,theCSSstandarddefineswhichonehasprecedenceovertheotherandmustbeapplied:thisiscalledthecascadealgorithm. Itisimportanttonotethatevenifarulesetcharacterizedbyagroupofselectorsisakindofshorthandreplacingrulesetswithasingleselectoreach,thisdoesn'tapplytothevalidityoftherulesetitself. Thisleadstoanimportantconsequence:ifonesinglebasicselectorisinvalid,likewhenusinganunknownpseudo-elementorpseudo-class,thewholeselectorisinvalidandthereforetheentireruleisignored(asinvalidtoo).CSSstatementsRulesetsarethemainbuildingblocksofastylesheet,whichoftenconsistsofonlyabiglistofthem.ButthereisotherinformationthataWebauthorwantstoconveyinthestylesheet,likethecharacterset,otherexternalstylesheetstoimport,fontfaceorlistcounterdescriptionsandmanymore.Itwilluseotherandspecifickindsofstatementstodothat. Astatementisabuildingblockthatbeginswithanynon-spacecharactersandendsatthefirstclosingbraceorsemi-colon(outsideastring,non-escapedandnotincludedintoanother{},()or[]pair). Therearetwokindsofstatements: Rulesets(orrules)that,asseen,associateacollectionofCSSdeclarationstoaconditiondescribedbyaselector. At-rulesthatstartwithanatsign,'@'(U+0040COMMERCIALAT),followedbyanidentifierandthencontinuinguptheendofthestatement,thatisuptothenextsemi-colon(;)outsideofablock,ortheendofthenextblock.Eachtypeofat-rules,definedbytheidentifier,mayhaveitsowninternalsyntax,andsemanticsofcourse.Theyareusedtoconveymeta-datainformation(like@charset(en-US)or@import(en-US)),conditionalinformation(like@mediaor@document(en-US)),ordescriptiveinformation(like@font-face). Anystatementwhichisn'tarulesetoranat-ruleisinvalidandignored. Thereisanothergroupofstatements–thenestedstatements.Thesearestatementsthatcanbeusedinaspecificsubsetofat-rules–theconditionalgrouprules.Thesestatementsonlyapplyifaspecificconditionismatched:the@mediaat-rulecontentisappliedonlyifthedeviceonwhichthebrowserrunsmatchestheexpressedcondition;the@documentat-rulecontentisappliedonlyifthecurrentpagematchessomeconditions,andsoon.InCSS1andCSS2.1,onlyrulesetscouldbeusedinsideconditionalgrouprules.ThatwasveryrestrictiveandthisrestrictionwasliftedinCSSConditionalsLevel3.Now,thoughstillexperimentalandnotsupportedbyeverybrowser,conditionalgrouprulescancontainawiderrangeofcontent:rulesetsbutalsosome,butnotall,at-rules.Seealso CSSKeyConcepts: CSSsyntax, at-rule, comments, specificityand inheritance, thebox, layoutmodesand visualformattingmodels, andmargincollapsing, ortheinitial, computed, resolved, specified, used, andactualvalues. Definitionsofvaluesyntax, shorthandproperties andreplacedelements. Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年5月31日,byMDNcontributors