🎨 Bài 3: Colors & Backgrounds

h1 {
  color: red;
}

p {
  color: blue;
}

div {
  background-color: lightblue;
}

/* Đỏ */
color: #ff0000;

/* Xanh dương */
color: #0000ff;

/* Tím */
color: #667eea;

/* Viết tắt: #rgb */
color: #f00;  /* Tương đương #ff0000 */
color: #00f;  /* Tương đương #0000ff */

/* Đỏ */
color: rgb(255, 0, 0);

/* Xanh lá */
color: rgb(0, 255, 0);

/* Tím nhạt */
color: rgb(200, 150, 255);

/* Đỏ trong suốt 50% */
background: rgba(255, 0, 0, 0.5);

/* Xanh trong suốt 30% */
background: rgba(0, 100, 255, 0.3);

/* Đen trong suốt 80% */
background: rgba(0, 0, 0, 0.8);

/* Đỏ */
color: hsl(0, 100%, 50%);

/* Xanh lá */
color: hsl(120, 100%, 50%);

/* Xanh dương */
color: hsl(240, 100%, 50%);

/* HSLA - có độ trong suốt */
background: hsla(240, 100%, 50%, 0.5);

/* Background đơn sắc */
div {
  background-color: #f0f0f0;
}

/* Background trong suốt */
.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Background gradient */
.gradient {
  background: linear-gradient(to right, #667eea, #764ba2);
}

div {
  background-image: url('image.jpg');
}

/* Gradient */
div {
  background-image: linear-gradient(to bottom, #667eea, #764ba2);
}

/* Nhiều background */
div {
  background-image: 
    url('overlay.png'),
    url('background.jpg');
}

/* Không lặp lại */
background-repeat: no-repeat;

/* Lặp theo chiều ngang */
background-repeat: repeat-x;

/* Lặp theo chiều dọc */
background-repeat: repeat-y;

/* Lặp cả 2 chiều (default) */
background-repeat: repeat;

/* Từ khóa */
background-position: center;
background-position: top right;
background-position: bottom left;

/* Pixel */
background-position: 50px 100px;

/* Phần trăm */
background-position: 50% 50%;

/* Mix */
background-position: center 20px;

/* Cover - Phủ kín, có thể bị cắt */
background-size: cover;

/* Contain - Hiển thị hết ảnh */
background-size: contain;

/* Kích thước cụ thể */
background-size: 200px 150px;

/* Phần trăm */
background-size: 100% auto;

/* Tự động */
background-size: auto;

/* Background cuộn theo (default) */
background-attachment: scroll;

/* Background cố định (parallax effect) */
background-attachment: fixed;

/* Background cố định theo viewport */
background-attachment: local;

/* Cách viết đầy đủ */
div {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Cách viết ngắn gọn */
div {
  background: #f0f0f0 url('image.jpg') no-repeat center / cover;
}

/* Thứ tự: color image repeat position / size */

/* Gradient từ trên xuống */
background: linear-gradient(red, blue);

/* Gradient từ trái sang phải */
background: linear-gradient(to right, red, blue);

/* Gradient chéo */
background: linear-gradient(45deg, red, blue);

/* Gradient nhiều màu */
background: linear-gradient(to right, red, yellow, green);

/* Gradient với color stops */
background: linear-gradient(to right, 
  red 0%, 
  yellow 50%, 
  green 100%
);

/* Gradient tròn từ giữa */
background: radial-gradient(red, blue);

/* Gradient hình elip */
background: radial-gradient(circle, red, blue);

/* Gradient tại vị trí cụ thể */
background: radial-gradient(at top left, red, blue);

/* Gradient với size */
background: radial-gradient(circle 200px, red, blue);

/* Gradient xoay tròn */
background: conic-gradient(red, yellow, green, blue, red);

/* Pie chart */
background: conic-gradient(
  red 0deg 90deg,
  yellow 90deg 180deg,
  green 180deg 270deg,
  blue 270deg 360deg
);