Mục đích của hướng dẫn này là hướng dẫn bạn cách liên kết đến các tệp CSS và JavaScript trong một tệp HTML. Có thể viết CSS và JavaScript trực tiếp bên trong tài liệu HTML, nhưng nói chung tốt nhất là giữ ba ngôn ngữ này trong các tệp riêng biệt của chúng
nội dung
- Cấu trúc thư mục và tệp
- HTML
- CSS
- JavaScript
1. Cấu trúc thư mục và tệp
Bạn nên giữ các tệp HTML, CSS và JavaScript của mình trong các thư mục riêng biệt. Tạo một thư mục cho dự án của bạn có tên là css-and-js
. Bên trong thư mục này, tạo thêm ba thư mục. Gọi họ là html
,
If this text is red, then you successfully linked your CSS file!
0 và If this text is red, then you successfully linked your CSS file!
1Bên trong thư mục html
của bạn, hãy tạo một tệp có tên
If this text is red, then you successfully linked your CSS file!
3. Bên trong thư mục If this text is red, then you successfully linked your CSS file!
0 của bạn, hãy tạo một tệp có tên If this text is red, then you successfully linked your CSS file!
5. Và bên trong thư mục If this text is red, then you successfully linked your CSS file!
1 của bạn, hãy tạo một tệp có tên If this text is red, then you successfully linked your CSS file!
72. HTML
Để liên kết đến các tệp CSS và JavaScript của bạn, bạn sẽ cần một tài liệu HTML để làm việc trong đó. Mở
If this text is red, then you successfully linked your CSS file!
3 và nhập mã HTML sau________số 8_______
Đảm bảo lưu công việc của bạn bất cứ khi nào bạn thêm mã vào tệp của mình. Trong hai phần tiếp theo, chúng tôi sẽ xem xét những gì bạn cần thêm vào tài liệu HTML của mình để liên kết với CSS và JavaScript của bạn
3. CSS
Trước tiên, bạn sẽ cần thêm nội dung nào đó vào phần nội dung HTML của mình để áp dụng kiểu dáng cho. Trên dòng tiếp theo sau thẻ mở đầu
If this text is red, then you successfully linked your CSS file!
9, thụt lề và thêm dòng sauIf this text is red, then you successfully linked your CSS file!
Như hiện tại, văn bản này sẽ xuất hiện với màu được xác định là màu gốc trong biểu định kiểu mặc định của trình duyệt – thường là màu đen. Để thay đổi màu của văn bản, hãy mở tệp
If this text is red, then you successfully linked your CSS file!
5 của bạn và thêmh1 {
color: red;
}
Bước cuối cùng trong phần này là liên kết đến tệp CSS bên trong tài liệu HTML của bạn. Nhập nội dung sau vào phần
h1 {
color: red;
}
1 trên dòng sau thẻ đóng h1 {
color: red;
}
2
Yếu tố
h1 {
color: red;
}
3 phải được đặt trong phần h1 {
color: red;
}
1 của tài liệu. Chú ý phần tử h1 {
color: red;
}
3 là phần tử rỗng nên không cần thẻ đóngThuộc tính
h1 {
color: red;
}
6 xác định mối quan hệ giữa tài nguyên và tài liệu HTML. Thuộc tính h1 {
color: red;
}
7 trỏ đến tệp CSS của bạnVì tệp nằm trong một thư mục khác, bạn phải chỉ định đường dẫn bằng cách đi lên một thư mục bằng hai dấu chấm [
h1 {
color: red;
}
8], tiếp theo là dấu gạch chéo [h1 {
color: red;
}
9], thư mục chứa tệp CSS của bạn [If this text is red, then you successfully linked your CSS file!
0], một dấu gạch chéo khác, rồi sau đó .
2Đây là những gì tài liệu HTML của bạn sẽ trông giống như cho đến nay
Linking to CSS and JavaScript
If this text is red, then you successfully linked your CSS file!
4. JavaScript
Tiếp theo, bạn sẽ cần thêm một số mã vào tệp JavaScript của mình. Mở
If this text is red, then you successfully linked your CSS file!
7 và thêmalert['You successfully linked your JavaScript file!'];
Lưu công việc của bạn và điều hướng trở lại tài liệu HTML của bạn. Bước cuối cùng là liên kết đến tệp JavaScript bên trong tài liệu HTML của bạn. Nhập nội dung sau vào phần
If this text is red, then you successfully linked your CSS file!
9 trên dòng sau phần tử
5
Cách tốt nhất là đặt phần tử
6 trong phần If this text is red, then you successfully linked your CSS file!
9 ngay trước thẻ đóng
8Thuộc tính
9 trỏ tới tệp JavaScript của bạnVì tệp JavaScript nằm trong một thư mục khác, bạn phải chỉ định đường dẫn trong thuộc tính
9.
Linking to CSS and JavaScript
If this text is red, then you successfully linked your CSS file!
1Đó là đoạn mã cuối cùng bạn cần nhập. Đây là giao diện của tài liệu HTML của bạn
Linking to CSS and JavaScript
If this text is red, then you successfully linked your CSS file!
Đảm bảo lưu công việc của bạn vào từng tệp trong số ba tệp của bạn. Bây giờ là lúc để xem các liên kết có hoạt động không. Mở tệp
If this text is red, then you successfully linked your CSS file!
3 của bạn trong trình duyệt bạn chọn. Khi bạn mở tệp trong trình duyệt của mình, trước tiên bạn sẽ gặp một hộp cảnh báo với thông báo bạn đã viết trong tệp JavaScript của mình. Sau khi nhấp vào OK, văn bản bạn đã nhập trong If this text is red, then you successfully linked your CSS file!
9 của HTML sẽ xuất hiện màu đỏNếu hộp cảnh báo không xuất hiện hoặc nếu văn bản
If this text is red, then you successfully linked your CSS file!
9 không có màu đỏ, hãy quay lại các bước trong hướng dẫn này để đảm bảo mọi thứ được nhập chính xác như được hiển thị ở đây