Tách Biệt Mã CSS và HTML
Ở bài học đầu tiên này chúng ta sẽ thực hiện việc tách mã CSS nhúng vào HTML sử dụng thẻ <style>
ra một tập tin riêng và rồi sau đó trong HTML tham chiếu tới tập tin này sử dụng thẻ <link>
.
Tạo Tập Tin CSS Mới
Trong thư mục chứa các trang web HTML của website bạn hãy tạo một thư mục mới với tên là stylesheets
. Sau đó trong thư mục này bạn tiếp tục tạo một tập tin mới main.css
.
Tiếp tục bạn mở tập tin home.html
và tìm tới thẻ <style>
rồi sao chép đoạn mã bên trong thẻ này. Quay trở lại tập tin main.css
và dán nội dung được sao chép vào tập tin này. Như vậy lúc này tập tin main.css
có nội dung như sau:
#main-menu ul {
padding-left: 0;
list-style-type: none;
}
#main-menu ul li {
float: left;
margin-right: 15px;
}
.clear-float {
clear: both;
}
Tham Chiếu Tới Tập Tin CSS
Bạn quay trở lại với tập tin home.html
và xoá toàn thẻ style
cùng nội dung bên trong thẻ này. Sau đó, phía trước thẻ đóng </head>
bạn thêm thẻ <link>
như trong đoạn mã HTML sau:
...
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./stylesheets/main.css">
</head>
...
Cuối cùng sử dụng trình duyệt và mở trang home.html
để kiểm tra kết quả. Nếu làm đúng như theo hướng dẫn bạn sẽ thấy trình duyệt hiển thị như sau:
Trước khi kết thúc bài học bạn cần thực hiện thao tác xoá bỏ thẻ <style>
và thêm thẻ <link>
để tham chiếu tới tập tin main.css
cho hai tập tin HTML còn lại là about.html
và contact.html
.