Các thuộc tính định dạng chung

• Thuộc tính định dạng nền: background
• Thuộc tính xác định dạng đường viền: border
• Thuộc tính định dạng chiều cao: height
• Thuộc tính định dạng chiều rộng: width
• Thuộc tính canh vị trí: text-align

p.cssStyle {
}

• Thuộc tính background được dùng để định dạng nền cho thành phần.

• Các dạng thuộc tính background:

  • background-color: xác định màu cho nền.
  • background-image: xác định hình cho nền.
  • background-position: xác định vị trí cho nền, thường được sử dụng kèm với background-image.
  • background-repeat: xác định hình nền được lặp lại như thế nào.
  • background-attachment: xác định thành phần nền được cố định hoặc cuộn so với trang, được sử dụng kèm với background-image.
  • background: dạng tổng quát, kết hợp của các loại background trên.
• Chúng ta chỉ học về dạng tổng quát của background, các dạng khác các bạn có thể xem thêm phần tham khảohoặc phần ví dụ.

Cấu trúc background-color viết dạng tổng quát

tag {
    background: giá trị;
}

Giá trị của thuộc tính background-color: (Tham khảo)

• Giá trị theo hệ thập lục phân: gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ).
  VD: color: #ff0000;
• Giá trị theo kết hợp màu RGB: Đây là dạng kết hợp của 3 loại màu, màu đỏ (Red), màu xanh lá (Green), màu xanh dương (Blue).
  VD: color: rgb(255,0,0); // chuỗi giá trị từ 0 tới 255
• Giá trị theo tên tiếng anh: tên màu sắc viết bằng tiếng anh.
  VD: color: red;

p.cssStyle {
    background: blue;
}

Cấu trúc background-image viết dạng tổng quát

tag {
    background: url(đường dẫn hình);
}

p.cssStyle {
    background: url(../images/img_webstandard.gif);
}

• Thuộc tính border được dùng để định dạng đường viền cho thành phần.

• Các thuộc tính border:

  Thuộc tính định dạng

  • border-color: màu cho đường viền
  • border-style: kiểu cho đường viền
  • border-width: độ rộng cho đường viền

  Thuộc tính vị trí

  • border-top: đường viền hiển thị bên trên
  • border-right: đường viền hiển thị bên phải
  • border-bottom: đường viền hiển thị bên dưới
  • border-left: đường viền hiển thị bên trái
  • border: đường viền hiển thị bao quanh thành phần
• Chúng ta chỉ học thuộc tính vị trí của border, các dạng khác các bạn có thể xem thêm phần tham khảo hoặc phần ví dụ.

Cấu trúc

tag {
    border-vị trí: [màu sắc] [kiểu] [độ rộng];
}

Tham khảo thêm [màu sắc].

Tham khảo thêm [kiểu] của border.

Độ rộng có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng điểm ảnh - px, phần trăm - %, em).

p.cssStyle {
    border-top: #ff0000 solid 2px;
}

p.cssStyle {
    border-right: #ff0000 solid 2px;
}

p.cssStyle {
    border-bottom: #ff0000 solid 2px;
}

p.cssStyle {
    border-left: #ff0000 solid 2px;
}

p.cssStyle {
    border: #ff0000 solid 2px;
}

tag {
    height: giá trị;
}

p.cssStyle {
    border: 2px solid red;
    height: 150px;
}

tag {
    width: giá trị;
}

p.cssStyle {
    border: 2px solid red;
    width: 200px;
}

• Thuộc tính text-align được dùng để sắp xếp vị trí cho thành phần, nếu không sử dụng thành phần này thì vị trí mặc định của thành phần sẽ mang giá trị "left".
• Tham khảo thêm về thuộc tính text-align.

Cấu trúc

tag {
    text-align: giá trị;
}

Thuộc tính text-align có các giá trị.

• left: thành phần canh về phía bên trái
• right: thành phần canh về phía bên phải
• center: thành phần canh giữa
• justify: thành phần canh đều 2 bên, thường dùng cho text

p.cssStyle {
    text-align: center;
}