Các thuộc tính định dạng chung ~ Tin Công nghệ, Mạng máy tính, Điện Thoại, iPhone, Thủ thuật Bloger

4/8/14

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

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

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

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" type="text/css" 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.

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:

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.

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

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.

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.

4/8/14