Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)

Vùng chọn trong CSS (CSS Selector)

5/5 - (4 bình chọn)

CSS Selector có vai trò rất quan trọng khi các bạn thiết kế website, tuy nhiên trong CSS có rất nhiều loại selector nên trong bài này mình chỉ nêu một số các selector chính và hay dùng nhất để các bạn tiện theo dõi nhất. Các selector còn lại mình sẽ giải thích trong các bài tiếp theo.

Trước khi đọc bài này thì các bạn nên xem cách viết CSS như thế nào nhé. Vì bài này sẽ có nhiều kiến thức liên quan đến phần đó.

Contents

Selector là gì?

Vùng chọn trong CSS là khu vực mà bạn muốn nó được áp dụng quy tắc CSS. Vùng chọn có thể là tên thẻ HTML hoặc thuộc tính của HTML.

Như các bạn đã biết thì trong một file HTML thì có rất nhiều thẻ giống nhau và giờ chúng ta muốn mỗi thẻ đó có một kiểu hiển thị khác nhau thì làm như thế nào? Chúng ta sẽ gán thêm một thuộc tính là id, class cho các thẻ để phân biệt với nhau. Và CSS sẽ dựa vào các ID và class đó để style theo đúng yêu cầu ban đầu.

Ví dụ: Chúng ta sẽ cho tất cả các thẻ p có cỡ chữ là 20px và có màu đỏ

Vùng chọn trong CSS (CSS Selector) selector-a

Quá đơn giản phải không nào? Vậy thì CSS có bao nhiêu selector và chúng được gọi ra như thế nào? Chúng ta sẽ lần lượt tìm hiểu từng loại Selector nhé.

Xem thêm: CSS là gì?

Các loại Selector hay dùng

Trong bài này mình xin đề cập đến một số selector thông dụng là:

  • Selector dựa vào tên thẻ
  • Selector dựa vào ID
  • Selector dựa vào Class
  • Selector theo thứ cấp

Selector dựa theo tên thẻ

Loại vùng chọn này sẽ chọn toàn bộ các phần tử trên tập tin HTML dựa vào tên thẻ trong tập tin để áp dụng CSS. Như ví dụ ở trên tôi đã đề cập là áp dụng cho tất cả các thẻ p trong HTML có cỡ chữ là 20px và màu chữ màu đỏ.

Với kiểu selector này thì bạn không thể viết CSS cho một khu vực riêng biệt mà chỉ có thể viết cho toàn bộ các thẻ HTML trong website.

Selector dựa theo ID

Một chú ý cực kỳ quan trọng trong bài này là trong một trang web thì chỉ tồn tại mộtid” duy nhất. Nghĩa là nếu bạn có 2 id trùng nhau trong một layout thì layout đó đã không đúng chuẩn giao diện của W3C.

Id được thiết lập dựa theo thuộc tính id trong thẻ HTML và bạn có thể sử dụng id cho bất kỳ thẻ nào. Lưu ý 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.

Vùng chọn trong CSS (CSS Selector) selector-by-id

Vùng chọn trong CSS (CSS Selector) kq-selector-by-id

Selector dựa theo Class

Ngược lại với Selector dựa theo id thì Selector dựa theo class có thể được viết đi viết lại nhiều lần. Nghĩa là cho nhiều thẻ HTML có cùng tên class. Ví dụ như chúng ta muốn một số thẻ p có màu chữ màu xanh nếu dùng id có vẻ không hợp lý lắm, vì vậy CSS đã cho chúng ta một bộ chọn khác đó chính là class.

Class được khai báo trong một phần tử HTML bởi thuộc tính class <tên thẻ class=”tên-class”>. Khi khai báo vùng chọn class, tên class phải được đặt sau dấu chấm (.tên-class).

Vùng chọn trong CSS (CSS Selector) selector-by-class

Vùng chọn trong CSS (CSS Selector) kq-selector-by-class

Selector theo thứ cấp

Với kiểu selector này bạn có thể chọn một phần tử con trong một phần tử cha nào đó.

Trong ví dụ dưới đây, tôi có 2 danh sách với thẻ <ul> có id khác nhau. Để viết CSS cho các thẻ <li> trong danh sách #level, mình viết selector là #level li tức là CSS hiểu rằng bạn muốn chọn tất cả các thẻ <li> nằm trong phần tử #level.

Vùng chọn trong CSS (CSS Selector) selector-theo-phan-cap

Vùng chọn trong CSS (CSS Selector) kq-selector-theo-phan-cap

Qua bài này mình muốn các bạn hiểu thế nào là vùng chọn trong CSS. Còn rất nhiều các Selector khác nữa nhưng mình không đề cập ở đây vì sợ các bạn mới học sẽ bị loạn kiến thức. Mình sẽ đề cập tới các selector đó ở các bài tiếp theo trong series này. Với các selector này thì các bạn cũng đã có thể cắt HTML được rồi đó. Hẹn gặp các bạn ở bài tiếp theo.

Xem thêm: Dịch vụ thiết kế web

 

Tin mới nhất

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Google Featured Snippets là gì? khái niệm về Google Featured Snippets hiểu sao cho đúng và SEO TOP 0 là...
    23 giây trước
  2. Trong một thế giới mà Google cố gắng làm cho SERP (Bảng xếp hạng kết quả tìm kiếm (tự nhiên)...
    22 giây trước
  3. Cửa là bộ phận không thể thiếu của một ngôi nhà, vậy làm thế nào để chọn được loại cửa...
    9 giây trước
  4. Trước đây, để xây dựng được một liên kết hiệu quả không đơn thuần chỉ dựa trên số lượng mà...
    2 giây trước
  5. Vào tháng 3 năm 2014, Matt Cutts đã chia sẻ với khán giả ở Triển lãm quảng cáo tìm kiếm...
    18 giây trước
  6. Khi viết blog việc mắc phải những sai lầm là điều không thể tránh. Ai cũng có thể mắc những...
    3 giây trước
  7. >>> Bài đánh giá của chúng tôi cho thấy các ví dụ về các cải tiến mới nhất trong truyền...
    25 giây trước
  8. Hiện nay theo thống kê có đến hơn 90% số người có xu hướng ưa chuộng các nội dung xuất...
    30 giây trước
  9. Google Webmaster Tool và Google Analytics là hai công cụ thống kê và phân tích trang web phổ biến nhất...
    21 giây trước
  10. “Content is King” nhưng Google mới là ông chủ! Nội dung chưa thực sự là vua. Vì sao vậy? "Content...
    29 giây trước