ویژگی CSS quotes به مرورگر اجازه می‌دهد که نقل قول‌ها را برای محتوا نمایش دهد.
نقل قول‌ها می‌توانند به هر عنصری اضافه شوند. آن‌ها از روی المان‌های مجازی ::before و ::after بهره می‌برند تا نقل قول‌ها را در ابتدا و انتهای یک نقل قول درج کنند. این المان‌های مجازی توسط ویژگی content تعریف می‌شوند.
ویژگی CSS quotes تعیین می‌کند که مرورگر باید چگونه نقل قول‌ها را که با مقادیر open-quote و close-quote ویژگی content اضافه شده‌اند، نمایش دهد.
مقادیر ممکن
- none: مقادیر open-quote و close-quote ویژگی content هیچ نقل قولی تولید نمی‌کنند.
- string,string,+: یک یا چند جفت مقدار رشته برای open-quote و close-quote. جفت اول نماینده سطح بیرونی نقل قول است. جفت دوم برای سطح تو در تو اول و جفت بعدی برای سطح سوم و الیهود.
- initial: به وابسته از نوع کاربر
- auto: علامت‌های نقل قول مناسب برای هر زبان مقدار تنظیم شده روی عناصر انتخاب شده (به عنوان مثال از طریق ویژگی lang) استفاده می‌شود.
موارد قابل اجرا بر روی همه عناصر.
سینتکس
Keyword Value
quotes: none;
quotes: auto;
Value
quotes: "«" "»";
quotes: "«" "»" "‹" "›";
جدول زیر شرح مختلف نویسه‌های نقل قول را توضیح می‌دهد:
- ” دو نقل قول \0022
- ‘ یک نقل قول \0027
- < یک نقل قول چپ \2039
-
یک نقل قول راست \203A
- << دو نقل قول چپ \00AB
-
دو نقل قول راست \00BB
- ‘ نقل قول چپ (بالایی تکی-۶) \2018
- ’ نقل قول راست (بالایی تکی-۹) \2019
- “ نقل قول چپ (بالایی دوتایی-۶) \201C
- ” نقل قول راست (بالایی دوتایی-۹) \201D
- „ دو نقل قول (پایینی دوتایی-۹) \201E
none Value
ویژگی none برای ویژگی quotes نشان می‌دهد که مقادیر open-quote و close-quote ویژگی content هیچ نقل قولی تولید نمی‌کنند. در واقع، این ویژگی باعث می‌شود که نقل قول‌ها از متن حذف شوند.
در مثال زیر این کاربرد نشان داده شده است:
<html>
<head>
<style>
p {
quotes: none;
}
p:before {
content: open-quote;
}
p:after {
content: close-quote;
}
</style>
</head>
<body>
<p>Tutorialspoint CSS Quotes set to <i>none</i></p>
</body>
</html>در این مثال، تگ p دارای ویژگی quotes با مقدار none است. بنابراین، هیچ نقل قولی به محتوای تگ p اضافه نمی‌شود. اما با استفاده از پیشوند و پسوند، ما یک نقل قول باز و بسته خالی را به تگ p اضافه می‌کنیم. اما از آنجایی که ویژگی quotes به none تنظیم شده است، این نقل قول‌ها هیچ تاثیری در محتوای نهایی نخواهند داشت و حذف می‌شوند.
string Value
ویژگی quotes با مقدار رشته‌ها (string)، نقل قول‌های مورد استفاده برای محتوای متنی که با مقادیر open-quote و close-quote ویژگی content اضافه شده‌اند را مشخص می‌کند. این رشته‌ها برای تعیین نقل قول‌های باز و بسته استفاده می‌شوند. معمولاً این نقل قول‌ها به صورت جفت‌هایی در نظر گرفته می‌شوند که هر کدام برای یک سطح خاص از تو در تو بودن نقل قول‌ها استفاده می‌شوند.
در مثال زیر، این کاربرد نشان داده شده است:
<html>
<head>
<style>
#quote1 {
quotes: '‘' '’';
}
#quote2 {
quotes: '"' '"';
}
#quote3 {
quotes: '<' '>';
}
#quote4 {
quotes: '<<' '>>';
}
#quote5 {
quotes: "<<" ">>" "<" ">";
}
#quote6 {
quotes: '\2018' '\2019';
}
#quote7 {
quotes: '\'' '\00AB' '\00BB';
}
#quote8 {
quotes: '\2039' '\203A';
}
#quote9 {
quotes: '\00AB' '\00BB';
}
#quote10 {
quotes: '\201D' '\201E';
}
</style>
</head>
<body>
<h3>Using quotes symbol:</h3>
<p><q id="quote1">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote2">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote3">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote4">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote5">Tutorialspoint CSS Quotes.</q></p>
<h3>Using entity number:</h3>
<p><q id="quote6">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote7">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote8">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote9">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote10">Tutorialspoint CSS Quotes.</q></p>
</body>
</html>در این مثال، تگ q با استفاده از ویژگی quotes با مقادیر رشته‌ای تعیین شده است. این رشته‌ها تعیین کننده نقل قول‌های باز و بسته هستند که به تگ q افزوده شده‌اند. به عنوان مثال، #quote1 مقدار نقل قول باز و بسته را با گیومه فارسی تعیین می‌کند. هر تگ q به ازای هر شماره در مثال، نقل قول‌های باز و بسته خاصی را نمایش می‌دهد.
initial Value
ویژگی initial برای ویژگی quotes به مرورگر می‌گوید که باید به ویژگی quotes مقدار پیش‌فرض (initial value) را تنظیم کند. مقدار پیش‌فرض این ویژگی بسته به مرورگر و محیط مشخص می‌شود. در این مثال، ویژگی quotes به مقدار initial تنظیم شده است، بنابراین نقل قول‌ها به شکل پیش‌فرضی نمایش داده می‌شوند.
<html>
<head>
<style>
q {
quotes: initial;
}
</style>
</head>
<body>
<p><q>Tutorialspoint CSS Quotes.</q></p>
</body>
</html>auto Value
ویژگی quotes با مقدار auto به مرورگر می‌گوید که برای نقل قول‌ها، نقل قول مناسب بر اساس زبان متن را به صورت خودکار تعیین کند. در این مثال، با تنظیم ویژگی quotes برای تگ‌های q به مقدار auto، مرورگر بر اساس زبان متن، نقل قول‌های مناسب را به صورت خودکار اعمال می‌کند.
<html>
<head>
<style>
q {
quotes: auto;
}
</style>
</head>
<body>
<div lang="fr">
<q>Tutorialpoint est un site de cours d'anglais.</q>
</div>
<hr />
<div lang="ru">
<q>Tutorialpoint — сайт курсов английского языка.</q>
</div>
<hr />
<div lang="de">
<q>Tutorialpoint is een Engelse cursuswebsite</q>
</div>
<hr />
<div lang="en">
<q>Tutorialpoint is an english course website.</q>
</div>
</body>
</html>در این مثال، تگ‌های q در داخل تگ‌های div با ویژگی lang مختلف قرار دارند. با استفاده از ویژگی lang، زبان متن هر تگ q مشخص شده است. ویژگی quotes با مقدار auto به مرورگر می‌گوید که بر اساس زبان متن، نقل قول مناسب را به صورت خودکار اعمال کند. به عنوان نمونه، در زبان‌های فرانسوی، روسی، هلندی و انگلیسی، نقل قول‌های مناسب به صورت خودکار اعمال می‌شود.
Using :lang pseudo-class
این بخش نشان می‌دهد که چگونه از شیوه‌های مختلف نقل قول‌ها بر اساس ویژگی زبان (lang) در داخل عناصر، با استفاده از پseudo-class :lang می‌توان استفاده کرد.
در این مثال، از پseudo-class :lang برای تعیین استایل‌های مختلف برای نقل قول‌ها بر اساس ویژگی زبان (lang) در داخل عناصر استفاده شده است.
قاعده :lang(en) استایل‌های مربوط به عناصری را تعریف می‌کند که دارای ویژگی زبان انگلیسی هستند.
قاعده :lang(fr) استایل‌های مربوط به عناصری را تعریف می‌کند که دارای ویژگی زبان فرانسوی هستند.
<html>
<head>
<style>
:lang(en) {
quotes: "#" "#" "<<" ">>";
}
:lang(fr) {
quotes: '\2039' '\203A';
}
</style>
</head>
<body>
<p><q lang="en">Tutorialspoint CSS <q lang="en">Quotes</q>.</q></p>
<p>Tutorialspoint CSS <q lang="fr">Quotes</q>.</p>
</body>
</html>در این مثال، دو تگ p وجود دارد، هر کدام حاوی یک تگ q با ویژگی lang متفاوت هستند. تگ q داخل تگ p اول دارای ویژگی lang=”en” است و تگ q داخل تگ p دوم دارای ویژگی lang=”fr” است. استایل‌های نقل قول‌ها بر اساس زبان متن، با استفاده از پseudo-class :lang تعیین شده‌اند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام