집 > 기사 > 웹 프론트엔드 > CSS 페이지 레이아웃 기술에 대한 자세한 소개

CSS 페이지 레이아웃 기술에 대한 자세한 소개

亚连원래의: 2018-05-17 17:20:531640검색

다음은 관심 있는 학생들이 살펴볼 수 있도록 제가 정리한 CSS 페이지 레이아웃 기술에 대한 자세한 소개입니다.

텍스트 스타일 설정

1. 글꼴 유형

대부분의 사용자 시스템에서 기본적으로 지원하는 중국어 글꼴은 Song, Hei, Youyuan 및 Kai입니다. 기본적으로 지원되는 영어 글꼴은 Arial입니다. , Arial Black, Arial Narrow, Century Gothic, Comic SansMS, Times New Roman 등 사용시에는 송나라와 아리알이 가장 많이 사용된다.

CSS는 글꼴 유형을 설정하는 글꼴 계열 속성을 제공합니다.
예: p{font-family: 宋体;}
참고: 여러 글꼴 속성을 동시에 설정하는 경우 우선순위가 높습니다.

2. 글꼴 크기

CSS는 글꼴 크기를 설정하는 글꼴 크기 속성을 제공합니다.
예: p{font-size: 12px;}

상대 크기
px, em, 10%, 더 크게, 더 작게(마지막 두 개는 상위 요소에 상대적임)

절대 크기
pt, pc, cm 단위, mm

키워드
xx-small, x-small, small, Large, x-large,xx-large

3. 글꼴 굵게

CSS는 글꼴을 굵게 설정하는 글꼴 가중치 속성을 제공합니다. .
예: p{font-weight: 굵게;}

숫자: 100, 200,…,900

키워드: 굵게, 굵게, 가벼움, 보통

4 텍스트 색상

CSS는 색상 속성을 제공합니다. 텍스트 색상을 설정합니다.
예: p{색상: red;}

색상 이름: red, green,…

CSS는 기울임꼴을 설정하는 글꼴 스타일 속성을 제공합니다. 일반, 기울임꼴, 경사의 세 가지 속성 값이 있습니다.

예: p{font-style: italic;}

6. 밑줄, 밑줄 및 취소선CSS는 밑줄, 밑줄 및 취소선을 설정하는 글꼴 장식 속성을 제공합니다. 네 가지 속성 값이 있습니다: 밑줄(밑줄), 깜박임(깜박이는 텍스트), 윗줄(윗줄), 줄바꿈(취소선).

예: p{font-꾸밈: 밑줄;}

7. 영문 대소문자 CSS는 영문 대소문자를 설정하는 글꼴 변환 속성을 제공합니다. 네 가지 속성 값이 있습니다: none, capitalize(첫 글자가 대문자임), uppercase(모두 대문자), lowercase(모두 소문자).

예: p{font-transform: none;}

8. 텍스트 단락 스타일 가로 정렬

CSS는 가로 정렬을 설정하는 텍스트 정렬 속성을 제공합니다. 속성 값에는 왼쪽(왼쪽 정렬), 오른쪽(오른쪽 정렬), 가운데(가운데 정렬), 양쪽 끝에 정렬(양쪽 정렬)의 네 가지 속성 값이 있습니다.

예: p{text-align: left;}

세로 정렬

CSS는 세로 정렬을 설정하기 위한 쓰기 모드 및 레이아웃 흐름 속성을 제공합니다.

문법: 쓰기 모드: lr-tb; (왼쪽-오른쪽-위-아래)
쓰기 모드: tb-rl; (위-아래-오른쪽-왼쪽)
레이아웃 흐름: 가로 배열; layout-flow: Vertical-ideographic; (수직 배열)

첫 줄 들여쓰기

CSS는 첫 줄 들여쓰기를 설정하는 text-indent 속성을 제공합니다. 속성 값은 픽셀 값 또는 백분율일 수 있습니다.
예: p{text-indent: 12px;}

줄 간격

CSS는 줄 간격을 설정하는 line-height 속성을 제공합니다. 속성 값은 길이 값일 수 있습니다.
예: p{line-height: 12px;}

문자 간격

CSS는 문자 간격을 설정하는 letter-spacing 속성을 제공합니다. 속성 값은 길이 값일 수 있습니다.
예: p{letter-spacing: 12px;}
도움이 되었습니다.

CSS 페이지 레이아웃 기술에 대한 자세한 소개

관련 기사