[WPtips] Code đường viền và cách viết một số kiểu khung viền trang trí cho blog WordPress (bản cập nhật)

Trang:123456

---

IV. Kiểu khung viền 1 lớp

Kiểu khung viền 1 lớp này thật ra mình đã viết trong bài Tạo hình nền/theme riêng cho bài viết rồi, các bạn có thể đọc trước để tham khảo. Ở bài đó mình đã hướng dẫn các bạn viết 2 kiểu khung viền (kiểu nền 1 lớp thông thường và kiểu nền 1 lớp giống theme blog trên Zing Me), vì phần này có liên quan đến đường viền nên mình sẽ hướng dẫn lại các bạn cách viết kiểu nền 1 lớp thông thường và có bổ sung thêm đường viền. Còn kiểu nền 1 lớp giống theme blog trên Zing Me thì các bạn hãy đọc hướng dẫn ở bài Tạo hình nền/theme riêng cho bài viết nhé

Trước khi bắt tay vào viết code khung viền, Sera xin nhắc lại một lần nữa:

Vui lòng không ăn cắp, không đạo nhái, không đem các bài hướng dẫn của tôi ra khỏi blog Gió Xanh (wptutbyserahwang.wordpress.com) dưới mọi hình thức! Xin hãy tôn trọng chất xám và công sức của tôi! Ăn cắp là *beep*

Tiếp theo là vài điều các bạn cần lưu ý trước khi viết code:

1.Trước khi học viết các kiểu khung viền (Kiểu 1, Kiểu 2, Kiểu 3, Kiểu 4), các bạn phải quay lại Trang 1 của bài hướng dẫn này hoặc bấm vào ĐÂY để đọc các lưu ý cần thiết khi viết và thay code. Đó là những chú ý quan trọng và các bạn BẮT BUỘC phải đọc để code khung viền có thể hoạt động như ý muốn.

2.Cách viết code đường viền và các lưu ý khi viết code đường viền cơ bản mình đã viết rất chi tiết ở Trang 1 của bài này rồi nên mình sẽ không giải thích lại trong phần này nữa. Nếu các bạn chưa đọc thì hãy bấm vào ĐÂY để đọc, và các bạn bắt buộc phải đọc hết toàn bộ nội dung có trong trang 1 để việc tuỳ chỉnh và thay code diễn ra suôn sẻ. Mình đã viết lưu ý rất đầy đủ ở trang 1 rồi mà bạn nào còn hỏi những cái mình viết rồi là mình cho ăn búa nhá

3.Các code khung viền sẽ luôn sử dụng thuộc tính padding (hoặc có cả margin nữa), chi tiết về padding mình đã viết ở trang 1 rồi nên cũng không nhắc lại ở phần này nữa.

4.Ở trang cuối cùng của bài này mình có tổng hợp một số hình ảnh dạng pattern (pattern hiểu đơn giản là dạng hoạ tiết lặp lại) và ảnh động làm nền cho bài viết, các bạn có thể bấm vào ĐÂY để xem nhé

Nào, giờ thì chúng ta sẽ bắt đầu với code định dạng bài viết cơ bản sau:

<div style="font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Để tạo nền cho bài viết, chúng ta sẽ sử dụng thuộc tính background, nó cũng được xem là thuộc tính định dạng nên chúng ta sẽ đặt nó trong cặp dấu nháy kép (") cùng với các thuộc tính định dạng khác trong code định dạng cơ bản ở trên. Nền bài viết có thể là nền màu hoặc nền bằng hình ảnh. Cú pháp viết thuộc tính background như sau:

background: mã màu nền;

hoặc:

background: url('link hình ảnh dùng làm nền');

Các bạn cần lưu ý một vài điều về sử dụng mã màu nền và hình ảnh dùng làm nền như sau:

• Mã màu nền có thể dùng tên màu bằng tiếng Anh, mã HEX, mã RGB hoặc các loại mã màu khác. Ở đây mình khuyên các bạn nên dùng mã HEX đối với các màu không phải màu cơ sở, các bạn có thể xem và lấy mã màu ở ĐÂY nhé

