문단마다 여러가지 스타일을 지정해 줄 수 있다.
1. 문장의 밑줄 효과(Underline)
2. 문장의 취소선 효과(line-through)
3. 링크 위에 마우스를 올리면 밑줄이 나타난다.
4. 텍스트의 그림자 효과
효과들을 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../css/paragraph_style.css" rel="stylesheet">
</head>
<body>
<h1>문단 스타일 설정</h1>
<p id="text1">CSS의 문장과 문단 스타일</p>
<p id="text2">문장의 밑줄 효과(Underline)</p>
<p id="text3">문장의 취소선 효과(line-through)</p>
<a href="https://www.daum.net">다음으로 이동.</a>
<br><br>링크 위에 마우스를 올리면 밑줄이 나타난다.<br>
<p id="text4">텍스트의 그림자 효과1</p>
<p id="text5">텍스트의 그림자 효과2</p>
<p id="text6">텍스트의 그림자 효과3</p>
</body>
</html>
@charset "utf-8";
h1 {
text-align: center;
text-indent: 50px;
}
#text1 {
text-transform: capitalize;
}
#text2 {
text-decoration: underline;
}
#text3 {
text-decoration: line-through;
}
#text4 {
color: orange;
text-shadow: 1px 1px;
}
#text5 {
font-weight: 700;
text-shadow: 5px 5px red;
}
#text6 {
font-weight: bold;
color: white;
text-shadow: 5px -5px 2px black;
}
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: red;
}
a:visited {
color: burlywood;
}
728x90
반응형
'HTML > CSS 기초' 카테고리의 다른 글
| [CSS] border와 outline (0) | 2020.07.29 |
|---|---|
| [CSS] margin 설정하기 (0) | 2020.07.28 |
| [CSS] 글자 스타일 (0) | 2020.07.28 |
| [CSS] prefix (0) | 2020.07.28 |
| [CSS] 외부 스타일 (0) | 2020.07.28 |
