học CSS tìm hiểu về vùng chọn cơ bản selector

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang	4
Dung lượng	63,75 KB

Nội dung

[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ẻ

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ẻ

Ngày đăng: 28/11/2019, 12:51