Bảng kiểu nội tuyến, nhúng và kiểu bên ngoài: Dưới đây là những gì bạn cần biết
Phát triển trang web Front-end thường được biểu diễn như một chiếc ghế 3 chân. Những chân này như sau:
Chân thứ hai của phân này, CSS hoặc Cascading Style Sheets, là những gì chúng tôi đang xem xét ở đây ngày hôm nay. Cụ thể, chúng tôi muốn giải quyết 3 loại kiểu bạn có thể thêm vào tài liệu.
- Kiểu nội tuyến
- Kiểu được nhúng
- Kiểu bên ngoài
Mỗi loại kiểu CSS này đều có những lợi ích và mặt hạn chế của chúng, vì vậy chúng ta hãy xem xét kỹ từng cá nhân.
Kiểu nội tuyến
Kiểu nội dòng là các kiểu được viết trực tiếp trong thẻ trong tài liệu HTML. Kiểu nội tuyến chỉ ảnh hưởng đến thẻ cụ thể mà chúng được áp dụng cho. Dưới đây là ví dụ về kiểu nội tuyến được áp dụng cho liên kết tiêu chuẩn hoặc thẻ neo,:
Quy tắc CSS này sẽ biến trang trí văn bản gạch dưới tiêu chuẩn ra khỏi liên kết này. Tuy nhiên, nó sẽ không thay đổi bất kỳ liên kết nào khác trên trang. Đây là một trong những hạn chế của kiểu nội tuyến. Vì chúng chỉ thay đổi trên một mục cụ thể, bạn sẽ cần phải xả rác HTML của bạn với các kiểu này để đạt được một thiết kế trang thực tế. Đó không phải là thực hành tốt nhất. Trong thực tế, nó là một bước gỡ bỏ từ những ngày của "font" thẻ và hỗn hợp của cấu trúc và phong cách trong các trang web.
Các kiểu nội tuyến cũng có độ đặc hiệu rất cao.
Điều này làm cho chúng rất khó để ghi đè lên với các kiểu khác, không phải nội tuyến. Ví dụ: nếu bạn muốn làm cho trang web đáp ứng và thay đổi cách phần tử xem xét các điểm ngắt nhất định bằng cách sử dụng truy vấn phương tiện , kiểu nội tuyến trên một phần tử sẽ khiến việc này khó thực hiện.
Cuối cùng, phong cách nội tuyến thực sự chỉ thích hợp khi được sử dụng rất ít.
Trong thực tế, tôi hiếm khi sử dụng kiểu nội tuyến trên các trang web của mình.
Kiểu được nhúng
Kiểu được nhúng là các kiểu được nhúng vào phần đầu của tài liệu. Các kiểu nhúng chỉ ảnh hưởng đến các thẻ trên trang mà chúng được nhúng vào. Một lần nữa, cách tiếp cận này phủ nhận một trong những điểm mạnh của CSS. Vì mỗi trang sẽ có kiểu trong
, nếu bạn muốn thực hiện thay đổi trên toàn trang web, như thay đổi màu của các liên kết từ màu đỏ sang màu xanh lục, bạn sẽ cần phải thực hiện thay đổi này trên mọi trang, vì mỗi trang đều sử dụng một biểu định kiểu được nhúng. Điều này là tốt hơn so với phong cách nội tuyến, nhưng vẫn còn có vấn đề trong nhiều trường hợp.
Biểu định kiểu được thêm vào
của một tài liệu cũng thêm một số lượng đáng kể mã đánh dấu vào trang đó, điều này cũng có thể làm cho trang khó quản lý hơn trong tương lai.
Lợi ích của các trang định kiểu được nhúng là tải ngay lập tức với chính trang đó, thay vì yêu cầu tải các tệp bên ngoài khác. Đây có thể là một lợi ích từ tốc độ tải xuống và phối cảnh hiệu suất .
Bảng kiểu bên ngoài
Ngày nay, hầu hết các trang web đều sử dụng các mẫu kiểu ngoài. Kiểu bên ngoài là các kiểu được viết trong một tài liệu riêng và sau đó được đính kèm với các tài liệu web khác nhau. Các trang kiểu bên ngoài có thể ảnh hưởng đến bất kỳ tài liệu nào mà chúng được đính kèm, có nghĩa là nếu bạn có một trang 20 trang mà mỗi trang sử dụng cùng một trang mẫu (thường là cách nó được thực hiện), bạn có thể thay đổi trực quan của các trang đó bằng cách chỉnh sửa bảng định kiểu đó.
Điều này làm cho việc quản lý trang web dài hạn dễ dàng hơn nhiều.
Nhược điểm của các style style bên ngoài là chúng yêu cầu các trang tìm nạp và tải các file bên ngoài này. Không phải mọi trang sẽ sử dụng mọi kiểu trong trang CSS, vì vậy nhiều trang sẽ tải một trang CSS lớn hơn nhiều so với thực sự cần.
Trong khi đúng là có một hiệu suất hit cho các tập tin CSS bên ngoài, nó chắc chắn có thể được giảm thiểu. Thực tế, các tệp CSS chỉ là các tệp văn bản, vì vậy chúng thường không phải là rất lớn để bắt đầu. Nếu toàn bộ trang web của bạn sử dụng 1 tệp CSS, bạn cũng nhận được lợi ích của tài liệu đó được lưu vào bộ nhớ cache sau khi được tải ban đầu.
Điều này có nghĩa là có thể có hiệu suất nhỏ trên trang đầu tiên một số lượt truy cập, nhưng các trang tiếp theo sẽ sử dụng tệp CSS được lưu trong bộ nhớ cache, vì vậy mọi lần truy cập sẽ bị từ chối. Các tệp CSS bên ngoài là cách tôi tạo tất cả các trang web của mình.