CSS 공통 속성 색상 및 단위

CSS 코드 작성에서는 색상과 단위를 추정하는 것이 필수적입니다. 하지만 CSS에서 색상과 단위 값을 작성하는 방법은 다양하므로 이를 명확히 할 필요가 있습니다.

Color

프론트엔드를 막 배우던 중, 질문이 생겼습니다. 웹 페이지 색상?" 색상을 설정하는 데에는 일반적으로 영어 색상 이름이나 16진수 색상 값을 사용하지만 CSS에는 이 외에도 좀 더 복잡한
작성 방법이 있습니다.

RGB 색상

컴퓨터는 RGB 색상이라고도 하는 다양한 수준의 빨간색, 녹색, 파란색을 통해 새로운 색상을 생성합니다. . 이러한 색상 생성 메커니즘을 사용하면 다양한 색상 레벨을 직접 부여하여 색상을 결정할 수 있으며,
세 가지 색상의 값을 직접 조합할 수도 있습니다.

쓰기 방법:
h1{color:rgb(100%,100%,100%)} 백분율 rgb 색상 쓰기 방법, 숫자 범위는 0%~100%
h1{color:rgb(0,255,255)} 숫자 rgb 색상 표기 방식, 숫자 범위는 0~255

참고: 두 가지 쓰기 방법의 값 All은 잘립니다. 백분율은 0%-100%로 잘립니다. 즉, 100%를 초과하면 100%로 잘립니다. 0% 미만이면 0%로 잘리고 숫자는 0~255까지 잘립니다. 또한 둘을 혼합하여 쓸 수 없으며 혼합 쓰기가 적용되지 않습니다.

16진수 색상 및 색상 이름 설정 색상은 더 이상 언급하지 않겠습니다

단위

길이 단위: 일반적으로 절대 단위와 상대 단위로 구분됩니다. 절대 단위는 탄생 이후 거의 사용되지 않았으며 적어도 프로젝트에서는 거의 사용하지 않습니다. 따라서 여기서는 절대 단위의 도입을 생략합니다.

상대 단위: em, ex, px의 세 가지 상대 길이 단위가 있습니다. 처음 두 개는 각각 "요소의 글꼴 높이"와 "shezhi'x' 문자의 높이"를 나타냅니다. 마지막 px는 "픽셀"을 나타냅니다. 🎜> 디스플레이 해상도에 의존하기 때문에 상대적입니다.

em: CSS에서 "em"은 지정된 글꼴의 글꼴 크기 값입니다. 유일한 예외는 글꼴 크기를 설정할 때입니다. 이 경우 em 값은 상위 요소를 기준으로 합니다.

예:

• body{font-size:20px;}

• p{font-size:1em;}

이때 p의 글꼴 크기는 20px입니다. , 기본 16px가 아닙니다.

px: 픽셀 값 px에 따라 설정합니다. 예를 들어

body{font-size:20px;}
p{font-size:16px;}
p 요소 글꼴 크기는 16px입니다

백분율 값: 길이 단위에 비해 백분율은 매우 간단하며 백분율 값입니다. 예:

h1{line-height:150%;} 모든 h1의 줄 높이를 일반 줄 높이의 절반으로 설정합니다.

즉, 백분율은 항상 다른 값을 통해 계산되며, 이는 나중에 속성 설명에서 하나씩 언급됩니다. 또한 백분율은 양수일 수도 있고 음수일 수도 있습니다. 일부 속성의 경우 양수 값만 허용됩니다. 이는 또 다른 이야기입니다.

오늘은 내용이 너무 많아서 글이 좀 지저분하네요. 앞으로는 점점 더 좋은 글을 쓰셨으면 좋겠습니다.

일반적인 CSS 속성의 색상 및 단위와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!