Lợi ích của việc sử dụng biểu định kiểu bên ngoài trong thiết kế web là gì?

Cascading style sheet có nhiều lợi ích. Chúng cho phép bạn sử dụng cùng một biểu định kiểu trên toàn bộ trang web của mình. Có hai cách để làm điều này

• liên kết với phần tử LINK

• nhập bằng lệnh @import

Ưu điểm và nhược điểm của biểu định kiểu bên ngoài

Một trong những điều tốt nhất về biểu định kiểu xếp tầng là bạn có thể sử dụng chúng để giữ cho trang web của mình nhất quán. Cách dễ nhất để thực hiện việc này là liên kết hoặc nhập biểu định kiểu bên ngoài. Nếu bạn sử dụng cùng một biểu định kiểu bên ngoài cho mọi trang trên trang web của mình, bạn có thể chắc chắn rằng tất cả các trang sẽ có cùng kiểu

Một số lợi ích khi sử dụng biểu định kiểu bên ngoài bao gồm việc bạn có thể kiểm soát giao diện của nhiều tài liệu cùng một lúc. Điều này đặc biệt hữu ích nếu bạn làm việc với một nhóm người để tạo trang web của mình. Nhiều quy tắc về phong cách có thể khó nhớ và mặc dù bạn có thể có hướng dẫn về phong cách được in ra, nhưng thật tẻ nhạt khi phải liên tục lật qua nó để xác định xem văn bản mẫu sẽ được viết bằng phông chữ Arial 12 điểm hay phông chữ Courier 14 điểm

Bạn có thể tạo các lớp kiểu mà sau đó có thể được sử dụng trên nhiều phần tử HTML khác nhau. Nếu bạn thường sử dụng phông chữ Wingdings đặc biệt để nhấn mạnh nhiều thứ khác nhau trên trang của mình, bạn có thể sử dụng lớp Wingdings mà bạn đã thiết lập trong biểu định kiểu của mình để tạo chúng thay vì xác định một kiểu cụ thể cho từng trường hợp nhấn mạnh

Bạn có thể dễ dàng nhóm các phong cách của mình để hiệu quả hơn. Tất cả các phương pháp nhóm có sẵn cho CSS đều có thể được sử dụng trong biểu định kiểu bên ngoài và điều này mang lại cho bạn nhiều quyền kiểm soát và tính linh hoạt hơn trên các trang của mình

Điều đó nói rằng, cũng có những lý do rất chính đáng để không sử dụng biểu định kiểu bên ngoài. Thứ nhất, chúng có thể tăng thời gian tải xuống nếu bạn liên kết với nhiều trong số chúng

Mỗi khi bạn tạo một tệp CSS mới và liên kết hoặc nhập tệp đó vào tài liệu của mình, điều đó yêu cầu trình duyệt Web thực hiện một cuộc gọi khác đến máy chủ Web để lấy tệp. Và các cuộc gọi máy chủ làm chậm thời gian tải trang

Nếu bạn chỉ có một số ít kiểu, chúng có thể làm tăng độ phức tạp của trang của bạn. Vì các kiểu không hiển thị ngay trong HTML nên bất kỳ ai đang xem trang đều phải lấy một tài liệu khác (tệp CSS) để tìm hiểu điều gì đang xảy ra

Cách tạo một biểu định kiểu bên ngoài

Biểu định kiểu bên ngoài được viết theo cách giống như biểu định kiểu nhúng và nội tuyến. Nhưng tất cả những gì bạn cần viết là bộ chọn kiểu và khai báo. Bạn không cần phần tử hoặc thuộc tính STYLE trong tài liệu

Như với tất cả các CSS khác, cú pháp cho một quy tắc là

selector { property : value; }

Các quy tắc này được ghi vào một tệp văn bản có phần mở rộng

.css

Liên kết tài liệu CSS

Để liên kết một biểu định kiểu, bạn sử dụng phần tử LINK. Cái này có các thuộc tính rel và href. Thuộc tính rel cho trình duyệt biết bạn đang liên kết gì (trong trường hợp này là biểu định kiểu) và thuộc tính href giữ đường dẫn đến tệp CSS

Ngoài ra còn có một loại thuộc tính tùy chọn mà bạn có thể sử dụng để xác định loại MIME của tài liệu được liên kết. Điều này không bắt buộc trong HTML5, nhưng nên được sử dụng trong tài liệu HTML 4

Đây là mã bạn sẽ sử dụng để liên kết một biểu định kiểu CSS có tên là kiểu. css

Và trong một tài liệu HTML 4, bạn sẽ viết

