چگونه از blockquote استفاده کنیم؟ جلوه نمایشی برچسب بلوک نقل قول HTML

وردپرسدر ویرایش مقاله، یک دکمه مشترک "block quote" وجود دارد

چگونه از blockquote استفاده کنیم؟ جلوه نمایشی برچسب بلوک نقل قول HTML

در صورت استفاده، a اضافه می کندنشانگر برای فراخوانی برخی گزاره های نقل شده یا برجسته.

بلوک نقل قول به چه معناست؟

موارد زیر استچن ویلیانگسبک نقل قول برای وبلاگ ها:

تگ blockquote XHTML یک عنصر بسیار مفید است (اگر از برخی استفاده نشده باشد).از نظر معنایی، هر زمان که متن طولانی‌تری را از منبع دیگری نقل قول می‌کنید (سخنران دیگر، وب‌سایت دیگری و غیره) باید از blockquote استفاده شود.این روشی برای محدود کردن متن و نمایش آن با منابع دیگر است.
از نظر سبک، می‌توانید همه این کارها را با کلاس‌های ویژه روی برچسب‌های پاراگراف انجام دهید... اما از نظر معنایی بی‌فایده است، آیا اینطور نیست؟ بلوک ها به طور پیش فرض دارای برخی سبک ها هستند.
اکثر مرورگرها متن را در برچسب‌های بلوک نقل قول قرار می‌دهند که به کاربران کمک می‌کند متن را به نحوی شناسایی کنند.اما چه کسی می تواند بگوید که ما باید در آنجا متوقف شویم؟در اینجا نحوه استایل دادن به بلوک نقل قول ها با CSS آورده شده است.

test-css.html را تست کنید و بخش css را به بدنه 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>

چگونه از blockquote استفاده کنیم؟

مشخص شد که برخی از تم های وردپرس سبک های مرجع را در فایل style.css اضافه نمی کنند.

سبک گوشه گرد پس‌زمینه آبی زیر را کپی کرده و در فایل style.css theme قرار دهید

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;
}

سبک های مرجع متن متن (اندازه، رنگ)، رنگ پس زمینه، فضای خالی، حاشیه ها و غیره را تعیین می کنند.

سبک حاشیه

این سبک نسبتاً ساده است، یعنی حاشیه سمت چپ را تنظیم کنید و ضخامت را تنظیم کنید.رنگ رنگ فونت را کنترل می کند و رنگ پس زمینه رنگ پس زمینه (یا گروه پس زمینه مستقیم) را کنترل می کند.

حاشیه فاصله تا عنصر پنجره را کنترل می‌کند، سمت چپ حاشیه سبک حاشیه سمت چپ را کنترل می‌کند، و بالشتک (به‌ویژه سمت چپ صفحه سمت چپ) فاصله متن تا حاشیه (چپ) را کنترل می‌کند.

این سبک به سادگی یک وبلاگ ساده است.

سبک پس‌زمینه زرد زیر را کپی کرده و در فایل style.css theme قرار دهید

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • موارد بالا 2 سبک نقل قول هستند.
  • افزودن چند سبک یکسان بازنویسی خواهد شد.
  • بنابراین، لطفاً یکی از آنها را انتخاب کرده و به فایل style.css تم اضافه کنید.

وبلاگ امید چن ویلیانگ ( https://www.chenweiliang.com/ ) shared "چگونه از blockquote استفاده کنیم؟ HTML در جلوه نمایشی برچسب blockquote، برای کمک به شما.

به اشتراک گذاری لینک این مقاله خوش آمدید:https://www.chenweiliang.com/cwl-2123.html

به کانال تلگرام وبلاگ چن ویلیانگ خوش آمدید تا از آخرین به روز رسانی ها مطلع شوید!

🔔 اولین نفری باشید که "راهنمای استفاده از ابزار هوش مصنوعی بازاریابی محتوایی ChatGPT" را در فهرست بالای کانال دریافت می کنید! 🌟
📚 این راهنما حاوی ارزش بسیار زیادی است، 🌟این یک فرصت نادر است، آن را از دست ندهید! ⏰⌛💨
اگر دوست داشتید به اشتراک بگذارید و لایک کنید
اشتراک گذاری و لایک های شما انگیزه مستمر ما هستند!

 

发表 评论

آدرس ایمیل شما منتشر نخواهد شد. از زمینه های مورد نیاز استفاده می شود * 标注

به بالا بروید