CSS 텍스트 밑줄 설정 방법 소개-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 텍스트 밑줄 설정 방법 소개

不言

Nov 05, 2018 pm 02:22 PM

전체 웹 디자인에서 가장 쉽게 식별할 수 있는 스타일은 여전히 밑줄이 그어진 파란색 텍스트이며, 대부분 다른 웹 페이지로 연결됩니다. 링크 요소 에는 기본적으로 스타일이 있으며 기본 모드에서는 파란색이 유일한 색상입니다. 오늘날의 링크 요소에 더 이상 밑줄을 그을 필요가 없더라도 텍스트 아래의 줄은 단순히 오늘날의 링크 식별자가 아니라 이 지식 포인트를 이해해야 합니다. 이 기사는 주로 밑줄 텍스트 수정 CSS 옵션과 "링크"에 관한 것입니다. 옵션.

먼저 빠르고 쉽고 규칙적인 밑줄이 필요한 경우 텍스트 색상의 기본 위치에 텍스트 색상을 생성하는 HTML 요소 를 사용할 수 있습니다. 실제로 요소는 단순히 텍스트 장식을 추가합니다. 텍스트는 브라우저에 내장된 CSS를 사용하여 밑줄이 그어집니다. (관련 권장 사항: css 온라인 매뉴얼)

CSS 텍스트 밑줄 설정 방법 소개

효과는 다음과 같습니다.

CSS 텍스트 밑줄 설정 방법 소개

위 내용이 원하는 내용이 아닐 수도 있습니다. 다음으로 CSS를 사용하여 텍스트 아래에 줄을 추가하는 방법을 소개하겠습니다. . 두 가지 선택적 방법이 있습니다

첫 번째는 텍스트에 추가할 장식을 지정하는 텍스트 장식 속성입니다. 이 속성에 가능한 값은 밑줄, 윗줄 및 줄바꿈입니다. text-장식 속성은 text-장식-라인, 텍스트 장식-색상, 텍스트 장식-스타일의 약어 속성이어야 하는데 아직 지원되지 않습니다. 이제 텍스트 장식 속성이 있으므로 텍스트 아래에 선을 추가하고 색상을 지정할 수 있으며 해당 선과 텍스트 스타일에 색상을 지정할 수 있으며 밑줄을 이중, 점, 점선 또는 물결 모양으로 만들 수 있습니다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	p{
		text-decoration: underline;
	}
	</style>
</head>
<body>
<p>我有一条文字下划线</p>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다:

CSS 텍스트 밑줄 설정 방법 소개

다른 모양의 텍스트 밑줄 예:

css 점선 밑줄:

p{
		text-decoration: underline;
		text-decoration-style: dotted;
	}

로그인 후 복사

효과는 다음과 같습니다:

CSS 텍스트 밑줄 설정 방법 소개

css 분홍색 실선 밑줄:

p{
		text-decoration: underline;
		text-decoration-color: red;
	}

로그인 후 복사

효과는 다음과 같습니다:

CSS 텍스트 밑줄 설정 방법 소개

css 물결 모양 밑줄:

p{
		text-decoration: underline;
		text-decoration-color: red;
		text-decoration-style: wavy;
	}

로그인 후 복사

효과는 다음과 같습니다.

CSS 텍스트 밑줄 설정 방법 소개

두 번째는 border-bottom 속성을 사용하는 것입니다. 표시 속성은 inline 이어야 합니다. 이 방법을 사용하면 padding-bottom 속성을 사용하여 선의 위치, border-bottom-width로 선 두께, border-bottom-style로 스타일, border-bottom-color로 색상을 제어할 수 있습니다. 테두리 하단 스타일에는 텍스트 장식 스타일 및 일부 3D 효과 옵션과 동일한 옵션이 있습니다. 이 옵션은 더 많은 옵션과 변수를 제공하지만 이 방법을 사용하는 것이 번거로울 수 있습니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	p{
		border-bottom-width: 5px;
		border-bottom-style: dashed;
		border-bottom-color: green;
		padding-bottom: 10px;
	}
	</style>
</head>
<body>
<p>我有一条文字下划线</p>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS 텍스트 밑줄 설정 방법 소개