• Link hình ảnh dùng làm nền là link có các đuôi như .jpg, .png, .gif,…, tóm lại là các đuôi file hình ảnh. Về cơ bản, các bạn có thể sử dụng link hình ảnh ở bất kì nguồn lưu trữ nào để làm nền cho văn bản. Tuy nhiên, mình không khuyến khích các bạn sử dụng link hình ảnh ở các nguồn lưu trữ khác ngoài nguồn lưu trữ là blog WordPress của chính các bạn. Lý do là nếu các bạn sử dụng link hình ảnh từ nguồn lưu trữ không thuộc quyền sở hữu của các bạn, thì rất dễ xảy ra tình trạng chết link vì hình ảnh có thể bị xoá bất cứ lúc nào. Do đó, mình chỉ hướng dẫn các bạn tải ảnh lên thư viện blog và lấy link từ ảnh trong thư viện để làm nền cho bài viết, mình sẽ không hướng dẫn các bạn lấy link ảnh từ các nguồn lưu trữ bên ngoài nhé

Thao tác tải ảnh lên thư viện blog và lấy link ảnh sẽ được minh hoạ bằng video sau:

Video 3. Tải ảnh lên thư viện và lấy link ảnh

Rồi, bây giờ mình sẽ viết code minh hoạ cho các bạn xem nhé Mình sẽ viết code màu nền trước, ở đây mình sẽ dùng nền màu xanh nhạt với mã màu HEX là #ccffcc. Lúc này, code định dạng cơ bản ban đầu của mình sẽ có dạng như sau:

<div style="background: #ccffcc; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Vì mình mới chỉ thêm thuộc tính background thôi nên kết quả nhìn hơi bị xấu, bây giờ mình sẽ thêm thuộc tính padding để tách nền và nội dung văn bản ra nhé Khái niệm về padding và cách viết padding mình đã nhắc đến ở trang 1 rồi, nếu các bạn chưa đọc thì bấm vào ĐÂY để đọc lại nhé Sau khi thêm padding với giá trị 14px, code của mình sẽ có dạng như sau:

<div style="background: #ccffcc; padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Code viết đến đây được xem như là hoàn chỉnh với kiểu khung viền 1 lớp này (từ đây mình sẽ gọi nó là code khung viền 1 lớp cơ bản), các tuỳ chọn bổ sung như bo tròn, thêm đường viền bao ngoài hay tạo thanh cuộn sẽ đều dựa trên đoạn code hoàn chỉnh này. Trước đó thì mình sẽ viết minh hoạ thêm cho các bạn xem code hình nền nhé

• Ví dụ về hình nền tĩnh:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

• Ví dụ về hình nền động:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2019/10/23.gif'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Tiếp theo, mình sẽ hướng dẫn các bạn thêm các tuỳ chọn bổ sung như bo tròn, thêm đường viền bao ngoài hoặc tạo thanh cuộn dọc. Chúng ta sẽ sử dụng các thuộc tính sau:

• Để bo tròn 4 góc: sử dụng thuộc tính border-radius.

• Để thêm đường viền bao ngoài: sử dụng thuộc tính border.

• Để tạo thanh cuộn dọc: sử dụng 3 thuộc tính max-height (hoặc height), overflow và border-radius.

Cách viết các thuộc tính này mình đã nhắc đến ở trang 1 rồi, nếu các bạn quên hoặc chưa đọc thì hãy bấm vào ĐÂY để quay lại đọc nhé

Các bạn muốn thêm tuỳ chọn nào thì sẽ thêm thuộc tính của tuỳ chọn đó vào code khung viền một lớp cơ bản, các bạn có thể thêm nhiều thuộc tính vào code chứ không phải chỉ có thể thêm 1 thuộc tính. Đây cũng là lý do mà mình gọi nó là kiểu khung viền 1 lớp, bởi vì khi viết nó mình chỉ cần dùng một thẻ định dạng duy nhất là thẻ div để định dạng các thể loại như: đổi font, đổi màu chữ, tạo màu nền,…

Nào, bây giờ mình sẽ lại viết ví dụ minh hoạ cho các bạn dễ hình dung nhé

Chúng ta sẽ bắt đầu với code khung viền 1 lớp cơ bản đã viết ở trên, lần này mình sử dụng hình ảnh làm nền cho văn bản. Code của mình sẽ có dạng như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Để ví dụ dễ quan sát thì mình sẽ thay dòng chữ CODE NỘI DUNG BÀI VIẾT trong code bằng một đoạn code nội dung văn bản khác (đoạn code này sẽ được tô màu xanh nhạt để phân biệt với code khung viền). Lúc này code của mình sẽ có dạng như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Bây giờ mình sẽ dùng thuộc tính border-radius với giá trị là 15px để bo tròn 4 góc hình nền, code của mình sẽ có dạng như sau:

