Trong hướng dẫn tự học CSS này, bạn sẽ học cách để thiết lập thuộc tính Outline cho một phần tử bằng CSS.
CSS Outline là gì?
Thuộc tính outline trong CSS cho phép bạn trang trí một vùng viền xung quanh hộp phần tử (Ngay ngoài phần Border)
Outline là một đường được vẽ ngay bên ngoài border của các phần tử. Outline thường được sử dụng để biểu diễn trạng thái focus hay active của các phần tử như button, link, input, v.v.
Lát nữa, ở phần bên dưới bạn sẽ được học chi tiết về cách thiết lập kiểu dáng, màu sắc và chiều rộng của Outline.
Outline có gì khác với Border?
Về cơ bản, Outline trông rất giống với Border, nhưng nó khác với Border ở một số điểm:
- Các Outline không chiếm dụng không gian. Nó chồng lên phần tử xung quanh.
- Không giống như Border, Outline sẽ không cho phép chúng ta đặt mỗi cạnh thành một chiều rộng khác nhau hoặc thiết lập màu sắc và kiểu dáng khác nhau cho mỗi cạnh. Outline giống nhau ở tất cả các cạnh.
- Outline không có bất kỳ tác động nào đến các phần tử xung quanh ngoài việc chồng lên phần tử xung quanh.
- Không giống như Border, Outline không thay đổi kích thước hoặc vị trí của phần tử.
- Outline có thể không phải là hình chữ nhật, nhưng bạn không thể tạo outline hình tròn được.
Lưu ý: Nếu bạn thiết lập Outline trên một phần tử, nó sẽ chiếm cùng một lượng không gian trên các trang web giống như nếu không có Outline cho phần tử đó. Bởi vì nó chồng lên Margin (vùng trong suốt bên ngoài đường viền) và các yếu tố xung quanh.
Các kiểu Outline
Thuộc tính outline-style thiết lập kiểu outline của một phần tử như: solid, dotted, v.v.
Thuộc tính outline-style có thể có một trong các giá trị sau: none, solid, dashed, dotted, double, inset, outset, rãnh và ridge.
Để hiểu rõ hơn bạn có thể xem hình minh họa bên dưới đây:
HTML:
<p class="p1">solid</p>
<p class="p2">dotted</p>
<p class="p3">dashed</p>
<p class="p4">double</p>
<p class="p5">inset</p>
<p class="p6">outset</p>
<p class="p7">groove</p>
<p class="p8">ridge</p>CSS:
/* Mình CSS thẻ p cho dễ nhìn*/
p {
outline-width: 10px;
width: 100px;
height: 100px;
float: left;
margin: 20px;
text-align: center;
line-height: 100px;
color: orange;
}
/* Đây là các kiểu Outline*/
.p1 {
outline-style: solid;
}
.p2 {
outline-style: dotted;
}
.p3 {
outline-style: dashed;
}
.p4 {
outline-style: double;
}
.p5 {
outline-style: inset;
}
.p6 {
outline-style: outset;
}
.p7 {
outline-style: groove;
}
.p8 {
outline-style: ridge;
}Kết quả hình minh họa:
Lưu ý: Bạn phải chỉ định một outline-style để làm cho outline xuất hiện xung quanh một phần tử, vì outline-style mặc định là none. Trong khi đó, chiều rộng hoặc độ dày outline mặc định là medium và có màu mặc định giống với màu văn bản.
Cách thiết lập chiều rộng cho outline
Thuộc tính outline-width chỉ định chiều rộng của outline sẽ được thêm vào một phần tử.
Hãy thử ví dụ sau để hiểu cách nó thực sự hoạt động:
HTML:
<p>IE7 không hỗ trợ Outline, IE8 có hỗ trợ nhưng phải được chỉ định <code><!DOCTYPE></code> rõ ràng</p>CSS:
p {
outline-style: dashed;
outline-style: dashed;
margin: 20px;
}Kết quả nhận được là:
Mẹo: Chiều rộng outline có thể được chỉ định bằng cách sử dụng bất kỳ giá trị chiều dài nào, chẳng hạn như px, em, rem, v.v. Nó cũng có thể được chỉ định bằng cách sử dụng một trong ba từ khóa: thin, medium và thick. Giá trị % hoặc giá trị âm là không được phép – giống như thuộc tính chiều rộng border.
Nếu bạn đã quên thì nên xem lại phần: Border trong CSS
Cách thiết lập màu cho Outline
Thuộc tính outline-color sẽ thiết lập màu của Outline.
Thuộc tính này chấp nhận các giá trị giống như các giá trị được sử dụng cho thuộc tính color.
Các quy tắc CSS sau đây thêm một outline liền màu cam xung quanh các đoạn văn bản.
HTML:
<p>Đây là một phần tử có outline liền màu cam</p>CSS:
p {
outline-style: solid;
outline-color: #0000ff;
margin: 20px;
padding: 20px;
}Kết quả nhận được là:
Lưu ý: Thuộc tính CSS outline-width hoặc outline-color không hoạt động nếu nó được sử dụng một mình. Sử dụng thuộc tính outline-style để thiết lập kiểu outline trước.
Cách viết tắt thuộc tính outline trong CSS
Thuộc tính CSS outline là một thuộc tính viết tắt để thiết lập một hoặc nhiều thuộc tính outline-style, outline-width và outline-color trong một dòng CSS duy nhất.
Hãy xem ví dụ sau để hiểu cách nó hoạt động:
HTML:
<p>Viết tắt thuộc tính outline trong CSS</p>CSS:
p {
outline: 5px solid orange;
margin: 20px;
padding: 20px;
}Note: Mình thêm margin và padding cho dễ nhìn hơn thôi.
Nếu giá trị cho một thuộc tính outline riêng lẻ bị bỏ qua hoặc không được chỉ định trong khi viết tắt, giá trị mặc định cho thuộc tính đó sẽ được sử dụng thay thế, nếu có.
Ví dụ: Nếu giá trị cho thuộc tính màu của outline bị thiếu hoặc không được chỉ định khi viết tắt, thuộc tính color của phần tử sẽ được sử dụng làm giá trị cho màu của outline.
Trong ví dụ sau, đường viền sẽ là một đường thẳng màu blue có chiều rộng 5px:
HTML:
<p>Giá trị màu của khi viết tắt outline bị thiếu</p>CSS:
p {
outline: 5px solid;
margin: 20px;
padding: 20px;
color: blue;
}Kết quả được như hình:
Và trong trường hơp thiếu giá trị của thuộc tính outline-style thì cho dù bạn có áp màu sắc, chiều rộng thì nó cũng không xảy ra. Bởi vì outline-style mặc định là không có (Không có thì áp lên đâu??)
Ok, vậy là qua bài viết này mình đã hướng dẫn bạn tìm hiểu về thuộc tính outline trong CSS. Hãy thử nghiệm và ứng dụng nó trong các trường hợp thích hợp bạn nhé.
Học tiếp: Thuộc tính cursor trong CSS
Đọc thêm: Margin trong CSS