Làm cách nào để tạo văn bản thành hộp vuông trong html?

Sử dụng đường viền, bạn có thể thêm hộp xung quanh văn bản và đặt hoặc thay đổi đường viền thành gần như bất kỳ màu nào. Đường viền trong trang HTML của bạn giúp thu hút sự chú ý đến một phần văn bản hoặc bao quanh bất kỳ thành phần HTML nào khác. Đường viền được thêm vào HTML bằng CSS

CSS đường viền

CSS viền có các thuộc tính cho loại đường (nét liền, chấm, v.v. ), độ rộng của đường và màu của đường. Bảng sau đây trình bày chi tiết về từng loại và giá trị nào được chấp nhận để chúng hoạt động bình thường

Thuộc tính đường viền CSS Giá trị hợp lệ Đường viền ví dụ (tất cả các bên)
border-top (chỉ dòng trên cùng)
border-right (chỉ đường bên phải)
border-bottom (chỉ dòng dưới cùng)
border-left (chỉ dòng bên trái) Bất kỳ sự kết hợp hợp lệ nào của các thuộc tính bên dưới. kiểu viền đen mỏng có chấm chấm (tất cả các mặt) liền khối
say mê
tiêu tan
gấp đôi
rãnh
cây rơm
chèn vào
khởi đầu
không ai
chiều rộng hiddensolidborder-width (tất cả các mặt), được chỉ định bằng px, pt, cm, em
chiều rộng, được chỉ định là mỏng, trung bình hoặc dày3 pxmàu đường viền (tất cả các mặt), được chỉ định là mã màu
màu, được chỉ định là màu có tên#FF00FF

Thêm đường viền bằng thuộc tính style

Các thẻ HTML có thể được định dạng bằng thuộc tính kiểu. Để thêm đường viền bằng thuộc tính style, hãy thêm CSS đường viền bên trong dấu ngoặc kép sau style=

style="myBorder">

In the example below, we surrounded a paragraph (

) with a solid red border that is 3 pixels wide.

Ví dụ đầu tiên với văn bản được bao quanh bởi đường viền màu đỏ
Ví dụ này cũng có nhiều dòng

Để tạo ví dụ trên, mã bên dưới được sử dụng

style="border-width:3px; border-style:solid; border-color:#FF0000; padding: 1em;">First example with text surrounded by a red border.
This example also has multiple lines.

Trong đoạn mã trên, CSS đang xác định kích thước đường viền ("px" viết tắt của pixel), kiểu kiểu và màu đường viền. Kiểu đường viền là cách đường viền xuất hiện trên màn hình. Trong ví dụ của chúng tôi, chúng tôi đã sử dụng kiểu đường viền "rắn". Màu đường viền xác định màu bạn muốn sử dụng cho đường viền. Trong ví dụ trên, mã màu #FF0000 được sử dụng, là mã màu cho màu đỏ

Mẹo

Một đường viền cũng có thể được áp dụng cho chỉ một bên. Ví dụ với tiêu đề của trang này, chúng ta có gạch dưới màu xám. Dòng này thực sự là một đường viền, đạt được bằng mã CSS border-bottom. 1px cố định #93B0D2;

Việc đặt định dạng CSS bên trong thuộc tính style có thể được áp dụng cho các thẻ HTML khác, chẳng hạn như thẻ div hoặc thẻ span. Trong ví dụ bên dưới, một đường viền được thêm vào một từ bằng cách sử dụng thẻ span

Đây là ví dụ thứ hai với một từ có đường viền, với các kiểu khác nhau được áp dụng cho trên cùng, dưới cùng, bên trái và bên phải.

Để tạo ví dụ trên, đoạn mã sau được sử dụng

style="border-top:thick green solid;border-bottom:thick green double;border-left:4px #2330C4 dotted; border-right:thin #2330C4 dotted;padding-left:2px;padding-right:2px;">word

Thêm đường viền bằng lớp CSS

The appearance of elements on a web page may also be defined with inline CSS. Inline CSS is defined in your HTML document, in the element. Or, you can define the CSS in an external file with the .css extension. Then, you can link to this file from any HTML page, and elements in that document can use the CSS styles. For example, with the CSS code below, a new class named "borderexample" is created that can be applied to any HTML tag.

Sử dụng mã ở trên, nếu bạn muốn áp dụng kiểu đường viền này cho một đoạn hoặc từ HTML, bạn có thể nhập một cái gì đó tương tự như ví dụ bên dưới

Chào mừng bạn đến với hướng dẫn dành cho người mới bắt đầu về cách tạo hộp xung quanh văn bản trong HTML. Mới sử dụng HTML và muốn nhanh chóng tạo hộp thông báo hoặc thông tin của riêng bạn?

Một cách dễ dàng để tạo hộp xung quanh văn bản là chỉ cần thêm phần đệm và đường viền. Ví dụ,

TEXT

Đó là nó. Nhưng thay vì để các bạn không biết chuyện gì vừa xảy ra, chúng ta sẽ xem qua nhiều ví dụ hơn trong hướng dẫn này – Đọc tiếp

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

 

 

TRANG TRÌNH BÀY NHANH

Tải xuống & Ghi chú

 

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

 

GHI CHÚ NHANH

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

 

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn hoặc sử dụng nó trong dự án của riêng bạn

 

 

TẠO HỘP

Được rồi, bây giờ chúng ta hãy đi vào chi tiết cách tạo hộp bằng HTML và CSS

 

VÍ DỤ 1) CƠ BẢN VỀ HỘP – MÔ HÌNH HỘP

HTML & CSS

1 hộp. html

  This is some dummy text.

 

Đây là một số văn bản giả

 

CÁCH GIẢI THÍCH

Tất cả những thứ đó là gì?

Đó là tất cả cho hướng dẫn này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn

 

LIÊN KẾT và THAM KHẢO

• Tên màu HTML – Mã màu HTML. com
• Biểu tượng HTML – graphmica. com
• Mô hình hộp CSS – w3. tổ chức
• Bộ chọn lớp CSS – MDN

 

BẢNG CHEAT INFOGRAPHIC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc