CSS - khối viền: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các nhà pháp sư CSS tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của CSS border-block. Đừng lo lắng nếu bạn mới làm quen với lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ khám phá chủ đề này từng bước một. Vậy, hãy lấy đồ uống yêu thích của bạn, và chúng ta cùng nhảy vào nhé!

CSS - Border Block

CSS Border-Block là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu rõ border-block là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà đẹp (trang web của bạn), và bạn muốn thêm một ít viền đẹp mắt xung quanh cửa sổ (các yếu tố của bạn). Thuộc tính border-block giống như viền đó, nhưng cho các cạnh khối của một yếu tố.

Các giá trị có thể sử dụng

Bây giờ, hãy cùng xem xét các giá trị khác nhau mà chúng ta có thể sử dụng với border-block. Nó giống như việc chọn phong cách, màu sắc và độ dày của viền cửa sổ. Dưới đây là bảng tóm tắt các tùy chọn:

Giá trị	Mô tả
border-block-width	Đặt độ rộng của viền
border-block-style	Đặt phong cách của viền (đục, gạch, v.v.)
border-block-color	Đặt màu sắc của viền

Các thuộc tính thành phần

Border-block thực ra là một thuộc tính viết tắt. Nó giống như một cây kéo đa năng kết hợp nhiều công cụ vào một. Hãy phân tích nó:

border-block-start
border-block-end

Mỗi trong số này có thể được chia nhỏ thành:

border-block-start-width
border-block-start-style
border-block-start-color
border-block-end-width
border-block-end-style
border-block-end-color

Cú pháp

Bây giờ, hãy xem cách chúng ta viết điều này trong CSS của chúng ta. Cú pháp cơ bản là:

border-block: <'border-width'> || <'border-style'> || <'color'>;

Đừng để điều này làm bạn sợ hãi! Nó đơn giản hơn bạn nghĩ. Hãy phân tích nó với một ví dụ:

.my-element {
border-block: 2px solid blue;
}

Trong ví dụ này:

2px là độ rộng
solid là phong cách
blue là màu sắc

Áp dụng cho

Bạn có thể đang tự hỏi, "Tôi có thể sử dụng thuộc tính kỳ diệu này ở đâu?" Well, border-block áp dụng cho tất cả các yếu tố. Nó giống như một遥控器 universelle cho các viền CSS của bạn!

CSS border-block - Ví dụ cơ bản

Hãy bắt đầu với một ví dụ đơn giản để xem border-block trong hành động:

<div class="my-box">
Xin chào, tôi là một hộp có viền block!
</div>

.my-box {
width: 200px;
padding: 20px;
background-color: #f0f0f0;
border-block: 5px dashed #ff6347;
}

Trong ví dụ này, chúng ta đang tạo một hộp với độ rộng 200px và một ít padding. Thuộc tính border-block đang thêm một viền 5px rộng, viền gạch màu cà chua (#ff6347) vào trên và dưới hộp của chúng ta.

CSS border-block - Thuộc tính writing-mode

Bây giờ, hãy cùng xem điều gì thực sự thú vị! Thuộc tính border-block tuân theo writing-mode của tài liệu của bạn. Nó giống như một con kỳ đà, thích nghi với môi trường xung quanh.

Hãy xem một ví dụ:

<div class="box horizontal">Writing mode ngang</div>
<div class="box vertical">Writing mode dọc</div>

.box {
width: 200px;
height: 200px;
margin: 20px;
background-color: #e0e0e0;
border-block: 5px solid #4169e1;
}

.vertical {
writing-mode: vertical-rl;
}

Trong ví dụ này, chúng ta có hai hộp. Hộp đầu tiên sử dụng chế độ viết mặc định ngang, trong khi hộp thứ hai sử dụng chế độ viết dọc. Thuộc tính border-block điều chỉnh tương ứng:

Trong hộp ngang, nó áp dụng cho trên và dưới.
Trong hộp dọc, nó áp dụng cho trái và phải.

Sự linh hoạt này làm cho border-block vô cùng hữu ích cho việc tạo các bố cục hoạt động trên các hệ thống viết và hướng khác nhau.

Các thuộc tính liên quan

Trước khi chúng ta kết thúc, hãy nhanh chóng xem qua một số anh em họ của border-block:

border-inline: Tương tự như border-block, nhưng cho hướng in-line.
border-block-start: Áp dụng cho cạnh bắt đầu của khối.
border-block-end: Áp dụng cho cạnh kết thúc của khối.

Dưới đây là bảng tóm tắt các thuộc tính này:

Thuộc tính	Mô tả
border-block	Viết tắt cho border-block-start và border-block-end
border-inline	Viết tắt cho border-inline-start và border-inline-end
border-block-start	Áp dụng cho cạnh bắt đầu của khối
border-block-end	Áp dụng cho cạnh kết thúc của khối

Kết luận

Và thế là bạn đã có, các bạn! Chúng ta đã đi qua vùng đất của CSS border-block, từ cú pháp cơ bản đến siêu năng lực của writing-mode. Nhớ rằng, chìa khóa để thành thạo CSS là thực hành. Vậy, hãy tiếp tục thử nghiệm các thuộc tính này trong các dự án của bạn. Đừng sợ mắc lỗi - đó là cách chúng ta học và phát triển!

Như giáo sư cũ của tôi thường nói, "CSS giống như nấu ăn. Bạn có thể sẽ làm cháy một vài cookie ban đầu, nhưng sớm bạn sẽ nướng được những trang web đẹp mắt, phản hồi!" Vậy hãy tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với nó!

Chúc các bạn mã hóa vui vẻ, các nhà vô địch CSS tương lai!

Credits: Image by storyset