Tạo kiểu Blockquote đơn giản và đẹp mắt - Thủ thuật CSS

Anonim

Blockquote hiển thị trong các trình duyệt tuân thủ tiêu chuẩn với hiệu ứng "dấu ngoặc kép lớn trước" và trong IE với đường viền bên trái dày và nền màu xám nhạt.
Không giống như các kỹ thuật blockquote khác, kiểu này không yêu cầu phần tử cấp khối lồng nhau (như p). Như vậy, nó biến một đoạn văn thành một phần tử theo kiểu nội dòng để giữ cho nội dung không bị tụt xuống bên dưới phần trích dẫn.

blockquote ( background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; ) blockquote:before ( color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; ) blockquote p ( display: inline; )

Thí dụ

Môi trường sống của cây Pastyesque morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tra tấn quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.