Cách sử dụng các kiểu địa phương cho việc lập trình HTML5 và CSS3

Một kiểu có thể được định nghĩa trực tiếp trong cơ thể HTML5. Dưới đây là một ví dụ về loại mã này. Một kiểu địa phương cũng đôi khi được gọi là phong cách cấp phần tử bởi vì nó sửa đổi một thể hiện cụ thể của một phần tử trên trang.

localStyles. html

Các kiểu địa phương
Đoạn này có đường viền địa phương






Đoạn này có một loạt các quy tắc font và văn bản được áp dụng.

Khi bạn xem qua mã này, một vài điều cần trở nên rõ ràng:

• Không phần tử nằm trong tiêu đề. Thông thường, bạn sử dụng một phần trong tiêu đề trang để xác định tất cả các kiểu của bạn. Trang này không có phân đoạn như vậy.

• Đoạn có thuộc tính kiểu riêng của chúng. Một thuộc tính kiểu được thêm vào mỗi đoạn trong phần thân HTML. Tất cả các phần tử HTML hỗ trợ thuộc tính kiểu.

• Toàn bộ mã phong cách đi trong một cặp dấu ngoặc kép. Đối với mỗi phần tử theo kiểu, toàn bộ phong cách đi vào một cặp dấu ngoặc kép vì đó là một thuộc tính HTML. Bạn có thể sử dụng thụt đầu dòng và khoảng cách trắng để làm cho mọi thứ dễ hiểu hơn.

Khi sử dụng phong cách địa phương

Phong cách địa phương không phải là lựa chọn đầu tiên của bạn, nhưng chúng có thể hữu ích trong một số trường hợp.

Nếu bạn đang viết chương trình để dịch từ trình xử lý văn bản hoặc công cụ khác, các phong cách địa phương thường là cách dễ dàng nhất để thực hiện công việc dịch. Nếu bạn sử dụng một trình xử lý văn bản để tạo một trang và bạn cho nó lưu trang dưới dạng HTML, nó thường sử dụng kiểu địa phương bởi vì các bộ xử lý văn bản thường sử dụng kỹ thuật này theo định dạng sở hữu của riêng họ.

Thông thường khi bạn thấy một trang HTML có rất nhiều kiểu địa phương, đó là vì một công cụ dịch tự động tạo ra trang.

Đôi khi, bạn thấy kiểu địa phương được sử dụng trong các ví dụ mã. Ví dụ: mã sau đây có thể được sử dụng để biểu thị các kiểu đường biên khác nhau:

localBorders. html

Biên giới nội tuyến
Đoạn này có đường viền màu đen
Đoạn này có đường viền màu đen đôi

Ví dụ các mục đích, bạn nên nhìn phong cách ngay bên cạnh phần tử. Mã này sẽ tốt cho mục đích trình diễn hoặc thử nghiệm (nếu bạn chỉ muốn xem nhanh một số kiểu đường biên), nhưng sẽ không phải là một ý tưởng hay cho mã sản xuất.

Phong cách địa phương có mức độ ưu tiên rất cao, vì vậy bất kỳ điều gì bạn áp dụng theo phong cách địa phương sẽ ghi đè lên các quy tắc kiểu khác. Đây có thể là một cách giải quyết hữu ích nếu mọi thứ không hoạt động như bạn mong đợi, nhưng tốt hơn để có được phong cách của bạn hoạt động chính xác hơn là dựa vào một workaround.

Những hạn chế của phong cách địa phương

Việc áp dụng phong cách địa phương khá dễ dàng, nhưng phần lớn, kỹ thuật thường không được khuyến cáo vì nó có một số vấn đề, chẳng hạn như

• Không hiệu quả: Nếu bạn xác định kiểu ở cấp phần tử với thuộc tính kiểu, bạn chỉ định nghĩa một cá thể cụ thể.Nếu bạn muốn thiết lập màu sắc đoạn cho toàn bộ trang của bạn theo cách này, bạn sẽ kết thúc bằng văn bản rất nhiều quy tắc phong cách.

• Khả năng đọc: Nếu thông tin kiểu được xen kẽ trên trang, sẽ khó tìm và sửa đổi nhiều hơn nếu nó được đặt ở giữa đầu trang (hoặc trong một tài liệu bên ngoài).

• Thiếu sự tách biệt: Việc đặt các phong cách ở cấp độ phần tử đánh bại mục tiêu tách biệt nội dung khỏi phong cách. Nó sẽ trở nên khó khăn hơn nhiều để thực hiện thay đổi, và sự pha trộn của phong cách và nội dung làm cho mã của bạn khó hơn để đọc và sửa đổi.

• Sự lúng túng: Một toàn bộ các quy tắc CSS phải được nhồi vào một thuộc tính HTML với một cặp dấu ngoặc kép. Điều này rất khó hiểu vì bạn đã tích hợp CSS trực tiếp vào luồng HTML.

• Các vấn đề phát biểu: Thuộc tính HTML yêu cầu trích dẫn, và một số phần tử CSS cũng cần có dấu ngoặc kép (ví dụ các gia đình font có khoảng trắng). Có nhiều mức trích dẫn trong một phần tử là một công thức cho sự cố.