الفرق بين المراجعتين لصفحة: «CSS/quotes»

المراجعة الحالية بتاريخ 07:45، 12 سبتمبر 2018

الخاصية quotes في CSS تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس.

بطاقة الخاصية

القيمة الابتدائية	تختلف حسب المتصفح.
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للحركة	لا
القيمة المحسوبة	كما حُدِّدَت.

/* كلمة محجوزة */
quotes: none;

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

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

أمثلة

مثال على جملة فيها علامة اقتباس مفردة، وسنضيف حولها علامتَي اقتباس مزدوجتين، وذلك باستخدام الخاصية content:

<q>في مهمة لتطوير العالم العربي</q>

شيفرة CSS:

q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

سنستخدم جملةً فيها مستويين من الاقتباس وسنجرِّب مختلف القيم عليها:

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

شيفرة CSS:

q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

.ex1 { quotes: '‘' '’'; }
.ex2 { quotes: '“' '”' '‘' '’'; }
.ex3 { quotes: '\'' '\'' '"' '"'; }
.ex4 { quotes: '«' '»' '‹' '›'; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	11	1.5	8.0	4.0	9.0

البنية العامة

الخاصية quotes تقبل القيم الآتية.

`none`

القيمتان open-quote و close-quote في خاصية content لن تؤديا إلى إظهار علامة اقتباس.

`‎[<string> <string>]+‎`

زوجٌ من القيم النصية <string> أو أكثر لتُستعمَل مع open-quote و close-quote في الخاصية content. لاحظ أنَّ أوّل زوج يُمثِّل أعلى مستوى من مستويات الاقتباس، أما الزوج الثاني فهو يمثل المستوى الذي يليه، وهكذا.

هذا جدولٌ يضم بعض أشكال علامات الاقتباس:

علامة الاقتباس	الوصف
`"`	علامة اقتباس مزدوجة
`'`	علامة اقتباس مفردة
`‹`	علامة اقتباس مفردة على شكل زاوية
`›`	علامة اقتباس مفردة على شكل زاوية
`«`	علامة اقتباس مزدوجة على شكل زاوية
`»`	علامة اقتباس مزدوجة على شكل زاوية
`‘`	علامة اقتباس مفردة على شكل الرقم 6 (للبداية)
`’`	علامة اقتباس مفردة على شكل الرقم 9 (للنهاية)
`“`	علامة اقتباس مزدوجة على شكل الرقم 6 (للبداية)
`”`	علامة اقتباس مزدوجة على شكل الرقم 9 (للنهاية)
`„`	علامة اقتباس مزدوجة على شكل الرقم 9 (سفلية)

البنية الرسمية

quotes: none | [ <string> <string> ]+;

انظر أيضًا

صفحة الخاصية content التي تُستخدَم مع العنصرين الزائفين ‎::before و ‎::after لتوليد محتوى في العنصر.

مصادر ومواصفات

مواصفة ‎CSS Level 2 (Revision 1)‎.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>quotes</code>}}</noinclude>
-الخاصية <code>quotes</code> في CSS تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس.<syntaxhighlight lang="css">
+الخاصية <code>quotes</code> في CSS تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس.
-/* كلمة محجوزة */
-quotes: none;
-/* <string> سلاسل نصية */
+== بطاقة الخاصية ==
-quotes: "«" "»";           /* ضبط علامة الاقتباس الابتدائية والنهائية */
-quotes: "«" "»" "‹" "›";   /* ضبط مستويين من الاقتباس */
-/* القيم العامة */
-quotes: inherit;
-quotes: initial;
-quotes: unset;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 31: / سطر 21: @@
 |}
+<syntaxhighlight lang="css">
+/* كلمة محجوزة */
+quotes: none;
+/* <string> سلاسل نصية */
+quotes: "«" "»";           /* ضبط علامة الاقتباس الابتدائية والنهائية */
+quotes: "«" "»" "‹" "›";   /* ضبط مستويين من الاقتباس */
+/* القيم العامة */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+</syntaxhighlight>
 == أمثلة ==
 مثال على جملة فيها علامة اقتباس مفردة، وسنضيف حولها علامتَي اقتباس مزدوجتين، وذلك باستخدام الخاصية <code>[[CSS/content|content]]</code>:<syntaxhighlight lang="html">
-<q>To be or not to be. That's the question!</q>
+<q>في مهمة لتطوير العالم العربي</q>
 </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 q {
@@ سطر 83: / سطر 87: @@
 الخاصية <code>quotes</code> تقبل القيم الآتية.
-=== القيمة <code>none</code> ===
+=== <code>none</code> ===
 القيمتان <code>open-quote</code> و <code>close-quote</code> في خاصية <code>[[CSS/content|content]]</code> لن تؤديا إلى إظهار علامة اقتباس.
-=== القيمة <code>‎[<string> <string>]+‎</code>  ===
+===  <code>‎[<string> <string>]+‎</code>  ===
-زوجٌ من القيم النصية <code>[[CSS/string|<string>]]</code> أو أكثر لتُستعمَل مع القيمتين <code>open-quote</code> و <code>close-quote</code> في الخاصية <code>[[CSS/content|content]]</code>. لاحظ أنَّ أوّل زوج يُمثِّل أعلى مستوى من مستويات الاقتباس، أما الزوج الثاني فهو يمثل المستوى الذي يليه، وهكذا.
+زوجٌ من القيم النصية <code>[[CSS/string|<string>]]</code> أو أكثر لتُستعمَل مع <code>open-quote</code> و <code>close-quote</code> في الخاصية <code>[[CSS/content|content]]</code>. لاحظ أنَّ أوّل زوج يُمثِّل أعلى مستوى من مستويات الاقتباس، أما الزوج الثاني فهو يمثل المستوى الذي يليه، وهكذا.
 هذا جدولٌ يضم بعض أشكال علامات الاقتباس:
@@ سطر 131: / سطر 135: @@
 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)‎].