<div style="border-radius: 15px; background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Giờ mình không muốn bo tròn mà lại muốn thêm đường viền bao quanh hình nền thì mình sẽ thêm thuộc tính border vào code khung viền 1 lớp cơ bản. Lúc này, code của mình sẽ có dạng như sau:

<div style="border: dotted #800080 2px; background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Tiếp tục, giờ mình chỉ muốn tạo thanh cuộn dọc thôi, vậy code của mình sẽ như sau:

<div style="max-height: 180px; overflow: auto; border-radius: 1px; background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Nào, giờ mình vừa muốn bo tròn vừa muốn có đường viền bao ngoài thì làm thế nào? Thì chúng ta sẽ thêm đồng thời 2 thuộc tính border-radius và border vào code khung viền 1 lớp cơ bản chứ còn gì nữa Lúc này, code sẽ có dạng như sau:

<div style="border: dashed #800080 2px; border-radius: 15px; background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Đến đây thì chắc là các bạn đã hiểu kha khá cách viết code rồi nhỉ Tiếp theo, chúng ta cần học thêm một vài thuộc tính lặt vặt khác để sử dụng code điêu luyện hơn

1Nếu các bạn sử dụng code khung viền cho toàn bộ nội dung bài viết thì có thể không cần dùng đến thuộc tính margin, nhưng nếu các bạn sử dụng từ 2 code khung viền liên tiếp trở lên thì các bạn phải thêm thuộc tính margin vào code để tạo khoảng cách giữa các code khung viền. Khái niệm và cách viết thuộc tính margin mình đã viết trong bài code khung viền cũ rồi, các bạn có thể bấm vào ĐÂY để đọc lại. Định nghĩa đơn giản thì xét trong một đoạn code khung viền (chỉ có 1 thẻ định dạng duy nhất) bao gồm cả margin và padding thì margin là khoảng cách tính từ đường viền (hoặc mép hình nền) ra bên ngoài, còn padding là khoảng cách tính từ đường viền (hoặc mép hình nền) vào bên trong phần nội dung. Ở đây mình sẽ hướng dẫn các bạn thêm một cách viết margin nữa, đó là cách viết margin với 2 giá trị, cú pháp như sau:

margin: A B;

Trong đó:

• A là khoảng cách tính từ phía trên và phía dưới đường viền (hoặc mép hình nền) ra bên ngoài, nên dùng đơn vị px để tính.

• B là khoảng cách tính từ phía bên trái và phía bên phải đường viền (hoặc mép hình nền) ra bên ngoài, nên dùng đơn vị % nếu giá trị lớn hơn 15px.

Mình sẽ ví dụ với các đoạn văn bản sau:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Bây giờ mình sẽ chèn thêm 2 code khung viền liền nhau vào giữa các đoạn văn bản này, chúng ta sẽ có kết quả như sau:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Lần này mình dùng thẻ p để định dạng cho code khung viền nên giữa các đoạn văn và code khung viền sẽ có một khoảng cách nhất định, lúc này mình có thể không cần dùng margin. Nhưng nếu mình dùng thẻ div để định dạng thì khoảng cách giữa 2 code khung viền sẽ được mặc định bằng 0, tức là trông nó sẽ như thế này:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Tiếp theo, mình sẽ dùng thuộc tính margin để tăng khoảng cách giữa 2 code khung viền này với các đoạn văn bản còn lại (mình sẽ tô nền 2 đoạn code khung viền này bằng màu tím nhạt để các bạn tìm cho dễ nhé). Do mình đã dùng code định dạng cơ bản cho toàn bộ bài viết trước đó rồi nên lúc này các thuộc tính trong code khung viền của mình sẽ ngắn hơn so với bình thường, mình chỉ cần thêm các thuộc tính background, padding và margin vào code mà thôi. Lúc này, code khung viền của mình sẽ có dạng như sau:

<div style="font-family: Arial; font-size: 16px; font-weight: 400; color: #b300b3; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<div style="background: #ffe6ff; padding: 12px; margin: 40px 0;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</div>

<div style="background: #ffe6ff; padding: 12px; margin: 30px 0;">Sau đó cậu tốn mất một giờ để xin lỗi.</div>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<div style="font-size: 13px; text-align: center; padding-left: 28%;"><strong><span style="color: #800080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></strong></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

2Nếu nền các bạn dùng cho nội dung bài viết là nền màu thì chúng ta không có gì để nói ở đây. Nhưng nếu các bạn sử dụng nền là hình ảnh thì các bạn nên lưu ý vài vấn đề sau:

