웹 프론트엔드 HTML 튜토리얼 HTML 글꼴 색상을 설정하는 방법

HTML 글꼴 색상을 설정하는 방법

Mar 01, 2021 pm 03:31 PM
html

HTML 글꼴 색상 설정 방법: 1. ".blue{color:blue;}"와 같은 코드로 외부 CSS 스타일을 통해 설정합니다. 2. "style="color:white;와 같은 코드로 내부 CSS 스타일을 통해 설정합니다. 3. 글꼴 태그를 통해 설정합니다.

HTML 글꼴 색상을 설정하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

HTML은 주로 페이지 레이아웃을 작성하는 데 사용됩니다. 프로세스 중에 페이지의 특정 글꼴 색상을 설정해야 하는 경우가 많습니다. 일반적으로 설정을 사용자 정의하는 세 가지 방법이 있습니다:

1. head 태그에 스타일을 추가하고, h1, p, div 및 기타 시작 태그 등 body 내의 다른 태그에 class="blue 등 위 스타일에 정의된 이름"을 추가할 수 있습니다. 코드는 다음과 같이 구현됩니다.

HTML 글꼴 색상을 설정하는 방법

2. 내부 CSS 스타일을 통해 설정합니다. h1, p, div 및 기타 시작 태그와 같은 본문의 다른 태그에 style="color:white;font-size:25px;"를 추가하기만 하면 됩니다. 코드는 다음과 같이 구현됩니다.

HTML 글꼴 색상을 설정하는 방법

[권장: HTML 비디오 튜토리얼]

3. 글꼴 태그를 통해 설정합니다. 본문의 다른 태그 내용에는 color="yellow" size="5"와 같이 글꼴 태그를 추가하여 글꼴 색상과 크기를 설정합니다. 크기의 최대값은 7이며, 글꼴 색상과 크기는 등호를 사용하여 지정됩니다. 처음 두 CSS 스타일은 영어 콜론을 사용하여 지정됩니다. 코드는 다음과 같이 구현됩니다.

HTML 글꼴 색상을 설정하는 방법

확장 정보

HTML 웹 페이지에서 글꼴 크기를 정의하는 세 가지 일반적인 단위는 px, em 및 pt입니다.

1.픽셀(Pixel)의 약어로, 웹서핑을 하는 동안 화면의 해상도에 따라 화면에 나타나는 텍스트, 그림 등이 100픽셀의 너비로 변경됩니다. 800×600의 해상도를 가지게 됩니다. 1024×768에서는 화면 너비의 1/8을 차지하지만, 1024×768에서는 약 1/10만 차지합니다. 따라서 글꼴 크기를 정의할 때 단위를 px로 사용하는 경우, 사용자가 표시 해상도를 800에서 1024로 변경하면 사용자가 실제로 보는 텍스트는 "더 작아지게"(자연 길이 단위), 심지어 불분명할 수도 있습니다. , 찾아보기에 영향을 미칩니다.

2. Em은 %로, 상대 단위이자 길이의 상대 단위입니다. 원래는 문자 M의 너비를 나타내기 때문에 이름이 em입니다. 이제 이는 문자 너비의 배수를 나타내며 사용법은 0.8em, 1.2em, 2em 등과 같은 백분율과 유사합니다. 일반적으로 1em=16px입니다. , 일반적으로 길이(예: 요소의 여백 및 패딩)를 측정하는 데 사용되는 범용 단위입니다. 글꼴 크기를 지정하는 데 사용되는 경우 em 단위는 상위 요소의 글꼴 크기를 나타냅니다.

3.pt는 포인트(pound)의 약어로, 1/72인치 크기의 고정된 길이 측정 단위입니다. 웹에서 텍스트 단위로 pt를 사용하면 화면마다 글꼴 크기가 동일(동일 해상도)되어 조판에 영향을 미칠 수 있지만, 워드에서는 pt를 사용하는 것이 매우 편리합니다. Word를 사용하는 주요 목적은 화면 탐색이 아니라 출력 및 인쇄이기 때문입니다. 엔터티로 인쇄할 때 pt는 자연 길이 단위로 편리하고 실용적입니다. 예를 들어 Word의 일반 문서에서는 "노래 글꼴 9pt"를 사용하고 제목은 "Helvetica 16pt"를 사용합니다. 인쇄할 때 항상 이렇게 커야 합니다.

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

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

핫 AI 도구

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Stock Market GPT

Stock Market GPT

더 현명한 결정을 위한 AI 기반 투자 연구

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

