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í 15++ 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 đó.

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

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...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

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. Daucongnghiep.vn là website được Lamvt thiết kế và SEO; thông qua sự ủy nhiệm của Công ty Cổ phần Xây...
    5 giây trước
  2. Hiện nay, SEO đang là một chủ đề nóng và ngày càng quan trọng trong việc quảng bá một trang...
    27 giây trước
  3. Bạn nghĩ gì khi nghe thấy thuật ngữ “SEO”? Bạn làm gì để duy trì hoặc cả thiện thứ hạng SEO...
    12 giây trước
  4. Check Unique hay còn gọi là  kiểm tra đạo văn là một bước không thể thiếu với dân content sau...
    16 giây trước
  5. Trong chiến lược tiếp thị toàn diện và hiệu quả, có rất nhiều nhân tố được các chủ doanh nghiệp...
    13 giây trước
  6. Liên kết nội bộ (Internal Links) là một trong những mục SEO thiết yếu mà bạn phải chú ý để...
    22 giây trước
  7. Câu hỏi Tôi làm development trên một box và có sử dụng cho production. Tôi kết xuất cơ sở dữ...
    9 giây trước
  8. WordPress Theme là một trong những yếu tố quan trọng hàng đầu thu hút hàng vạn người đến với giao...
    13 giây trước
  9. Tất cả các chủ đề WordPress đi kèm với một tập tin functions.php. Tập tin này hoạt động như một...
    13 giây trước
  10. Giảm Thời gian phản hồi của máy chủ là một giá trị quan trọng để theo dõi vì tất cả...
    2 giây trước