Định dạng màu sắc và văn bản là một trong những thuộc tính được sử dụng nhiều nhất trong CSS. Nắm vững kiến thức về màu sắc và cách phối màu sẽ giúp cho trang web của chúng ta trở nên đồng bộ và đẹp hơn rất nhiều.

Các hệ màu trong CSS

CSS sử dụng các hệ màu sau:

• RGB: là hệ màu với 3 channel Reg, Green, Blue
• RGBA: là hệ màu với 4 channel Reg, Green, Blue và Alpha
• HEXA Decimal: là hệ màu sử dụng hệ số thập lục phân
• HSL: là hệ màu với 3 channel Hue, Saturation, Lightness
• HSLA: là hệ màu với 4 channel Hue, Saturation, Lightness vaf Alpha

Trong đó channel Alpha là channel giúp cho màu sắc trở nên trong suốt hơn (có thể nhìn thấy được phần tử bên dưới). Channel alpha có giá trị từ 0 - 1

Các thuộc tính định dạng màu sắc trong CSS

background-color: được sử dụng để chỉ định màu nền cho một phần tử HTML Ví dụ: Chỉ định màu nền cho phần tử có id="sidebar"

sidebar {background-color:red}

background-image: được sử dụng để chỉ định 1 ảnh làm ảnh nền

Ví dụ: Chỉ định ảnh nền cho toàn bộ trang web

body { background-image: url("paper.gif"); }

background-repeat: lặp lại ảnh nền phủ kín vùng chứa với các giá trị

• repeat-x: Chỉ lặp lại ảnh theo phương ngang.
• repeat-y: Chỉ lặp lại ảnh theo phương dọc.
• repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
• no-repeat: Không lặp lại ảnh.

background-attachment: cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính background attachment có các giá trị sau:

• scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
• fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.

background-position: chỉ định ví trí đặt ảnh nền. Thuộc tính background-position có các giá trị sau

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom

Ví dụ: background-position:bottom left sẽ định vị ảnh nền ở góc phía dưới bên trái

• x% y%

Ví dụ: background-position:20% 30% sẽ định vị ảnh nền 20% từ trái qua và 30% từ trên xuống.

• xpos ypos

Ví dụ: background-position:5px 2px sẽ định vị ảnh nền 5px từ trái qua và 2px từ trên xuống.

background: là thuộc tính giúp rút gọn các thuộc tính background trong một khai báo duy nhất.

Cú pháp: background: | | | | Ví dụ: Với các thuộc tính sau:

background-color:blue; background-image: url(logo.png); background-repeat: no-repeat; background-attachment: fixed; background-position: left top;

Chúng ta có thể viết gọn lại thành

background: blue url(logo.png) no-repeat fixed left top;

Định dạng văn bản

font-family: định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một phẩn tử trên trang web (đối với tên font có nhiều hơn một từ phải được đặt trong dấu “”)

Bài viết này chúng ta sẽ cùng tìm hiểu về cách tạo màu nền và ảnh nền cho các thành phần trên trang web với thuộc tính background trong CSS.

1. Cách tạo màu nền (Background Color)

Thuộc tính background-color xác định màu nền cho một thành phần nào đó khi được chỉ định Đoạn mã sau sẽ quy định màu nền của toàn bộ trang web là màu đen

body {background-color:

000000}

Các giá trị của background-colorcó thể là:

• Tên màu (tiếng anh), ví dụ: black, green…
• Hệ màu RGB, ví dụ: rgb(255,0,0)
• Hệ hex, ví dụ:

  000000

• transparent: trong suốt (đây là một giá trị đặc biệt của background-color).

2. Cách tạo ảnh nền (Background Image)

Để tạo ảnh nền cho một thành phần nào đó, ta chỉ cần khai báo thuộc tính background-imgde cho thành phần đó. Ví dụ:

body { background-image: url(background.gif) }

Với background.gif là file hình được đặt chung với thư mục chứa file CSS.

Ví dụ background image

Hình bên là một ví dụ thường thấy về background image mà chúng ta thường thấy trên các trang web Ở đây thành phần tiêu đề được sử dụng một ảnh nền.

3. Background repeat

css background repeat

Khi sử dụng một ảnh làm nền, nếu ảnh đó có kích thước nhỏ hơn độ lớn của thành phần đó thì ảnh nền sẽ được lặp lại để phủ kín không gian còn lại. Thuộc tính background-repeat cho phép ta kiểm soát sự lặp lại của ảnh nền. Thuộc tính này có 4 thuộc tính như sau: – repeat-x: chỉ lặp lại theo phương nằm ngang (như hình bên) – repeat-y: chỉ lặp lại theo phương đúng – repeat: lặp lại theo cả 2 phương, đây là giá trị mặt định khi thuộc tính background-repeat không được khai báo. – no-repeat: không lặp lại.

Ở ví dụ dưới đây mình có một tấm hình có kích thước 65x35px để làm nền cho một thành phần

có độ rộng 170px và độ cao 150px. Khi khai báo thuộc tính background-repeat sẽ có các kết quả tương ứng sau đây: