Các bộ chọn mới
Bộ chọn CSS đề cập đến cách thức để định kiểu các phần tử HTML theo một bảng định kiểu. Ví dụ, để đặt một đường viền xung quanh tất cả các phần tử <div> sử dụng bộ chọn div: div { border: 1p x solid #000; }.
Để quét một màu nền cho tất cả các phần tử có làm nổi bật lớp, sử dụng bộ chọn: .highlight { background-color: yellow; }.
Để thay đổi độ rộng của một phần tử có giá trị thuộc tính ID là myDiv, sử dụng: #myDiv { width: 250p x; }.
Ngoài các bộ chọn đơn giản này, CSS cũng bao gồm một loạt các bộ chọn phức tạp hơn.
Ví dụ, có thể sử dụng bộ chọn input[type="text"] để chọn chỉ các phần tử đầu vào có chứa một kiểu thuộc tính có giá trị là text hoặc sử dụng lớp-giả: hover để định kiểu một phần tử khi chuột ở trên nó, ví dụ: a:hover { color: red; }.
Tất cả các bộ chọn đều được cung cấp để làm cho việc chọn lựa một phần tử theo kiểu dáng dễ dàng hơn. Với CSS3, thậm chí có nhiều bộ chọn mới hơn đã được thêm vào hòa trộn tất cả chúng đều giúp nhà phát triển thực hiện dễ dàng hơn và làm giả m số lượng mã HTML và JavaScript cần phải viết.
Các bộ chọn thuộc tính:
E[foo^="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó bắt đầu chính xác bằng chuỗi bar E[foo$="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó kết thúc chính xác bằng chuỗi bar E[foo*="bar"]
Chọn một phần tử, E, mà thuộc tính foo của nó chứa chuỗi bar
Các lớp-giả có cấu trúc
E:root
Chọn một phần tử, E, gốc của tài liệu (thẻ <html>) E:nth-child(n)
Chọn một phần tử, E, phần tử con thứ n của phần tử cha mẹ E:nth-last-child(n)
Chọn một phần tử, E, phần tử con cuối cùng thứ n của phần tử cha mẹ E:nth-of-type(n)
Chọn một phần tử, E, phần tử anh chị em thứ n của kiểu
Các hiệu ứng mới
Các hiệu ứng này được đơn giản hóa thông qua một loạt các đặc tính CSS mới,bao gồm:
• nền • mẫu-nền • gốc-nền
• kích thước-nền
• bán kính-đường viền (các góc được làm tròn)
• hình ảnh-đường viền
• màu sắc-đường viền (các đườmg viền gradient)
• hình bóng-hộp (bóng rơi trên các hộp không có hình ảnh)
• kích thước-hộp • độ mờ
• khoảng trống-đường bao • chỉnh lại kích thước • tràn-văn bản
• hình bóng-văn bản • bọc-từ
Các phông chữ We b
Các phông chữ Web đã thực sự được đề xuất cho CSS2 và đã có sẵn trong Microsoft Internet Explorer từ phiên bản 5 nhưng việc này đòi hỏi sử dụng định dạng phông chữ .eot độc quyền (Embedded Open Type - Kiểu mở nhúng), và không ai trong số các nhà cung cấp trình duyệt khác lại chọn triển khai nó. Do đó các phông chữ Web không bao giờ thực sự được chọn trên các trang Web dựa vào CSS2. (adsbygoogle = window.adsbygoogle || []).push({});
Tuy nhiên, với các phiên bản mới nhất của các trình duyệt Firefox, Safari, Chrome, và Opera, có thể sử dụng quy tắc @font-face để sử dụng bất kỳ các phông chữ được cấp phép .ttf (TrueType) hoặc .otf (OpenType) trên trang Web của mình.
Có thể sử dụng phông chữ này theo các quy tắc CSS riêng của lập trình viên, chẳng hạn như: article p { font-family: Ale xa, Arial, Helvetica, sans-serif; }.
Các tính năng mới khác
CSS3 cũng bao gồm nhiều tính năng mới khác, gồm sự hỗ trợ cho các giá trị màu mới, đặc biệt là HSL (Hue, Saturation, Lightness) và hai giá trị màu có các đặc tính alpha — RGBA (Red, Green, Blue, Alpha) và HSLA (Hue, Saturation, Lightness, Alpha).