>  기사  >  웹 프론트엔드  >  HTML에서 글꼴 색상을 설정하는 방법은 무엇입니까? CSS에서 글꼴 색상을 설정하는 방법 소개

HTML에서 글꼴 색상을 설정하는 방법은 무엇입니까? CSS에서 글꼴 색상을 설정하는 방법 소개

寻∝梦
寻∝梦원래의
2018-09-04 13:40:3025846검색

html에서는 html 태그의 단점을 보완하기 위해 CSS 스타일을 자주 사용합니다. 오늘은 기본 CSS 스타일을 사용하여 텍스트 색상을 변경하는 방법에 대해 알아보겠습니다. 나중에 연습하고 인상을 깊게 할 수 있습니다.

1. 먼저 html 글꼴의 기본 코드를 보여드리겠습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<p>这里是PHP中文网html</p>
<p>这里是PHP中文网css</p>
<p>这里是PHP中文网php</p>
<p>这里是PHP中文网python</p>
</body>
</html>

여기 p 태그의 네 문단이 있습니다. 이것은 가장 간단한 코드 스타일입니다. (더 보고 싶으면 여기로 오세요: css 비디오 강좌)

둘째, html 글꼴 색상을 설정해야 합니다. CSS 스타일 코드를 살펴보겠습니다:

<style type="text/css">
p{color: blue}
</style>

이것은 설정입니다. p 태그에서 CSS 스타일을 위 HTML의 head 태그에 넣으면 효과를 볼 수 있습니다.

HTML에서 글꼴 색상을 설정하는 방법은 무엇입니까? CSS에서 글꼴 색상을 설정하는 방법 소개

이제 HTML의 단락 p가 변경되었는지 살펴보겠습니다. 라벨 매개변수 스타일 디자인의 변경으로 인해 모든 글꼴이 변경되었습니다. 문장 중 하나를 변경하려면 어떻게 해야 합니까?

전체 코드를 다시 살펴보겠습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
p{color: blue}
.php_1{color: yellow}
</style>
</head>
<body>
<p>这里是PHP中文网html</p>
<p>这里是PHP中文网css</p>
<p class="php_1">这里是PHP中文网php</p>
<p>这里是PHP中文网python</p>
</body>
</html>

세 번째 단락에 클래스 속성을 추가하여 세 번째 p 태그를 클래스로 만들었습니다. 이제 클래스를 사용하여 세 번째 p 태그를 설정해 보겠습니다. 노란색으로, 효과를 살펴보겠습니다.

HTML에서 글꼴 색상을 설정하는 방법은 무엇입니까? CSS에서 글꼴 색상을 설정하는 방법 소개

이제 세 번째 단락의 텍스트가 노란색으로 변한 것을 쉽게 볼 수 있습니다.

3. 텍스트 색상 변경 CSS 스타일 요약:

기본 단락 속성을 설정하는 데 일반적으로 사용되는 CSS 스타일입니다. 이 글의 색상을 변경할 수 있고, 물론 텍스트의 다른 내용도 변경할 수 있습니다. 이를 이해하면 위에서 클래스를 언급한 것과 동일한 내용을 쉽게 이해할 수 있습니다. 물론 이것은 많은 사람들이 사용할 수 있는 인기 있는 이름입니다. 이 이름을 다른 태그에 추가하면 다른 태그도 이 효과를 가질 수 있습니다.

【에디터 추천】

html5 헤더 태그는 어떻게 사용하나요? html5 헤더 태그 기능 소개

html 하이퍼링크의 글꼴 색상을 변경하는 방법은 무엇입니까? 하이퍼링크 글꼴 색상 변경 방법 요약

위 내용은 HTML에서 글꼴 색상을 설정하는 방법은 무엇입니까? CSS에서 글꼴 색상을 설정하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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