تعلم لغة css: تقديم ومعلومات شرح المحددات Selectors
لغة css تسمح بإنشاء قواعد تتكم في طريقة ظهور المحتوى. مثلا، هذه الفقرة يجب أن تكون باللون الأحمر، العناوين بالبند العريض والصور بهذا الحجم المحد..
عندما تتعلم كيف تكتب بلغة css ستعرف أهم العناصر المستعملة . إذن هذا الدرس يحتوي لى:
لاحظوا الفرق بين الصورتين:
على اليمين لغة html وحدها بدون css، على اليسار لغة html مع css للتحكم في شكلها
هذا هو كود css
لنقم بشرح عناصرها بالتفصيل
من الأفضل دائما إضافة كود css في ملف منعزل خاص به لتسهيل تغييره بدون حاجة للرجوع لكل صفحات html
تصور أنك وضعت قاعدة مثلا تجعل العنوان الرئيسي باللون الأحمر، ووضعت كود css في كل صفحة ولديك مئات الصفحات، فأنت مضطر لتعديل جميع الصفحات. بينما إذا وضعت ملف CSS من عزل لإانت تقوم بالتغيير على ملف واحد فقط.
يتم العمل بالعديد من المحددات لاستهداف عناصر html محددة والتحكم فيها. في كود صفحة الويب هذه تم اضافة العديد من هذه المحددات التي تستعمل كثيرا.
عندما تتعلم كيف تكتب بلغة css ستعرف أهم العناصر المستعملة . إذن هذا الدرس يحتوي لى:
- تقديم حول كيفية عمل css
- طريقة كتابة اكواد css
- كيف يتم تطبيق قواعد css على html
كيف يعمل css
لاحظوا الفرق بين الصورتين:
على اليمين لغة html وحدها بدون css، على اليسار لغة html مع 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;
}
يمكن أن نقوم بتطبيق نفس القاعدة على جزء آخر من الصفحة كما يلي:
p {
font-size: inherit;
}
المتصفح سيقوم بشكل آلي بتطبيق حجم 20 بيكسل لخط الفقرة.
في الدرس الثاني سنتعرف على الألوان Colors في css.
لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله