HTML에서 글꼴 색상을 설정하는 방법(3가지 방법)-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

HTML에서 글꼴 색상을 설정하는 방법(3가지 방법)

PHPz

Apr 13, 2023 pm 01:37 PM

HTML은 일반적인 웹 페이지 마크업 언어로, 기본 요소에는 텍스트, 그림, 오디오 및 기타 형식이 포함됩니다. 그 중 텍스트는 페이지에서 정보를 전달하는 기본 요소 중 하나입니다. 다양한 글꼴과 색상은 방문자에게 다양한 시각적 경험을 제공하고 페이지의 아름다움과 가독성을 향상시킬 수 있습니다.

HTML 글꼴 색상 설정은 CSS 스타일 시트를 통해 수행할 수 있습니다. CSS 스타일 시트는 HTML 코드와 별도로 배치할 수 있어 페이지 레이아웃의 유연성과 유지 관리 가능성이 향상됩니다. 글꼴 색상을 설정하는 방법은 다음과 같습니다.

1. 인라인 스타일에서 글꼴 색상을 설정합니다.

HTML 태그에 style 속성을 직접 추가한 후 style 속성에 color 속성을 추가합니다. 예:

<p style="color:red;">这是一段红色的文字</p>

로그인 후 복사

그 중 색상 속성 값은 색상 이름, 16진수 색상 값, RGB 색상 값, HSL 색상 값이 될 수 있습니다. 일반적으로 사용되는 색상 이름에는 빨간색, 녹색, 파란색, 검정색, 흰색 등이 있습니다. 일반적으로 사용되는 색상표를 살펴보겠습니다.

색상 이름	색상 값
black	#000000
white	#FFFFFF
실버	# C0C0C0
회색	#808080
빨간색	#FF0000
녹색	#008000
파란색	#0000 FF

2. 내부에서 글꼴 색상을 설정합니다. style sheet

HTML 문서의 head 부분에 스타일 태그를 추가한 후, 스타일 태그에 색상을 지정해야 하는 요소와 색상 속성 값을 정의하세요. 예:

<head>
  <style>
    p{
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一段蓝色的文字</p>
</body>

로그인 후 복사

이런 방식으로 본문에 정의된 모든 p 요소는 자동으로 스타일 시트 p{}의 색상 속성을 적용하고 파란색으로 설정합니다. 이렇게 하면 여러 요소의 색상을 일괄적으로 설정할 수 있습니다.

3. 외부 스타일 시트로 글꼴 색상 설정

독립적인 스타일 시트 파일을 생성하고, 색상을 지정해야 하는 요소를 클래스 이름으로 정의한 다음 HTML 문서에서 스타일 시트 파일을 연결합니다. 예:

스타일 시트 파일 style.css에서 클래스 이름을 정의합니다.

.title{
  color: red;
}

로그인 후 복사

이 스타일 시트를 HTML 문서에 도입합니다.

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1 class="title">这是一段红色的标题</h1>
</body>

로그인 후 복사

이런 방식으로, 의 제목 h1 요소에 class="title"을 추가한 후 HTML 문서의 경우 스타일 시트에 색상 속성을 자동으로 적용하고 빨간색으로 설정합니다.

요약하자면, HTML 글꼴의 색상을 설정하는 방법은 페이지 요구 사항과 개인 취향에 따라 다릅니다. 그러나 어떤 방법을 사용하든 페이지의 전체적인 아름다움과 가독성을 고려하여 합리적인 매칭과 명확한 업무 분담을 달성해야 합니다. 이 글이 독자들에게 도움이 되기를 바랍니다.

위 내용은 HTML에서 글꼴 색상을 설정하는 방법(3가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.