Hướng dẫn disadvantages of internal css - nhược điểm của css nội bộ

Ngày 05 tháng 4 năm 2022

Domantas G.

3 phút đọc

Sự khác biệt chính giữa CSS nội tuyến và CSS ngoài là CSS nội tuyến được xử lý nhanh hơn vì nó chỉ yêu cầu trình duyệt tải xuống 1 tệp trong khi sử dụng CSS bên ngoài sẽ yêu cầu tải xuống các tệp HTML và CSS một cách riêng biệt.

Trong hướng dẫn này, chúng tôi sẽ đi sâu so sánh ba loại kiểu CSS: nội tuyến, bên ngoài và bên trong. Chúng tôi cũng sẽ phát hiện ra những ưu điểm và nhược điểm của việc sử dụng từng phương pháp.

Tải xuống hoàn thành bảng cheat CSS

• CSS chính xác là gì?
• Sự khác biệt giữa các kiểu CSS nội tuyến, bên ngoài và bên trong
  • CSS nội bộ
  • CSS bên ngoài
  • CSS nội tuyến

CSS chính xác là gì?

Sự khác biệt giữa các kiểu CSS nội tuyến, bên ngoài và bên trong

Ngôn ngữ bảng kiểu này cũng cho phép bạn thêm hiệu ứng hoặc hoạt hình vào trang web của bạn. Bạn có thể sử dụng nó để hiển thị một số hình ảnh động CSS như các hiệu ứng nút nhấp, máy quay hoặc bộ tải và nền hoạt hình.

Không có CSS, trang web của bạn sẽ xuất hiện dưới dạng trang HTML đơn giản. Ở đây, cách Twitter sẽ trông như thế nào nếu chúng ta vô hiệu hóa CSS của nó:

Sự khác biệt giữa các kiểu CSS nội tuyến, bên ngoài và bên trong

Có ba cách bạn có thể sử dụng để thực hiện CSS vào các kiểu HTML: Nội bộ, Bên ngoài và nội tuyến. Hãy để chúng phá vỡ chúng.

CSS nội bộ

CSS nội bộ hoặc nhúng yêu cầu bạn thêm thẻ trong phần tài liệu HTML của bạn. tag in the section of your HTML document.

Phong cách CSS này là một phương pháp hiệu quả để tạo kiểu cho một trang duy nhất. Tuy nhiên, sử dụng kiểu này cho nhiều trang là tốn thời gian vì bạn cần đặt các quy tắc CSS trên mỗi trang của trang web của bạn.

Tại đây, cách bạn có thể sử dụng CSS nội bộ:

1. Mở trang HTML của bạn và định vị thẻ mở. opening tag.
2. Đặt mã sau ngay sau khi thẻ tag

1. Thêm quy tắc CSS trên một dòng mới. Đây là một ví dụ:

body {
    background-color: blue;
}
h2 {
    color: red;
    padding: 60px;
}

1. Nhập thẻ đóng:

Tệp HTML của bạn sẽ trông như thế này:

body {
    background-color: blue;
}
h2 {
    color: red;
    padding: 60px;
} 




Hostinger Tutorials
This is our paragraph.

  

Ưu điểm của CSS nội bộ:

• Bạn có thể sử dụng bộ chọn lớp và ID trong bảng kiểu này. Đây là một ví dụ:

.class {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

#id {
    property1 : value1; 
    property2 : value2; 
    property3 : value3; 
}

• Vì bạn chỉ thêm mã trong cùng một tệp HTML, bạn không cần phải tải lên nhiều tệp.

Nhược điểm của CSS nội bộ:

• Thêm mã vào tài liệu HTML có thể tăng kích thước trang và thời gian tải của trang.

CSS bên ngoài

Với CSS bên ngoài, bạn sẽ liên kết các trang web của mình với tệp .CSS bên ngoài, có thể được tạo bởi bất kỳ trình soạn thảo văn bản nào trong thiết bị của bạn [ví dụ: Notepad ++]..css file, which can be created by any text editor in your device [e.g., Notepad++].

Loại CSS này là một phương pháp hiệu quả hơn, đặc biệt là để tạo kiểu cho một trang web lớn. Bằng cách chỉnh sửa tệp .css, bạn có thể thay đổi toàn bộ trang web của mình cùng một lúc..css file, you can change your entire site at once.

