تعلم لغة css: تقديم ومعلومات شرح المحددات Selectors

لغة css تسمح بإنشاء قواعد تتكم في طريقة ظهور المحتوى. مثلا، هذه الفقرة يجب أن تكون باللون الأحمر، العناوين بالبند العريض والصور بهذا الحجم المحد..

عندما تتعلم كيف تكتب بلغة css ستعرف أهم العناصر المستعملة . إذن هذا الدرس يحتوي لى:

  1. تقديم حول كيفية عمل css
  2. طريقة كتابة اكواد css
  3. كيف يتم تطبيق قواعد css على html

كيف يعمل css


لاحظوا الفرق بين الصورتين:
على اليمين لغة html وحدها بدون css، على اليسار لغة html مع css للتحكم في شكلها

لغة css لتصميم المواقع
تأثير css في html


خاصية css

هذا هو كود css
body {
font-size: 20 px;
}

لنقم بشرح عناصرها بالتفصيل

  •  العنصر الذي نريد التحكم فيه، لدينا هنا body
  • قاعدة css يتم وضعها بين قوسين معقوفتين
  •  الخاصية متبوعة بنقطتين، font-size أي حجم الخط.
  • قيمة الخاصية متبوعة ب نقطة فاصلة، قيمة حجم الخط هي 20px.

إضافة css لصفحة ويب

هناك عدة طرق لإضافة css داخل صفحة ويب وهي:

داخل الصفحة:

لا ينصح به، إذ يتم اضافته داخل راس الصفحة أو حتى بين أكواد html وهي طريقةسيئة يجب تجنبها.

في ملف منعزل

ينصح به، بحيث يكون هاك ملف css خاص ويتم ربطه  بملف html للتحكم في هذا الأخير.

من الأفضل دائما إضافة كود css في ملف منعزل خاص به لتسهيل تغييره بدون حاجة للرجوع لكل صفحات html

تصور أنك وضعت قاعدة مثلا تجعل العنوان الرئيسي باللون الأحمر، ووضعت كود css في كل صفحة ولديك مئات الصفحات، فأنت مضطر لتعديل جميع الصفحات. بينما إذا وضعت ملف CSS من عزل لإانت تقوم بالتغيير على ملف واحد فقط.


المحددات CSS Selectors

يتم العمل بالعديد من المحددات لاستهداف عناصر html محددة والتحكم فيها. في كود صفحة الويب هذه تم اضافة العديد من هذه المحددات التي تستعمل كثيرا.

المحدد المعنى المثال
Universal Selectors المحددات العامة تعمل على جميع العناصر الموجودة في الصفحة * {}
يستهدف جميع العناصر الموجودة بالصفحة
Type Selector المحدد النوعي توافق العناصر بحسب الإسم h1, h2, h3 {}
يستهدف بشكل محدد العناصر
Class Selector محدد لنوعية توافق العناصر التي تحمل خاصية Class,بحث يتم وضع نقطة في بداية إسم الخاصية .note {} يستهدف جميع العناصر التي تحتوي خاصية,p.note {} يستهدف جميع الفقرات,الموجودة داخل خاصية
ID Selector محدد توافق لعناصر التي تحمل خاصية ويتم تمييزها برمز التجزئة Hash symbol # #introduction {} يستهدف الخاصية,والتي تحمل قيمة
Child Selector محدد توافق العناصر التي تعتبر تابعة بشكل مباشر لعناصر أخرى li>a {}يستهدف العناصر التي,تعتبر تابعة ل,ولكنه لا يؤثر في بقية عناصر في الصفحة
Descendant Selector محدد توافق,العناصر التي تعتبر تابعة بشكل غير مباشر لعناصر أخرى p a {}يستهدف جميع عناصر الموجودة داخل وسم
Adjacent Sibling
Selector محدد
توافق,العناصر التي تعتبر قريبة لعناصر أخرى h1+p {}يستهدف أول عنصر يلي,ولا يؤثر في بقية العناصر
General Sibling
Selector محدد
يوافق أي عنصر تابع لعنصر آخر محدد وإن كان لا يتبعه مباشرة h1~p {}
يستهدف جميع عناصر الموجودة تحت حتى لو كان بينهما عناصر أخرى


قاعدة الميراث Inheritance rule

لتسهيل العمل على المبرمج وعدم تكرار نفس الأكواد للعديد من المرات، يمكن استخدام قاعدة الميراث. لنفترض أن قاعدة تم تطبيقها على body مثلا، وأردت لجزء من الصفحة أن يستعمل نفس الصفحة يكفي تطبيق هذه القاعدة.

مثال:
body {
font-size: 20 px;

}

قمنا بتطبيق حجم خط بقيمة 20 بيكسل على body

يمكن أن نقوم بتطبيق نفس القاعدة على جزء آخر من الصفحة كما يلي:

p {
font-size: inherit;
}

المتصفح سيقوم بشكل آلي بتطبيق حجم 20 بيكسل لخط الفقرة.

في الدرس الثاني سنتعرف على الألوان Colors في css.