Nhập CSS Style Sheets

Các biểu định kiểu đã nhập được đặt trong phần tử STYLE. Sau đó, bạn cũng có thể sử dụng các kiểu được nhúng nếu muốn. Bạn cũng có thể bao gồm các kiểu đã nhập bên trong các biểu định kiểu được liên kết. Bên trong tài liệu STYLE hoặc CSS, hãy viết

@import url('http://www.yoursite.com/styles.css');

Trích dẫn bài viết này

Sự sắp xếp

trích dẫn của bạn

Kyrnin, Jennifer. "Lợi ích của Cascading Style Sheets. "ThinkCo. https. //www. suy nghĩ. com/benefits-of-css-3466952 (truy cập ngày 2 tháng 2 năm 2023)

Ưu điểm chính của kiểu dáng bên ngoài là khi nó được liên kết với mọi trang, nó đảm bảo tất cả các trang đều có giao diện và phong cách thống nhất, tạo ra một trang web gắn kết. Nó cũng cho phép bạn tập trung vào các khía cạnh khác của thiết kế web khi tạo các trang khác vì bạn không cần phải lo lắng về kiểu dáng vì điều đó đã được thực hiện nhờ tệp bên ngoài. Ngoài ra, nó giữ cho mã các trang khác của bạn đẹp và gọn gàng vì tất cả kiểu dáng, thường có thể đòi hỏi nhiều mã, được tách thành một tệp hoàn toàn khác

Nhược điểm chính của CSS bên ngoài là nó không cho phép kiểm soát cụ thể hơn đối với một số phần tử nhất định, vì vậy, nếu bạn chỉ sử dụng kiểu dáng bên ngoài, mọi phiên bản của cùng một phần tử sẽ trông giống hệt nhau. Để chống lại điều này, bạn có thể sử dụng kiểu dáng nội bộ, kiểu dáng nội tuyến hoặc cả hai ngoài kiểu dáng bên ngoài. Ngoài ra, tệp CSS phải được tham chiếu bởi mọi trang của trang web, nếu không, không có định dạng nào mà nó đặt ra sẽ được áp dụng

Nội bộ

Kiểu dáng bên trong, tương tự như kiểu dáng bên ngoài, đảm bảo tất cả các yếu tố trong trang đó được giữ đồng nhất về giao diện và kiểu dáng. Sự khác biệt là nhược điểm chính của kiểu nội bộ, cụ thể là nó chỉ dành cho trang cụ thể đó và không dành cho trang nào khác. Nếu bạn muốn cùng một kiểu dáng trên tất cả các trang của mình, bạn cần phải có cùng một mã kiểu dáng được viết ở đầu mỗi trang trong trang web của bạn, điều này sẽ khiến mã trông lộn xộn và nếu bạn đang tạo một trang web lớn, có thể mất nhiều thời gian.

Tuy nhiên, CSS bên trong có thể được sử dụng cùng với CSS bên ngoài để cho phép kiểm soát nhiều hơn đối với trang cụ thể đó trong khi vẫn duy trì kiểu dáng giống như CSS bên ngoài đối với bất kỳ thành phần nào không bị thay đổi bên trong

Nội tuyến

Kiểu dáng nội tuyến tăng cường hơn nữa cả mặt tích cực và tiêu cực của nội bộ. Nó có thể, khi được sử dụng cùng với kiểu dáng bên ngoài hoặc nội bộ, cho phép tạo kiểu dáng cụ thể và chính xác hơn nhiều cho một số phần tử nhất định vì kiểu dáng nội tuyến sẽ chỉ chỉnh sửa một phần tử trong cùng một dòng mã và không chỉnh sửa phần tử nào khác. Tuy nhiên, nếu bạn cố gắng tạo kiểu cho các trang của mình chỉ bằng kiểu nội tuyến thì sẽ vô cùng tốn thời gian, làm cho mã của bạn rất lộn xộn và khó đọc và sẽ khó giữ được bất kỳ hình thức nhất quán nào.

Phần kết luận

Tóm lại, mặc dù mỗi dạng CSS đều có những ưu điểm và nhược điểm khác nhau, nhưng tất cả chúng đều có thể được loại bỏ bằng cách sử dụng kết hợp cả 3;

Những lợi thế hoặc bất lợi của biểu định kiểu bên ngoài là gì?

Lợi thế của việc sử dụng biểu định kiểu bên ngoài thay vì biểu định kiểu bên trong là gì?

Ưu điểm mạnh nhất của một biểu định kiểu bên ngoài là gì?