Khi bạn đang thiết kế một phần tử web, bạn có thể quyết định rằng bạn muốn một đường viền xuất hiện xung quanh phần tử đó trên trang. Ví dụ:nếu bạn đang thiết kế một hộp mà bạn muốn làm nổi bật, bạn có thể muốn thêm đường viền màu xung quanh hộp để thu hút sự chú ý vào phần tử.
Đó là nơi xuất hiện thuộc tính CSS outline. Thuộc tính outline cho phép bạn thêm một đường bên ngoài đường viền của một phần tử để làm cho phần tử đó nổi bật trên trang web.
Hướng dẫn này sẽ thảo luận, với các ví dụ, khái niệm cơ bản về phác thảo và cách sử dụng thuộc tính CSS outline để vẽ một đường bên ngoài đường viền của một phần tử web. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia vẽ phác thảo bằng cách sử dụng thuộc tính CSS outline.
Đề cương CSS
Đường viền là một đường được vẽ xung quanh một phần tử, bên ngoài đường viền của nó. Trường hợp sử dụng phổ biến nhất của thuộc tính outline là đánh dấu một phần tử HTML.
Dưới đây là phần trình bày bằng hình ảnh về cách các đường viền được áp dụng trong CSS:
Hình ảnh này chứng minh rằng các đường viền xuất hiện cả bên ngoài nội dung và đường viền của một phần tử web. Bạn có thể thấy rằng đường viền là lớp ngoài cùng của phần tử web.
Có một vài điểm khác biệt giữa đường viền và đường viền trong CSS.
Đầu tiên, như chúng ta đã thảo luận, đường viền được vẽ bên ngoài phần tử (không giống như đường viền). Điều này có nghĩa là bản phác thảo mà chúng tôi tuyên bố có thể chồng lên nội dung khác trên một trang web. Tuy nhiên, các đường viền không chiếm bất kỳ không gian nào, và do đó chúng không có bất kỳ tác động nào đến các phần tử xung quanh ngoài việc có thể chồng chéo một phần tử.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Ngoài ra, đường viền không phải là một phần của kích thước của phần tử. Điều này có nghĩa là đường viền bạn chỉ định sẽ không ảnh hưởng đến giá trị chiều cao và chiều rộng của một phần tử.
Không giống như đường viền, đường viền cũng không được có chiều rộng, màu sắc hoặc kiểu đường viền khác nhau cho mỗi cạnh. Vì vậy, đường viền bạn chỉ định xung quanh một phần tử sẽ xuất hiện nhất quán trên tất cả các cạnh.
Nếu bạn đang muốn tìm hiểu thêm về đường viền trong CSS, hãy đọc hướng dẫn của chúng tôi về đường viền CSS.
Thuộc tính phác thảo CSS
Thuộc tính phác thảo được sử dụng để thêm đường viền cho một phần tử trên trang web.
Thuộc tính phác thảo là viết tắt của bốn thuộc tính phụ cho phép bạn tùy chỉnh cách một đường viền xuất hiện trên một trang web. Các thuộc tính phụ này là:
- outline-color:Đặt màu sắc của đường viền
- kiểu phác thảo:Đặt kiểu đường viền
- outline-width:Đặt chiều rộng của đường viền
Cú pháp cho thuộc tính outline như sau:
outline: outline-color outline-style outline-width;
Các giá trị được chỉ định với thuộc tính phác thảo không cần phải xuất hiện theo bất kỳ thứ tự cụ thể nào.
Hãy xem qua một ví dụ để minh họa cách hoạt động của thuộc tính outline. Giả sử chúng ta muốn tạo một đường viền xung quanh một hộp có chứa văn bản This is a box . Đề cương của chúng tôi phải có các đặc điểm sau:
- Đường viền phải có màu đỏ.
- Đường viền phải dày 3px.
- Dàn bài phải có dấu chấm.
Chúng tôi cũng muốn đường viền của mình có đường viền đen dày 1px. Chúng tôi có thể tạo đường viền và đường viền này bằng cách sử dụng mã sau:
<html>
<p class="outlineExample">This is a box.</p>
</html>
<style>
.outlineExample {
width: 100px;
border: black solid 1px;
outline: red dotted 3px;
}
</style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi đã khai báo cả đường viền xuất hiện màu đỏ và đường viền xuất hiện màu đen. Đường viền dày 1px và xuất hiện ở kiểu liền khối và đường viền có màu đỏ, dày 3px và xuất hiện ở kiểu chấm. Chúng tôi cũng đặt chiều rộng của hộp là 100px.
Như bạn có thể thấy, đường viền xuất hiện bên ngoài đường viền trong phần tử web của chúng tôi.
Thuộc tính phụ của Đề cương CSS
Thuộc tính CSS outline là viết tắt của bốn thuộc tính con, như chúng ta đã thảo luận trước đó. Hãy khám phá từng thuộc tính phụ này riêng lẻ để giải thích cách chúng hoạt động.
Chiều rộng đường viền CSS
Thuộc tính outline-width chỉ định chiều rộng của đường viền được áp dụng cho một phần tử web.
Thuộc tính outline-width chấp nhận bất kỳ giá trị chiều dài nào sau đây:
- mỏng (theo mặc định, 1px)
- phương tiện (theo mặc định, 3px)
- dày (theo mặc định, 5px)
- Kích thước được chỉ định bằng px, pt, cm, em, rem hoặc chỉ số độ dài CSS khác
Giả sử chúng ta muốn thiết kế một hộp có đường viền liền khối, màu xanh lam 3px (trung bình). Chúng tôi cũng muốn hộp của chúng tôi có một đường viền đen, rắn, rộng 1px. Chúng tôi có thể tạo hộp này bằng mã sau:
<html>
<p class="outlineExample">This is a box.</p>
</html>
<style>
.outlineExample {
width: 100px;
border: black solid 1px;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
<style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Hãy phân tích ví dụ này. Trong mã CSS của chúng tôi, chúng tôi đặt chiều rộng của hộp là 100px và xác định một đường viền đen đặc rộng 1px xung quanh hộp của chúng ta.
Sau đó, chúng tôi sử dụng ba thuộc tính phụ để xác định đường viền của chúng tôi.
Thuộc tính kiểu phác thảo được sử dụng để đặt kiểu cho đường viền của chúng tôi, thuộc tính này rất chắc chắn trong trường hợp này. Thuộc tính outline-color được sử dụng để đặt màu cho đường viền của chúng ta, trong ví dụ này là màu đỏ. (Chúng ta sẽ thảo luận sâu hơn về các thuộc tính phụ của kiểu phác thảo và màu đường viền ở phần sau của hướng dẫn này).
Thuộc tính outline-width được sử dụng để đặt chiều rộng của đường viền, mà chúng tôi đặt thành medium (theo mặc định là 3px).
Như bạn có thể thấy, hộp của chúng tôi có đường viền màu đỏ rộng 3px.
Màu đường viền CSS
Thuộc tính màu đường viền cho phép bạn đặt màu đường viền được gán cho một phần tử web cụ thể. Thuộc tính chấp nhận bất kỳ loại màu CSS nào sau đây:
- name:Tên màu, chẳng hạn như
bluehoặcpink - hex:Màu thập lục phân, chẳng hạn như
#f7f7f7 - rgb:Giá trị RGB, chẳng hạn như
rgb(102, 211, 56) - invert:Điều này đảo ngược màu sắc của đường viền
- hsl:Giá trị HSL, chẳng hạn như
hsl(0, 25%, 50%)
Giả sử chúng ta muốn thiết kế một đường viền xung quanh một hộp mà xung quanh hộp của chúng ta có màu xanh lam. Đường viền của chúng ta phải dày 3px và sử dụng kiểu solid. Chúng tôi có thể tạo một hộp với đường viền này bằng cách sử dụng mã sau:
<html>
<p class="outlineExample">This is a box.</p>
<html>
<style>
.outlineExample {
width: 100px;
border: black solid 1px;
outline-style: solid;
outline-color: blue;
outline-width: medium;
}
<style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong ví dụ này, chúng tôi đã sử dụng thuộc tính màu đường viền để đặt màu đường viền của chúng ta thành màu xanh lam. Chúng tôi cũng sử dụng thuộc tính outline-style để đặt kiểu của đường viền của chúng tôi thành solid và thuộc tính outline-width để đặt kiểu chiều rộng của đường viền thành 3px (hoặc medium ).
Trong mã của chúng tôi, chúng tôi cũng làm cho hộp của chúng tôi rộng 100px và đặt một đường viền đen đặc 1px xung quanh hộp của chúng tôi, điều này giúp bạn dễ dàng nhìn thấy đường viền của chúng tôi hơn.
Kiểu phác thảo CSS
Thuộc tính kiểu phác thảo cho phép bạn thiết lập kiểu đường viền của mình.
Thuộc tính này chấp nhận các giá trị sau:
- chấm
- gạch ngang
- rãnh
- ridge
- rắn
- nhân đôi
- chèn
- đầu tiên
- không
- ẩn
Vì vậy, ridge value tạo ra một đường viền, inset giá trị tạo ra một đường viền bên trong, groove giá trị tạo ra một đường viền rãnh, v.v. Để minh họa cách các đường viền này xuất hiện, hãy tạo một hộp có đường viền và áp dụng từng kiểu đường viền này cho từng hộp. Đây là mã cơ bản cho hộp của chúng tôi:
<html>
<p class="outlineExample">This is a box.</p>
<html>
<style>
.outlineExample {
width: 300px;
border: black solid 1px;
outline-color: blue;
outline-width: medium;
}
<style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Mã này tạo một hộp có đường viền màu xanh lam rộng 3px (sử dụng medium giá trị để chỉ ra chiều rộng của đường viền). Hộp có đường viền liền màu đen rộng 1px và hộp rộng 200px.
Để đặt kiểu cho hộp của chúng ta, chúng ta nên sử dụng thuộc tính kiểu phác thảo. Vì vậy, nếu chúng ta muốn có một hộp có double kiểu phác thảo, chúng ta có thể sử dụng kiểu CSS này:
<style>
.outlineExample {
outline-style: dotted;
}
<style> Dưới đây là hình ảnh hiển thị kết quả của thuộc tính này đang được sử dụng với tất cả các giá trị tiềm năng được chấp nhận bởi outline-style:
Chênh lệch phác thảo CSS
Thuộc tính outline-offset thêm khoảng cách giữa đường viền và đường viền của một phần tử.
Khoảng trống giữa đường viền và đường viền của phần tử được xác định bởi thuộc tính outline-offset là trong suốt. Ngoài ra, thuộc tính outline-offset là độc lập và không thể được sử dụng trong cách viết tắt phác thảo.
Giả sử chúng ta muốn thiết kế một hộp có đường viền đen đặc rộng 1px và đường viền đặc màu đỏ rộng 2px. Đường viền phải được bù đắp 10px bên ngoài mép của đường viền của chúng ta. Chúng tôi có thể tạo một hộp với các kiểu này bằng cách sử dụng mã sau:
<html>
<p class="outlineExample">This is a box.</p>
<html>
<style>
.outlineExample {
width: 200px;
border: black solid 1px;
outline: red 2px solid;
outline-offset: 10px;
}
<style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong ví dụ này, chúng tôi đã xác định một hộp có chiều rộng 200px, có đường viền màu đen đặc rộng 1px và đường viền đặc màu đỏ rộng 2px. Đường viền cho hộp của chúng ta được bù 10px, có nghĩa là có khoảng cách 10px giữa mỗi cạnh đường viền và đường viền.
Kết luận
Thuộc tính CSS outline được sử dụng để xác định các đường viền xung quanh các đường viền của một phần tử web.
Thuộc tính phác thảo là viết tắt của ba thuộc tính phụ được sử dụng để tạo đường viền tùy chỉnh:màu viền, độ rộng đường viền và kiểu đường viền. Ngoài ra, thuộc tính outline-offset được sử dụng để thêm khoảng cách giữa đường viền và đường viền của một phần tử.
Hướng dẫn này đã thảo luận, với tham chiếu đến các ví dụ, khái niệm cơ bản về phác thảo trong CSS, cách sử dụng thuộc tính outline và các thuộc tính phụ của nó cũng như cách sử dụng thuộc tính outline-offset. Giờ đây, bạn đã được trang bị kiến thức cần thiết để bắt đầu thiết kế phác thảo giống như một chuyên gia CSS!