1. Tạo màu nền background cho thẻ HTML

Giả sử mình có thẻ div, mình muốn tạo background và đường viền cho nó thì chỉ cần sử dụng thuộc tính background và border.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                background: yellow;
                height: 200px;
                border: solid 3px blue;
                width:40%;
            }
        </style>
    </head>
    <body>
        <div>
            Nội dung bên trong
        </div>
    </body>
</html>

2. Hiểu rõ về màu sắc của background và border

Về màu sắc thì bạn có thể sử dụng theo các quy tắc như sau:

  • Sử dụng tên tiếng Anh như black, white, red, blue ...
  • Sử dụng định dạng RGB như:
    • rgb(255,0,0) = red
    • rgb(0,255,0) = green
    • rgb(0,0,255) = blue
    • rgb(0,0,0) = black
    • rgb(255,255,255) = white
  • Sử dụng định dạng Hex như:
    • #ff0000 = red
    • #00ff00 = green
    • #0000ff = blue
    • #000000 = black
    • #ffffff = white
  • Và một vài định dạng khác như RGBA và HSL

Chúng ta thường sử dụng định dạng Hex, vì đây là mã màu chuẩn trong Photoshop.

Ví dụ: Thiết lập background màu đỏ thì bạn có thể viết một trong những cách dưới đây.

1
2
3
background: red;
background: #ff0000;
background: rgb(255,0,0);


Nếu muốn cho ảnh nền vào background của thẻ div, body, ... ta làm như sau

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-image: url("img_tree.gif"), url("paper.gif");
  }
</style>
</head>
<body>

</body>
</html>



Nếu bạn muốn tạo đường viền bị cắt khúc thì sử dụng giá trị doted như sau:

1
border: dotted 3px blue;