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

HungTQ

Binh nhất
Quản Trị Viên
Bài viết
163
Cảm xúc
10
Các thuộc tính định dạng chung được sử dụng định dạng cho các thẻ HTML, trừ một số thẻ <html></html>, <meta></meta>, <body></body>, <title></title>, <link></link>, <style></style>, <script></script>.
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 viết
HTML:
<!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
CSS:
p.cssStyle {
}
Hiển thị trình duyệt khi chưa sử dụng CSS

[H2]Mục Lục Bài Học[/H2]
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
 

HungTQ

Binh nhất
Quản Trị Viên
Bài viết
163
Cảm xúc
10
[H2]Thuộc tính background[/H2]
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
CSS:
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
CSS:
p.cssStyle {
    background: blue;
}
Hiển thị trình duyệt:

Cấu trúc background-image viết dạng tổng quát
Mã:
tag {
    background: url(đường dẫn hình);
}
CSS viết
Mã:
p.cssStyle {
    background: url(../images/img_webstandard.gif);
}
Hiển thị trình duyệt:
 
Phòng chát
  1. Chưa có nội dung nào, hãy là người đầu tiên !
Top