Thực hiện theo các bước sau để sử dụng CSS bên ngoài:

1. Tạo một tệp .CSS mới với trình soạn thảo văn bản và thêm các quy tắc kiểu. Ví dụ:.css file with the text editor, and add the style rules. For example:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

1. Trong phần trang HTML của bạn, hãy thêm tham chiếu vào tệp .CSS bên ngoài của bạn ngay sau thẻ: section of your HTML sheet, add a reference to your external .css file right after tag:

Don Tiết quên thay đổi style.css với tên của tệp & nbsp; .css & nbsp; file.style.css with the name of your .css file.

Ưu điểm của CSS bên ngoài:

• Vì mã CSS nằm trong một tài liệu riêng biệt, các tệp HTML của bạn sẽ có cấu trúc sạch hơn và có kích thước nhỏ hơn.
• Bạn có thể sử dụng tệp .css tương tự cho nhiều trang..css file for multiple pages.

Nhược điểm của CSS bên ngoài:

• Các trang của bạn có thể không được hiển thị chính xác cho đến khi CSS bên ngoài được tải.
• Tải lên hoặc liên kết lên nhiều tệp CSS có thể tăng thời gian tải xuống trang web của bạn.

CSS nội tuyến

CSS nội tuyến được sử dụng để tạo kiểu cho một phần tử HTML cụ thể. Đối với kiểu CSS này, bạn sẽ chỉ cần thêm thuộc tính Style & NBSP; cho mỗi thẻ HTML mà không cần sử dụng các bộ chọn.style attribute to each HTML tag, without using selectors.

Loại CSS này không thực sự được khuyến nghị, vì mỗi thẻ HTML cần được tạo kiểu riêng lẻ. Quản lý trang web của bạn có thể trở nên quá khó nếu bạn chỉ sử dụng CSS nội tuyến.

Tuy nhiên, CSS nội tuyến trong HTML có thể hữu ích trong một số tình huống. Ví dụ: trong trường hợp bạn không có quyền truy cập vào các tệp CSS hoặc chỉ cần áp dụng các kiểu cho một phần tử duy nhất.

Hãy cùng xem một ví dụ. Ở đây, chúng tôi thêm một CSS nội tuyến vào và TAG:

and

tag:

Hostinger Tutorials
Something usefull here.

Ưu điểm của CSS nội tuyến:

• Bạn có thể dễ dàng và nhanh chóng chèn các quy tắc CSS vào trang HTML. Đó là lý do tại sao phương pháp này rất hữu ích để kiểm tra hoặc xem trước các thay đổi và thực hiện các bản sửa lỗi nhanh cho trang web của bạn.
• Bạn không cần phải tạo và tải lên một tài liệu riêng như theo phong cách bên ngoài.

Nhược điểm của CSS nội tuyến:

• Việc thêm các quy tắc CSS vào mỗi phần tử HTML là tốn thời gian và làm cho cấu trúc HTML của bạn lộn xộn.
• Kiểu dáng nhiều yếu tố có thể ảnh hưởng đến kích thước trang của bạn và thời gian tải xuống.

Sự kết luận

Trong hướng dẫn này, bạn đã học được sự khác biệt giữa ba loại CSS: nội bộ, bên ngoài và nội tuyến. Ở đây, bản tóm tắt:

• Nội bộ hoặc nhúng ⁠ Thêm thẻ trong phần của tài liệu HTML ⁠— add tag in the section of HTML document
• Bên ngoài ⁠ liên kết bảng HTML với tệp .css riêng ⁠— link the HTML sheet to a separate .css file
• Inline ⁠ Áp dụng quy tắc CSS cho các yếu tố cụ thể. ⁠— apply CSS rules for specific elements.

Vì vậy, bạn sẽ sử dụng kiểu CSS nào? Chia sẻ với chúng tôi trong phần bình luận dưới đây.

Domantas dẫn đầu các nhóm nội dung và SEO về phía trước với những ý tưởng mới và ra khỏi các phương pháp tiếp cận. Được trang bị kiến ​​thức SEO và tiếp thị rộng rãi, ông nhằm mục đích truyền bá lời nói của Hostinger đến mọi nơi trên thế giới. Trong thời gian rảnh rỗi, Domantas thích trau dồi kỹ năng phát triển web của mình và đi du lịch đến những nơi kỳ lạ.