[CSS Note 9] 단위 및 값

1. 색상 값
웹 페이지의 색상 설정은 글꼴 색상(color), 배경색(Background-color), 테두리 색상(border) 등 매우 중요합니다. 색상을 설정하는 방법도 다양합니다. :

1. 영어 명령 색상

이 설정 방법은 이전 섹션에서 자주 사용됩니다:

p{color:red;}

2. RGB 색상

포토샵의 RGB 색상과 일치하며 R(빨간색), G(녹색), B(파란색) 세 가지 색상의 비율로 일치합니다.

p{color:rgb(133,45,200);}

각 항목의 값은 0~255 사이의 정수 또는 0%~100% 사이의 백분율일 수 있습니다. 예:

p{color:rgb(20%,33%,25%);}

3. 16진수 색상

이 색상 설정 방법은 현재 더 일반적으로 사용되는 방법이며 그 원리는 실제로 RGB 설정입니다. 각 항목의 값이 0~255에서 16진수 00~ff로 변경되었습니다.

p{color:#00ffff;}

2. 길이 값
요약하자면, 현재 길이 단위는 px(픽셀), em, % 백분율로 더 일반적으로 사용됩니다. 이 세 가지 단위는 실제로 상대적입니다. 단위.

1. 픽셀

픽셀은 왜 상대적인 단위인가요? 픽셀은 디스플레이의 작은 점을 나타내기 때문입니다(CSS 사양에서는 "90픽셀 = 1인치"로 가정). 실제 상황은 브라우저가 디스플레이의 실제 픽셀 값을 사용한다는 것입니다. 현재 대부분의 디자이너는 픽셀(px)을 단위로 사용하는 경향이 있습니다.

2.em

은 요소의 글꼴 크기 값이 14px이면 1em = 14px입니다. 18px이면 1em =18px입니다. 다음 코드:

p{font-size:12px;text-indent:2em;}

위 코드는 단락의 첫 번째 줄을 24픽셀(즉, 두 글꼴 크기 사이의 거리) 들여쓰기할 수 있습니다.

아래 특수한 경우를 참고하세요.

단, 글꼴 크기 단위를 em으로 설정하면 이때 계산 기준은 상위 요소의 글꼴 크기를 기준으로 합니다. p의. 다음 코드:

html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}

결과적으로 범위의 글꼴 "예제" 글꼴 크기는 11.2px(14 * 0.8 = 11.2px)입니다.

3.퍼센트

p{font-size:12px;line-height:130%}

줄 높이(줄 간격)를 글꼴의 130%(12 * 1.3 = 15.6px)로 설정합니다.

위 내용은 [CSS Note 9]의 단위와 값에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!