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

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

Chuẩn bị

Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:

Cấu trúc thư mục

  • Html

    • index.html

    • css

      • style.css

    • images

      • img_webstandard.gif

Click vào dấu [+] để xem cấu trúc.

HTML viết

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" media="screen,print" />
</head>

<body>
<div>
<p>Thành phần không có CSS.</p>
<p class="cssStyle">Thành phần có CSS.<br />
Thành phần có CSS.<br />
Thành phần có CSS.<br />
Thành phần có CSS.</p>
</div>
</body>
</html>

CSS viết

p.cssStyle {
}

Hiển thị trình duyệt khi chưa sử dụng CSS

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Download phần chuẩn bị

Thuộc tính background

  • 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ảo hoặ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;

CSS viết

p.cssStyle {
    background: blue;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

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

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

CSS viết

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

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Xem thêm ví dụ

Thuộc tính border

  • 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).

Thuộc tính border-top, CSS viết

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

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính border-right, CSS viết

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

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính border-bottom, CSS viết

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

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính border-left, CSS viết

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

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính border, CSS viết

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

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Xem thêm ví dụ

Thuộc tính height

  • Thuộc tính height được dùng để định dạng chiều cao cho thành phần.
  • Tham khảo thêm về thuộc tính height.

Cấu trúc

tag {
    height: giá trị;
}

Giá trị 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).

CSS viết

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

Thêm thuộc tính border để dễ thấy được chiều cao của thành phần.

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính width

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

Cấu trúc

tag {
    width: giá trị;
}

Giá trị 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).

CSS viết

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

Thêm thuộc tính border để dễ thấy được chiều rộng của thành phần.

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

Thuộc tính text-align

  • 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

CSS viết

p.cssStyle {
    text-align: center;
}

Hiển thị trình duyệt:

Thành phần không có CSS.

Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.
Thành phần có CSS.

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

Các thuộc tính điều khiển nội dung