HTML의 CSS(속성)에 대한 예비 탐색

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. >

텍스트 변환 설정 대소문자 변환

uppercase 모든 단어는 대문자

lowercase 모든 단어는 소문자

capitalize 첫 글자는 대문자로

font-style 텍스트 스타일 설정

normal 보통

italic italic

oblique oblique text

font-variant는 중국어 및 텍스트의 열기 방법을 설정합니다. 영어

nomal Normal

small-caos 영어 프로그래밍은 대문자로 작은 글꼴 크기로 표시됩니다

CSS 텍스트 속성(Text)

속성

설명

color 텍스트 색상 설정

방향 방향/쓰기 지정 텍스트 방향

letter-spacing 문자 간격 설정

line-height 줄 높이 설정

text-align 텍스트의 가로 정렬 지정

세로 -align 텍스트의 수직 정렬을 지정합니다

text-dress는 텍스트에 추가된 장식 효과를 지정합니다

text-indent는 텍스트의 첫 번째 줄의 들여쓰기를 지정합니다

tex -transform은 텍스트의 대소문자를 제어합니다

unicode-bidi 텍스트 방향 설정

white-space 요소의 공백 처리 방법 지정

word-spacing 단어 간격 설정

CSS 테이블 속성( 테이블)

속성

설명

border 테두리 설정

border-color 테두리 색상 설정

cellspacing 테이블 프레임의 너비 설정

cellpadding 데이터와 프레임 사이의 거리 설정

background-color 테이블의 배경색 설정

background-url 설정 테이블의 배경 이미지

colspan 가로로 셀 병합

rowspan 세로로 셀 병합

셀 병합 4단계

1. 셀의 시작점 결정 어느 셀이 병합되기 시작하는지 결정

2. 셀이 수직 또는 수평으로 병합되는지 결정 3. 셀 수 결정 4. 중복되는 셀 처리

CSS 목록 속성(List)

속성

설명

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;

CSS 여백 속성(Margin)

속성

설명

margin 모든 여백 속성을 하나의 명령문에 설정

margin-top 요소의 위쪽 여백 설정

margin-right 요소의 오른쪽 여백 설정

margin-bottom 요소의 아래쪽 여백 설정

margin-left 요소의 왼쪽 여백 설정

CSS 패딩 속성(Padding)

Property

설명

padding 모든 패딩 속성을 하나의 선언으로 설정

padding-top 요소의 위쪽 패딩을 설정

padding-right 요소의 오른쪽 패딩을 설정

padding-bottom 요소의 아래쪽 패딩을 설정

padding-left

CSS 위치 지정 속성(Positioning)

속성

설명

position은 요소의 위치 지정 유형을 지정합니다.

bottom은 위치가 지정된 요소의 아래쪽 여백 경계와 포함 블록의 아래쪽 경계 사이의 오프셋을 설정합니다.

right 위치가 지정된 요소의 오른쪽 여백 가장자리와 포함 블록의 오른쪽 가장자리 사이의 오프셋을 설정합니다.

left 위치가 지정된 요소의 왼쪽 여백 가장자리와 요소의 왼쪽 가장자리 사이의 오프셋을 설정합니다. 포함 블록

top 위치가 지정된 요소의 위쪽 여백 경계와 포함 블록의 위쪽 경계 사이의 오프셋을 설정합니다.

overflow 콘텐츠가 요소 상자를 오버플로할 때 발생하는 상황을 지정합니다.

cursor 표시할 커서 유형을 지정합니다.

float는 상자가 부동해야 하는지 여부를 지정합니다.

display는 요소가 생성해야 하는 상자의 유형을 지정합니다.

vertical- align 요소의 수직 정렬을 설정합니다.

visibility는 요소가 표시되는지 여부를 지정합니다.

z-index 요소의 스택 순서를 설정합니다.

CSS 의사 클래스(의사 클래스)

속성

설명

: active 활성화된 요소에 스타일 추가

: focus 키보드 입력에 포커스 부여 요소에 스타일 추가

: hover 요소 위에 마우스를 올리면 해당 요소에 스타일 추가

: 링크 방문하지 않은 링크에 스타일 추가

: 방문함 방문한 링크에 스타일 추가

: lang 지정된 lang 속성이 있는 요소에 스타일 추가

요소용 CSS(의사 요소)

속성

설명

: first-letter 텍스트의 첫 글자에 특수 스타일 추가 Styles

: first-line 텍스트의 첫 번째 줄에 특수 스타일 추가

: bofore 요소 앞에 내용 추가

: after 요소 뒤에 내용 추가

결론

단순성은 복잡함보다 앞선 것이 아니라 복잡함 뒤에 온다

For HTML의 CSS(속성)에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!