مبادئ ‫CSS‬ : مصطلحات وأساسيات

مبادئ ‫CSS‬ : مصطلحات وأساسيات

أوامر CSS تتكون من ثلاث عناصر هامة:

1. المحدد Selector
وهو دليل العنصر أو اسمه الذي يميزه عن أى عناصر أخرى وللمحدد أنواع سأتطرق لها بعد قليل
2. الخاصية Property
وهى الأمر الخاص بتنفيذ تنسيق معين للعنصر مثل color ، font-szie ، font-family ، text-align …إلخ
3. قيمة الخاصية Value
وهى قيمة الخاصية المحدده مسبقاً من مبرمج اللغة

ويتم كتابتها وترتيبها على النحو التالي:
selector { property: value; }
مثال:
body { background: white; }
حيث أن body هو المحدد و background هى الخاصية و white هى قيمة الخاصية

---

أنواع المحددات Selectors

Class Selector

وهو المحدد المعرف عن طريق الكلاس Class أو الفئة أى أن أى عنصر يحمل هذا الاسم سوف يتم تطبيق تنسيق CSS المحدد له ويجب أن يسبق هذا النوع نقطة .
مثال:
.post { color: red; }
ويتم إدراجه في HTML بهذا الشكل

المحتوى

ID Selector

وهو مثل الكلاس تماماً ولكن يختلف في الهدف والعلامة السابقة للاسم فهو يستخدم لتنسيق عنصر فريد ولا يتكرر أى إنه لا يمكنك إستخدام نفس اسم الأي دي مع أكثر من عنصر و يسبق الاسم علامة الشباك #
مثال:
#content { color: red; }
ويتم إدراجه في HTML بهذا الشكل

المحتوى

لمزيد من المعلومات عن الفرق بين استخدام ID Selectors و Class Selectors تفضل بقراءةتدوينة فاطمة قطر عن هذه النقطة.

Element Type Selector

وهو المحدد العام أو الذي لا يحتاج لتعريف لأنه معروف بالفعل من HTML مثل body ، h1 ، h2 ، h3 ، a ، p ، hr ، span ..إلخ
مثال:
body { color: red; }
ويتم إدراجه في HTML بهذا الشكل
المحتوى

---

التعليق Comment

وهو واضح من اسمه فهو يكون تعليق الكاتب على الكود وذلك بهدف شرح أو تنظيم الكود المكتوب وهو ليس له أى تأثير على عمل الكود ولن يظهر في الصفحة التي يتم تنسيقها. وهو موجود بكل لغة برمجية (على حد علمي) ولكن طريقة كتابة التعليق تختلف من لغة لأخرى.
أقوم عادة بكتابة التعليقات حتى في مشاريعي الشخصية لأضمن تنظيم العمل وتسهيل عملية التعديل بقليل من التنظيم بوضع عنوان لكل قسم من التصميم.
في CSS يتم كتابة التعليق عن طريق وضع /* قبل التعليق و */ بعده. ووظيفتهم تعطيل جميع ما بداخلهم وجعلهم بصيغة التعليق مميزين باللون الأخضر أو أى لون أخر حسب محرر النصوص الذي تستخدمه طالما لم يكن محرر Notepad الإفتراضي الخاص بالويندوز فليس به تقنية تلوين الأكواد أصلاً.
مثال:

/* هنا بداية المحتوى */
#content { width:600px; float:right; }

/* هنا بداية القائمة الجانبية */
#sidebar { width:300px; float:left; }
 يمكنك إستخدامها في توضيح أو شرح كود معين
body { font-size:14px; } /*قم بتغيير القيمة الرقمية للتحكم في حجم الخط */
 كما يمكنك إستخدامها في تعطيل خاصية معينة بداخل الكود كما أفعل في بعض الأحيان
#content { /*width:600px;*/ float:right; }

---

الفئة الزائفة Pseudo Class

ومثله مثل المحدد العادي selector ولكن لا يظهر تأثيره إلا في حالات معينة حسب نوع الفئة
مثال:

a { color:black; }
a:hover { color:red;}
في المثال قمت في السطر الأول بتنسيق المحدد العام a وهو خاص بتنسيق شكل الروابط العام hyperlinks وجعل لون الخط أسود أما في السطر التاني حددت لون الخط أحمر أى إنه لن يتغير للون الأحمر إلا عند مرورك بالفأرة عليه وذلك عن طريق إضافة :hover ولذلك سمى بالفئة الزائفة لأنها لا تظهر إلا في حالات معينة وليست الحالة الإفتراضية للعنصر.
والفئات الزائفة كثر منها: visited وهى خاصة بشكل العنصر بعد زيارته أول مرة / focus وهى خاصة بتحديد العنصر وتستخدم بشكل عام في القوائم form

---

الإدراج At-Rule

وأنواعها كثيرة منها:

@import

ويستخدم في إرفاق ملف CSS خارجي بداخل الملف الذي تعمل عليه. فمثلاً لو أحببت التنظيم وفصل كل جزء من الكود بملف خاص به وتريد في النهاية جمع جميع الملفات لإستدعائها بملف واحد في النهاية ستساعدك حتماً هذه الخاصية فكل ما عليك هو تحديد مسارات الملفات جميعها و انتهيت
مثال:@import url(content.css)

@media

وتستخدم في تحديد التصميم للأجهزة المختلفة كالطابعات مثلاً
مثال:

@media print {
#content {font-size:14px; }
a { text-decoration: underline; }
}
والأمر غير مقتصر على الطابعة فقط فهناك العرض الخاص بشاشات الكمبيوتر screen وشاشات البروجكتور projection وغيرها

@font-face

وتستخدم لإدراج خطوط غير الخطوط الإفتراضية. فقط بتحديد مسار الخط واعطائه اسم واختياره كأنه خط عادي
مثال:

@font-face {
font-family: YourNewFontName;
src: url(YourFontFile.eot);
font-weight: bold;
}
p {
font-family: YourNewFontName;
font-weight: bold;
}

---

أساسيات CSS

في النهاية أحب أن أختم تدوينة اليوم ببعض الأساسيات التي يجب أن تعرفها كمبتدئ في لغة CSS

• يجب يتم كتابة خواص المحددات بين أقواس معقوفة { } و أي خطأ ولو بسيط لن الخاصية تعمل وفي بعض الأحيان أكثر من خاصية
• يتم الفصل بين الخاصية وقيمتها عن طريق النقطتان : ويمكنك مراجعة الأمثلة السابقة لترى شكل الكود الكامل
• لكتابة أكثر من خاصية يجب الفصل بينهم بالفاصلة المنقوطة ; ويمكنك مراجعة الأمثلة السابقة لترى شكل الكود الكامل
• إذا كان لديك أكثر من محدد يشترك في نفس التنسيق والخصائص فيمكنك كتابتهم بسطر واحد ولكن لا تنسى الفصل بينهم بفاصلة عادية ,
مثال:
#content, #sidebar, #footer { color:black; }
• عند كتابة أكثر من قيمة للخاصية الواحدة Property فيجب الفصل بينهم بالفاصلة , خصوصاً في أسماء الخطوط و قيم الألوان
مثال:
font-family: Arial, Tahoma, Times New Roman;
• عدم ترك أى مسافات بين القيم الرقمية للخصائص والوحدات المستخدمة على غرار px ، pt ، % ، em
مثال:
width:6%; font-size:14px;

---