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

1. Cấu trúc thư mục và tệp
2. HTML
3. CSS
4. 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!

1

Bê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!

7

2. 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 sau

If 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êm

h1 {  
  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

 rel='stylesheet' href='../css/styles.css'>

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ẻ đóng

Thuộ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ạn

Vì 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 đó .

 rel='stylesheet' href='../css/styles.css'>

2

Đây là những gì tài liệu HTML của bạn sẽ trông giống như cho đến nay

 lang='en'>
  
     charset='UTF-8'/>
    
     rel='stylesheet' href='../css/styles.css'>
  
  
    
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êm

alert('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ử

 rel='stylesheet' href='../css/styles.css'>

5

Cách tốt nhất là đặt phần tử

 rel='stylesheet' href='../css/styles.css'>

6 trong phần

If this text is red, then you successfully linked your CSS file!

9 ngay trước thẻ đóng

 rel='stylesheet' href='../css/styles.css'>

8

Thuộc tính

 rel='stylesheet' href='../css/styles.css'>

9 trỏ tới tệp JavaScript của bạn

Vì 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

 rel='stylesheet' href='../css/styles.css'>

9.

 lang='en'>
  
     charset='UTF-8'/>
    
     rel='stylesheet' href='../css/styles.css'>
  
  
    
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

 lang='en'>
  
     charset='UTF-8'/>
    
     rel='stylesheet' href='../css/styles.css'>
  
  
    
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

Bạn có thể sử dụng HTML và CSS trong JavaScript không?

Bạn có thể viết CSS trong tệp JS không?

Tôi có thể đưa HTML vào tệp JS không?

Làm cách nào để kết hợp HTML CSS và JavaScript trong một tệp?