[ بناء جملة CSS ]

[k8ncom]

بسم الله الرحمن الرحيم

اولاً للحاجة لتعلم الـ CSS - مع انها تعتبر بسيطة للغاية -.
ثانياً لأهميتها حيث انها توفر المساحة الكبيرة وبالتالي سرعة التصفح.

فإني احببت ان اقوم بتوضيح هذا الدرس حتى تعم الفائدة.

:: بناء الجملة ::

يتكون بناء جملة CSS من ثلاث اجزاء : المسمى او المحدد ، الخصائص ، القيم.

selector {property: value}

غالباً يكون selector - وهو المحدد - عنصر HTML مثل body او وسم HTML مثل p.
اما property وهي الخصائص مثل color او الخط الأفتراضي (font-family).
يتبقى value وهو القيم التي يتم وضعها للخصائص.

* مثال1:

body {color: black}

في هذا المثال تم تعيين خاصية اللون -color- إلى الأسود -black- في عنصر الجسم -body-.

لكن مذا اذا كانت قيمة الخاصية تتكون من اكثر من اسم مثل الخطوط؟
* مثال2:

p {font-family: "sans serif"}

يتم وضعها بين علامة اقتباس مزدوجة.

اما اذا كان هنالك اكثر من خاصية يتم الفصل بينها بفاصلة منقوطة بهذا الشكل
* مثال3:

p {text-align:center;color:red}

ولزيادة الترتيب في حالة ازدياد الخصائص يتم وضع كل خاصية في سطر واحد بهذا الشكل
* مثال4:

p
{
text-align: center;
color: black;
font-family: arial
}

ملاحظة : لاحظ انه في جميع الأكواد الخاصية الأخيرة لا تنتهي بفاصلة منقوطة.

:: التجميع ::
يممكن جمع اكثر من محدد في وقت واحد بهذا الشكل
* مثال5:

h1,h2,h3,h4,h5,h6
{
color: green
}

حيث تم تجميع عناصر الـ header بجميع المقاسات تحت خاصية اللون الأخضر.

:: اصناف المحددات :: The class Selector ::
في اصناف -Class- المحددات يمكن وضع اكثر من تصنيف على نفس عنصر HTML.
* مثال6:

p.right {text-align: right}
p.center {text-align: center}

هنا يتم وضع صنفين وهما -right ,center- على عنصر p الخاص بـ HTML.
حيث يمكن الإستفادة من ذلك بالإستخدام التالي:

<p class="right">
سوف يكون النص على يمين الشاشة.
</p>
<p class="center">
سوف يكون النص في منتصف الشاشة.
</p>

هذا بالطبع كله بتأثير خصائص CSS.
لكن انتبه ان تستخدم اكثر من تصنيف في وقت واحد .. بهذا الشكل:

<p class="right" class="center">
هنا النص.
</p>

لأن هذا يعتبر خطأ شائع.

يمكن كذلك تنسيق صنف معين على جميع عناصر HTML ووسومها بالشكل التالي:
* مثال7:

.center {text-align: center}

وللتطبيق على هذا المثال سوف يكون التالي:

<h1 class="center">
سوف يكون نص الهيدر في الوسط
</h1>
<p class="center">
سوف يكون هذا النص ايضاً في الوسط.
</p>

تنبيه : احذر ان تبدأ اسم المحدد برقم لأنه لن يعمل في متصفح Mozilla/Firefox.

:: رقم المحدد :: The id Selector ::
بنفس طريقة الأصناف تعمل ارقام المحددات.
للتمييز بينها ... تكون بداية رقم المحدد بالعلامة # بعكس صنف المحدد الذي يبدأ بالنقطة.

* مثال8:

p#green {color: green}

هنا تم تعيين الرقم green للعنصر p
وللحصول على تطبيق واضح يمكن كتابة:

<p id="green">النص</h1>

حيث ان هذا الرقم خاص بالعنصر p وللتأكد من ذلك يمكنك تجربة الشفرة التالية:

<h1 id="green">النص</h1>

حيث انها لن تعمل

حتى يكون الرقم عام لجميع المحددات والعناصر يمكن كتابة:
* مثال9:

#green {color: green}

وبالتطبيق:

<h1 id="green">النص الأول</h1>
<p id="green">النص الثاني</p>

نلاحظ ان مفعولة قام بالتأثير على الجملتين.

يتبقى نقطة اخيرة وهي
:: ملاحضات الـ CSS ::

الملاحضات تساعدك دائماً عند العودة لتحرير الشفرة.
وتكون بالشكل التالي
* مثال10:

/* ملاحظة اولى */
p{
text-align: center;
/* ملاحظة ثانية */
color: black;
font-family: arial
}

سيتم تجاهل هذه الملاحضات من قبل المتصفح ولن يقوم بعرضها للزوار.
لكن لاحظ انها تبدأ دائما بـ

/*

وتنتهي بـ

*/

حتى يستطيع المتصفح تمييزها..

لكم مني التحية
اراكم عما قريب بإذن الله

[ghadee.net]

k8ncom

كما قلت فعلاً.. هي سهلة جداً.. بحيث يمكنك كتابتها (عمياني)
في الحقيقة.. وددت أن أشكرك فعلاً.. الدرس سهل جداً بحيث يتعلمها الأغلبية -ممن لا يعرفونها- بسهولة.

كل عام وأنت بخير،،

[k8ncom]

وانت بخير وعافية عزيزي ghadee.net

العفو .. هذا اقل من واجبنا لسوالف وشبابها