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

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;
}

You may also like

Leave a Comment X