Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS를 사용한 텍스트 장식

<시간/>

CSS text-decoration 속성은 선택한 요소의 텍스트에 데코레이션을 적용하는 데 사용됩니다. line-through, overline, underline 등을 값으로 추가할 수 있습니다. text-decoration-line, text-decoration-color 및 text-decoration-style의 약칭입니다.

구문

text-decoration 속성의 구문은 다음과 같습니다 -

Selector {
   text-decoration: /*value*/
}

예시

다음 예는 CSS 텍스트 장식 속성을 보여줍니다 -

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)::before {
   content: " We will reach the destination ";
   background-color: lightgreen;
   text-decoration: overline blue;
   font-size: 1.2em;
}
</style>
</head>
<body>
<p>I'm not the only traveller</p>
<p>
before night.
</p>
</body>
</html>

출력

이것은 다음 출력을 제공합니다 -

CSS를 사용한 텍스트 장식

예시

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background: rgb(204,22,50);
   text-decoration: blue line-through;
   font-style: italic;
   color: white;
}
p {
   text-decoration: underline;
}
</style>
</head>
<body>
<h2>Department Details</h2>
<p>
The employees of Department Marketing, Operations, Finance,
<span>IT</span>
are requested to email their original documents.<span> Delay in submission will lead to delayed verification.</span>
</p>
</body>
</html>

출력

이것은 다음 출력을 제공합니다 -

CSS를 사용한 텍스트 장식