Nội dung chính
Sự khác nhau giữa Outline và Border
Nhắc đến Outline trong CSS 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.
<html> <head> <meta charset="UTF-8"> </head> <body> <p style="outline-width:thin; outline-style:solid;"> Thuộc tính outline có giá trị thin. </p> <br /> <p style="outline-width:thick; outline-style:solid;"> Thuộc tính outline có giá trị thick. </p> <br /> <p style="outline-width:5px; outline-style:solid;"> Outline có độ rộng 5 pixel. </p> </body> </html>
Kết quả:
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> <meta charset="UTF-8"> </head> <body> <p style="outline-width:thin; outline-style:solid;"> Outline có độ rộng thin và hình dáng là solid. </p> <br /> <p style="outline-width:thick; outline-style:dashed;"> Outline có độ rộng thick và hình dáng là dashed. </p> <br /> <p style="outline-width:5px;outline-style:dotted;"> Outline có độ rộng la 5px và hình dáng là dotted. </p> </body> </html>
Kết quả:
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> <meta charset="UTF-8"> </head> <body> <p style="outline-width:thin; outline-style:solid;outline-color:red"> Outline có độ rộng thin, hình dáng là solid và màu là red. </p> <br /> <p style="outline-width:thick; outline-style:dashed;outline-color:#009900"> Outline có độ rộng thick, hình dáng là dashed và màu là green. </p> <br /> <p style="outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)"> Outline có độ rộng 5px, hình dáng là dotted và màu là blue. </p> </body> </html>
Kết quả:
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> <meta charset="UTF-8"> </head> <body> <p style="outline:thin solid red;"> Outline có độ rộng thin, hình dáng là solid và màu là red. </p> <br /> <p style="outline:thick dashed #009900;"> Outline có độ rộng thick, hình dáng là dashed và màu là green. </p> <br /> <p style="outline:5px dotted rgb(13,33,232);"> Outline có độ rộng 5px, hình dáng là dotted và màu là blue. </p> </body> </html>
Kết quả:
