HTML의 CSS(속성)에 대한 예비 탐색
- 高洛峰원래의
- 2017-02-08 09:49:011363검색
CSS(Cascading Style Sheet)
CSS는 HTML이나 XML과 같은 문서 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립팅 언어와 협력하여 웹페이지 요소의 형식을 동적으로 지정할 수도 있습니다.
CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 단위의 정밀한 제어를 제공하고 거의 모든 글꼴 크기 스타일을 지원하며 웹 페이지 개체 및 모델 스타일을 편집하는 기능을 제공합니다.
CSS 크기 속성(Dimension)
height 요소의 높이 설정
width 요소의 너비 설정
max-height 요소의 최대 높이를 설정
max-width는 요소의 최대 너비를 설정
min-height는 요소의 최소 높이를 설정
min-width는 요소의 최소 너비를 설정
CSS 배경 속성(Background)
background 모든 배경 속성을 하나의 명령문으로 설정
background-color 요소의 배경색 설정
background-image 요소의 배경 이미지 설정
background-position 배경 이미지의 위치 설정
top top
right right
left left
가운데 중간
background-repeat 배경 설정 그림 반복 방법
repeat 모두 반복
repeat-x 가로로 반복
repeat-y 수직으로 반복
no-repeat 반복하지 않음
background -attachment 페이지 스크롤에 따라 배경 이미지도 스크롤되는지 여부
CSS 테두리 속성(테두리 및 개요)
속성
설명
border 모든 테두리 속성을 설정합니다.
border-bottom을 설정합니다. 하단 테두리
border-bottom-color 하단 테두리 색상 설정
border-botton-style 하단 테두리 스타일 설정
border-botton-width 너비 설정 아래쪽 테두리
border-color 4개의 테두리 색상 설정
border-left 왼쪽 테두리 설정
border-left-color 왼쪽 테두리 색상 설정 border
border-left-style 왼쪽 테두리 스타일 설정
border-left -width 왼쪽 테두리 너비 설정
border-right- 오른쪽 테두리 스타일 설정 border
border-right-color 오른쪽 테두리 색상 설정
border-right-style 오른쪽 테두리 스타일 설정
border-right-width 너비 설정 오른쪽 테두리
border-style 4개의 테두리 스타일을 설정합니다.
solid 스타일은 실선입니다.
double Double solid line (폭은 1px, 효과는 입니다) 보이지 않음)
dottde 점선(IE6/7에서는 실선으로 나타남)
점선(IE6/7에서는 실선으로 나타남)
border- top 위쪽 테두리 설정
border-top-color 위쪽 테두리 색상 설정
border-top-style 위쪽 테두리 스타일 설정
border-top -width 상단 테두리의 너비 설정
border-width 4개 테두리의 너비 설정
outline 모든 윤곽선 속성 설정
outline-color 테두리의 색상 설정 outline
outline-style 외곽선의 스타일을 설정
outline-width 외곽선의 너비를 설정
border-bottom-left-radius 하단의 모양을 정의 테두리의 왼쪽 모서리
border-bottom-right-radius 테두리의 오른쪽 하단 모서리 모양을 정의합니다.
border-top-left-radius 왼쪽 상단 모서리의 모양을 정의합니다. 테두리
border-top-right-radius 테두리의 오른쪽 상단 모서리를 정의합니다 Shape
border-radius 약식 속성, border-*-radius 속성 4개 모두 설정
border-image 약어 속성, 모든 border-image-* 속성 설정
border-image-outset 테두리 너머 테두리 이미지 영역의 양을 지정합니다.
border-image-repeat 여부 이미지는 반복되거나 둥글게 되거나 늘어나야 합니다
border-image-slice 이미지 테두리의 안쪽 오프셋을 지정합니다
border-image-width 이미지 테두리의 너비를 지정합니다
border-image-source 테두리로 사용되는 이미지를 지정합니다.
box-shadow 상자에 하나 이상의 그림자를 추가합니다.
CSS 글꼴 속성( 글꼴)
속성
설명
font 모든 글꼴 속성을 설정합니다.
font-family 텍스트의 글꼴 계열을 설정합니다.
font-size 글꼴 크기를 설정합니다. 텍스트
font-size-adjust 요소의 가로세로 값을 지정합니다.
font-stretch 현재 글꼴 계열을 축소하거나 늘입니다.
font-style 글꼴 스타일을 설정합니다. 텍스트
font-variant 중국어, 영어 텍스트 여는 방법 설정
font-weight 텍스트 두께 설정
text-align 텍스트 정렬 설정
center 왼쪽 정렬 왼쪽 오른쪽 정렬 오른쪽
letter-spacing 문자 간격 설정
text-장식 문자 장식선 설정
none 주로 밑줄을 제거하는 데 사용됩니다. 태그
밑줄 밑줄
윗줄 윗줄
취소선
참고: 하위 요소가 다른 요소(상위 요소) 안에 배치되는 경우 , 텍스트를 상위 요소 장식으로 설정하면 하위 요소의 텍스트 장식을 지울 수 없음을 알 수 있습니다.
해결책:
1. 절대 위치 지정 사용: ansolute
2. >
2. 셀이 수직 또는 수평으로 병합되는지 결정 3. 셀 수 결정 4. 중복되는 셀 처리
설명 list-style 명령문 하나로 모두 설정 목록 속성 list-style-image 이미지를 목록 항목 표시로 설정list-style-position 목록 항목 표시의 배치 위치를 설정합니다 inside 목록 스타일을 콘텐츠에 배치outside 기본적으로 목록 스타일은 콘텐츠에 포함되지 않습니다. 일반적으로 in psdding list-style-type 목록 항목 표시 유형 설정 합성 쓰기
list-style 1. 유형 2. 위치 3. 그림 기본 스타일 지우기padding: 0px;margin:0px; list-style:none;
padding-top 요소의 위쪽 패딩을 설정
padding-right 요소의 오른쪽 패딩을 설정
padding-bottom 요소의 아래쪽 패딩을 설정
padding-left
CSS 위치 지정 속성(Positioning)
속성
설명 position은 요소의 위치 지정 유형을 지정합니다. bottom은 위치가 지정된 요소의 아래쪽 여백 경계와 포함 블록의 아래쪽 경계 사이의 오프셋을 설정합니다. right 위치가 지정된 요소의 오른쪽 여백 가장자리와 포함 블록의 오른쪽 가장자리 사이의 오프셋을 설정합니다. left 위치가 지정된 요소의 왼쪽 여백 가장자리와 요소의 왼쪽 가장자리 사이의 오프셋을 설정합니다. 포함 블록 top 위치가 지정된 요소의 위쪽 여백 경계와 포함 블록의 위쪽 경계 사이의 오프셋을 설정합니다. overflow 콘텐츠가 요소 상자를 오버플로할 때 발생하는 상황을 지정합니다.cursor 표시할 커서 유형을 지정합니다.
float는 상자가 부동해야 하는지 여부를 지정합니다. display는 요소가 생성해야 하는 상자의 유형을 지정합니다. vertical- align 요소의 수직 정렬을 설정합니다. visibility는 요소가 표시되는지 여부를 지정합니다. z-index 요소의 스택 순서를 설정합니다.