이 CSS 참고서(CSS Reference)는 CSS 규칙의 기본 구문을 보입니다. 즉 모든 표준 CSS 속성(property), 가상 클래스(pseudo-classes) 및 가상 요소(pseudo-elements), @-규칙, 단위(unit) 및 선택자(selector)를 꼭 유형별 선택자뿐만 아니라, 알파벳 순으로 모두 함께 나열합니다. 따라서 이들 각각에 대한 상세한 정보에 빠르게 접근할 수 있습니다. CSS 1 및 CSS 2.1 속성을 나열할 뿐만 아니라, 표준화된 또는 이미 안정된 모든 CSS3 속성 및 개념을 링크한 CSS3 참고서입니다. 또한 짤막한 DOM-CSS / CSSOM 참고서도 포함됩니다.
CSS 규칙 정의는 전부 텍스트 기반(ASCII)이지만, DOM-CSS / CSSOM 규칙 관리 시스템은 객체 기반임을 주의하세요.
-moz- 접두어가 붙은 Gecko 전용 속성에 대한 모질라 CSS 확장과 웹킷 전용 속성을 위한 웹킷 CSS 확장 또한 참조하세요. 모든 접두어 속성은 Peter Beverloo가 쓴 벤더 전용 CSS 프로퍼티 개요를 보세요.
기본 규칙 구문
규칙 정의 내 어떤 구문 오류라도 전체 규칙을 무효화 함을 경고합니다.
스타일 규칙
selectorlist { property: value; [more property:value; pairs] }
...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
아래 나열한 선택자, 가상 요소, 가상 클래스 참조하세요.
예
strong { color: red; }
div.menu-bar li:hover > ul { display: block; }
@-규칙
다른 너무 많은 구조-형식이 있기에, 원하는 구문을 위한 at-규칙을 참조하세요.
키워드 색인
A
:activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfall<angle>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotation (@font-feature-values)annotation()attr()
::backdropbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)<blend-mode>block-sizeblur()borderborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()
calc()caption-sidech@character-variant (@font-feature-values)character-variant()@charset:checkedcircle()clearclipclip-pathcm<color>colorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcontrast()<counter>counter-incrementcounter-reset@counter-stylecross-fade()cubic-bezier()cursor<custom-ident>
fallback (@counter-style)filter:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typeflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-weightfont-weight (@font-face)format()format() (@font-face)<frequency>:fullscreen
grad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
<image>image()image-orientationimage-renderingimage-resolutionimage-set()ime-mode@importin:in-range:indeterminateinheritinitialinline-sizeinset()<integer>:invalidinvert()isolation
:lang():last-child:last-of-type:leftleft<length>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()
marginmargin-block-endmargin-block-startmargin-bottommargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmaskmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmms
@namespacenegative (@counter-style):not():nth-child():nth-last-child():nth-last-of-type():nth-of-type()<number>
object-fitobject-positionoffset-block-endoffset-block-startoffset-inline-endoffset-inline-start:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornaments (@font-feature-values)ornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-y
pad (@counter-style)paddingpadding-block-endpadding-block-startpadding-bottompadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepc<percentage>perspectiveperspective()perspective-originpointer-eventspolygon()<position>positionprefix (@counter-style)ptpx
radradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright:rootrotate()rotate3d()rotateX()rotateY()rotateZ()ruby-alignruby-mergeruby-position
ssaturate()scale()scale3d()scaleX()scaleY()scaleZ():scopescroll-behaviorscroll-snap-coordinatescroll-snap-destinationscroll-snap-type::selectionsepia()<shape>shape-image-thresholdshape-marginshape-outsideskew()skewX()skewY()speak-as (@counter-style)src (@font-face)steps()<string>@styleset (@font-feature-values)styleset()@stylistic (@font-feature-values)stylistic()suffix (@counter-style)@supports@swash (@font-feature-values)swash()symbols (@counter-style)symbols()system (@counter-style)
tab-sizetable-layout:targettext-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-position<time><timing-function>toptouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslate()translate3d()translateX()translateY()translateZ()turn
선택자
- 기본 선택자
- type 선택자
elementname - class 선택자
.classname - id 선택자
#idname - universal 선택자
* ns|* *|* - attribute 선택자
[attr=value]
- type 선택자
- 조합자 (추가 정보)
- 가상 요소 (추가 정보)
- 표준 가상 클래스 (추가 정보)
:active:any:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited
선택자 레벨 3 스펙의 완전한 선택자 목록.
CSS3 자습서
이들은 CSS3에 새로 나왔거나 CSS2.1에 나왔지만 최근까지 지원이 적은 기술을 설명하는 작은 입문 페이지입니다:
- Using CSS media queries
- Using CSS counters
- Using CSS gradients
- Using CSS transforms
- Using CSS animations
- Using CSS transitions
- Using CSS multiple backgrounds
- Using CSS flexible boxes
- Using CSS multi-column layouts
개념
- CSS 구문
- at-규칙
- 주석
- 명시도
- 초기값
- 상속
- 지정값
- 계산값
- 사용값
- 실제값
- 결정값
- 박스 모델
- 대체 요소
- 값 정의 구문
- 단축 속성
- 마진 상쇄 정복
- Visual formatting model
- 레이아웃 모드
DOM-CSS / CSSOM
주요 객체 형:
- document . styleSheets
- styleSheets[x] . cssRules
- cssRules[x] . cssText (selector & style)
- cssRules[x] . selectorText
- elem . style
- elem . style . cssText (just style)
- elem . className
- elem . classList
중요 메서드: