CSS3 cơ bản (phần 2)
Ở phần này là các kiến thức về: multiple background, selector (các pseudo-classes mới), font và thay đổi kích thước (resize) phần từ
Multiple background
CSS3 cho phép bạn áp dụng nhiều hình nền lên một phần tử (element). Tương tự như việc áp dụng đổ bóng ở phần 1, bạn có thể dùng tất cả các thuộc tính như background-image, background-repeat, background-position và background-size. Các khai báo hình nền cách nhau bởi dấu phẩy:
body { background: url(../images/2.png) no-repeat left top, url(../images/1.png) no-repeat right top, url(../images/3.png) no-repeat left bottom, url(../images/4.png) no-repeat right bottom; background-color:#ffffff; }
Selectors
CSS3 selectors cho phép bạn chọn các phần tử HTML dễ dàng hơn. Cách chọn của CSS3 không những giúp bạn tiết kiệm thời gian viết CSS, giảm dung lượng file mà còn giúp cho mã HTML dễ nhìn hơn. (Trong bài này tôi chỉ nói về pseudo-classes)
Các pseudo-classes mới cho phép bạn chọn một nhóm các phần tử hoặc phần tử tiêng biệt nào đó (trước đây phải dùng javascript để làm việc này, bạn có thể xem thêm cách chọn phần tử với jQuery). Dưới đây là một số pseudo-classes mới
:first-of-type /* Chọn phần tử đầu tiên của thẻ nào đó */ :last-child /* Chỉ chọn phần tử cuối cùng */ :nth-child(n) /* chọn phần tử thứ n */ :not(e) /* chọn tất cả trừ phần tử e */
Mình sẽ làm một bài tổng hợp các pseudo-classes của CSS3 trong thời gian tới Bạn có thể xem chi tiết các pseudo-classes tại sitepoint
Resize
Với CSS3 bạn có thể thay đổi kích thước phần tử với thuộc tính resize. Với đoạn mã sau, bạn sẽ thấy dưới cùng bên phải của thẻ div#ntuts xuất hiện một hình tam giác nhỏ để thay đổi kích thước:
div#ntuts { resize: both; }
Font
Nếu ở CSS2 bạn bị hạn chế với các font như Arial, Verdana , Tahoma vì phần lớn các máy tính có các font này thì ở CSS3 bạn có thể sử dụng bất kỳ font nào bạn muốn. Font sẽ được lấy từ một địa chỉ nào đó trên internet.
@font-face { font-family: VNIThufap2; src: url('http://ntuts.com/fonts/VNI-Thufap2.ttf'); } h1 { font-family: VNIThufap2; font-size: 3.2em; letter-spacing: 1px; text-align: center; }
Hiện tại Safari là trình duyệt hỗ trợ đầy đủ nhất CSS3 & HTML5. Do vậy, nếu học CSS3, bạn nên cài Safari để thử.