Cú pháp Css và Selectors

Hello, Bài viết này mình cùng nhau tìm hiểu về cú pháp Css và các selectors của nó.

Cú pháp Css

Bộ quy tắc của CSS được bao gồm có công cụ chọn (selector) và khối khai báo (declaration). Công cụ chọn được trỏ tới phần từ HTML mà bạn đang muốn tạo kiểu. Khối khai báo sẽ chứa một hoặc nhiều khai báo và phân tách với nhau bằng các dấu chấm phẩy. Mỗi khai báo sẽ gồm tên và giá trị đặc tính CSS và chúng phân tách bằng dấu phẩy.

Khai báo CSS luôn được kết thúc bằng dấu chấm phẩy, khối khai báo đặt trong các dấu ngoặc móc. Ở ví dụ dưới đây, các phần tử <p> sẽ được căn trái, chữ màu xanh.

p{
color: blue;
text-align:left;
}

Css selector

Công cụ chọn trong CSS được dùng để tìm và chọn phần tử HTML dựa trên tên các, id, class, thuộc tính… của phần tử.

Element Selector

Đây là công cụ chọn phần tử dựa trên tên của phần tử. Các bạn có thể chọn tất cả các phần tử trên trang như dưới đây (ở trường hợp này, mọi phần tử sẽ được căn giữa và có màu xanh).

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

id Selector

Công cụ này được dùng thuộc tính id của phần tử HTML để chọn. id của một phần tử phải là duy nhất nên id Selector dùng để chọn riêng một phần tử duy nhất.

Để chọn một phần tử bằng id ta dùng kí tự # phía trước và sau đó là id của phần tử. Quy định dưới đây được sẽ áp dụng cho phần tử HTML có id=”so1”.

#so1 {
  text-align: left;
  color: blue;
}

Lưu ý : id sẽ không được phép bắt đầu bằng số.

class Selector

class không phải là duy nhất lên chúng ta có thể đặt tên class giống như nhau để có thể tiện cho việc viết css.

Để chọn ta viết kí tự (.) sau đó là tên lớp. Ở ví dụ sau, tất cả các phần tử HTML có class=”blue” sẽ có màu xanh và được căn giữa.

.blue{
color:blue;
text-align: center;
}

Bạn có thể chọn chỉ những phần tử HTML nhất định là phải chịu tác động của class. Ở ví dụ dưới đây chỉ phần tử có class=”blue” là được căn giữa.

h2.blue{
 text-align: center;
}

Lưu ý: tên class cũng không bắt đầu bằng số.

Group Selector

Nếu có các phần tử có cùng kiểu cách như sau:

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

p {
 text-align: center;
 color: blue;
}

h3{
 text-align: center;
 color: blue;
}

Bạn có thể gom nhóm các công cụ chọn lại để tối ưu hóa code, các công cụ được chọn phân tách bằng dấu phẩy. Dưới đây là cách gom nhóm các công cụ chọn bên trên.

h2, p, h3{
text-align: center;
color: blue;
}

Comment trong css

Trong css bạn có thể sử dụng comment để ghi chú giải thích  những đoạn code để khi cần chỉnh sửa sẽ dễ dàng hơn. Và khi comment trình duyệt sẽ không hiễn thị. Comment trong css được viết bắt đầu bởi /* kết thúc bằng */ có thể viết trên nhiều dòng.

Bạn có thể tham khảo thêm:

CSS Tooltip

CSS Styling Images

CSS Buttons

Kết thúc

Ở trên là tất cả những chi tiết về Cú pháp Css và Selectors. Bài học của mình cũng xin dừng tại đây hẹn gặp các bạn trong các bài học tiếp theo. Chúc các bạn một ngày làm việc và học tập hiệu quả.

Bạn có thể tham khảo thêm về lập trình tại debug1s.com.

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *