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

من موسوعة حسوب
< CSS
لا ملخص تعديل
 
لا ملخص تعديل
 
(مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة)
سطر 37: سطر 37:
}
}
</syntaxhighlight>
</syntaxhighlight>
== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/background-image|background-image]]</code> التي تضبط صورةً أو أكثر على أنها خلفية للعنصر.
* صفحة الخاصية <code>[[CSS/cursor|cursor]]</code> التي تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر.
* صفحة الخاصية <code>[[CSS/list-style|list-style]]</code> وهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات <code>[[CSS/list-style-type|list-style-type]]</code> و <code>[[CSS/list-style-image|list-style-image]]</code> و <code>[[CSS/list-style-position|list-style-position]]</code>.
== مصادر ومواصفات ==
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-values-3/#urls CSS Values and Units Module Level 3].
* مواصفة [https://drafts.csswg.org/css-values-3/#urls CSS Values and Units Module Level 3].
* مواصفة ‎[http://www.w3.org/TR/CSS2/syndata.html#uri CSS Level 2 (Revision 1)‎].
* مواصفة ‎[http://www.w3.org/TR/CSS2/syndata.html#uri CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#url CSS Level 1].
* مواصفة [http://www.w3.org/TR/CSS1/#url CSS Level 1].
[[تصنيف:CSS]]
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Data Type]]
[[تصنيف:CSS Data Type|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 18:41، 29 أكتوبر 2018

نوع البيانات <url> في CSS يُشير إلى أحد الموارد (resources)، مثل الصور أو الخطوط، وتُستخدَم روابط URL في الكثير من الخاصيات، مثل background-image و cursor و list-style.

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الرئيسي 1.0 1.0 3.0 3.5 1.0

الشكل العام

نوع البيانات <url> يُمثَّل عبر الدالة url()‎، ويمكن أن يوضع الرابط داخلها دون علامات اقتباس، أو محاطًا بعلامات اقتباس مفردة أو مزدوجة؛ ويُسمَح باستخدام روابط URL النسبية (relative URLs)، وسيكون مسارها نسبةً إلى ملف الأنماط، وليس لرابط URL لصفحة الويب.

url("http://mysite.example.com/mycursor.png")
url('http://mysite.example.com/mycursor.png')
url(http://mysite.example.com/mycursor.png)

لاحظ أنَّ هنالك اختلافٌ بين URI و URL، إذ إنَّ URI هو مُعرِّف موحّد للموارد، بينما URL هو نوع من أنواع URI الذي يصف مكان ذلك المورد؛ فيمكن أن يكون URI إما URL أو اسمًا (URN) للمورد.

في مواصفة CSS Level 1 كانت الدالة url()‎ لا تصف إلا روابط URL الحقيقية، أما في CSS Level 2 وُسِّع تعريف الدالة url()‎ لتصف أيّ رابط URI سواءً كان URL أو URN، واستعملتُ آنذاك الدالة url()‎ لإنشاء نوع البيانات <uri>، وهذا أثار جدلًا وعقّد الأمور دون داعٍ، لأنَّ أسماء الموارد URN لم تُستعمَل في CSS، لذا أعادت مواصفة CSS Level 3 تعريف هذه الدالة إلى ما كان عليه، أي أنَّ الدالة url()‎ لا تصف إلا روابط URL الحقيقية في نوع البيانات <url>.

أمثلة

مثال عن استخدام رابط URL مُحاطٌ بعلامتَي اقتباس مع الخاصية background:

.topbanner {
  background: url("topbanner.png") #00D no-repeat fixed;
}

مثال عن استخدام رابط URL دون علامات اقتباس مع الخاصية list-style:

ul {
  list-style: square url(http://www.example.com/redball.png);
}

انظر أيضًا

  • صفحة الخاصية background-image التي تضبط صورةً أو أكثر على أنها خلفية للعنصر.
  • صفحة الخاصية cursor التي تُحدِّد ما هو شكل مؤشر الفأرة الذي سيُعرَض عندما تمر الفأرة فوق العنصر.
  • صفحة الخاصية list-style وهي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات list-style-type و list-style-image و list-style-position.

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