在WordPressTrong chỉnh sửa bài viết, có một nút "trích dẫn khối" phổ biến ▼
Khi được sử dụng, nó sẽ thêm mộtĐiểm đánh dấu để gọi một số tuyên bố được trích dẫn hoặc đánh dấu.
Blockquote có nghĩa là gì?
Sau đây làChen WeiliangKiểu trích dẫn cho blog:
Thẻ XHTML blockquote là một phần tử rất hữu ích (nếu một số phần tử không được sử dụng đầy đủ).Về mặt ngữ nghĩa, blockquote nên được sử dụng bất cứ khi nào bạn trích dẫn văn bản dài hơn từ một nguồn khác (diễn giả khác, trang web khác, v.v.).Đây là một cách để phân tách văn bản và hiển thị nó với các nguồn khác.
Về phong cách, bạn có thể làm tất cả điều này với các lớp đặc biệt trên các thẻ đoạn văn... nhưng bây giờ điều đó vô dụng về mặt ngữ nghĩa phải không? Blockquote có một số kiểu theo mặc định.
Hầu hết các trình duyệt thụt lề văn bản trong thẻ blockquote, giúp người dùng xác định văn bản theo một cách nào đó.Nhưng ai nói rằng chúng ta cần dừng lại ở đó?Đây là cách tạo kiểu cho các trích dẫn khối của bạn bằng CSS.
Kiểm tra test-css.html và thêm phần css vào phần thân html:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test CSS blockquote</title> </head> <blockquote> <p>The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?<br> Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who's to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.</p> </blockquote> </body> </html>
Làm thế nào để sử dụng blockquote?
Người ta thấy rằng một số chủ đề WordPress không thêm các kiểu tham chiếu trong tệp style.css.
Sao chép và dán kiểu góc tròn nền xanh sau vào tệp style.css của chủ đề▼
blockquote, q {
font: bold 21px/1.5 Consolas,"Courier New","KaiTi","KaiTi_GB2312","FangSong_GB2312",SimHei,arial,Monaco,monospace;
color: #000;
margin: 1em;
margin-left: 2em;
margin-right: 2em;
padding: 3px;
max-width: 95%;
quotes: "\201C""\201D""\2018""\2019";
background: #C3F3F7;
border-radius: 20px;
}Các kiểu tham chiếu xác định nội dung văn bản (kích thước, màu sắc), màu nền, khoảng trắng, đường viền, v.v...
kiểu viền
Phong cách này tương đối đơn giản, đó là thiết lập đường viền bên trái và thiết lập độ dày.Màu kiểm soát màu phông chữ và màu nền kiểm soát màu nền (hoặc nhóm nền trực tiếp).
Lề kiểm soát khoảng cách đến phần tử cửa sổ, bên trái của đường viền kiểm soát kiểu đường viền bên trái và phần đệm (đặc biệt là phía bên trái của phần đệm bên trái) kiểm soát khoảng cách từ văn bản đến đường viền (bên trái).
Phong cách này đơn giản như một blog đơn giản.
Sao chép và dán kiểu nền màu vàng sau vào tệp style.css của chủ đề▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Trên đây là 2 kiểu blockquote.
- Việc thêm nhiều kiểu giống hệt nhau sẽ bị ghi đè.
- Vì vậy, hãy chọn một trong số chúng và thêm nó vào tệp style.css của chủ đề.
Hy vọng Chen Weiliang Blog ( https://www.chenweiliang.com/ ) đã chia sẻ "Làm thế nào để sử dụng blockquote? HTML trong hiệu ứng demo thẻ blockquote, để giúp bạn.
Chào mừng bạn đến chia sẻ liên kết của bài viết này:https://www.chenweiliang.com/cwl-2123.html
Chào mừng bạn đến với kênh Telegram trên blog của Chen Weiliang để cập nhật những thông tin mới nhất!
📚 Hướng dẫn này chứa đựng giá trị to lớn, 🌟Đây là cơ hội hiếm có, đừng bỏ lỡ! ⏰⌛💨
Chia sẻ và thích nếu bạn thích!
Chia sẻ và thích của bạn là động lực không ngừng của chúng tôi!