다음 텍스트 장식 속성의 도입으로 이제 이전보다 더 많은 방법으로 텍스트의 스타일을 지정할 수 있습니다. text-decoration은 text-decoration-thickness, text-decoration-color, text-decoration-line 및 text-decoration-style의 약어입니다. text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset 및 text-underline-position을 명시적으로 지정해야 합니다.
구문
CSS 텍스트 장식의 구문은 다음과 같습니다 -
Selector {
text-decoration: /*value*/
} 예시
다음 예는 CSS text-decoration 속성을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
text-decoration-style: double;
text-decoration-skip-ink: auto;
}
p {
padding: 2%;
text-decoration-line: underline overline;
text-decoration-style: wavy;
}
p:nth-of-type(even) {
text-decoration: overline;
}
span {
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
<p>Random Demo Text</p>
<p>Random <span>Demo</span> Text</p>
</body>
</html> 이것은 다음과 같은 출력을 제공합니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 3%;
font-size: x-large;
text-decoration-line: underline overline;
text-decoration-style: dotted;
text-decoration-skip-ink: none;
text-decoration-thickness: 4px;
}
</style>
</head>
<body>
<p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html> 이것은 다음과 같은 출력을 제공합니다.
