CSS - Cú pháp

CSS bao gồm các quy tắc kiểu được trình duyệt diễn giải và sau đó được áp dụng cho các phần tử tương ứng trong tài liệu của bạn. Quy tắc kiểu bao gồm ba phần:

Selector- Bộ chọn là một thẻ HTML tại đó một kiểu sẽ được áp dụng. Đây có thể là bất kỳ thẻ nào như <h1> hoặc <table>, v.v.
Property- Thuộc tính là một loại thuộc tính của thẻ HTML. Nói một cách đơn giản, tất cả các thuộc tính HTML đều được chuyển đổi thành các thuộc tính CSS. Chúng có thể là màu sắc , đường viền , v.v.
Value- Giá trị được gán cho thuộc tính. Ví dụ: thuộc tính màu có thể có giá trị là màu đỏ hoặc # F1F1F1, v.v.

Bạn có thể đặt Cú pháp quy tắc kiểu CSS như sau:

selector { property: value }

Example - Bạn có thể xác định đường viền bảng như sau:

table{ border :1px solid #C00; }

Bảng ở đây là bộ chọn và đường viền là thuộc tính và giá trị đã cho 1px solid # C00 là giá trị của thuộc tính đó.

Bạn có thể xác định bộ chọn theo nhiều cách đơn giản khác nhau dựa trên sự thoải mái của bạn. Hãy để tôi đặt từng bộ chọn một.

Bộ chọn loại

Đây là cùng một bộ chọn mà chúng ta đã thấy ở trên. Một lần nữa, một ví dụ nữa để cung cấp màu sắc cho tất cả các tiêu đề cấp 1 -

h1 {
   color: #36CFFF; 
}

Bộ chọn chung

Thay vì chọn các phần tử của một loại cụ thể, công cụ chọn phổ quát khá đơn giản là khớp với tên của bất kỳ loại phần tử nào -

* { 
   color: #000000; 
}

Quy tắc này hiển thị nội dung của mọi phần tử trong tài liệu của chúng tôi bằng màu đen.

Những người chọn hậu duệ

Giả sử bạn muốn áp dụng quy tắc kiểu cho một phần tử cụ thể chỉ khi nó nằm bên trong một phần tử cụ thể. Như được đưa ra trong ví dụ sau, quy tắc kiểu sẽ chỉ áp dụng cho phần tử <em> khi nó nằm bên trong thẻ <ul>.

ul em {
   color: #000000; 
}

Bộ chọn lớp

Bạn có thể xác định các quy tắc kiểu dựa trên thuộc tính lớp của các phần tử. Tất cả các phần tử có lớp đó sẽ được định dạng theo quy tắc đã xác định.

.black {
   color: #000000; 
}

Quy tắc này hiển thị nội dung bằng màu đen cho mọi phần tử có thuộc tính lớp được đặt thành màu đen trong tài liệu của chúng tôi. Bạn có thể làm cho nó cụ thể hơn một chút. Ví dụ -

h1.black {
   color: #000000; 
}

Quy tắc này chỉ hiển thị nội dung bằng màu đen cho các phần tử <h1> có thuộc tính lớp được đặt thành màu đen .

Bạn có thể áp dụng nhiều bộ chọn lớp cho phần tử đã cho. Hãy xem xét ví dụ sau:

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

Bộ chọn ID

Bạn có thể xác định các quy tắc kiểu dựa trên thuộc tính id của các phần tử. Tất cả các phần tử có id đó sẽ được định dạng theo quy tắc đã xác định.

#black {
   color: #000000; 
}

Quy tắc này hiển thị nội dung bằng màu đen cho mọi phần tử có thuộc tính id được đặt thành màu đen trong tài liệu của chúng tôi. Bạn có thể làm cho nó cụ thể hơn một chút. Ví dụ -

h1#black {
   color: #000000; 
}

Quy tắc này chỉ hiển thị nội dung bằng màu đen cho các phần tử <h1> có thuộc tính id được đặt thành màu đen .

Sức mạnh thực sự của bộ chọn id là khi chúng được sử dụng làm nền tảng cho bộ chọn con cháu, Ví dụ:

#black h2 {
   color: #000000; 
}

Trong ví dụ này, tất cả các tiêu đề cấp 2 sẽ được hiển thị bằng màu đen khi các tiêu đề đó nằm trong các thẻ có thuộc tính id được đặt thành màu đen .

Những người chọn con

Bạn đã thấy các bộ chọn hậu duệ. Có một loại bộ chọn nữa, rất giống với bộ chọn con nhưng có chức năng khác. Hãy xem xét ví dụ sau:

body > p {
   color: #000000; 
}

Quy tắc này sẽ hiển thị tất cả các đoạn bằng màu đen nếu chúng là con trực tiếp của phần tử <body>. Các đoạn văn khác được đặt bên trong các phần tử khác như <div> hoặc <td> sẽ không có bất kỳ ảnh hưởng nào của quy tắc này.

Bộ chọn thuộc tính

Bạn cũng có thể áp dụng kiểu cho các phần tử HTML với các thuộc tính cụ thể. Quy tắc kiểu bên dưới sẽ khớp với tất cả các phần tử đầu vào có thuộc tính type với giá trị là văn bản -

input[type = "text"] {
   color: #000000; 
}

Ưu điểm của phương pháp này là phần tử <input type = "submit" /> không bị ảnh hưởng và màu chỉ được áp dụng cho các trường văn bản mong muốn.

Có các quy tắc sau được áp dụng cho bộ chọn thuộc tính.

p[lang]- Chọn tất cả các phần tử đoạn văn có thuộc tính lang .
p[lang="fr"]- Chọn tất cả các phần tử đoạn có thuộc tính lang có giá trị chính xác là "fr".
p[lang~="fr"]- Chọn tất cả các phần tử đoạn có thuộc tính lang chứa từ "fr".
p[lang|="en"]- Chọn tất cả các phần tử đoạn có thuộc tính lang chứa các giá trị chính xác là "en" hoặc bắt đầu bằng "en-".

Nhiều quy tắc kiểu

Bạn có thể cần phải xác định nhiều quy tắc kiểu cho một phần tử. Bạn có thể xác định các quy tắc này để kết hợp nhiều thuộc tính và giá trị tương ứng thành một khối duy nhất như được định nghĩa trong ví dụ sau:

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Ở đây, tất cả các cặp thuộc tính và giá trị được phân tách bằng dấu semicolon (;). Bạn có thể giữ chúng trong một dòng hoặc nhiều dòng. Để dễ đọc hơn, chúng tôi giữ chúng ở các dòng riêng biệt.

Trong một thời gian, đừng bận tâm về các thuộc tính được đề cập trong khối trên. Các thuộc tính này sẽ được giải thích trong các chương tới và bạn có thể tìm thấy chi tiết đầy đủ về các thuộc tính trong Tài liệu tham khảo CSS

Bộ chọn nhóm

Bạn có thể áp dụng một kiểu cho nhiều bộ chọn nếu muốn. Chỉ cần tách các bộ chọn bằng dấu phẩy, như được đưa ra trong ví dụ sau:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Quy tắc xác định kiểu này cũng sẽ được áp dụng cho phần tử h1, h2 và h3. Thứ tự của danh sách không liên quan. Tất cả các phần tử trong bộ chọn sẽ có các khai báo tương ứng được áp dụng cho chúng.

Bạn có thể kết hợp các bộ chọn id khác nhau với nhau như hình dưới đây -

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}