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;
}
1 là một phần của ô API CSS Houdini, nó cho phép các nhà phát triển xác định rõ ràng @property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
2 của họ, cho phép kiểm tra loại thuộc tính, đặt giá trị mặc định và xác định xem một thuộc tính có thể kế thừa giá trị hay khôngQuy tắc
@property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
1 thể hiện đăng ký thuộc tính tùy chỉnh trực tiếp trong biểu định kiểu mà không phải chạy bất kỳ JS nào. Các quy tắc @property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
1 hợp lệ dẫn đến một thuộc tính tùy chỉnh đã đăng ký, như thể @property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
5 đã được gọi với các tham số tương đương@property --property-name {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
@property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
6 Thử nghiệmMô tả cú pháp được phép cho thuộc tính
@property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
0 Thử nghiệmKiểm soát xem đăng ký thuộc tính tùy chỉnh được chỉ định bởi
@property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
1 có kế thừa theo mặc định hay không@property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
2 Thử nghiệmĐặt giá trị ban đầu cho thuộc tính
Quy tắc
@property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
1 hợp lệ đại diện cho đăng ký thuộc tính tùy chỉnh, với tên thuộc tính là chuỗi của phần mở đầu trong quy tắcCác quy tắc
@property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
1 yêu cầu bộ mô tả @property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
6 và @property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
0; . Bộ mô tả @property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
2 chỉ là tùy chọn nếu cú pháp là , nếu không thì bộ mô tả là bắt buộc; Các mô tả không xác định là không hợp lệ và bị bỏ qua, nhưng không làm mất hiệu lực quy tắc
@property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
1Thêm kiểm tra loại vào
@property --my-color {
syntax: "";
inherits: false;
initial-value: #c0ffee;
}
9 window.CSS.registerProperty[{
name: "--my-color",
syntax: "",
inherits: false,
initialValue: "#c0ffee",
}];
0, làm màu, giá trị mặc định và không cho nó kế thừa giá trị của nó