Bài 30: CSS màu và nền

Màu sắc được hiển thị đã kết hợp RED, GREEN, và ánh sáng xanh.

---

Màu sắc trong CSS thường được xác định bởi:

• một tên màu hợp lệ - như "đỏ"
• một giá trị RGB - như "rgb (255, 0, 0)"
• một giá trị HEX - như "# FF0000"

---

màu Names

Màu sắc thiết lập bằng cách sử dụng tên màu:

Thí dụ

Color	Name
	Red
	Green
	Blue
	Orange
	Yellow
	Cyan
	Black

Lưu ý: tên màu là trường hợp không nhạy cảm: "Red" là giống như "đỏ" hay "RED".

HTML và CSS hỗ trợ 140 tên màu chuẩn .

---

RGB (Red, Green, Blue)

giá trị màu RGB có thể được xác định bằng công thức này: rgb (đỏ, xanh lá cây, xanh dương).

Mỗi tham số (đỏ, xanh lá cây, xanh dương) xác định cường độ của màu sắc giữa 0 và 255.

Ví dụ, rgb(255,0,0) được hiển thị như là màu đỏ, bởi vì màu đỏ được thiết lập với giá trị cao nhất của nó (255) và những người khác được thiết lập là 0. Thử nghiệm bằng cách trộn các giá trị RGB dưới đây:

đỏ	màu xanh lá	Màu xanh da trời
255	0	0

rgb( 255 , 0 , 0 )

Thí dụ

Color	RGB
	rgb(255,0,0)
	rgb(0,255,0)
	rgb(0,0,255)
	rgb(255,165,0)
	rgb(255,255,0)
	rgb(0,255,255)

Sắc thái của màu xám thường được xác định bằng giá trị bình đẳng cho tất cả 3 nguồn sáng:

Thí dụ

Color	RGB
	rgb(0,0,0)
	rgb(128,128,128)
	rgb(255,255,255)

---

Màu sắc hexadecimal

Các giá trị RGB cũng có thể được xác định bằng giá trị màu thập lục phân trong các hình thức: # RRGGBB, nơi RR (màu đỏ), GG (màu xanh) và BB (màu xanh) là giá trị thập lục phân giữa 00 và FF (giống như thập phân 0-255).

Ví dụ, #FF0000 được hiển thị như là màu đỏ, bởi vì màu đỏ được thiết lập với giá trị cao nhất của nó (FF) và những người khác được thiết lập với giá trị thấp nhất (00). Lưu ý: giá trị HEX là trường hợp nhạy cảm: "# FF0000" là như nhau như "FF0000".

Thí dụ

Color	HEX
	#FF0000
	#00FF00
	#0000FF
	#FFA500
	#FFFF00
	#00FFFF

Sắc thái của màu xám thường được xác định bằng giá trị bình đẳng cho tất cả 3 nguồn sáng:

Thí dụ

Color	HEX
	#000000
	#808080
	#FFFFFF

Màu nền

Các background-color tài sản xác định màu nền của một phần tử.

Màu nền của một trang được thiết lập như thế này:

Thí dụ

body {
    background-color: lightblue;
}

Với CSS, một màu sắc thường được xác định bởi:

• một tên màu hợp lệ - như "đỏ"
• một giá trị HEX - như "# FF0000"
• một giá trị RGB - như "rgb (255,0,0)"

Nhìn vào giá trị màu CSS cho một danh sách đầy đủ các giá trị màu sắc có thể.

Trong ví dụ dưới đây, <h1>, <p> và <div> có màu nền khác nhau:

Thí dụ

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

---

Hình nền

Các background-image tài sản quy định cụ thể một hình ảnh để sử dụng như là nền tảng của một phần tử.

Theo mặc định, hình ảnh được lặp đi lặp lại như vậy nó bao gồm toàn bộ phần tử.

Hình nền cho một trang có thể được thiết lập như thế này:

Thí dụ

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

Dưới đây là một ví dụ về sự kết hợp xấu của văn bản và hình ảnh nền. Các văn bản là khó có thể đọc:

Thí dụ

body {
    background-image: url("bgdesert.jpg");
}

	Lưu ý: Khi sử dụng hình nền, sử dụng một hình ảnh mà không làm phiền các văn bản.

---

Hình ảnh nền - Lặp lại theo chiều ngang hoặc theo chiều dọc

Theo mặc định, các background-image hữu lặp đi lặp lại một hình ảnh cả hai chiều ngang và chiều dọc.

Một số hình ảnh phải được lặp đi lặp lại chỉ theo chiều ngang hoặc theo chiều dọc, hoặc họ sẽ trông rất lạ lùng, như thế này:

Thí dụ

body {
    background-image: url("gradient_bg.png");
}

Nếu hình ảnh trên được lặp đi lặp lại chỉ theo chiều ngang ( background-repeat: repeat-x; ), nền sẽ nhìn tốt hơn:

Thí dụ

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

	Lưu ý: Để lặp lại một hình ảnh thiết lập theo chiều dọc background-repeat: repeat-y;

---

Hình ảnh nền - Thiết lập vị trí và không lặp lại

Hiển thị hình ảnh nền chỉ một lần cũng được quy định bởi các background-repeat tài sản:

Thí dụ

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

Trong ví dụ trên, các hình nền được thể hiện trong cùng một vị trí như các văn bản. Chúng tôi muốn thay đổi vị trí của hình ảnh, để nó không làm phiền các văn bản quá nhiều.

Các vị trí của hình ảnh được chỉ định bởi các background-position tài sản:

Thí dụ

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

---

Hình ảnh nền - vị trí cố định

Để xác định rằng các hình ảnh nền cần được cố định (sẽ không di chuyển với phần còn lại của trang), sử dụng background-attachment tài sản:

Thí dụ

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

---

Background - tài sản Shorthand

Để rút ngắn mã, nó cũng có thể xác định tất cả các tính chất nền trong một tài sản duy nhất. Điều này được gọi là một tài sản viết tắt.

Tài sản viết tắt cho nền là background :

Thí dụ

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

Khi sử dụng các tài sản viết tắt theo thứ tự của các giá trị tài sản là:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Nó không quan trọng nếu một trong các giá trị tài sản bị mất tích, miễn là những người khác theo thứ tự này.

Tất cả các thuộc tính CSS Background

Property	Description
background	Sets all the background properties in one declaration
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page
background-color	Sets the background color of an element
background-image	Sets the background image for an element
background-position	Sets the starting position of a background image
background-repeat	Sets how a background image will be repeated