[Học CSS] Tìm hiểu vùng chọn (Selector) thachpham.com/web-development/html-css/vung-chon-css-co-ban.html Thạch Phạm tháng 4, 2015 https://www.youtube.com/watch?v=iFOwuLjRIao Vùng chọn CSS đóng vai trò quan trọng viết CSS, bạn sử dụng vùng chọn sai điều có nghĩa quy tắc CSS bạn thực thi thực thi khơng chỗ Có thể nói rằng, việc nắm rõ quy tắc sử dụng vùng chọn kỹ thuật quan trọng bạn sử dụng CSS Vùng chọn CSS linh hoạt, bạn chọn từ thẻ sâu vào thẻ bên Ở nói qua kiểu sử dụng vùng chọn bạn sử dụng thường xun nhất, ngồi có kiểu sử dụng vùng chọn nâng cao khác nói gần cuối serie Vùng chọn gì? Trong CSS, vùng chọn nghĩa khu vực mà bạn muốn áp dụng quy tắc CSS mà bạn muốn định cho Ví dụ bạn muốn tăng kích thước font chữ thẻ h1 vùng chọn bạn h1 Vùng chọn tên thẻ HTML thuộc tính HTML Các loại vùng chọn Vùng chọn dựa vào tên thẻ Kiểu vùng chọn đơn giản nhất, chọn toàn phần tử tài liệu HTML dựa vào tên thẻ có tài liệu áp dụng CSS Ví dụ muốn thay đối style cho tồn thẻ h1 website có đoạn CSS sau với vùng chọn h1 Dĩ nhiên với kiểu sử dụng vùng chọn tồn thẻ HTML website chọn CSS biến đổi theo, tức bạn sử dụng kiểu chọn tên thẻ để viết CSS cho khu vực độc lập Vùng chọn dựa vào ID Vùng chọn dựa vào ID (tên định danh) nghĩa bạn chọn phần tử cụ thể dựa vào giá trị thuộc tính id thẻ HTML Sở dĩ vùng chọn id sử dụng để chọn phần tử cụ thể trang tài liệu HTML phần tử phải mang id riêng biệt không trùng 1/4 Id thiết lập dựa vào thuộc tính id thẻ HTML thẻ sử dụng id Khi viết tên id vào CSS phải có dấu thăng ( #tên-id ) đặt trước tên id để phân biệt với loại vùng chọn khác Ví dụ: Rõ ràng bạn thấy ví dụ có hai thẻ h1 muốn viết CSS cho thẻ h1 cụ thể đặt id riêng cho phần tử mà cần viết CSS thay sử dụng vùng chọn dựa theo tên thẻ Ngồi có cách viết vùng chọn theo id khác viết kèm theo tên thẻ sử dụng id h1#post-title , lưu ý phải viết sát Hãy lưu ý rằng, thẻ chứa nhiều id khác tên id cách khoảng trắng 01 < h1 id = "post-title sticky" >Hello Vùng chọn dựa vào Class Class (lớp) sử dụng phổ biến id điểm khác biệt class class sử dụng cho nhiều phần tử trang tài liệu HTML, id sử dụng lần cho phần tử Class khai báo phần tử HTML thuộc tính class Khi khai báo vùng chọn class CSS, tên class phải đặt sau dấu chấm ( tên-class ) Ví dụ cách sử dụng class linh hoạt: Cũng giống id, class viết kèm theo tên thẻ kiểu h1.sticky phải viết liền Vùng chọn theo thứ cấp Kiểu vùng chọn bạn sử dụng thường xuyên, đặc biệt tiến hành viết CSS cho website chọn phần tử theo thứ cấp Nghĩa với vùng chọn này, bạn chọn phần tử phần tử mẹ Ví dụ có đoạn HTML này: 2/4 01 02 03 04 05 06 07 08 09 10 11 < < < < Menu 1 li >Menu 2 li >Menu 3 ul > ul id = "social" > li >Facebook li >Twitter li >Google+ ul > Như đoạn trên, có hai danh sách với thẻ

mang id khác Bây muốn viết CSS cho thẻ
• danh sách #menu làm nào? Nếu bạn viết vùng chọn dựa theo tên thẻ thẻ
• #social áp dụng mà khơng muốn vậy, đặt class hay ID cho thẻ li cách hay Lúc này, sử dụng đến vùng chọn thứ cấp Để chọn thẻ
• bên #menu , viết vùng chọn #menu li thay viết li CSS Lúc CSS hiểu muốn chọn tất thẻ
• nằm bên phần tử mang #menu Vùng chọn theo thứ cấp liền Đây kiểu vùng chọn dựa theo thứ cấp, giúp bạn chọn phần tử bên phần tử áp dụng cho phần từ nằm bật Bây có danh sách hai cấp bật sau: 01 02 03 04 05 06 07 08 09 10 11 12 < < < < < < li >Menu 1.a li >Menu 1.b ul > li > li >Menu 2 li >Menu 3 ul > nav > Nếu muốn viết CSS cho thẻ
• Menu 1.a, Menu 1.b đặt vùng chọn #menu ul ul > li Nếu diễn giải chữ chọn thẻ
• nằm thẻ
  bật thứ hai thẻ
  nằm id #menu Bạn để ý với ví dụ có 3/4 tới hai thẻ
  Thường cách viết vùng chọn bạn sử dụng tạo menu đổ xuống website Lời kết Ở kiểu thiết lập vùng chọn để viết CSS mà bạn thường xuyên sử dụng nhất, dùng liên tục sau viết CSS cho website nên bạn cố gắng luyện tập cách sử dụng nhuần nhuyễn 4/4 ... thứ cấp Để chọn thẻ
  • bên #menu , viết vùng chọn #menu li thay viết li CSS Lúc CSS hiểu muốn chọn tất thẻ
  • nằm bên phần tử mang #menu Vùng chọn theo thứ cấp liền Đây kiểu vùng chọn dựa... liền Vùng chọn theo thứ cấp Kiểu vùng chọn bạn sử dụng thường xuyên, đặc biệt tiến hành viết CSS cho website chọn phần tử theo thứ cấp Nghĩa với vùng chọn này, bạn chọn phần tử phần tử mẹ Ví dụ...
    Thường cách viết vùng chọn bạn sử dụng tạo menu đổ xuống website Lời kết Ở kiểu thiết lập vùng chọn để viết CSS mà bạn thường xuyên sử dụng nhất, dùng liên tục sau viết CSS cho website nên