blockquote css – Kiểu Blockquote Đơn giản và Đẹp. 10 Sáng tạo và Độc đáo CSS Blockquote CSS Code.
Kiểu blockquote css đơn giản
blockquote
{
font-style: italic;
margin-left: 32px;
font-family: Georgia, "Times New Roman", serif;
}
blockquote css – Cách Tạo Kiểu Cho Blockquotes trong WordPress Bằng CSS?
Nội dung
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;
}
Kiểu blockquote đơn giản và sạch sẽ
Mã HTML
<blockquote>
Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn't really do it, they just saw something. It seemed obvious to them after a while. That's because they were able to connect experiences they've had and synthesize new things.
<span>Steve Jobs</span>
</blockquote>
Mã CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic);
blockquote{
font-size: 1.4em;
width:60%;
margin:50px auto;
font-family:Open Sans;
font-style:italic;
color: #555555;
padding:1.2em 30px 1.2em 75px;
border-left:8px solid #78C0A8 ;
line-height:1.6;
position: relative;
background:#EDEDED;
}
blockquote::before{
font-family:Arial;
content: "\201C";
color:#78C0A8;
font-size:4em;
position: absolute;
left: 10px;
top:-10px;
}
blockquote::after{
content: '';
}
blockquote span{
display:block;
color:#333333;
font-style: normal;
font-weight: bold;
margin-top:1em;
}
Canh giữa Blockquote Của Bạn
blockquote {
max-width: 550px;
text-align: center;
margin: 19px;
padding: 19px;
}
Testimonial Slider Jquery Example
Thay Đổi Font, Màu Font và Kích Thước Font
blockquote {
max-width: 550px;
text-align: center;
margin: 19px;
padding: 19px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 19px;
color: #428bca;
}
Thêm Hình Nền
blockquote {
max-width: 550px;
text-align: center;
margin: 19px;
padding: 19px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 19px;
color: #428bca;
background: #ccc;
}
Thêm Dấu Ngoặc Quanh Blockquote Của Bạn:
blockquote {
max-width: 600px;
text-align: center;
margin: 19px;
padding: 19px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 19px;
color: #428bca;
border-left: 4px solid #428bca;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-right: 4px solid #428bca;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
Thêm Viền Ngang Quanh Blockquote Của Bạn:
blockquote {
max-width: 550px;
text-align: center;
margin: 19px;
padding: 19px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size: 19px;
color: #428bca;
border-top: 4px dotted #428bca;
border-bottom: 4px dotted #428bca;
}
Thêm Dấu Trích Dẫn
blockquote::before {
content: "\201C";
display: block;
font-size: 80px;
left: -230px;
top: -50px;
position: relative;
height: 0;
}
Kiểu Blockquote Đơn giản và Đẹp
Bạn có thể sử dụng CSS để tạo kiểu cho phần tử HTML blockquote. Dưới đây là ví dụ về cách tạo kiểu cho phần tử blockquote:
HTML:
<blockquote>
<p>"This is a quote."</p>
<cite>John Doe</cite>
</blockquote>
CSS:
blockquote {
background-color: #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;
}
blockquote cite {
color: #777;
font-size: 0.9em;
font-style: normal;
margin-left: 5px;
}
blockquote:after {
color: #ccc;
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0.25em;
vertical-align: -0.4em;
}
Trong ví dụ này, CSS tạo kiểu cho phần tử blockquote với màu nền, viền bên trái, margin và padding. Thuộc tính quotes được sử dụng để đặt ký tự trích dẫn sử dụng cho các pseudo-element :before và :after.
Pseudo-element :before được sử dụng để hiển thị dấu trích dẫn mở đầu trước văn bản trích dẫn. Nó được tạo kiểu với kích thước font lớn hơn và được đặt vị trí bằng cách sử dụng các thuộc tính line-height, margin-right và vertical-align.
Phần tử p bên trong blockquote được tạo kiểu để hiển thị theo kiểu inline, để văn bản trích dẫn trôi tự nhiên.
Cảm ơn bạn!
Phần tử cite được sử dụng để hiển thị tên của tác giả trích dẫn. Nó được tạo kiểu với kích thước font nhỏ hơn và margin ở bên trái của văn bản trích dẫn.
Cuối cùng, pseudo-element :after được sử dụng để hiển thị dấu trích dẫn đóng sau văn bản trích dẫn. Nó được tạo kiểu tương tự như pseudo-element :before, nhưng có margin ở bên trái.
Bạn có thể tùy chỉnh những kiểu này theo yêu cầu của bạn để đạt được giao diện mong muốn cho phần tử blockquote của bạn.
Kiểu Blockquote CSS với Dấu Trích Dẫn Tự Động
Nếu bạn muốn tự động bao gồm dấu trích dẫn vào kiểu blockquote của bạn mà không cần phải bao gồm chúng trong nội dung của HTML, bạn có thể sử dụng thuộc tính quotes trong CSS để chỉ định loại dấu trích dẫn để sử dụng cho pseudo-element :before và :after.
Dưới đây là ví dụ về cách bạn có thể sử dụng CSS để tạo kiểu cho một blockquote với dấu trích dẫn tự động:
HTML:
<blockquote>
<p>This is a quote.</p>
<cite>John Doe</cite>
</blockquote>
CSS:
blockquote {
margin: 1em 0;
padding: 0 1em;
quotes: "\201C""\201D""\2018""\2019";
font-size: 1.2em;
line-height: 1.5;
}
blockquote:before {
content: open-quote;
color: #ccc;
font-size: 3em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
blockquote:after {
content: close-quote;
color: #ccc;
font-size: 3em;
line-height: 0.1em;
margin-left: 0.25em;
vertical-align: -0.4em;
}
cite {
display: block;
margin-top: 0.5em;
font-style: normal;
font-size: 0.9em;
}
Trong ví dụ này, thuộc tính quotes đặt loại dấu trích dẫn để sử dụng cho pseudo-element :before và :after. Trong trường hợp này, giá trị được đặt là các điểm mã Unicode cho dấu trích dẫn cong và dấu trích dẫn đơn.
Pseudo-element :before và :after được sử dụng để hiển thị dấu trích dẫn trước và sau văn bản trích dẫn. Chúng được tạo kiểu với kích thước font lớn và được đặt vị trí bằng cách sử dụng các thuộc tính line-height, margin-right và margin-left, và vertical-align.
Hy vọng bạn đã hiểu về kiểu blockquote css.
- Bài viết này ban đầu được xuất bản tại: https://www.pakainfo.com
Cảm ơn bạn!
