search

Hướng dẫn where do i link css and js in html? - tôi liên kết css và js trong html ở đâu?

Ngày đăng: 22/11/2022
Trả lời: 0
Lượt xem: 178

Hướng dẫn where do i link css and js in html? - tôi liên kết css và js trong html ở đâu?

Show

Liên kết đến CSS và JavaScript trong tệp HTML

Mục đích của hướng dẫn này là dạy bạn cách liên kết đến các tệp CSS và JavaScript trong 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 là tốt nhất để giữ ba ngôn ngữ này trong các tệp riêng biệt của riêng họ.

Nội dung

  1. Thư mục và cấu trúc tệp
  2. HTML
  3. CSS
  4. JavaScript

1. Cấu trúc thư mục và tệp

Đó là một ý tưởng tốt để giữ các tệp HTML, CSS và JavaScript của bạn trong các thư mục riêng biệt. Tạo một thư mục cho dự án của bạn gọi là css-and-js. Bên trong thư mục này, tạo ba thư mục bổ sung. Gọi chúng là html, css và 

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

Bên trong thư mục html của bạn, tạo một tệp có tên 

If this text is red, then you successfully linked your CSS file!
2. Bên trong thư mục css của bạn, tạo một tệp có tên 
If this text is red, then you successfully linked your CSS file!
4. Và bên trong thư mục 
If this text is red, then you successfully linked your CSS file!
0 của bạn, tạo một tệp có tên 
If this text is red, then you successfully linked your CSS file!
6.

2. HTML

Để liên kết với 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. Mở 

If this text is red, then you successfully linked your CSS file!
2 và nhập HTML sau:


 lang='en'>
  
     charset='UTF-8'/>
    </span>Linking to CSS and JavaScript<span>

Hãy chắc chắn để lưu công việc của bạn bất cứ khi nào bạn thêm mã vào các tệp của bạn. 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 bạn để liên kết với CSS và JavaScript của bạn.

3. CSS

Đầu tiên, bạn sẽ cần thêm một cái gì đó vào cơ thể HTML của bạn để áp dụng kiểu dáng. Trên dòng tiếp theo sau thẻ mở 

If this text is red, then you successfully linked your CSS file!
8, thụt lề và thêm các mục 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 trong màu được xác định là màu gốc trong bảng 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!
4 của bạn và thêm:

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 phần sau vào phần 

 rel='stylesheet' href='../css/styles.css'>
0 trên dòng sau khi đóng thẻ 
 rel='stylesheet' href='../css/styles.css'>
1:

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

Phần tử 

 rel='stylesheet' href='../css/styles.css'>
2 phải được đặt trong phần 
 rel='stylesheet' href='../css/styles.css'>
0 của tài liệu. Lưu ý rằng phần tử 
 rel='stylesheet' href='../css/styles.css'>
2 là một phần tử trống, vì vậy nó không cần thẻ đóng.

Thuộc tính 

 rel='stylesheet' href='../css/styles.css'>
5 xác định mối quan hệ giữa tài nguyên và tài liệu HTML. Thuộc tính 
 rel='stylesheet' href='../css/styles.css'>
6 chỉ vào tệp CSS của bạn.

Vì tệp được đặt 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 (

 rel='stylesheet' href='../css/styles.css'>
7), theo sau là dấu gạch chéo (
 rel='stylesheet' href='../css/styles.css'>
8), thư mục CSS của bạn đang ở (____9) Tên tệp CSS của bạn (
If this text is red, then you successfully linked your CSS file!
4): 

 lang='en'>
  
     charset='UTF-8'/>
    </span>Linking to CSS and JavaScript<span>
     rel='stylesheet' href='../css/styles.css'>
  
  
    
If this text is red, then you successfully linked your CSS file!
1.

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


 lang='en'>
  
     charset='UTF-8'/>
    </span>Linking to CSS and JavaScript<span>
     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!
6 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 phần sau vào phần 

If this text is red, then you successfully linked your CSS file!
8 trên dòng sau phần tử 

 lang='en'>
  
     charset='UTF-8'/>
    </span>Linking to CSS and JavaScript<span>
     rel='stylesheet' href='../css/styles.css'>
  
  
    
If this text is red, then you successfully linked your CSS file!
4:

Nó được coi là thực tiễn tốt nhất để đặt phần tử 


 lang='en'>
  
     charset='UTF-8'/>
    </span>Linking to CSS and JavaScript<span>
     rel='stylesheet' href='../css/styles.css'>
  
  
    
If this text is red, then you successfully linked your CSS file!
5 trong phần 
If this text is red, then you successfully linked your CSS file!
8 ngay trước khi đóng thẻ 

 lang='en'>
  
     charset='UTF-8'/>
    </span>Linking to CSS and JavaScript<span>
     rel='stylesheet' href='../css/styles.css'>
  
  
    
If this text is red, then you successfully linked your CSS file!
7.

Thuộc tính 


 lang='en'>
  
     charset='UTF-8'/>
    </span>Linking to CSS and JavaScript<span>
     rel='stylesheet' href='../css/styles.css'>
  
  
    
If this text is red, then you successfully linked your CSS file!
8 chỉ vào tệp javascript của bạn.

Vì tệp JavaScript được đặt trong một thư mục khác, bạn phải chỉ định đường dẫn trong thuộc tính 


 lang='en'>
  
     charset='UTF-8'/>
    </span>Linking to CSS and JavaScript<span>
     rel='stylesheet' href='../css/styles.css'>
  
  
    
If this text is red, then you successfully linked your CSS file!
8: 
alert('You successfully linked your JavaScript file!');
0.

Đó là bit cuối cùng của mã bạn sẽ cần nhập. Đây là những gì tài liệu HTML của bạn sẽ trông như thế nào:


 lang='en'>
  
     charset='UTF-8'/>
    </span>Linking to CSS and JavaScript<span>
     rel='stylesheet' href='../css/styles.css'>
  
  
    
If this text is red, then you successfully linked your CSS file!

Hãy chắc chắn để lưu công việc của bạn trong mỗi 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!
2 của bạn trong trình duyệt mà 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 nên 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 bạn. Sau khi nhấp vào OK, văn bản bạn đã nhập vào 
If this text is red, then you successfully linked your CSS file!
8 của HTML của bạn sẽ xuất hiện màu đỏ.OK, the text you entered in the 
If this text is red, then you successfully linked your CSS file!
8 of your HTML should appear red.

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!
8 không 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.

Xin chúc mừng! Bây giờ bạn đã liên kết với các tệp CSS và JavaScript trong tài liệu HTML.

Liên kết đến CSS đi đâu trong HTML?

Một CSS nội bộ được xác định trong phần của trang HTML, trong một phần tử. section of an HTML page, within a