<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 스타일 적용</title>
<link rel="stylesheet" href="css02.css" type="text/css"></link>
<!-- 내부 스타일 -->
<style>
h1{
background:lightblue;
}
*{
margin:0;
}
/*기본 부모 16px = 1em */
ol>li{
font-family: 궁서체;
font-size: 1.5em;
font-style: italic;
font-weight: bold;
/*노란색은 li이고 하얀색은 ul */
}
ul>li{
/*list-style-type:none;
list-style-image:url(../img/button.png);*/
list-style-position: inside;
background:yellow;
}
ul{
padding:0;
}
</style>
</head>
<body>
<h1>내부 스타일 적용</h1>
<ul>
<li ><a href="../Index.html">홈으로</a></li>
<li><a href="https://www.nate.com">네이트 </a></li>
<li><a href="https://www.daum.net">다음 </a></li>
</ul>
<ol>
<li style="color:hotpink; text-align:center; ">해바라기</li>
<li style="color:#FF69B4; line-height:100px; ">맨드라미</li>
<li style="color:#CC64">맨드라미</li>
<li style="color:rgb(255, 105, 180)">코스모스</li>
<li style="color:rgb(255, 105, 180, .1)">코스모스</li>
</ol>
</body>
</html>css02.css 시트
@charset "UTF-8";
h1{
color:red;
}
/*
***a태그에 스타일 적용하기 ***
방문한적이 없는 일반적인 링크:link,
마우스 올려놓을 때 :hover,
방문했을 때:visited,
클릭하고 있을 때:active
*/
a:link, a:visited{
color:"gray";
/*
underlineL 밑줄, overline:윗 줄, line-through: 취소선, none: 선없음
*/
text-decoration:none;
}
a:hover{
text-decoration: underline;
}
a:active{
color:red
}결과
풀스택eDot