HTML 텍스트 설정 색상

王林
풀어 주다: 2023-05-09 09:44:37
원래의
3164명이 탐색했습니다.

HTML 텍스트 색상 설정

HTML에서는 텍스트 색상을 설정하여 페이지를 더욱 다채롭게 보이게 할 수 있습니다. 텍스트 색상 설정은 텍스트 단락, 제목, 링크 등과 같은 다양한 요소에 적용될 수 있습니다. 이번 글에서는 HTML에서 텍스트 색상을 설정하는 방법과 CSS를 사용하여 텍스트 색상을 보다 편리하게 제어하는 방법을 소개하겠습니다.

  1. HTML 텍스트 색상 기본 설정

HTML에서는 색상 이름이나 16진수 색상 값을 사용하여 텍스트 색상을 정의할 수 있습니다. 다음은 일반적으로 사용되는 HTML 색상 이름입니다.

  • red: 빨간색
  • green: 녹색
  • blue: 파란색
  • black: 검정색
  • white: 흰색

다음과 같은 방법으로 색상을 적용할 수 있습니다.

这是红色的文本。

这是绿色的文本。

这是蓝色的文本。

这是黑色的文本。

这是白色的文本。

로그인 후 복사

위의 예에서는 스타일 속성을 사용하여 색상을 설정했습니다. style 속성에 color 속성을 추가하면 텍스트의 색상을 설정할 수 있습니다.

색상 이름을 사용하는 것 외에도 16진수 색상 값을 사용하여 텍스트 색상을 정의할 수도 있습니다. 다음은 몇 가지 예입니다.

这是红色的文本。

这是绿色的文本。

这是蓝色的文本。

这是黑色的文本。

这是白色的文本。

로그인 후 복사

위 예에서는 # 문자와 색상 코드를 사용하여 색상을 설정했습니다. 색상 코드는 6개의 16진수 숫자로 구성되며 각각 빨간색, 녹색, 파란색의 밝기 값을 나타냅니다. 예를 들어 #ff0000은 빨간색을 나타내고, ff는 빨간색의 최대 밝기 값을 나타냅니다.

  1. CSS를 사용하여 텍스트 색상 설정

위 예에서는 스타일 속성을 사용하여 텍스트 색상을 설정했습니다. 하지만 대규모 웹사이트나 프로젝트의 경우 여러 페이지와 요소에 동일한 스타일을 적용해야 합니다. 이 경우 CSS를 사용하여 페이지의 모양과 스타일을 제어할 수 있습니다.

먼저 내부 스타일시트를 사용하여 텍스트 색상을 설정하는 방법을 살펴보겠습니다. 내부 스타일 시트는 HTML 문서의 헤드에 있는

这是标题

这是一段文本。

链接
로그인 후 복사

위 예에서는 서로 다른 세 가지 스타일 선택기를 사용하여 다양한 요소의 텍스트 색상을 정의했습니다. 예를 들어 p 선택기를 사용하여 모든 단락 요소를 선택하고 텍스트 색상을 빨간색으로 설정했습니다. 우리는 h1 선택기를 사용하여 모든 제목 요소를 선택하고 텍스트 색상을 파란색으로 설정했습니다. 선택기를 사용하여 모든 링크 요소를 선택하고 텍스트 색상을 녹색으로 설정했습니다.

내부 스타일 시트를 사용하는 것 외에도 외부 스타일 시트나 인라인 스타일을 사용하여 텍스트 색상을 설정할 수도 있습니다. 외부 스타일 시트는 HTML 문서의 헤드에서 가져와야 하는 또 다른 CSS 파일입니다. 인라인 스타일은 내부 스타일 시트와 유사하며 요소 내에 작성된 스타일 속성입니다. 외부 스타일 시트나 인라인 스타일을 사용하는 것은 필요한 모든 텍스트 색상 옵션을 정의할 수 있는 내부 스타일 시트와 유사하게 작동합니다.

요약

HTML에서는 스타일 속성에서 설정할 수 있는 색상 이름이나 16진수 색상 코드를 사용하여 텍스트 색상을 정의할 수 있습니다. 내부 스타일 시트, 외부 스타일 시트 또는 인라인 스타일을 사용하여 텍스트 색상을 설정할 수 있습니다. CSS를 사용하면 페이지 스타일을 보다 유연하게 제어하고, 중복 코드를 제거하고, 페이지를 더 쉽게 유지 관리하고 업데이트할 수 있습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!