Sử dụng CSS Site Wide
Trang web là sự kết hợp giữa phong cách và cấu trúc và trên trang web ngày nay, cách tốt nhất là giữ hai khía cạnh này của một trang web tách biệt với nhau.
HTML luôn là những gì cung cấp một trang web với cấu trúc của nó. Trong những ngày đầu của Web, HTML cũng chứa thông tin về phong cách. Các phần tử như thẻ được rải rác trên mã HTML, thêm thông tin giao diện cùng với thông tin cấu trúc. Phong trào tiêu chuẩn web đã thúc đẩy chúng tôi thay đổi thực hành này và thay vào đó đẩy tất cả thông tin phong cách vào CSS hoặc Cascading Style Sheets. Thực hiện bước này xa hơn, các đề xuất hiện tại là bạn sử dụng cái được gọi là "tờ kiểu ngoài" cho nhu cầu tạo kiểu trang web của bạn.
Ưu điểm và Nhược điểm của Bảng định kiểu bên ngoài
Một trong những điều tốt nhất về Cascading Style Sheets là bạn có thể sử dụng chúng để giữ cho toàn bộ trang web của bạn 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 trang tí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 của trang web, bạn có thể chắc chắn rằng tất cả các trang sẽ có cùng một kiểu. Bạn cũng có thể dễ dàng thực hiện thay đổi cho tương lai. Vì mỗi trang sử dụng cùng một biểu định kiểu bên ngoài, bất kỳ thay đổi nào đối với trang tính đó sẽ tác động đến mọi trang của trang. Điều này tốt hơn nhiều so với việc phải thay đổi từng trang riêng lẻ!
Ưu điểm của Bảng định kiểu ngoài
- Bạn có thể kiểm soát giao diện của một số 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 bạn. Nhiều quy tắc kiểu có thể khó nhớ và trong khi bạn có thể có hướng dẫn kiểu in, không hiệu quả và tẻ nhạt để liên tục lật qua nó để xác định xem văn bản ví dụ có được viết bằng phông Arial 12 điểm hoặc chuyển phát nhanh 14 điểm hay không. Bằng cách có mọi thứ ở một nơi và vì địa điểm đó cũng là nơi bạn sẽ thực hiện thay đổi, bạn có thể thực hiện bảo trì dễ dàng hơn nhiều.
- Bạn có thể tạo các lớp kiểu 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 kiểu phông chữ nhất định để nhấn mạnh vào nhiều thứ khác nhau trên trang của mình, bạn có thể sử dụng thuộc tính lớp mà bạn đã thiết lập trong biểu định kiểu để có giao diện này, thay vì xác định 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 kiểu của mình để có hiệu quả hơn.
- Tất cả các phương pháp nhóm có sẵn cho CSS có thể được sử dụng trong các trang mẫu bên ngoài và điều này cung cấp cho bạn khả năng kiểm soát và linh hoạt hơn trên các trang của bạn.
Nhược điểm của Bảng định kiểu bên ngoài
- Các bảng định kiểu bên ngoài có thể tăng thời gian tải xuống, đặc biệt nếu chúng cực kỳ lớn. Vì tệp CSS là một tài liệu riêng biệt phải được tải, nó sẽ tác động đến hiệu suất để thực hiện việc tải xuống đó.
- Các bảng định kiểu bên ngoài trở nên to lớn rất nhanh vì thật khó để biết khi nào một kiểu không còn được sử dụng vì nó không bị xóa khi trang bị xóa. Quản lý thích hợp các tệp CSS của bạn là quan trọng, đặc biệt nếu nhiều người đang làm việc trên cùng một tệp.
- Nếu bạn chỉ có một trang web một trang, có một tệp bên ngoài cho CSS có thể không cần thiết vì bạn chỉ có một trang để tạo kiểu. Nhiều lợi ích của CSS bên ngoài bị mất khi bạn chỉ có một trang duy nhất.
Cách tạo Bảng kiểu ngoài
Các bảng định kiểu bên ngoài được tạo với cú pháp tương tự để tạo các bảng định kiểu cấp tài liệu. Tuy nhiên, tất cả những gì bạn cần bao gồm là công cụ chọn và khai báo. Giống như trong một bảng định kiểu cấp tài liệu, cú pháp cho quy tắc là:
selector {property: value;}Lưu các quy tắc này vào một tệp văn bản có đuôi .css. Điều này là không cần thiết, nhưng nó là một thói quen tốt để có được thành, vì vậy bạn ngay lập tức có thể nhận ra phong cách của bạn trong một danh sách thư mục.
Một khi bạn có một tài liệu phong cách, bạn cần phải liên kết nó với các trang Web của bạn. Điều này có thể được thực hiện theo hai cách:
- Liên kết
- Để liên kết một biểu định kiểu, bạn sử dụng thẻ HTML. Điều này có các thuộc tính rel , type và href . Thuộc tính rel cho biết những gì bạn đang liên kết (trong trường hợp này là biểu định kiểu), loại xác định MIME-Type cho trình duyệt và href là đường dẫn đến tệp .css.
- Nhập
- Bạn sẽ sử dụng một biểu định kiểu được nhập trong một biểu định kiểu cấp tài liệu để bạn có thể nhập các thuộc tính của một biểu định kiểu bên ngoài trong khi không làm mất bất kỳ tài liệu cụ thể nào của tài liệu. Bạn gọi nó theo cách tương tự để gọi một tờ kiểu được liên kết, chỉ có nó phải được gọi trong một khai báo kiểu cấp tài liệu. Bạn có thể nhập nhiều trang kiểu bên ngoài khi bạn cần duy trì trang Web của mình.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào 8/8/17