Latest web development tutorials
×

CSS 참조 설명서

CSS 참조 설명서 CSS 선택자 CSS 음성 참조 CSS Web 안전 글꼴 CSS 생기 CSS 단위 CSS 색 CSS 법률 색상 값 CSS 색 이름 CSS 16 진수 색상 값 CSS 브라우저 지원

CSS 재산

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function appearance backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight grid-columns grid-rows hanging-punctuation height icon justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position punctuation-trim quotes resize right rotation tab-size table-layout target target-name target-new target-position text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-outline text-overflow text-shadow text-transform text-wrap top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

CSS 선택기

CSS 선택기는 스타일 패턴에 원하는 요소를 선택하는 데 사용됩니다.

"CSS"열이있는 CSS 속성 (CSS1, CSS2, 또는 CSS3를) 정의를 나타냅니다.

선택자 예 쇼 CSS
. 클래스 .intro 모든 클래스를 선택 = "소개"요소 (1)
# 이드 #firstname 모든 ID = "FIRSTNAME"요소를 선택 (1)
* * 모든 요소를 ​​선택
요소p 모든 <p> 요소를 선택 (1)
요소, 요소div,p 모든 <div> 요소와 <p> 요소를 선택합니다 (1)
요소 요소 div p 선택 <DIV> 요소 내의 모든 <p> 요소를 (1)
요소> 요소 div>p 모든 부모를 선택하면 <P> 요소의 <div> 요소
요소 + 요소 div+p 결국 <DIV> 요소 다음에 <p> 요소를 선택합니다
[속성] [target] 대상 속성을 가진 모든 요소를 ​​선택합니다
[속성 = 값] [target=-blank] 모든 사용 대상 = 선택 -의 요소를 "빈"
[속성 ~ = 값] [title~=flower] title 속성의 모든 요소 선택 "꽃"의를 단어를 포함
[속성 | = 언어] [lang|=en] 값을 시작 속성 랭의 모든 요소를 ​​선택 = "EN"의
: 링크 a:link 모든 방문하지 않은 링크를 선택 (1)
: 방문 a:visited 모든 방문한 링크를 선택 (1)
: 활성 a:active 활성 링크를 선택 (1)
: 호버 a:hover 당신은 위의 링크에 마우스를 선택하면 (1)
: 초점 input:focus 입력 요소에 포커스가 선택
: 첫 번째 편지 p:first-letter 각각의 첫 글자를 선택 <P> 요소 (1)
: 첫줄 p:first-line 각 <P> 첫 번째 줄 요소를 선택 (1)
: 첫 아이 p:first-child 지정 만 <P> 요소는 부모 스타일의 첫 번째 자식이다.
: 전 p:before 각 <P> 요소 전에 내용을 삽입
: 후 p:after 각 후 내용을 삽입 <P> 요소
: 랭 (언어) p:lang(it) = A LANG 값을 시작 속성 "을"모든 <p> 요소를 선택
에서 element1 ~이 element2 P ~ UL 요소 후 각각의 선택 P는 UL 요소 3
[속성 ^ = 값] A [SRC ^ = 'https'로] 이 "HTTPS"을 엘리먼트의 시작, 각 src 속성 값을 선택 3
[속성 $ = 값] A [SRC $ = ". PDF"] 요소의 끝에서 ".PDF"각 src 속성 값을 선택 3
[속성 * = 값] A [SRC * = "w3big"] 속성 값이 문자열 "w3big"에 포함 된 각 요소의 SRC를 선택 3
: 첫 번째 타입의 P : 처음의 형 각 페이지의 페이지 요소를 선택하는 것은 부모의 첫 번째 요소입니다 3
: 마지막으로 형 P : 마지막의 형 각 페이지 요소를 선택하는 것은 부모 페이지의 마지막 요소입니다 3
: 전용 형 P : 전용의 형 각 페이지 요소를 선택하는 것은 부모 페이지의 유일한 요소이다 3
: 전용 아이 P : 전용 아이 각 페이지 요소를 선택하는 것은 부모의 유일한 자식 요소입니다 3
: n 번째 자녀 (N) P : n 번째 자녀 (2) 각 페이지 요소를 선택하는 것은 부모의 두 번째 자식이다 3
: n 번째-마지막 아이 (N ) P : n 번째-마지막 아이 (2) 각 페이지 요소를 선택하면 마지막 아이부터 계산, 부모의 두 번째 자식이다 3
: n 번째의 형 (N ) P : n 번째의 형 (2) 각 페이지 요소를 선택하는 것은 부모의 제 2 p 요소입니다 3
: n 번째-마지막의 형 (N) P : n 번째-마지막의 형 (2) 각 페이지 요소를 선택하면 마지막 아이부터 계산, 부모의 제 2 p 요소입니다 3
: 마지막 아이 P : 마지막 아이 각 페이지 요소를 선택하는 것은 부모의 마지막 자식입니다. 3
: 루트 : 루트 문서의 루트 요소를 선택 3
: 빈 P : 빈 상기 p- 요소의 각 (텍스트 노드 포함) 아이가없는 선택 3
: 대상 #news : 대상 (앵커 이름을 클릭 가능한 URL 포함) 현재 활성화 된 #news 요소를 선택 3
: 사용 가능 입력 : 사용 가능 각 입력 요소가 활성화 선택 3
: 비활성화 입력 : 비활성화 비활성화 각 입력 요소를 선택 3
: 선택 입력 : 선택 선택한 각 입력 요소를 선택 3
:하지 (선택) : 없음 (P) 각 요소를 선택하면 페이지 요소 아닙니다 3
:: 선택 :: 선택 요소는 사용자 일치 부분의 상태를 선택하거나 강조 3
: 범위를 벗어난 : 아웃의 범위 지정된 범위를 벗어난 매칭 값 입력 요소 3
:의 범위 : 인 범위 의 지정된 범위 내에서 값을 입력 요소 매칭 3
: 읽기 - 쓰기 : 읽기 - 쓰기 그것은 읽기 및 쓰기 요소를 일치시키는 데 사용 3
: 읽기 전용 : 읽기 전용 "읽기 전용"세트를 일치하는 읽기 전용 속성 요소를 3
: 선택 : 선택 선택 입력 요소와 일치를위한 3
: 필요 필수 요소 "필요"를 일치하도록 설정 등록 3
: 유효 : 유효한 입력 값을 일치시키는 데 사용하는 것은 합법적 요소 3
: 무효 : 잘못된 입력 요소의 일치에 대한 잘못된 값 3