Thuộc tính của CSS với ví dụ

W3C hiện đang làm việc trên CSS3. CSS3 bao gồm nhiều mô-đun độc lập khác nhau, mỗi mô-đun xử lý một lĩnh vực cụ thể của CSS. Ví dụ: có Mô-đun Màu CSS, Mô-đun Nền và Đường viền CSS, Mô-đun Phông chữ CSS, v.v. Mỗi mô-đun này đang trên con đường phát triển riêng và do đó, chúng có thể có số cấp độ khác nhau. Ví dụ: một người có thể ở cấp 3 trong khi người khác ở cấp 4. Bất kể, tất cả chúng đều được coi là "CSS3"

Đây là một danh sách riêng các thuộc tính CSS3. Đây là một số thuộc tính mới đang được đưa vào CSS thông qua các mô-đun khác nhau của nó. Các thuộc tính này cũng được bao gồm trong danh sách trên

Cách sử dụng Thuộc tính CSS

Các thuộc tính CSS được sử dụng để áp dụng các kiểu cho các tài liệu có cấu trúc, chẳng hạn như các tài liệu được tạo bằng HTML hoặc XML

Thuộc tính CSS được chỉ định trong tiêu chuẩn CSS. Mỗi thuộc tính có một tập hợp các giá trị có thể. Một số thuộc tính có thể ảnh hưởng đến bất kỳ loại phần tử nào và các thuộc tính khác chỉ áp dụng cho các nhóm phần tử cụ thể

Một biểu định kiểu bao gồm một danh sách các quy tắc. Mỗi quy tắc hoặc bộ quy tắc bao gồm một hoặc nhiều bộ chọn và khối khai báo

Các thuộc tính CSS được sử dụng trong một khối khai báo có giá trị tương ứng

Trong ví dụ sau, chúng tôi đặt màu nền của phần tử body thành màu cam

Trong trường hợp này, background-color là thuộc tính và orange là giá trị của nó

Và trong trường hợp này, body là "bộ chọn"

Bạn có thể áp dụng nhiều thuộc tính cho bất kỳ bộ chọn nào

Bạn cũng có thể áp dụng cùng một kiểu cho nhiều bộ chọn cùng một lúc

Đây là một ví dụ về nơi các kiểu có thể phù hợp với tài liệu HTML

Thử nó

Ví dụ này sử dụng biểu định kiểu được nhúng. Bạn cũng có thể sử dụng biểu định kiểu bên ngoài và áp dụng các kiểu đối với toàn bộ trang web

Quy tắc CSS

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

Quy tắc

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --property-name {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

@property --my-color {
  syntax: "";
  inherits: false;
  initial-value: #c0ffee;
}

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "",
  inherits: false,
  initialValue: "#c0ffee",
});