Thuộc tính outline trong CSS Phân biệt Outline và Border Nhắc đến Outline có thể khiến một số bạn nhầm lẫn nó với Border, tuy nhiên giữa hai thuộc tính này có các điểm khác nhau khá lớn
Trang 1Thuộc tính outline trong CSS
Phân biệt Outline và Border
Nhắc đến Outline có thể khiến một số bạn nhầm lẫn nó với Border, tuy nhiên giữa hai thuộc tính này có các điểm khác nhau khá lớn như sau:
• Một outline là một đường được vẽ ngay bên ngoài cạnh đường viền của các phần
tử Các Outline không chiếm giữ phần không gian, bởi vì chúng luôn luôn được đặt trên một hộp chứa phần tử
• Không giống border, bạn không thể xác định độ rộng, màu và style cho từng cạnh khác nhau bởi vì outline là một đường
• Không giống border, outline không thay đổi kích cỡ và vị trí của phần tử
• Outline không nhất thiết phải ở dạng hình chữ nhật
Ghi chú: Các thuộc tính liên quan tới outline không được hỗ trợ bởi IE 6 và Netscape 7
Liên quan tới outline, trong CSS bạn có thể xác định các thuộc tính sau:
• Thuộc tính outline-width xác định độ rộng của outline
• Thuộc tính outline-style xác định line style cho outline
• Thuộc tính outline-color xác định màu của outline
• Thuộc tính outline để xác định tất cả thuộc tính của outline trên
Thuộc tính outline-width trong CSS
Thuộc tính outline-width xác định độ rộng của outline Giá trị của thuộc tính này nên ở dạng
độ dài (đơn vị pt, px, cm, …) hoặc một trong các giá trị thin, medium, hoặc thick, khá giống
với thuộc tính border-width trong CSS
Nếu bạn xác định giá trị 0px cho thuộc tính này, tức là bạn đã xác định rằng phần tử này không có outline
Dưới đây là ví dụ minh họa cách sử dụng thuộc tính outline-width trong CSS
Trang 2<html> <head> </head> <body> <p style = outline-width:thin; outline-style:solid; > Thuoc tinh outline co gia tri thin </p>
<br /> <p style = outline-width:thick; outline-style:solid; > Thuoc tinh outline co gia tri thick </p> <br /> <p
style = outline-width: 5px ; outline-style:solid; > Outline co do rong 5 pixel </p> </body> </html>
Kết quả là:
Thuộc tính outline-style trong CSS
Sử dụng thuộc tính outline-style giúp bạn có thể xác định line style cho outline (chẳng hạn
dạng solid, dotted, hoặc dashed, …) Các giá trị cho thuộc tính này là:
• none: tức là không có border (tương đương với border-width: 0;)
• solid: đường viền liền đơn
• dotted: đường viền là một dãy các chấm nhỏ
• dashed: đường viền là một dãy các đoạn thẳng ngắn
• double: đường viền là hai đường dạng solid
• groove: đường viền trông giống như được khắc vào trong trang
• ridge: đường viền trông ngược với dạng groove
• inset: đường viền trông giống như là nó được nhúng vào trong trang
• outset: ngược lại với dạng inset
• hidden: giống như none
Ví dụ sau minh họa cách sử dụng thuộc tính outline-style cùng với các giá trị của thuộc tính này trong CSS
<html> <head> </head> <body> <p style = outline-width:thin; outline-style:solid; > Outline co do rong thin va hinh dang la solid
</p> <br /> <p style = width:thick;
outline-style:dashed; > Outline co do rong thick va hinh dang la dashed
</p> <br /> <p style = outline-width: 5px
;outline-style:dotted; > Outline co do rong la 5px va hinh dang la dotted
</p> </body> </html>
Trang 3Kết quả là:
Outline co do rong thin va hinh dang la solid
Outline co do rong thick va hinh dang la dashed
Outline co do rong la 5px va hinh dang la dotted
Thuộc tính outline-color trong CSS
Để xác định màu cho đường outline, bạn sử dụng thuộc tính outline-color trong CSS
Thuộc tính này có thể nhận các giá trị màu dưới dạng tên màu, Hex Code, … (bạn tham khảo chương Màu trong CSS)
Dưới đây là ví dụ minh họa cách thiết lập màu cho đường outline bởi sử dụng thuộc tính outline-color trong CSS
<html> <head> </head> <body> <p style = outline-width:thin; outline-style:solid;outline-color:red" Outline co do rong thin, hinh dang la solid va mau la red </p> <br /> <p
style = outline-width:thick; outline-style:dashed;outline-color:# 009900 " Outline co do rong thick, hinh dang la dashed va mau la green </p>
<br /> <p style = outline-width: 5px ;outline-style:dotted;outline-color:rgb( 13 , 33 , 232 ) > Outline co do rong la 5px, hinh dang la dotted va mau la blue </p> </body> </html>
Kết quả là:
Outline co do rong thin, hinh dang la solid va mau la red
Outline co do rong thick, hinh dang la dashed va mau la green
Trang 4Outline co do rong la 5px, hinh dang la dotted va mau la blue
Thuộc tính outline trong CSS
Sử dụng thuộc tính outline trong CSS giúp bạn có thể xác định tất cả các thuộc tính liên quan tới outline đã trình bày ở trên chỉ trong một Style Rule
Ví dụ minh họa thuộc tính outline trong CSS:
<html> <head> </head> <body> <p style = outline:thin solid red; > Outline co do rong thin, hinh dang la solid va mau la red
</p> <br /> <p style = outline:thick dashed #009900; " Outline co do rong thick, hinh dang la dashed va mau la green </p>
<br /> <p style = outline: 5px dotted rgb( 13 , 33 , 232 );"
Outline co do rong la 5px, hinh dang la dotted va mau la blue </p>
</body> </html>
Kết quả là:
Outline co do rong thin, hinh dang la solid va mau la red
Outline co do rong thick, hinh dang la dashed va mau la green
Outline co do rong la 5px, hinh dang la dotted va mau la blue