عرض مصدر CSS/quotes

<noinclude>{{DISPLAYTITLE:الخاصية <code>quotes</code>}}</noinclude>
الخاصية <code>quotes</code> في CSS تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|تختلف حسب المتصفح.
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للحركة
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}

<syntaxhighlight lang="css">
/* كلمة محجوزة */
quotes: none;

/* <string> سلاسل نصية */
quotes: "«" "»";           /* ضبط علامة الاقتباس الابتدائية والنهائية */
quotes: "«" "»" "‹" "›";   /* ضبط مستويين من الاقتباس */

/* القيم العامة */
quotes: inherit;
quotes: initial;
quotes: unset;
</syntaxhighlight>

== أمثلة ==
مثال على جملة فيها علامة اقتباس مفردة، وسنضيف حولها علامتَي اقتباس مزدوجتين، وذلك باستخدام الخاصية <code>[[CSS/content|content]]</code>:<syntaxhighlight lang="html">
<q>في مهمة لتطوير العالم العربي</q>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}
</syntaxhighlight>سنستخدم جملةً فيها مستويين من الاقتباس وسنجرِّب مختلف القيم عليها:<syntaxhighlight lang="html">
<p class="ex1">Set <q>quotes <q>inside</q> quotes</q> quotation marks.</p>
<p class="ex2">Set <q>quotes <q>inside</q> quotes</q> quotation marks.</p>
<p class="ex3">Set <q>quotes <q>inside</q> quotes</q> quotation marks.</p>
<p class="ex4">Set <q>quotes <q>inside</q> quotes</q> quotation marks.</p>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

.ex1 { quotes: '‘' '’'; }
.ex2 { quotes: '“' '”' '‘' '’'; }
.ex3 { quotes: '\'' '\'' '"' '"'; }
.ex4 { quotes: '«' '»' '‹' '›'; }
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|11
|1.5
|8.0
|4.0
|9.0
|}
== البنية العامة ==
الخاصية <code>quotes</code> تقبل القيم الآتية.

=== <code>none</code> ===
القيمتان <code>open-quote</code> و <code>close-quote</code> في خاصية <code>[[CSS/content|content]]</code> لن تؤديا إلى إظهار علامة اقتباس.
===  <code>‎[<string> <string>]+‎</code>  ===
زوجٌ من القيم النصية <code>[[CSS/string|<string>]]</code> أو أكثر لتُستعمَل مع <code>open-quote</code> و <code>close-quote</code> في الخاصية <code>[[CSS/content|content]]</code>. لاحظ أنَّ أوّل زوج يُمثِّل أعلى مستوى من مستويات الاقتباس، أما الزوج الثاني فهو يمثل المستوى الذي يليه، وهكذا.

هذا جدولٌ يضم بعض أشكال علامات الاقتباس:
{| class="wikitable"
!علامة الاقتباس
!الوصف
|-
|<code>"</code>
|علامة اقتباس مزدوجة
|-
|<code>'</code>
|علامة اقتباس مفردة
|-
|<code>‹</code>
|علامة اقتباس مفردة على شكل زاوية
|-
|<code>›</code>
|علامة اقتباس مفردة على شكل زاوية
|-
|<code>«</code>
|علامة اقتباس مزدوجة على شكل زاوية
|-
|<code>»</code>
|علامة اقتباس مزدوجة على شكل زاوية
|-
|<code>‘</code>
|علامة اقتباس مفردة على شكل الرقم 6 (للبداية)
|-
|<code>’</code>
|علامة اقتباس مفردة على شكل الرقم 9 (للنهاية)
|-
|<code>“</code>
|علامة اقتباس مزدوجة على شكل الرقم 6 (للبداية)
|-
|<code>”</code>
|علامة اقتباس مزدوجة على شكل الرقم 9 (للنهاية)
|-
|<code>„</code>
|علامة اقتباس مزدوجة على شكل الرقم 9 (سفلية)
|}

=== البنية الرسمية ===
<syntaxhighlight lang="css">
quotes: none | [ <string> <string> ]+;
</syntaxhighlight>
== انظر أيضًا ==
* صفحة الخاصية  <code>[[CSS/content|content]]</code> التي تُستخدَم مع العنصرين الزائفين <code>[[CSS/::before|‎::before]]</code> و <code>[[CSS/::after|‎::after]]</code> لتوليد محتوى في العنصر.

== مصادر ومواصفات ==
* مواصفة ‎[http://www.w3.org/TR/CSS2/generate.html#quotes CSS Level 2 (Revision 1)‎]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Generated Content|{{SUBPAGENAME}}]]