XtGem Forum catalog

Bài 7: Đường viền và các thuộc tính của đường viền

Bài 7: Đường viền và các thuộc tính của đường viền

Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho các thẻ HTML như <div>, <li>, <table>,...
Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là:

  1. border-color:
  2. border-width:
  3. border-style:


01. Thuộc tính màu của đường viền
Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính border-color:

Mẫu:
div.color {
border-color: #CC0000;
}
02. Đặt chiều rộng cho đường viền (border)
Nếu muốn đặt chiều rộng của đường viền chúng ta sẽ đặt giá trị cho thuộc tính border-width:

Mẫu:

div.borerwidth {
border-width: 2px;
}


STT Giá trị 1 thin 2 medium 3 thick 4 length 03Chọn kiểu của đường viền
Bạn có thể sử dụng thuộc tính border-style để đặt kiểu cho đường viền. Chúng ta có thể gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác nhau.

Mẫu:
div.borderstyle {
border-style: solid;
}
STT border-style 1 none 2 hidden 3 dotted 4 dashed 5 solid 6 double 7 groove 8 ridge 9 inset 10 outset Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng:
  1. border-top:
  2. border-right:
  3. border-bottom:
  4. border-left:

Ứng với đường viền của mỗi phía chúng ta đều có 3 giá trị (color, width, style)

STT Phía Thuộc tính 1 top border-top-color: border-top-width:
border-top-style: 2 right border-right-color: border-right-width:
border-right-style: 3 bottom border-bottom-color: border-bottom-width:
border-bottom-style: 4 left border-left-color: border-left-width:
border-left-style: Chúng ta có thể dùng phương pháp viết mã giản lược (shorthand) để viết các thuộc tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border của thẻ <div> với độ rộng bằng 1, kiểu solid và màu là #CC0000

Mẫu:
div.border {
border: 1px solid #CC0000;
}

 
Chia sẻ bài viết này :
Link :
BBcode :
Copyright © 20012-2013 by 2Thangban
Powered by Xtgem
Design by PhamKhuong
Số người Người đang online 1
Số lượt xem trong tháng: 1
Tổng số lượt truy cập: 155
Chuyên mục:6
Bài Viết :
In trang này

Chia sẽ với Facebook

Chia Sẽ Cùng Twitter 		Chia Sẽ cùng Google+

Chia sẽ cùng Zing

Chia sẽ cùng Yahoo