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

Tham khảo tài liệu bài 7: đường viền và các thuộc tính của đường viền, công nghệ thông tin, quản trị web phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
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ềnCá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 ư , , ,...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:01Thuộ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ínhborder-color: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ínhborder-width:div.borerwidth { border-width: 2px;}STT Giá trị1 thin2 medium3 thick4 length03Chọn kiểu của đường viềnBạn có thể sử dụng thuộc tính border-style để đặt kiểu cho đường viền. Chúngta 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.div.borderstyle { border-style: solid;}STT border-style1 none2 hidden3 dotted4 dashed5 solid6 double7 groove8 ridge9 inset10 outsetVớ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) Thuộc tínhSTT Phía border-top-color:1 top border-top-width: border-top-style: border-right-color:2 right border-right-width: border-right-style: border-bottom-color:3 bottom border-bottom-width: border-bottom-style: border-left-color:4 left 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ácthuộc tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border củathẻ với độ rộng bằng 1, kiểu solid và màu là #CC0000div.border { border: 1px solid #CC0000;}