• Để đề phòng việc hình ảnh làm nền bị chết link và không hiển thị được, các bạn nên thêm màu nền dự phòng cho nó. Có nghĩa là nếu link ảnh bị lỗi, thay vì hiển thị ảnh làm nền thì code sẽ hiển thị màu nền dự phòng. Cách viết màu nền dự phòng rất đơn giản, các bạn chỉ cần thêm mã màu nền (tốt nhất là dùng mã HEX) vào phía sau phần khai báo link hình ảnh của thuộc tính background, tức là chúng sẽ được ngăn cách với nhau bằng 1 dấu cách. Mình sẽ ví dụ với code khung viền (đã bao gồm code nội dung bài viết) sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Bây giờ mình sẽ thêm chữ “z” vào sau đuôi của hình ảnh làm nền để hình ảnh không hiển thị được, sau đó mình sẽ thêm màu dự phòng là màu vàng nhạt (mã HEX là #ffffb3) vào sau phần khai báo link hình ảnh của thuộc tính background. Lúc này, code của mình sẽ có dạng như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpgz') #ffffb3; padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

• Hình ảnh được được sử dụng làm nền cho bài viết khi được chèn vào code sẽ giữ nguyên kích thước gốc của nó, sẽ không tự động thu hẹp hay co giãn cho vừa với kích thước vùng hiển thị bài đăng. Nếu muốn hình ảnh co giãn theo kích thước vùng hiển thị bài đăng, các bạn thêm thuộc tính background-size: 100%; hoặc background-size: cover; vào sau thuộc tính background trong code. Tức là bình thường code của mình sẽ như này:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy2.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Sau khi thêm thuộc tính background-size với giá trị là 100% vào sau thuộc tính background thì code của mình sẽ có dạng như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy2.jpg'); background-size: 100%; padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Nếu các bạn muốn điều chỉnh kích thước hình nền theo một giá trị cố định nào đó thì các bạn hãy thay giá trị 100% bằng giá trị (tính theo chiều rộng) mà các bạn mong muốn, thông thường sẽ tính theo đơn vị px. Ví dụ, code ban đầu của mình như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy3.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Lúc này, chiều rộng hình nền của mình có kích thước là 500px, bây giờ mình sẽ giảm xuống còn 250px nhé, code của mình sẽ có dạng như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy3.jpg'); background-size: 250px; padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

• Theo mặc định, hình ảnh được làm nền cho nội dung bài viết sẽ được tự động lặp lại theo chiều ngang và chiều dọc. Nếu các bạn không muốn lặp lại hình ảnh, các bạn thêm thuộc tính background-repeat: no-repeat; vào sau thuộc tính background trong code. Ví dụ, code ban đầu của mình có dạng như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy2.jpg'); padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Sau khi thêm thuộc tính background-repeat với giá trị no-repeat vào sau thuộc tính background, code của mình sẽ có dạng như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy2.jpg'); background-repeat: no-repeat; padding: 14px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<p style="text-align: justify;">Quan Lan: "Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi."</p>

<p style="text-align: justify;">Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: "Em cũng chưa nói em yêu anh bao giờ mà?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">Trang Lân: "Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– Trích từ truyện "Quý ngài định kiến" của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.</em></span></div>

</div>

Kết quả:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

3Khi tạo màu nền cho bài viết, các bạn có thể sử dụng kiểu nền với dạng lan màu (gradient) nhưng mình không chắc chắn là trình duyệt nào cũng hiển thị được nên mình sẽ không hướng dẫn chi tiết các bạn cách viết màu nền kiểu này. Nhưng nếu các bạn vẫn muốn thử thì mình sẽ giới thiệu cho các bạn một cách rất nhanh gọn và mình không phải giải thích nhiều. Đó là các bạn hãy vào trang cssgradient.io và tuỳ chỉnh nền gradient theo ý muốn, sau khi tuỳ chỉnh xong, các bạn hãy sao chép dòng code thứ 2 trong khung chứa code ở phía dưới và dán vào code định dạng cơ bản là xong. Các bạn có thể xem cách mình làm ở video dưới đây:

Video 4. Tạo màu nền gradient

Xong rồi Phần hướng dẫn viết kiểu khung viền số 1 kết thúc ở đây Các bạn có thể bấm sang các trang tiếp theo để học cách viết các kiểu khung viền khác nhé

VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! CẢM ƠN CÁC BẠN!

Nguồn bài viết: https://wptutbyserahwang.wordpress.com/

---

Trang:123456

---

Pages: 1 2 3 4 5 6