Học Css – Cú pháp và vùng chọn ( Selectors )

Bài này thuộc phần 4 nằm trong tổng 7 phần của serie Học CSS cơ bản

Thông thường khi các bạn học bất cứ một việc gì thì công việc đầu tiên của bạn cần học đó là lý thuyết và những thứ xoay quanh nó. Học css cũng vậy đầu tiên bạn cần nắm vững kiến thức lý thuyết về cú pháp css thì mới có căn cứ để thực hành viết mới hoặc sửa css.

Selectors hay còn gọi là vùng chọn trong css đóng vai trò rất quan trọng , khai niệm này bạn phải hiểu đúng và cần biết cách dùng để sau này bạn có thể điều hướng và gọi css cho bất kỳ thành phần nào trong tài liệu web mà không no bị ảnh hưởng đến những thành phần khác.

Tôi có nghe một câu chuyệ thằng bạn tôi kể là thằng lớp nó học html lúc nào cũng dùng thuộc tính <div id=" "> mà không dùng cái khác. Thật sự cái này mình chưa có bài viết hướng dẫn các bạn nhưng ở bài này bạn cũng sẽ hiểu hơn về div id và khi nào lên dùng nó.

Vùng chọn selectors là gì ?

vùng chọn selector

Vùng chọn selector nó là câu mở đầu cho mỗi khối khai báo có nhiệm vụ tìm và gán thuộc tính, giá trị cho các đối tượng nó hướng đến . Cụ thể vùng chọn selector sẽ tập hợp tìm các đối tượng có trong html dựa trên tên riêng của các đối tượng như: id, class, thuộc tính tag ….

Vùng chọn id

Selector id sử dụng thuộc tính id để gán một id vào phần tử bằng những cái tên bạn đặt cho id đó. Đồng thời tên id phải là duy nhất trong 1 tài liệu web. Mỗi một id được khai báo bằng dấu # trước mỗi id, ví dụ:

<head>
    <style>
         #vi-du{
                 text-align: center;
                 color: red;
}
    </style>
</head>
<body>
    <div id="vi-du">
         <p>Ví dụ về id nhé các bạn</p>
    </div>
</body>

Như vậy thẻ <p> có id vi-du sẽ nhận 2 giá trị : căn giữa và chữ màu đỏ. Vậy thì bây giờ bạn có thể trả lời được cái câu chuyện về thằng bạn học html ở trên mà tôi đề cập chưa.

Vùng chọn Class

Class ( lớp) để chọn một class cụ thể bạn cần khai báo dấu . trước mỗi class. Trong một tài liệu web thì class có thể được sử dụng lặp lại nhiều lần, khác với id nhé các bạn, ví dụ:

<head>
    <style>
         .vi-du{
                 text-align: center;
                 color: red;
}
    </style>
</head>
<body>
    <div class="vi-du">
         <p>Ví dụ về id nhé các bạn</p>
    </div>
</body>

Kết quả cuối cùng vẫn cho ra : căn giữa văn bản và chữ mà đỏ.

Ngoài ra bạn cũng có thể gán giá trị nhất định cho mỗi phần tử nằm trong class dựa trên cú pháp phần tử.tên class{thuộc tính}

p.vi-du{
        background: #mã màu;
        font-size:kích thước;
        ........
}

Nhóm các vùng chọn

Nhóm vùng chọn là việc chúng ta gộp chung các yếu tố có chung thuộc tính lại với nhau để giảm dung lượng file css và thời gian tải trang khi mà có quá nhiều công việc lặp lại.

Để nhóm các yếu tố này với nhau chúng cần được phân cách nhau bằng dấu phẩy. Ví dụ

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}
/* bạn nhóm lại sẽ được như thế này*/
h1, h2, p {
    text-align: center;
    color: red;
}

Trên đây mình đã giới thiệu cho các bạn 3 cách khai báo vùng chọn trong css, thực ra bài viết này vẫn chưa thực sự gọi là đầy đủ vì đối với selector css còn rất nhiều cách khai báo khác nữa, nhưng cốt lõi vấn đề ở đây mình muốn hướng đến các bạn 3 cách hay dùng nhất này mà thôi.

Bài viết khác cùng serie

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái phong cách công sở và thích bàn luận quân sự. Đã từng học tại HaUI khóa K16.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of

Create Account



Log In Your Account



Bảo Nguyễn chỉ hỗ trợ khách hàng qua Email, zalo và hotline ( 0169.865.5334 ).Xem chi tiết