UC Browser_의 다른 브라우저에서 북마크를 가져 오는 방법 UC Browser의 북마크 데이터 가져 오기 방법 UC Browser_의 다른 브라우저에서 북마크를 가져 오는 방법 UC Browser의 북마크 데이터 가져 오기 방법 Sep 24, 2025 am 10:36 AM

UC 브라우저 가져 오기 기능을 통해 다른 브라우저에서 북마크를 마이그레이션 할 수 있습니다. 먼저 "북마크 가져 오기"를 선택하고 읽기 데이터를 승인합니다. 2. HTML 파일에서 수동 가져 오기 지원. 먼저 소스 브라우저에서 북마크를 HTML로 내보내고 파일 가져 오기를 선택해야합니다. 3. 클라우드 서비스를 통해 전송하고 클라우드 동기화를 활성화하고 UC 브라우저의 북마크 데이터를 가져와 마이그레이션을 완료 할 수 있습니다.

HTML에서 객체와 임베드 태그의 차이점은 무엇입니까? HTML에서 객체와 임베드 태그의 차이점은 무엇입니까? Sep 23, 2025 am 01:54 AM

TheObjectTagispreferredforembeddingexternalContentDueToitSverstatility, FollbackSupport 및 StandardScompliance, whilembedissimplerbutlacksfallandparameteroptions, mateitsuilonlyforbasicusecases.

HTML로 전체 화면 배경 이미지를 만드는 방법 HTML로 전체 화면 배경 이미지를 만드는 방법 Sep 23, 2025 am 05:43 AM

CSS를 사용하여 전체 화면 배경 이미지를 설정하면 본문의 스타일을 직접 스타일링하거나 전체 화면 용기를 사용하여 달성 할 수 있습니다. 1. 배경 크기를 덮고 배경 위치와 협력하도록 배경 크기를 설정하십시오. 이미지를 덮고 중앙에 위치하도록하는 중심; 2. 선택적으로 배경을 고정하거나 컨테이너를 사용하여 레이아웃을보다 유연하게 제어합니다. 3. 고해상도를 사용하여 그림을 최적화하고 폴백 색상을 추가하여 경험을 향상시킵니다.

의미 HTML이란 무엇입니까? 의미 HTML이란 무엇입니까? Sep 25, 2025 am 02:37 AM

SemantichtMlusesmeaningfultagslikearticle, 섹션, NAV 및 MaintOcLearDefinEcontentStructureforBothdevelopers 및 MaintOcLearDefinEcontentStructure 및 thisElementSimproveAccessibilityEnablingsCreenEradErSointerPageLayoutFectively, EnhanceSothroughbetterContorganizati

HTML의 헤드 태그는 무엇입니까? HTML의 헤드 태그는 무엇입니까? Sep 24, 2025 am 06:47 AM

TheHeadTagContaDataAndResourcesEnsentialForBrowserAndSearchEngineProcessing (Title, Char

HTML에서 비디오를 자동으로 플레이하는 방법 HTML에서 비디오를 자동으로 플레이하는 방법 Sep 25, 2025 am 05:04 AM

자동 비디오 재생을 달성하려면 비디오를 음소거해야합니다. AutoPlay 및 Muted Properties를 사용하여 HTML 비디오가 최신 브라우저에서 자동으로 재생되도록하십시오. 루프를 재생하려면 루프 속성을 추가 할 수 있습니다. 컨트롤을 제거하면 제어 막대가 표시되지 않습니다.

HTML에서 파일을 다운로드 할 수있는 링크를 강요하는 방법은 무엇입니까? HTML에서 파일을 다운로드 할 수있는 링크를 강요하는 방법은 무엇입니까? Sep 22, 2025 am 02:34 AM

다운로드 속성을 사용하여 브라우저가 파일을 열지 않고 다운로드하도록 강요하십시오. 예를 들어, 사용자 정의 파일 이름 및 상 동성 파일을 지원하는 PDFS 다운로드. Cross-Domain은 서버가 CORS 및 Content-Disposition 헤더와 협력해야합니다.

HTML에서 간단한 이미지 갤러리를 만드는 방법 HTML에서 간단한 이미지 갤러리를 만드는 방법 Sep 25, 2025 am 01:20 AM

HTML 구조를 만들고 Div 컨테이너 및 IMG 태그를 사용하여 이미지를 추가하십시오. 2. CSS로 플렉스 또는 그리드 레이아웃을 설정하고 간격 및 스타일 조정; 3. 미디어 쿼리를 통해 반응 형 디자인을 구현합니다. 4. 선택적으로 제목을 표시하기 위해 텍스트가있는 이미지 컨테이너를 추가하십시오.

See all articles