Hướng dẫn css inline styles should not be used move styles to an external css file - Kiểu nội tuyến css không được sử dụng kiểu di chuyển sang tệp css bên ngoài

Có một vài phần cho điều này:

1. Thứ nhất, tạo một biểu đồ kiểu bên ngoài ('style.css' - hoặc bất cứ điều gì)
2. Bạn phải tham khảo tệp .css này trong đầu tài liệu HTML của bạn
3. Bạn phải tham chiếu chính xác / di chuyển tất cả các kiểu nội tuyến vào tệp .css bên ngoài

Thứ nhất, tạo một biểu đồ kiểu bên ngoài ('style.css' - hoặc bất cứ điều gì)

Bạn phải tham khảo tệp .css này trong đầu tài liệu HTML của bạn

Bạn phải tham khảo tệp .css này trong đầu tài liệu HTML của bạn

Bạn phải tham chiếu chính xác / di chuyển tất cả các kiểu nội tuyến vào tệp .css bên ngoài

Bạn có thể làm điều này bằng cách tạo một giải pháp Notepad mới và nhấn 'Save As'. Đảm bảo bạn lưu nó với phần mở rộng '.css'. Nếu bạn không chắc cách thực hiện việc này, hãy tham khảo ở đây: Lưu dưới dạng loại tệp khác Notepad

Điều này có thể được thực hiện như vậy:

I am your heading

Bạn phải tham chiếu chính xác / di chuyển tất cả các kiểu nội tuyến vào tệp .css bên ngoài

Bạn có thể làm điều này bằng cách tạo một giải pháp Notepad mới và nhấn 'Save As'. Đảm bảo bạn lưu nó với phần mở rộng '.css'. Nếu bạn không chắc cách thực hiện việc này, hãy tham khảo ở đây: Lưu dưới dạng loại tệp khác Notepad

Điều này có thể được thực hiện như vậy:
You can add a class to a tag like so:

I am your heading

Tham khảo ở đây để biết thêm thông tin: Tham khảo Bảng kiểu bên ngoài.
You can reference a class in css like so:

#lblHeading {
      font-weight:bold;
      color:green;
    }

Xin lưu ý, nếu tệp 'style.css' không nằm trong cùng thư mục với tệp .html của bạn và thay vào đó là trong thư mục có tên 'thư mục', bạn sẽ cần tham khảo nó như thế này: thay vào đó
For more examples how to reference a class see here: CSS Class Selectors

Bạn có thể thêm số nhận dạng vào thẻ của mình, tức là bạn có thể thêm thuộc tính 'ID' hoặc 'lớp' vào bất kỳ thẻ nào, chúng sẽ giúp tham chiếu mục của bạn trong CSS.

Bạn có thể thêm ID vào thẻ như vậy:

I am your heading

I am your heading

Bạn có thể tham khảo một ID trong CSS như vậy:

I am your heading

#lblHeading {
      font-weight:bold;
      color:green;
    }

I am your heading

Để biết thêm ví dụ về cách tham chiếu ID xem tại đây: Bộ chọn ID CSS để biết thêm ví dụ về cách tham chiếu lớp Xem tại đây: Bộ chọn lớp CSS

#lblHeading {
      font-weight:bold;
      color:green;
    }

I am your heading

Bạn có thể tham khảo một ID trong CSS như vậy:

I am your heading

#lblHeading {
      font-weight:bold;
      color:green;
    }

I am your heading

Để biết thêm ví dụ về cách tham chiếu ID xem tại đây: Bộ chọn ID CSS để biết thêm ví dụ về cách tham chiếu lớp Xem tại đây: Bộ chọn lớp CSS

.lblHeading {
          font-weight:bold;
          color:green;
        }

I am your heading

Bạn có thể tham khảo một ID trong CSS như vậy:

I am your heading

#lblHeading {
      font-weight:bold;
      color:green;
    }

 

      

          Example
          
      
    

Để biết thêm ví dụ về cách tham chiếu ID xem tại đây: Bộ chọn ID CSS để biết thêm ví dụ về cách tham chiếu lớp Xem tại đây: Bộ chọn lớp CSS

