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>
Thuộc tính background
background-color
Xác định màu nền cho đối tượng, các giá trị bao gồm: mã màu, tên màu, giá trị RGB
background-color :#ff0000;
background-color: red;
background-color: rgb(255,0,0);
background-image
Xác định hình ảnh nền cho đối tượng, giá trị: url (đường dẫn ảnh);
background-image: url(images/icon.gif);
background-repeat
Xác định hình ảnh nền được lặp như thế nào, các giá trị bao gồm: repeat-x, repeat-y, repeat, no-repeat
background-repeat: repeat-x;
background-position
Xác định vị trí hình ảnh nền cho đối tượng, được sử dụng kèm với giá trị background-image
Các giá trị bao gồm: left, right, top, bottom, px, %
background-position: left top;
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 giá trị background-image
Các giá trị bao gồm: fixed (cố định), scroll (cuộn)
background-attachment :fixed;
background
Có giá trị riêng lẻ hoặc tổng hợp các thuộc tính trên
background: url(images/icon.gif) repeat-x left top;
Thuộc tính border
Thuộc tính border được dùng để định dạng đường viền cho thành phần
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];
}
Ví dụ
.tag {
border-top: #ff0000 solid 2px;
}
Thuộc tính width
Thuộc tính width được dùng để định dạng chiều rộng cho đối tượng, nếu không sử dụng thuộc tính này thì chiều rộng mặc định của đối tượng sẽ có giá trị là “auto”
Giá trị được tính theo nhiều đơn vị khác nhau, thường dùng nhất là px, em, %
.tag {
width: 200px;
width: inherit; //thừa kế từ lớp cha
}
Thuộc tính height
Thuộc tính width được dùng để định dạng chiều cao cho đối tượng, nếu không sử dụng thuộc tính này thì chiều rộng mặc định của đối tượng sẽ có giá trị “auto”
Giá trị được tính theo nhiều đơn vị khác nhau, thường dùng nhất là px, em, %
.tag {
height: 200px;
height: inherit; //thừa kế từ lớp cha
}
Thuộc tính text-align
Được dùng để sắp xếp vị trí cho đối tượng, nếu không sử dụng thành phần này thì vị trí mặc định của đối tượng sẽ có giá trị “left”
.tag{
text-align: center;
}
Leave a Comment