CSS 16 – Thuộc tính outline trong CSS

0
168

Xin chào các bạn, trong bài hôm nay, chúng ta sẽ đi tìm hiểu tiếp một thuộc tính nữa trong CSS, đó là thuộc tính định dạng các đường viền bao ngoài outline. Nghe có vẻ giống border nhỉ, nhưng mình sẽ giúp các bạn phân biệt 2 thuộc tính này với nhau nhé.

Định nghĩa

Thuộc tính outline định dạng các đường viền bao ngoài. Thuộc tính outline trong CSS xác định định dạng, màu sắc và độ rộng của vùng outline (bao ngoài). Một outline là một đường kẻ bao quanh các phần tử (bên ngoài đường viền) để tạo phần tử “nổi bật”.

Phân biệt Outline và Border

Nghe định nghĩa outline có thể khiến các bạn nhầm lẫn nó với thuộc tính đường viền border, tuy nhiên, giữa 2 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ử, tổng chiều rộng và chiều cao của phần tử không bị ảnh hưởng bởi chiều rộng của outline.
  • Outline không nhất thiết phải ở dạng hình chữ nhật.

Cấu trúc sử dụng

Trong đó thuộc tính outline có các cách sử dụng 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.

Giá trị các thuộc tính đi theo quy định của outline trong CSS, và bây giờ chúng ta đi tìm hiểu từng thuộc tính outline cùng với giá trị tương ứng của nó.

Thuộc tính outline-width

Thuộc tính outline-width xác định độ rộng cho đường bao ngoài. 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.

Ví dụ:

Thuộc tính outline-style

Sử dụng thuộc tính outline-style giúp bạn có thể xác định kiểu đường viền cho outline (chẳng hạn dạng solid, dotted, hoặc dashed, …). Các giá trị cho thuộc tính này ở bảng dưới đây:

Thuộc tínhGiá trị (kiểu đường viền)Mô tả
outline-stylenoneKhông có đường viền (tương đương với outline-width: 0;)
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
solidĐường viền liền đơ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.
outsetngược lại với dạng inset.
hiddengiống như none, xác định outline bị ẩn.
inheritoutline-style: inherit;

Ví dụ:

Thuộc tính outline-color

Để 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 các mã 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.

Viết gọn thuộc tính outline

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:

Chú ýoutline-style là thuộc tính bắt buộc phải có khi bạn sử dụng outline trong CSS.

Tất cả các thuộc tính outline trong CSS

Thuộc tínhMô tả
outlinethiết lập thuộc tính outline trong một khai báo
outline-colorthiết lập màu của outline
outline-offsetxác định khoảng cách giữa một outline và vùng hoặc đường biên của phần tử
outline-stylethiết lập định dạng cho outline
outline-widththiết lập chiều rộng của outline

Kết luận

Như vậy trong bài này mình đã hướng dẫn xong cho các bạn về thuộc tính outline trong CSS và cách phân biệt outline với border.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây