Style 개체
스타일 (Style) 객체는 각각의 스타일 문을 나타냅니다.
스타일 (Style) 개체에 액세스
스타일 (Style) 객체는 문서의 헤드 섹션에서, 또는 특정의 HTML에서 액세스 할 수있는 element(s) .
스타일 액세스 object(s) 문서의 head 섹션에서 :
지정된 요소의 스타일 개체에 액세스 :
스타일 (Style) 개체 만들기
당신은 만들 수 있습니다 <style> 사용하여 요소를 document. createElement() document. createElement() 방법 :
또한 기존 요소의 스타일 속성을 설정할 수 있습니다 :
스타일 개체 속성
"CSS" 열은 CSS 버전 속성이 정의 나타낸다 (CSS1, CSS2, or CSS3) .
| 재산 | 기술 | CSS |
|---|---|---|
| alignContent | 설정하거나 항목이 사용 가능한 모든 공간을 사용하지 않는 경우 유연한 용기 내부의 선 사이의 정렬을 반환 | 3 |
| alignItems | 설정하거나 유연한 용기 내부의 항목에 대한 정렬을 반환 | 3 |
| alignSelf | 설정하거나 유연한 용기 내 선택 항목의 정렬을 반환 | 3 |
| animation | animationPlayState 속성을 제외하고 아래의 모든 애니메이션 속성에 대한 약식 속성, | 3 |
| animationDelay | 설정하거나 반환 애니메이션이 시작됩니다 | 3 |
| animationDirection | 애니메이션이 대체 사이클에 반대 방향으로 재생할지 여부를 설정하거나 반환 | 3 |
| animationDuration | 설정하거나 반환 몇 초 또는 밀리 초 애니메이션은 하나의 사이클을 완료하는 데 소요 | 3 |
| animationFillMode | 이 실행되는 시간 이외의 애니메이션에 의해 적용되는 어떤 값을 설정하거나 반환 | 3 |
| animationIterationCount | 설정하거나 애니메이션이 재생 횟수를 반환 | 3 |
| animationName | 설정하거나 @keyframes 애니메이션의 이름을 반환 | 3 |
| animationTimingFunction | 설정하거나 애니메이션의 속도 곡선을 반환 | 3 |
| animationPlayState | 애니메이션이 실행 중이거나 일시 정지 여부를 설정하거나 반환 | 3 |
| background | 설정하거나 하나 개의 선언에 모든 배경 속성을 반환 | 1 |
| backgroundAttachment | 페이지로 설정하거나 배경 이미지가 고정되어 있는지 여부를 반환하거나 스크롤 | 1 |
| backgroundColor | 설정하거나 요소의 배경색을 반환 | 1 |
| backgroundImage | 설정하거나 요소의 배경 이미지를 반환 | 1 |
| backgroundPosition | 설정하거나 배경 이미지의 시작 위치를 반환 | 1 |
| backgroundRepeat | 반복하는 방법을 설정하거나 반환 (tile) 배경 이미지를 | 1 |
| backgroundClip | 설정이나 배경의 그림 영역을 반환 | 3 |
| backgroundOrigin | 설정하거나 배경 이미지의 위치 영역을 반환 | 3 |
| backgroundSize | 설정하거나 배경 이미지의 크기를 반환 | 3 |
| backfaceVisibility | 화면에 직면하지 않을 때 요소가 표시되어야하는지 여부를 설정하거나 반환 | 3 |
| border | 설정하거나 하나 개의 선언에 borderWidth,의 BorderStyle과의 borderColor을 반환 | 1 |
| borderBottom | 하나 개의 선언에서 설정하거나 반환 모든 borderBottom * 속성을 | 1 |
| borderBottomColor | 설정 또는 아래쪽 테두리의 색상을 반환 | 1 |
| borderBottomLeftRadius | 설정하거나 왼쪽 하단의 테두리의 모양을 반환 | 3 |
| borderBottomRightRadius | 설정하거나 오른쪽 하단의 테두리의 모양을 반환 | 3 |
| borderBottomStyle | 설정 또는 아래쪽 테두리의 스타일을 반환 | 1 |
| borderBottomWidth | 설정 또는 아래쪽 테두리의 폭을 반환 | 1 |
| borderCollapse | 설정하거나 반환은 표 테두리는 하나의 경계로 붕괴 여부를해야하는지 여부 | 2 |
| borderColor | 설정하거나 요소의 테두리 색상을 반환 (최대 네 개의 값을 가질 수 있습니다) | 1 |
| borderImage | 모든 borderImage의 * 속성을 설정하거나 반환을위한 약식 속성 | 3 |
| borderImageOutset | 설정하거나 국경 이미지 영역이 경계 상자를 넘어 확장하는 금액을 반환 | 3 |
| borderImageRepeat | 이미지 국경이 반복 반올림 또는 뻗어할지 여부를 설정하거나 반환 | 3 |
| borderImageSlice | 설정 또는 이미지 경계의 안쪽으로 오프셋을 반환 | 3 |
| borderImageSource | 설정하거나 이미지를 반환은 테두리로 사용되는 | 3 |
| borderImageWidth | 설정하거나 이미지 국경의 폭을 반환 | 3 |
| borderLeft | 설정하거나 하나 개의 선언에있는 모든 borderLeft * 속성을 반환 | 1 |
| borderLeftColor | 설정하거나 왼쪽 테두리의 색상을 반환 | 1 |
| borderLeftStyle | 설정하거나 왼쪽 테두리의 스타일을 반환 | 1 |
| borderLeftWidth | 설정하거나 왼쪽 테두리의 폭을 반환 | 1 |
| borderRadius | 모두 네 개의 국경 * 반경 속성을 설정하거나 반환을위한 약식 속성 | 3 |
| borderRight | 하나 개의 선언에서 설정하거나 반환 모든 borderRight * 속성을 | 1 |
| borderRightColor | 설정하거나 오른쪽 테두리의 색상을 반환 | 1 |
| borderRightStyle | 설정하거나 오른쪽 테두리의 스타일을 반환 | 1 |
| borderRightWidth | 설정하거나 오른쪽 테두리의 폭을 반환 | 1 |
| borderSpacing | 설정 또는 테이블의 셀 사이의 공간을 반환 | 2 |
| borderStyle | 설정하거나 요소의 테두리 스타일을 반환 (최대 네 개의 값을 가질 수 있습니다) | 1 |
| borderTop | 하나 개의 선언에서 설정하거나 반환 모든 borderTop * 속성을 | 1 |
| borderTopColor | 설정하거나 위쪽 테두리의 색상을 반환 | 1 |
| borderTopLeftRadius | 설정하거나 왼쪽 상단의 테두리의 모양을 반환 | 3 |
| borderTopRightRadius | 설정하거나 오른쪽 상단의 테두리의 모양을 반환 | 3 |
| borderTopStyle | 설정하거나 위쪽 테두리의 스타일을 반환 | 1 |
| borderTopWidth | 설정하거나 위쪽 테두리의 폭을 반환 | 1 |
| borderWidth | 설정하거나 요소의 테두리 폭을 반환합니다 (최대 네 개의 값을 가질 수 있습니다) | 1 |
| bottom | 설정하거나 위치 요소의 하단에 위치를 반환 | 2 |
| boxDecorationBreak | 설정하거나 반환 라인 브레이크에서 인라인 요소에 대한 페이지 나누기에서 요소의 배경 및 테두리의 행동, 또는,. | 3 |
| boxShadow | 상자에 하나 이상의 드롭 그림자를 연결합니다 | 3 |
| boxSizing | 당신은 어떤 방법으로 지역에 맞게 특정 요소를 정의 할 수 있습니다 | 3 |
| captionSide | 설정하거나 테이블 캡션의 위치를 반환 | 2 |
| clear | 설정하거나 부동 개체에 대한 요소의 위치를 반환 | 1 |
| clip | 위치 지정 부재의 일부가 표시 설정하거나 리턴 | 2 |
| color | 설정하거나 텍스트의 색상을 반환 | 1 |
| columnCount | 설정 또는 요소로 나눌 수 있어야 열 수를 반환 | 3 |
| columnFill | 설정하거나 열을 채우는 방법을 반환 | 3 |
| columnGap | 설정하거나 열 사이의 간격을 반환 | 3 |
| columnRule | 모든 columnRule의 * 속성을 설정하거나 반환을위한 약식 속성 | 3 |
| columnRuleColor | 설정하거나 열 사이의 규칙의 칼라를 돌려줍니다 | 3 |
| columnRuleStyle | 설정하거나 열 사이의 규칙의 스타일을 반환 | 3 |
| columnRuleWidth | 설정하거나 열 사이의 규칙의 폭을 반환 | 3 |
| columns | columnWidth의과 열 개수를 설정하거나 반환을위한 약식 속성 | 3 |
| columnSpan | 요소가 걸쳐해야 얼마나 많은 열을 설정하거나 반환 | 3 |
| columnWidth | 설정 또는 열 너비를 반환 | 3 |
| content | 함께 사용 : 및 이전 : 의사 요소 후, 생성 된 내용을 삽입 | 2 |
| counterIncrement | 하나 개 이상의 카운터를 증가시킵니다 | 2 |
| counterReset | 작성 또는 하나 개 이상의 카운터를 재설정 | 2 |
| cursor | 설정하거나 마우스 포인터에 대해 표시 할 커서의 형식을 반환 | 2 |
| direction | 설정하거나 텍스트 방향을 반환 | 2 |
| display | 설정하거나 요소의 표시 형식을 반환 | 1 |
| emptyCells | 설정하거나 빈 셀의 테두리와 배경을 표시하거나하지 여부를 반환 | 2 |
| filter | 설정 또는 반환 이미지 필터 (visual effects, like blur and saturation) | 3 |
| flex | 설정하거나 나머지를 기준으로 항목의 길이를 반환 | 3 |
| flexBasis | 설정하거나 유연한 항목의 초기 길이를 반환 | 3 |
| flexDirection | 설정하거나 유연한 항목의 방향을 돌려 | 3 |
| flexFlow | flexDirection과 flexWrap 속성에 대한 약식 속성 | 3 |
| flexGrow | 항목이 나머지에 비해 성장이 얼마나 설정하거나 반환 | 3 |
| flexShrink | 항목이 나머지에 상대적으로 축소하는 방법을 설정하거나 반환 | 3 |
| flexWrap | 설정하거나 유연한 항목을 포장 여부를 여부를 반환 | 3 |
| cssFloat | 설정하거나 요소의 수평 정렬을 반환 | 1 |
| font | 설정하거나 하나 개의 선언에서의 fontStyle, fontVariant,으로 fontWeight, fontSize는,은 lineHeight와의 font를 반환 | 1 |
| fontFamily | 설정하거나 텍스트 폰트 패밀리를 반환 | 1 |
| fontSize | 설정하거나 텍스트의 글꼴 크기를 반환 | 1 |
| fontStyle | 글꼴의 스타일, 정상 기울임 꼴 또는 경사 여부를 설정하거나 반환 | 1 |
| fontVariant | 설정하거나 반환이 글꼴은 작은 대문자로 표시할지 여부를 | 1 |
| fontWeight | 설정하거나 글꼴의 담대함을 반환 | 1 |
| fontSizeAdjust | 글꼴 대체가 발생할 때 텍스트의 가독성을 유지합니다 | 3 |
| fontStretch | 폰트 패밀리로부터 통상, 응축, 팽창 또는 얼굴을 선택 | 3 |
| hangingPunctuation | 구두점 문자가 줄 상자 외부에 배치 될 수 있는지 여부를 지정합니다 | 3 |
| height | 설정하거나 요소의 높이를 반환 | 1 |
| hyphens | 단락의 레이아웃을 개선하기 위해 단어를 분할하는 방법을 설정합니다 | 3 |
| icon | 저자에게 상징적 동등한와 요소의 스타일을 할 수있는 기능을 제공합니다 | 3 |
| imageOrientation | 사용자 에이전트는 이미지에 적용되는 권리 또는 시계 방향으로 회전하도록 지정 | 3 |
| justifyContent | 설정하거나 항목이 사용 가능한 모든 공간을 사용하지 않는 유연한 용기 내부의 항목 사이의 정렬을 반환합니다. | 3 |
| left | 설정하거나 위치 요소의 왼쪽 위치를 반환 | 2 |
| letterSpacing | 설정하거나 텍스트에서 문자 사이의 간격을 반환 | 1 |
| lineHeight | 설정하거나 텍스트에 줄 사이의 거리를 반환 | 1 |
| listStyle | 설정하거나 하나 개의 선언에 listStyleImage, listStylePosition 및 listStyleType를 반환 | 1 |
| listStyleImage | 설정 또는 목록 항목 마커로 이미지를 반환 | 1 |
| listStylePosition | 설정 또는 목록 항목 마커의 위치를 반환 | 1 |
| listStyleType | 설정 또는 목록 항목의 마커 형식을 반환 | 1 |
| margin | 설정하거나 요소의 여백을 반환 (can have up to four values) | 1 |
| marginBottom | 설정하거나 요소의 아래쪽 여백을 반환 | 1 |
| marginLeft | 설정하거나 요소의 왼쪽 여백을 반환 | 1 |
| marginRight | 설정하거나 요소의 오른쪽 여백을 반환 | 1 |
| marginTop | 설정하거나 요소의 위쪽 여백을 반환 | 1 |
| maxHeight | 설정하거나 요소의 최대 높이를 반환 | 2 |
| maxWidth | 설정하거나 요소의 최대 너비를 반환 | 2 |
| minHeight | 설정하거나 요소의 최소 높이를 반환 | 2 |
| minWidth | 설정하거나 요소의 최소 폭을 반환 | 2 |
| navDown | 화살표 다운 탐색 키를 사용하는 경우 설정하거나 반환 어디로 이동합니다 | 3 |
| navIndex | 설정하거나 요소의 탭 순서를 반환 | 3 |
| navLeft | 화살표 왼쪽 탐색 키를 사용하는 경우 설정하거나 반환 어디로 이동합니다 | 3 |
| navRight | 화살표 오른쪽 탐색 키를 사용하는 경우 설정하거나 반환 어디로 이동합니다 | 3 |
| navUp | 화살표 업 네비게이션 키를 사용할 때 설정하거나 반환 어디로 이동합니다 | 3 |
| opacity | 설정하거나 요소의 불투명도 레벨을 반환 | 3 |
| order | 설정하거나 나머지 부분에 상대적으로 유연한 항목의 순서를 반환 | 3 |
| orphans | 설정하거나 페이지 나누기가 요소 내부에 발생하면 페이지 하단에서 왼쪽해야하는 요소에 대한 라인의 최소 수를 반환 | 2 |
| outline | 설정하거나 하나 개의 선언에서 모든 개요 속성을 반환 | 2 |
| outlineColor | 설정 또는 요소 주위 외곽선의 색상을 반환 | 2 |
| outlineOffset | 개요를 상쇄하고 테두리 모서리 이상을 그립니다 | 3 |
| outlineStyle | 설정하거나 요소 주위에 윤곽의 스타일을 반환 | 2 |
| outlineWidth | 설정하거나 요소 주위에 윤곽의 폭을 반환 | 2 |
| overflow | 요소 상자 외부 렌더링 컨텐츠가 무엇을해야 하는지를 설정하거나 반환 | 2 |
| overflowX | 이 요소의 컨텐츠 영역을 넘는 경우, 콘텐츠의 왼쪽 / 오른쪽 가장자리로 무엇을 지정합니다 | 3 |
| overflowY | 이 요소의 컨텐츠 영역을 넘는 경우, 콘텐츠의 위 / 아래 가장자리 무엇을 지정합니다 | 3 |
| padding | 설정하거나 요소의 패딩을 반환 (can have up to four values) | 1 |
| paddingBottom | 설정하거나 요소의 하단에 패딩을 반환 | 1 |
| paddingLeft | 설정하거나 요소의 왼쪽 패딩을 반환 | 1 |
| paddingRight | 설정하거나 요소의 오른쪽 패딩을 반환 | 1 |
| paddingTop | 설정하거나 요소의 상단 여백을 반환 | 1 |
| pageBreakAfter | 설정하거나 요소 후 페이지 나누기 동작을 반환 | 2 |
| pageBreakBefore | 설정하거나 요소 전에 페이지 나누기 동작을 반환 | 2 |
| pageBreakInside | 설정하거나 요소 내부의 페이지 나누기 동작을 반환 | 2 |
| perspective | 설정하거나 조회하는 방법 3D 요소에 대한 관점을 반환 | 3 |
| perspectiveOrigin | 설정하거나 3D 요소의 하단 위치를 반환 | 3 |
| position | 세트 또는 소자에 사용될 위치 확인 방법의 타입을 리턴 (static, relative, absolute or fixed) | 2 |
| quotes | 설정하거나 포함 된 견적 인용 부호의 형태를 돌려줍니다 | 2 |
| resize | 요소는 사용자가 크기를 조정할 수 있는지 여부를 설정하거나 반환 | 3 |
| right | 설정하거나 위치 요소의 오른쪽 위치를 반환 | 2 |
| tableLayout | 설정하거나 테이블 셀, 행과 열을 배치하는 방법을 반환 | 2 |
| tabSize | 설정 또는 탭 문자의 길이를 반환 | 3 |
| textAlign | 설정하거나 텍스트의 수평 정렬을 반환 | 1 |
| textAlignLast | 텍스트 정렬이 때 설정하거나 반환 블록 또는 강제 줄 바꿈 앞에 선 권리의 마지막 줄에 정렬되는 방식을 "justify" | 3 |
| textDecoration | 설정하거나 텍스트의 장식을 반환 | 1 |
| textDecorationColor | 설정하거나 텍스트 장식의 색상을 반환 | 3 |
| textDecorationLine | 설정하거나 텍스트 장식 라인의 형식을 반환 | 3 |
| textDecorationStyle | 설정하거나 텍스트 장식 라인의 스타일을 반환 | 3 |
| textIndent | 설정하거나 텍스트의 첫 번째 줄의 들여 쓰기를 반환 | 1 |
| textJustify | 텍스트 정렬이 때 설정하거나 반환 정당화의 방법이 사용 "justify" | 3 |
| textOverflow | 텍스트가 포함 된 요소를 오버 플로우 할 때 설정하거나 반환이 발생해야하는지 | 3 |
| textShadow | 설정하거나 텍스트의 그림자 효과를 반환 | 3 |
| textTransform | 설정하거나 텍스트의 대소 문자를 반환 | 1 |
| top | 설정하거나 위치 요소의 상단 위치를 반환 | 2 |
| transform | 요소에 2D 또는 3D 변환을 적용 | 3 |
| transformOrigin | 설정하거나 변형 요소의 위치를 반환 | 3 |
| transformStyle | 설정하거나 반환은 어떻게 중첩 된 요소하여 3D 공간에서 렌더링됩니다 | 3 |
| transition | 네 개의 전환 속성을 설정하거나 반환을위한 약식 속성 | 3 |
| transitionProperty | 설정하거나 전환 효과가있는 CSS 속성을 반환 | 3 |
| transitionDuration | 전환 효과를 완료하는 데 걸리는 시간 (초) 또는 밀리 초를 설정하거나 반환 | 3 |
| transitionTimingFunction | 설정하거나 전환 효과의 속도 곡선을 반환 | 3 |
| transitionDelay | 설정하거나 반환 전환 효과가 시작됩니다 | 3 |
| unicodeBidi | 텍스트가 같은 문서에 여러 언어를 지원하기 위해 오버라이드 (override) 할 필요가 있는지 여부를 설정하거나 반환 | 2 |
| verticalAlign | 설정하거나 요소의 내용의 수직 정렬을 반환 | 1 |
| visibility | 요소를 볼 수 있는지 여부를 설정하거나 반환 | 2 |
| whiteSpace | 텍스트에 탭, 줄 바꿈과 공백을 처리하는 방법을 설정하거나 반환 | 1 |
| width | 설정하거나 요소의 폭을 반환 | 1 |
| wordBreak | 설정하거나 반환 비 CJK 스크립트를 바꿈 규칙 라인 | 3 |
| wordSpacing | 설정하거나 텍스트의 단어 사이의 간격을 반환 | 1 |
| wordWrap | 오랫동안 깨지지 않는 단어가 깨진하고 다음 줄로 줄 바꿈 할 수 있습니다 | 3 |
| widows | 설정하거나 페이지의 상단에 표시되어야하는 요소에 대한 라인의 최소 수를 반환 | 2 |
| zIndex | 설정하거나 위치 요소의 스택 순서를 반환 | 2 |
관련 페이지
HTML 튜토리얼 : HTML CSS
CSS 자습서 : CSS 자습서
HTML 참조 : HTML <style> 태그
CSS 참조 : CSS 속성