집 > 기사 > 웹 프론트엔드 > HTML 텍스트 장식

HTML 텍스트 장식

WBOY원래의: 2024-09-04 16:40:57416검색

HTML의 텍스트 장식은 다양한 방식으로 텍스트를 장식하는 데 사용됩니다. text-design은 텍스트 장식에 사용되는 속성입니다. text-장식 속성은 underline, overline, line-through, underline overline 값을 사용하여 텍스트를 다양한 방식으로 장식합니다.

실시간 예: 텍스트 장식 윗줄, 밑줄, 줄바꿈 값은 로그인 사용자가 인간인지 로봇인지 확인하는 동안 보안 문자를 생성하는 데 사용됩니다. 왜냐하면 텍스트 위에 있는 줄은 로봇이 완벽하게 인식할 수 없기 때문입니다.

유형:

텍스트 장식: 없음;
텍스트 장식: 윗줄;
텍스트 장식: 줄 관통;
텍스트 장식: 밑줄;

HTML에서 텍스트 장식은 어떻게 작동하나요?

텍스트 장식 속성은 없음, 윗줄, 줄바꿈 및 밑줄을 기반으로 작동합니다

1. 없음

구문:

text-decoration: none;

설명: 텍스트에 어떠한 장식도 주지 않습니다. 일반 텍스트와 같습니다.

2. 윗줄

구문:

text-decoration: overline;

설명: 텍스트 위에 1px 크기로 한 줄을 줍니다.

3. 라인스루

구문:

text-decoration: line-through;

설명: 텍스트 중앙부터 1px 크기로 줄을 그어줍니다.

4. 밑줄

구문:

text-decoration: underline;

설명: 텍스트 하단에 1px 크기로 한 줄을 줍니다.

5. 깜박임

구문:

text-decoration: blink;

설명: 불투명도 0%에서 100%까지 다양한 색상으로 텍스트를 깜박이게 합니다.

참고: 최신 브라우저의 깜박임 기능은 더 이상 사용되지 않습니다. 이제는 전혀 사용되지 않습니다.

텍스트 장식 속성은 점선, 물결선, 실선, 홈 등과 같은 기본 스타일 외에 색상을 사용하여 윗줄, 선 통과, 밑줄을 다른 스타일로 만들 수도 있습니다. 아래 구문을 보실 수 있습니다.

구문:

text-decoration: underline dotted red;

HTML 텍스트 장식의 예

다음은 HTML 텍스트 장식의 예입니다.

예 #1 – 없음

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.none {
text-decoration: none;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:none</h1>
<p class="none">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in the development of back end features in Spring MVC with Hibernate. Developed importing models and logic in the Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

출력:

HTML 텍스트 장식

설명: 보시다시피 text-장식: none은 단락 텍스트에 줄 장식을 줄 수 없습니다.

예 #2 – 밑줄

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.underline {
text-decoration: underline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:underline</h1>
<p class="underline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

출력:

HTML 텍스트 장식

설명: 보시다시피 text-design: underline은 텍스트 아래에 줄을 표시합니다.

예 #3 – 윗줄

텍스트 장식: 윗줄 예:

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.overline{
text-decoration: overline;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:overline</h1>
<p class="overline">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

출력:

HTML 텍스트 장식

설명: 보시다시피 text-design: overline은 텍스트 위에 줄을 표시합니다.

예 #4 – 라인스루

텍스트 장식:줄 통과 예:

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.through {
text-decoration: line-through;
font-size:20px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:line-through</h1>
<p class="through">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

출력:

HTML 텍스트 장식

설명: 보시다시피 text-design: line-through는 텍스트 중간부터 줄을 그어줍니다.

예시 #5

단선, 이중선, 물결 모양 밑줄, 통과선, 윗선을 사용한 텍스트 장식 예:

코드:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align:center;
color:green;
}
.p1 {
text-decoration:solid overline brown;
font-size:18px;
}
.p2 {
text-decoration:double line-through blue;
font-size:18px;
}
.p3 {
text-decoration:wavy underline red;
font-size:18px;
}
}
</style>
</head>
<body>
<h1>Demo for text-decoration:solid overline brown</h1>
<p class="p1">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:double line-through blue</h1>
<p class="p2">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
<h1>Demo for text-decoration:wavy underline red</h1>
<p class="p3">
Executed and contributed to full-stack web development projects, with an emphasis on front end
features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.
Assisted in development of back end features in Spring MVC with Hibernate. Developed importing models and logic in Office Note app to store spreadsheet data and deployed
to host.
</p>
</body>
</html>

출력:

HTML 텍스트 장식

설명: 보시다시피 첫 번째 문단에는 실선 윗줄이 있고, 두 번째 문단에는 이중선이 그어져 있고, 세 번째 문단에는 물결 모양의 밑줄 텍스트 장식 스타일이 있습니다.

결론

텍스트 장식은 윗줄, 밑줄, 줄바꿈 속성 값과 색상에 관계없이 다양한 선 스타일로 스타일을 지정할 수 있습니다.

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

html if for while double Property default

성명：

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

이전 기사：HTML URL 인코딩다음 기사：HTML URL 인코딩

관련 기사

더보기