اختر لونك:
وَقُلِ اعْمَلُوا فَسَيَرَى اللَّهُ عَمَلَكُمْ وَرَسُولُهُ وَالْمُؤْمِنُونَ ۖ وَسَتُرَدُّونَ إِلَىٰ عَالِمِ الْغَيْبِ وَالشَّهَادَةِ فَيُنَبِّئُكُم بِمَا كُنتُمْ تَعْمَلُونَ [ التوبة : ( 105 )] كلمة الإدارة

يرجى إختيار القسم المناسب قبل النشر وسيعاقب المخالف بإنذار أول مرة وسيتم حظره إذا تكرر ذلك كلمة الإدارة

يُمنع كتابة مواضيع السحر والشعوذة والروحانيات والابراج بكافة الأشكال والمخالف سيعاقب بحظر مؤقت وإذا تكرر سيكون حظر دائم تنبيه هام جداً



أضف رد جديد

قديم 27-02-2019, 05:33 PM   #1
تاريخ التسجيل: Feb 2019
العمر: 28
المشاركات: 1,003
التقييم: 10
تاريخ التسجيل: Feb 2019
العمر: 28
المشاركات: 1,003
التقييم: 10
افتراضي مدخل إلى أوراق الأنماط المتتالية (css)

مدخل إلى أوراق الأنماط المتتالية (CSS)

أوراق الأنماط المتتالية (Cascading Style Sheets أو CSS اختصارًا) هي لغة تُستخدم لوصف كيفيّة عرض المستندات للمستخدمين. تُكتب هذه المستندات في لغة رُماز مثل HTML.

css-intro (1).png

المستند هو مجموعة من المعلومات التي تهيكل باستخدام لغة رُماز (markup language).

يُقصّد بعرض المستند للمستخدم تحويله إلى صيغة مُفيدة للجمهور، فالمتصفحات مثل Firefox وChrome وInternet Explorer مًصمّمة بحيث تعرض المستندات للمستخدمين مرئيًّا، مثلًا: على شاشة حاسوب أو جهاز إسقاط (projector) أو طابعة.

سنتعرض خلال هذه السلسلة إلى المواضيع التالية:

مدخل إلى أوراق الأنماط المتتالية (css) (هذا الدرس).
آلية عمل تعليمات CSS داخل المتصفحات.
المحددات (Selectors) في CSS.
كيفية كتابة تعليمات CSS يسهل قراءتها.
تنسيق نصوص صفحات الويب باستخدام CSS.
التعامل مع الألوان في CSS.
إضافة محتوى إلى صفحة ويب باستخدام CSS.
تنسيق القوائم (Lists) في CSS.
تعرف على الصناديق (Boxes) في CSS.
رصف العناصر (Layout) في CSS.
الجداول (Tables) في CSS.
التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS.
أمثلة
صفحة الويب هذه الّتي تقرأها هي مُستند. تُهيكل المعلومات التي تشاهدها في صفحة ويب باستخدام لغة HTML (اختصارًا لـHyperText Markup Language).
مرُبعات الحوار في التطبيقات هي أيضًا مُستندات، وقد تكون مُهيكلة باستخدام لغة رماز مثل XUL (اختصارًا لـXML User Interface Language)، والتي قد تجدها في بعض برامج Mozilla.
في هذه السلسلة، ستُقرأ معلومات مُدرجة تحت عنوان تفاصيل أكثر كالفقرة التالية، تحوي هذه الفقرات على معلومات وروابط لمصادر إضافية عن مفهوم أو موضوع تغطّيه هذه الأقسام. اقرأ هذه المعلومات حالما تُشاهدها وتابع الروابط، أو تجاوزها وعُد لقراءتها لاحقًا.

تفاصيل أكثر
كلمة المستند لا تعني ما تعنيه كلمة "ملفّ"، إلّا أنّه يمكن حفظ المستندات ضمن ملفّات.

المستند الذي تقرأه الآن لم يُحفَظ في ملفّ، بل يُجلب من قاعدة بيانات على الخادم والذي بدوره يولّد المستند بجمع أجزائه من عدّة ملفّات. مهما يكن الأمر، فإنّك في هذه السّلسلة ستتعامل مع مستندات محفوظة في ملفّات.

بإمكانك إيجاد معلومات أكثر عن المستندات ولغات الرُماز في مواقع أخرى من شبكة مطوّري Mozilla:

اللغة الوظيفة
HTML لصفحات الويب
XML للصفحات المُهيكلة بشكل عامّ
SVG للرسوم
XUL لواجهات برامج Mozilla
سنطّلع على أمثلة من هذه اللغات في الجزء الثّاني من السلسلة.

تفاصيل أكثر
يُدعى البرنامج الذي يعرض المستندات على المستخدم في المصطلحات الرسميّة لـCSS بوكيل المستخدم (user agent أو UA). المتصفّح ليس إلّا واحدًا من وكلاء المستخدم، فلا تقتصر CSS على المتصفّحات أو العرض المرئيّ، ولكنّنا في الجزء الأوّل من السّلسلة لن نتعامل إلّا مع CSS في المتصفّح.

