CSS를 사용하면 외부 스타일 시트를 파일에 연결할 수 있습니다. 이렇게 하면 CSS를 개별적으로 변경하고 페이지 로드 시간을 개선하는 데 도움이 됩니다. 외부 파일은 문서의
안의 태그에 지정됩니다.구문
외부 CSS를 포함하는 구문은 다음과 같습니다.
<link rel="stylesheet" href="#location">
예시
다음 예는 CSS 파일이 포함되는 방법을 보여줍니다. &miuns;
HTML 파일
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Demo Text</h2> <div> <ul> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> </ul> </div> </body> </html>
CSS 파일
h2 {
color: red;
}
div {
background-color: lightcyan;
} 출력
이것은 다음과 같은 출력을 제공합니다 -
예시
HTML 파일
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Demo Heading</h2> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
CSS 파일
p {
background: url("https://www.tutorialspoint.com/images/QAicon.png");
background-origin: content-box;
background-size: cover;
box-shadow: 0 0 3px black;
padding: 20px;
background-origin: border-box;
} 출력
이것은 다음과 같은 출력을 제공합니다 -