.outerDiv {
  padding-top:10px;
  background-color:green;
}

.outerDiv .innerDiv {
  padding-top:2px;
  background-color:red;
}

.outerDiv .innerDiv #lblMyLabel {
 font-weight:bold;
}

.outerDiv .innerDiv #imgMyImage {
 height:10px;
}

 

      

          Example
          
      
    

Bài viết này cũng cung cấp một cái nhìn tổng quan tốt về chuyển đổi: Cách thêm CSS

Không có kiểu CSS nội tuyến

Gợi ý này kiểm tra xem HTML đang sử dụng các kiểu CSS nội tuyến.

Tại sao nó quan trọng?

Việc sử dụng các kiểu CSS nội tuyến ngăn chặn việc tái sử dụng các kiểu ở bất cứ nơi nào khác. Đánh dấu HTML của trang trở nên khó đọc cho mắt thường. Các kiểu CSS nội tuyến rất khó duy trì và không cung cấp tính nhất quán vì chúng không được lưu trữ ở một nơi duy nhất. Các kiểu nội tuyến được khách hàng lặp lại lặp đi lặp lại trên mọi yêu cầu vì nó không cung cấp cho bạn lợi thế của bộ nhớ cache trình duyệt. Các kiểu nội tuyến được ưu tiên của các kiểu dáng bên ngoài, điều này có thể vô tình ghi đè các kiểu mà bạn không có ý định ghi đè.

Kiểm tra gợi ý là gì?

Gợi ý này kiểm tra xem HTML đang sử dụng các kiểu CSS nội tuyến.

Tại sao nó quan trọng?

#lblHeading {
      font-weight:bold;
      color:green;
    }

#lblHeading {
      font-weight:bold;
      color:green;
    }

Việc sử dụng các kiểu CSS nội tuyến ngăn chặn việc tái sử dụng các kiểu ở bất cứ nơi nào khác. Đánh dấu HTML của trang trở nên khó đọc cho mắt thường. Các kiểu CSS nội tuyến rất khó duy trì và không cung cấp tính nhất quán vì chúng không được lưu trữ ở một nơi duy nhất. Các kiểu nội tuyến được khách hàng lặp lại lặp đi lặp lại trên mọi yêu cầu vì nó không cung cấp cho bạn lợi thế của bộ nhớ cache trình duyệt. Các kiểu nội tuyến được ưu tiên của các kiểu dáng bên ngoài, điều này có thể vô tình ghi đè các kiểu mà bạn không có ý định ghi đè.

Kiểm tra gợi ý là gì?trigger the hint

Ví dụ về kiểu CSS nội tuyến

I am your heading

Nó kiểm tra xem không có phần tử nào có thuộc tính

#lblHeading {
      font-weight:bold;
      color:green;
    }

#lblHeading {
      font-weight:bold;
      color:green;
    }

I am your heading

Các ví dụ kích hoạt gợi ýpass the hint

Gợi ý sẽ kích hoạt nếu bất kỳ phần tử nào có thuộc tính

#lblHeading {
      font-weight:bold;
      color:green;
    }

I am your heading

Gợi ý sẽ kích hoạt nếu bạn sử dụng các kiểu nội bộ, điều này bị tắt theo mặc định

Các ví dụ vượt qua gợi ý

Không có kiểu nội tuyến trong phần tử

I am your heading

Gợi ý có thể được cấu hình?

#lblHeading {
      font-weight:bold;
      color:green;
    }

#lblHeading {
      font-weight:bold;
      color:green;
    }

#lblHeading {
      font-weight:bold;
      color:green;
    }

I am your heading

Trong tệp

#lblHeading {
      font-weight:bold;
      color:green;
    }

I am your heading

Làm thế nào để sử dụng gợi ý này?

• Cài đặt gợi ý này với:

Làm cách nào để di chuyển CSS nội tuyến sang CSS bên ngoài?

Bạn có thể sử dụng nội tuyến và CSS bên ngoài không?

CSS nên được nội tuyến hay bên ngoài?

Tại sao CSS nội tuyến không nên được sử dụng?