CSS cho phép chúng tôi liên kết các biểu định kiểu bên ngoài với các tệp của chúng tôi. Điều này giúp chúng tôi thực hiện các thay đổi đối với CSS một cách riêng biệt và cải thiện thời gian tải trang. Các tệp bên ngoài được chỉ định trong thẻ bên trong
của tài liệu.Cú pháp
Cú pháp để bao gồm CSS bên ngoài như sau.
<link rel="stylesheet" href="#location">
Ví dụ
Các ví dụ sau minh họa cách nhúng tệp CSS &miuns;
Tệp 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>
Tệp CSS
h2 {
color: red;
}
div {
background-color: lightcyan;
} Đầu ra
Điều này cho kết quả sau -
Ví dụ
Tệp 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>
Tệp 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;
} Đầu ra
Điều này cho kết quả sau -
