CSS에서 글꼴 색상 설정은 기본 스타일 속성입니다. color 속성을 통해 구현됩니다. 이번 글에서는 color 속성을 이용하여 글꼴 색상을 설정하는 방법을 알아 보겠습니다.

color 속성

color 속성은 CSS에서 색상을 설정하는 데 사용되는 속성입니다. 텍스트, 배경, 테두리 및 기타 요소의 색상을 설정하는 데 사용할 수 있습니다.

색상 속성은 빨간색, 녹색 등 미리 정의된 색상 이름을 사용하거나 16진수 또는 RGB 값을 사용하여 색상을 지정할 수 있습니다.

다음은 color 속성을 사용하여 글꼴 색상을 설정하는 몇 가지 예입니다.

h1 {
color: red;
}

p {
color: #0000ff;
}

span {
color: rgb(255 , 0 , 0);
}

위 코드에서는 빨간색, 파란색, RGB 빨간색을 사용하여 다양한 요소의 색상을 설정했습니다.

사전 정의된 색상 이름

CSS에는 직접 사용할 수 있는 사전 정의된 색상 이름이 있습니다. 다음은 일반적으로 사용되는 색상 이름과 해당 색상입니다.

• 빨간색: 빨간색
• 녹색: 녹색
• 파란색: 파란색
• 검정색: 검정
• 흰색: 흰색
• 회색: 회색
• 노란색: 노란색
• 보라색: 보라색
• orange: 주황색

물론 위의 내용은 일부일 뿐이며, 이 외에도 사용할 수 있는 다른 색상 이름이 많이 있습니다.

16진수 색상 코드

미리 정의된 색상 이름 외에도 16진수 색상 코드를 사용하여 색상을 지정할 수도 있습니다. 16진수 색상 코드는 6개의 문자로 구성되며, 처음 두 문자는 빨간색, 가운데 두 문자는 녹색, 마지막 두 문자는 파란색을 나타냅니다. 각 문자는 0-9 사이의 숫자 또는 A-F 사이의 문자일 수 있습니다. 다음은 몇 가지 예입니다.

000000: 검정색

ffffff: 흰색

ff0000: 빨간색

00ff00: 녹색

0000ff: 파란색

RGB 색상 값

RGB 색상 값은 빨간색, 녹색, 파란색을 지정하여 결정됩니다. 색상 값은 색상을 정의하는 데 사용됩니다. 각 값의 범위는 0~255입니다. 다음은 몇 가지 예입니다.

rgb(255, 0, 0): 빨간색
rgb(0, 255, 0): 녹색
rgb(0, 0, 255): 파란색
rgb(128, 128, 128): 회색

투명도 설정

color 속성을 통해 글꼴의 투명도를 설정할 수도 있습니다. 투명도는 opacity 속성을 사용하여 지정하며 값 범위는 0~1이며, 0은 완전히 투명하고 1은 완전히 불투명합니다. 예는 다음과 같습니다.

p {
color: rgba(0, 0, 255, 0.5);
}

위 코드에서는 rgba()를 사용하여 색상과 투명도를 설정합니다. 그 중 r, g, b는 각각 빨간색, 녹색, 파란색의 세 가지 색상의 값을 나타내고, a는 투명도를 나타냅니다. 이 예에서는 색상을 파란색으로 설정하고 투명도를 0.5(투명도 50%)로 설정했습니다.

결론

위의 설명을 통해 CSS에서 글꼴 색상 설정은 매우 편리한 스타일 속성임을 알 수 있습니다. 요소의 글꼴 색상을 변경하려면 필요한 색상만 지정하면 됩니다. 동시에 페이지의 시각적 효과를 향상시키기 위해 투명도를 설정하여 글꼴의 투명도를 제어할 수도 있습니다.

위 내용은 CSS 글꼴 색상 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!