للاطّلاع على التعاريف الرسمية للمصطلحات في CSS، انظر Definitions في وصف CSS من قبل جمعيّة W3C المسؤولة عن تعيين المعايير القياسيّة للويب.

لنبدأ العمل: إنشاء مستند
أنشئ مجلّدًا جديدًا في جهازك لحفظ وتنظيم تمارين هذه السّلسلة.
افتح محرّر النصوص وأنشئ ملفًّا نصيًّا جديدًا، سنقوم بكتابة المستند في هذا الملف خلال التمارين القليلة التالية.
انسخ والصق HTML أدناه. احفظ الملف باسم doc1.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
</head>

<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
افتح علامة تبويب أو نافذة جديدة في متصفّحك، ثم افتح الملف الذي أنشأته. من المُفترض أن ترى النّص وحروفه الأولى بخطّ عريض، كهذه الصّورة:
1.png

قد يختلف ما تراه في متصفحك قليلًا عن الصّورة من حيث الخط أو الألوان أو المسافات بين الحروف، وهذا غير مهمّ الآن.

المستند الآن لا يستخدم CSS، وهذا ما سنفعله في الخطوة التالية.

لماذا نستخدم CSS؟
استخدم CSS لتعريف تنسيق مستنداتك، بما في ذلك التصميم والتخطيط والاختلافات في العرض بين الأجهزة المختلفة وقياسات الشاشات المختلفة. بإمكانك إضافة CSS في رأس (<head>) مستند (نُسمّي ذلك ورقة أنماط مُضمّنة) أو إرفاق ملف منفصل يحوي تعريف التنسيقات (ورقة أنماط خارجيّة)، ثمّ ربطها مع المستند برابط يُضاف إلى رأسه.

لللأسلوب الأخير عدّة محاسن، ففصل التنسيقات عن الرُماز:

يقلّل من التكرار
يُسهل الصّيانة
يسمح بإجراء تغيير على نطاق الموقع كاملًا من مكان واحد
مثال
يمكنك مثلًا حفظ معلومات التنسيقات في ملفات مشتركة بين كلّ الصّفحات، فعندما يُربَط مستند بورقة أنماط تُحدّد لون العناوين الثانويّة (h2)، بإمكانك استخدام هذا التنسيق في كل صفحات الموقع بالإشارة إلى هذه الورقة.

عندما يعرض مستخدم صفحة ويب، يقوم المتصفح بجلب معلومات التنسيق في الوقت نفسه.

عندما يطبع مستخدم صفحة ويب، بإمكانك توفير معلومات تنسيق مختلفة تُسهّل من قراءة الصّفحة المطبوعة.

كيف تعمل HTML وCSS معًا؟ بشكل عامّ، استخدم HTML لوصف محتوى الموقع، وليس تنسيقه. بإمكانك استخدام CSS لتحديد تنسيق المستند، وليس محتواه. أحيانًا نضطر لإجراء بعض الاستثناءات لهذه القاعدة، كما سنرى لاحقًا.

تفاصيل أكثر
توفّر لُغة رُماز مثل HTML بعض الوسائل لوصف تنسيق المستند بشكل منفصل عن CSS، فيمكنك مثلًا في HTML استخدام الوسم <b> لجعل النّص عريضًا، ويمكنك تحديد لون خلفيّة المستند في وسم متن المستند <body>. عندما تستخدم CSS، يُفضّل عادةً تجنّب استخدام هذه الميزات في لغة الرُماز بحيث يبقى وصف تنسيق المستند في موضع واحد فقط.

لنعمل: إنشاء ورقة أنماط
أنشئ ملفًّا نصيًّا آخر بجوار الملف السابق doc1.html.
احفظ الملف باسم style1.css. سيحوي هذا الملف وصف التنسيقات.
في ملفّ CSS، انسخ والصق السّطر التالي ثمّ احفظ الملف:
strong {color: red;}
ربط المستند بورقة الأنماط
لربط المستند بورقة الأنماط، عدّل ملفّ HTML، أضف السّطر التالي في موقعه:
<link rel="stylesheet" href="style1.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
احفظ الملف وحدّث الصّفحة في متصفّحك. تجعل ورقة الأنماط الحروف الأولى بلون أحمر

القيصر غير متواجد حالياً   اقتباس
أضف رد جديد

الكلمات الدلالية (Tags)
منتديات رحيل, رحيل, شبكة رحيل, r7il, r7il.com


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
كيف تنظّم شفرة css لتجربة تطوير أفضل وأداء أحسن القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 28-07-2019 07:48 PM
مدخل إلى ووردبريس مُتعدّد المواقع مهرة النجدية قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 22-07-2019 06:58 PM
آلية عمل تعليمات css داخل المتصفحات القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 27-02-2019 05:32 PM


الساعة الآن 03:42 PM

 


Content Relevant URLs by vBSEO ©2010, Crawlability, Inc.