CSS3 cơ bản (phần 2)

Đăng bởi Neo trong mục Hướng dẫn vào 24 tháng 6, 2010 | Comments

Ở 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ử.

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter