Các lớp và ID giúp mở rộng CSS của bạn
Xây dựng trang web trên web ngày nay đòi hỏi sự hiểu biết sâu sắc về CSS (Cascading Style Sheets). Đây là các hướng dẫn mà bạn cung cấp cho một trang web để xác định cách nó sẽ bố trí trong cửa sổ trình duyệt. Bạn áp dụng một loạt các "kiểu" cho tài liệu HTML của bạn, nó sẽ tạo ra giao diện trang web của bạn.
Có nhiều cách để áp dụng những kiểu nói trên trên một tài liệu, nhưng đôi khi bạn muốn sử dụng kiểu chỉ trên một số phần tử trong tài liệu, nhưng không phải tất cả các phiên bản của phần tử đó.
Bạn cũng có thể muốn tạo một kiểu mà bạn có thể áp dụng cho một số phần tử trong một tài liệu mà không phải lặp lại quy tắc kiểu cho từng cá thể riêng lẻ. Để đạt được các kiểu dáng mong muốn này, bạn sẽ sử dụng các thuộc tính lớp và ID HTML. Các thuộc tính này là các thuộc tính toàn cầu có thể được áp dụng cho hầu hết các thẻ HTML . Điều đó có nghĩa là dù bạn là các bộ phận kiểu dáng, đoạn văn, liên kết, danh sách hay bất kỳ phần nào khác của HTML trong tài liệu của mình, bạn có thể chuyển sang thuộc tính lớp và ID giúp bạn hoàn thành nhiệm vụ này!
Bộ chọn lớp
Bộ chọn lớp cho phép bạn đặt nhiều kiểu cho cùng một phần tử hoặc thẻ trong tài liệu. Ví dụ: bạn có thể muốn có một số phần nhất định của văn bản được gọi bằng màu khác với phần còn lại của văn bản trong tài liệu. Những phần được đánh dấu này có thể là "cảnh báo" mà bạn đang đặt trên trang. Bạn có thể gán các đoạn văn của bạn với các lớp như sau:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Các kiểu này sẽ đặt màu của tất cả các đoạn thành màu xanh (# 0000ff), nhưng bất kỳ đoạn nào có thuộc tính lớp là "cảnh báo" sẽ thay thế bằng kiểu được tô màu đỏ (# ff0000). Điều này là do thuộc tính lớp có độ đặc hiệu cao hơn quy tắc CSS đầu tiên, chỉ sử dụng bộ chọn thẻ.
Khi làm việc với CSS, quy tắc cụ thể hơn sẽ ghi đè quy tắc cụ thể hơn. Vì vậy, trong ví dụ này, quy tắc tổng quát hơn đặt màu của tất cả các đoạn văn, nhưng quy tắc thứ hai, cụ thể hơn các ghi đè chỉ thiết lập trên một số đoạn văn.
Đây là cách có thể sử dụng điều này trong một số đánh dấu HTML:
Đoạn này sẽ được hiển thị bằng màu xanh dương, đó là mặc định cho trang.
Đoạn này cũng sẽ có màu xanh lam.
Và đoạn này sẽ được hiển thị bằng màu đỏ vì thuộc tính lớp sẽ ghi đè màu xanh tiêu chuẩn từ kiểu dáng bộ chọn yếu tố.
Trong ví dụ đó, kiểu "p.alert" sẽ chỉ áp dụng cho các phần tử đoạn sử dụng lớp "cảnh báo" đó. Nếu bạn muốn sử dụng lớp đó trên nhiều phần tử HTML, bạn chỉ cần xóa phần tử HTML khỏi đầu gọi phong cách (chỉ cần chắc chắn để lại khoảng thời gian (.) tại chỗ), như thế này:
.alert {background-color: # ff0000;}
Lớp này hiện có sẵn cho bất kỳ phần tử nào cần nó. Bất kỳ phần nào của HTML của bạn có giá trị thuộc tính lớp là "alert" sẽ nhận được kiểu này. Trong HTML bên dưới, chúng tôi có cả đoạn văn và tiêu đề cấp 2 sử dụng lớp "cảnh báo". Cả hai đều có màu nền đỏ dựa trên CSS mà chúng tôi vừa trình bày.
Đoạn này sẽ được viết bằng màu đỏ.
Và h2 này cũng sẽ có màu đỏ.
Trên các trang web ngày nay, các thuộc tính lớp thường được sử dụng trên hầu hết các phần tử vì chúng dễ dàng hơn để làm việc với quan điểm cụ thể mà các ID là. Bạn sẽ tìm thấy hầu hết các trang HTML hiện tại để được lấp đầy với các thuộc tính lớp, một số trong đó được lặp lại nhiều lần trong một tài liệu và những trang khác chỉ có thể xuất hiện một lần.
Bộ chọn ID
Bộ chọn ID cho phép bạn đặt tên cho một kiểu cụ thể mà không cần liên kết với một thẻ hoặc phần tử HTML khác. Giả sử bạn có một bộ phận trong đánh dấu HTML có chứa thông tin về một sự kiện.
Bạn có thể cung cấp cho bộ phận này một thuộc tính ID của "sự kiện", và sau đó nếu bạn muốn phác thảo phân chia đó với đường viền màu đen rộng 1 pixel, bạn viết mã ID như sau:
#event {border: 1px rắn # 000; }
Thách thức với bộ chọn ID là chúng không thể lặp lại trong tài liệu HTML. Chúng phải là duy nhất (bạn có thể sử dụng cùng một ID trên nhiều trang của trang web của bạn, nhưng chỉ một lần trong mỗi tài liệu HTML riêng lẻ). Vì vậy, nếu bạn có 3 sự kiện mà tất cả cần biên giới này, bạn sẽ cần phải cung cấp cho họ các thuộc tính ID của "event1", "event2" và "event3" và tạo kiểu cho từng thuộc tính. Do đó, nó sẽ dễ dàng hơn nhiều khi sử dụng thuộc tính lớp nói trên của "sự kiện" và phong cách tất cả chúng cùng một lúc.
Một thách thức khác với các thuộc tính ID là chúng có độ đặc hiệu cao hơn các thuộc tính lớp. Điều này có nghĩa rằng nếu bạn cần có CSS ghi đè kiểu đã được thiết lập trước đó, có thể khó thực hiện điều này nếu bạn đã dựa quá nhiều vào các ID. Chính vì lý do này mà nhiều nhà phát triển web đã chuyển từ sử dụng ID trong đánh dấu của họ, ngay cả khi họ chỉ định sử dụng giá trị đó một lần và thay vào đó chuyển sang thuộc tính lớp ít cụ thể hơn cho hầu hết các kiểu.
Một khu vực mà các thuộc tính ID đi vào hoạt động là khi bạn muốn tạo một trang có các liên kết neo trong trang. Ví dụ: nếu bạn có trang web theo kiểu thị sai có chứa tất cả nội dung trên một trang có liên kết "nhảy" đến các phần khác nhau của trang đó. Điều này được thực hiện bằng cách sử dụng thuộc tính ID và liên kết văn bản sử dụng các liên kết anchor này.
Bạn chỉ cần thêm giá trị của thuộc tính đó, trước bởi ký hiệu #, vào thuộc tính href của liên kết, như sau:
Đây là liên kết
Khi được nhấp hoặc chạm vào, liên kết này sẽ chuyển đến phần của trang có thuộc tính ID này. Nếu không có phần tử nào trên trang sử dụng giá trị ID này, liên kết sẽ không làm gì cả.
Hãy nhớ rằng, nếu bạn muốn tạo liên kết trong trang trên một trang web, việc sử dụng các thuộc tính ID sẽ được yêu cầu, nhưng bạn vẫn có thể chuyển sang các lớp cho các mục đích tạo kiểu CSS chung. Đây là cách tôi đánh dấu các trang ngày hôm nay - Tôi đã sử dụng các bộ chọn lớp càng nhiều càng tốt và chỉ chuyển sang các ID khi tôi cần thuộc tính để hoạt động không chỉ như một móc cho CSS mà còn là một liên kết trong trang.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào 8/9/17