أوراق الأنماط المتتالية: الفرق بين النسختين
| [نسخة منشورة] | [نسخة منشورة] |
تم حذف المحتوى تمت إضافة المحتوى
AAMINE1965 (نقاش | مساهمات) تعديلات طويلة وسمان: تمت إضافة وسم nowiki تحرير مرئي |
|||
سطر 1:
{{معلومات لغة برمجة
| اسم = صفحات الطرز المتراصة
السطر 38 ⟵ 36:
* يمكن لملف الأنماط ان يتم تضمينه في عدة صفحات وبالتالي عند تغيير شكل العرض فانك تحتاج لتعديل ملف واحد فقط وهذا يعني وقت أقل وتعديل أكبر واشمل.
==
تتألف شيفرة CSS من مجموعة من القواعد (rules)، والتي تتألف بدورها من مُحدِّد (selector) ثم قائمة بالخاصيات والقيم المُسنَدة إليها. فمثلًا لو أردنا تحديد جميع الفقرات (العنصر <code><nowiki><p></nowiki></code>) في مستند HTML وتحويل لونها إلى الأحمر (عبر الخاصية <code>color</code>) فسنكتب الشيفرة الآتية:
<br /><syntaxhighlight lang="css">
p {
color: red;
}
</syntaxhighlight>
شفرة السي إس إس هي مجموعة من التعريفات لكل عنصر، وبالتالي يمكن ان يكون لدينا 100 تعريف ل 100 عنصر وهكذا
السطر 65 ⟵ 72:
* (;): يتم وضع النقطة المنقوطة بعد القيمة لأخبار المعالج ان القيمة انتهت وما سيأتي بعدها هو صفة أخرى وهكذا..
<br />
== الخلفيات ==
{| class="wikitable"
!الخاصية
!الوصف
|-
|<code>background</code>
|الخاصية <code>background</code> المختصرة في CSS تسمح لنا بتعديل خيارات تنسيق الخلفية كلها دفعةً واحدةً، بما في ذلك اللون أو الصورة، والمبدأ والحجم، وطريقة التكرار، وغير ذلك من الميزات.
يمكن استخدام الخاصية <code>background</code> لضبط قيم خاصية أو أكثر من الخاصيات الآتية: <code>background-clip</code>، و <code>background-color</code>، و <code>background-image</code>، و <code>background-origin</code>، و<code>background-position</code>، و <code>background-repeat</code>، و <code>background-size</code>، و <code>background-attachment</code>.
|-
|<code>background-attachment</code>
|تُحدِّد إذا كان موضع الصورة (المُحدَّدة عبر الخاصية <code>background-image</code>) ثابتًا (fixed) ضمن إطار العرض (viewport) أو كان سيُمرَّر عند التمرير في العنصر (أو الصفحة) الحاوي له.
|-
|<code>background-blend-mode</code>
|تصف كيف يجب أن تمتزج صور الخلفية مع بعضها بعضًا ومع لون الخلفية المُحدَّد للعنصر.
|-
|<code>background-clip</code>
|تُحدِّد كيف أين ستتوقف خلفية العنصر على حدود العنصر، سواءً كانت الخلفية لونًا <code><color></code> أو صورةً <code><image></code>.
|-
|<code>background-color</code>
|تضبط لون الخلفية لأحد العناصر، ويكون لون الخلفية قيمةً لونيةً <code><color></code>.
|-
|<code>background-image</code>
|تضبط صورةً أو أكثر على أنها خلفية للعنصر.
|-
|<code>background-origin</code>
|تُحدِّد مبدأ صورة الخلفية المُحدَّدة عبر الخاصية <code>background-image</code>.
|-
|<code>background-position</code>
|تضبط الموضع المبدئي لكل صورة خلفية، وذلك نسبةً إلى المبدأ المُعرَّف في الخاصية <code>background-origin</code>.
|-
|<code>background-repeat</code>
|تُعرِّف كيف ستتكرر صورة الخلفية؛ إذ يمكن أن تتكرر صورة الخلفية على المحور الأفقي، أو على المحور الرأسي، أو على كلا المحوري، ويمكن ألّا تتكرر أبدًا.
|-
|<code>background-size</code>
|تُحدِّد أبعاد صورة الخلفية للعنصر؛ ويمكن أن تُترَك الأبعاد الابتدائية للصورة، أو تُغيّر إلى أبعاد جديدة، أو يمكن ملء المساحة المتوافرة بها مع الحفاظ على نسبة الأبعاد.
|-
|<code>box-shadow</code>
|تصف تأثير الظلال على العنصر، ويمكن إضافة ظل أو أكثر باستخدام هذه الخاصية.
|}
<br />
== الإطارات ==
=== شكل الإطار ===
{| class="wikitable"
!الخاصية
!الوصف
|-
|<code>border</code>
|الخاصية <code>border</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات التي تتحكم بإطار العنصر في آنٍ واحد، وهي: <code>border-color</code> و <code>border-style</code> و <code>border-width</code>، وكما في جميع الخاصيات المختصرة، أيّ قيمة غير مُحدِّدة سيُعاد ضبطها إلى قيمتها الابتدائية، أضف إلى ذلك أنَّ الخاصية <code>border</code> لا يمكن أن تُستخدَم لتحديد قيمة للخاصية <code>border-image</code> وإنما ستضبِط قيمتها إلى القيمة الابتدائية <code>none</code>.
|-
|<code>border-bottom</code>
|الخاصية <code>border-bottom</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات <code>border-bottom-color</code> و <code>border-bottom-style</code> و <code>border-bottom-width</code>، هذه الخاصيات تصف كيفية عرض الإطار <code>border</code> السفلي للعنصر.
|-
|<code>border-bottom-color</code>
|تُحدِّد لون الإطار السفلي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل <code>border-color</code> أو <code>border-bottom</code>.
|-
|<code>border-bottom-style</code>
|تُحدِّد شكل خط الإطار السفلي الخاص بالعنصر.
|-
|<code>border-bottom-width</code>
|تضبط عرض الإطار السفلي للعنصر.
|-
|<code>border-color</code>
|تُحدِّد لون إطار العنصر على جميع وجوهه: العلوي (<code>border-top-color</code>) والأيمن (<code>border-right-color</code>) والسفلي (<code>border-bottom-color</code>) والأيسر (<code>border-left-color</code>).
|-
|<code>border-image</code>
|تسمح برسم صورة على إطار العنصر، وهذا يجعل إنشاء عناصر لها مظهر مخصص أمرًا سهلًا. ستُستخدَم الخاصية <code>border-image</code> بدلًا من أشكال الإطارات التي يمكن تعريفها عبر الخاصية <code>border-style</code>.
|-
|<code>border-image-outset</code>
|تُحدِّد كم ستمتد صورة الإطار بعد الحافة الخارجية للإطار.
|-
|<code>border-image-repeat</code>
|تُعرِّف كيفية عرض الجزء الأوسط من صورة الإطار لكي تُطابِق أبعاد الإطار. ويمكن استخدام قيمة واحدة لهذه الخاصية لضبط سلوك جميع الحواف، أو يمكن تحديد قيمتين لضبط سلوك الحواف الأفقية والرأسية كلًا على حدة.
|-
|<code>border-image-slice</code>
|تُقسِّم الصورة المُحدَّدة عبر الخاصية <code>border-image-source</code> إلى تسع مناطق: الأركان الأربعة، والحواف الأربع، والوسط.
|-
|<code>border-image-source</code>
|تُعرِّف صورةً <code><image></code> لتُستخدَم بدلًا من الإطار، وإذا ضُبِطَت هذه الخاصية إلى <code>none</code>، فسيُستخدَم الشكل المُعرَّف في الخاصية <code>border-style</code>.
|-
|<code>border-image-width</code>
|تُعرِّف عرض صورة الإطار بتحديد بعدها عن حافة الإطار الخارجية، وإذا كانت قيمة الخاصية <code>border-image-width</code> أكبر من قيمة الخاصية <code>border-width</code>، فستمتد صورة الإطار إلى ما بعد حافة الحاشية (padding) أو حافة المحتوى (content).
|-
|<code>border-left</code>
|الخاصية <code>border-left</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات <code>border-left-color</code> و <code>border-left-style</code> و <code>border-left-width</code>، هذه الخاصيات تصف كيفية عرض الإطار<code>border</code> الأيسر للعنصر.
|-
|<code>border-left-color</code>
|تُحدِّد لون الإطار الأيسر الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل <code>border-color</code> أو <code>border-left</code>.
|-
|<code>border-left-style</code>
|تُحدِّد شكل خط الإطار الأيسر الخاص بالعنصر.
|-
|<code>border-left-width</code>
|تضبط عرض الإطار الأيسر للعنصر.
|-
|<code>border-right</code>
|الخاصية <code>border-right</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات <code>border-right-color</code> و <code>border-right-style</code> و <code>border-right-width</code>، هذه الخاصيات تصف كيفية عرض الإطار <code>border</code> الأيمن للعنصر.
|-
|<code>border-right-color</code>
|تُحدِّد لون الإطار الأيمن الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل <code>border-color</code> أو <code>border-right</code>.
|-
|<code>border-right-style</code>
|تُحدِّد شكل خط الإطار الأيمن الخاص بالعنصر.
|-
|<code>border-right-width</code>
|تضبط عرض الإطار الأيمن للعنصر.
|-
|<code>border-style</code>
|تُحدِّد شكل خط الإطار الخاص بالعنصر لجميع وجوهه (الأيمن والأيسر والعلوي والسفلي).
|-
|<code>border-top</code>
|الخاصية <code>border-top</code> في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات <code>border-top-color</code> و <code>border-top-style</code> و <code>border-top-width</code>، هذه الخاصيات تصف كيفية عرض الإطار<code>border</code> العلوي للعنصر.
|-
|<code>border-top-color</code>
|تُحدِّد لون الإطار العلوي الخاص بالعنصر. لاحظ أنَّه في أغلبية الحالات يُفضَّل استخدام خاصيات CSS المختصرة مثل <code>border-color</code> أو <code>border-top</code>.
|-
|<code>border-top-style</code>
|تُحدِّد شكل خط الإطار العلوي الخاص بالعنصر.
|-
|<code>border-top-width</code>
|تضبط عرض الإطار العلوي للعنصر.
|-
|<code>border-width</code>
|الخاصية <code>border-width</code> المختصرة في CSS تضبط عرض إطار العنصر على جميع وجوهه: العلوي (<code>border-top-width</code>) والأيمن (<code>border-right-width</code>) والسفلي (<code>border-bottom-width</code>) والأيسر (<code>border-left-width</code>).
|}
<br />
== برمجته وتحريره ==
سي إس إس هي تقنية لتطوير الويب وكما أغلب التقنيات للويب، هذه التقنية نصية، اي ان البرامج النصية كـ{[نوتباد} في ويندوز أو {Gedit} في واجهة جنوم لينكس جنو، يمكنك الكتابة بها بكل سهولة.
| |||