مقدمة في CSS
ملاحظة: يجب أن يكون مستواك بالـ HTML جيداً قبل البدء.
1- ما هي الـ CSS؟
هي اختصار لـ Cascading Style Sheets وليس لها تعريب على حد علمي 
2- ما هي وظيفتها؟
مسؤولة عن شكل صفحات الويب أي الإظهار فكل ما تراه في هذه المدونة من ألوان وأحجام خطوط هي من أفعال الـ CSS.
3- ما هي مكوناته؟
لقاعدة الـ CSS ثلاثة مكونات وهي على الشكل:
selector {property: value}حيث:
selector هو العنصر الذي ستطبق عليه التأثيرات.
property هي خاصية من خواص هذا العنصر سنعطيها قيمة ما.
value القيمة الجديدة لهذا العنصر.
وبالمثال يتوضح الأمر:
div {color: blue;}في البداية اخترنا العنصر الذي ستطبق علي خصائصه القيم الجديدة وهو حاوية الـ div، ثم اخترنا خاصية color لهذا العنصر أي لون النص داخله وأعطيناها لون ازرق.
4- كيف نربط ملف css مع الصفحة؟
نضعه في وسم head وتأكد من مسار href أنه صحيح، هنا وضعته داخل مجلد اسمه css واسم الملف هو style.css
5- ما أنواع الـ selector؟
له ثلاثة أنواع:
- وسم HTML: أي نضع وسماً من وسوم الـ HTML المعروفة (مثلاً div, p, span, a).
مثال:
div {color: blue;}هنا سيطبق هذا التأثير (لون الخط الأزرق) على كل div اكتبها في صفحة HTML بعد ربطه بالتأكيد كما في الخطوة 4.
- المعرف (id): هنا نضع selector ليس من وسوم الـ HTML نعطيه اسماً من عندنا ونضع قبله # بحيث يصبح:
مثال:
#id-selector {color: red;}هنا سيطبق على كل وسم له معرف id-selector مثال:
سيظهر النص هنا باللون الأحمر- الصنف (class): أيضاً نضع selector اسمه من اختيارنا ولكن نضع قبله نقطة . أي:
.class-selector {color: black;}كيف نحصل على تأثيره داخل صفحة الـ HTML … نقوم بإعطاء وسم الـ HTML قيمة لصنفه:
سيظهر هذا النص باللون الأسود
6- ما الفرق بين “المعرف” و “الصنف” أي متى استخدم هذا ومتى استخدم ذاك؟
استخدم المعرف عندما تريد تأثيراً لعنصر واحد … أي المعرف لا يجب أن يوضع لأكثر من وسم، لماذا؟ لأنه من خصائص وسوم HTML أن كل واحداً منها له معرفه الخاص لذلك لايجب تكرير المعرف لوسمين أو أكثر.
أما الصنف فاستخدمه لعدة وسوم أياً كان عددهم وهذا هو الفرق بينهم بكل اختصار وبدون تعقيدات.
7- إذا هل لك أن تشرح باختصار كل ماذكرت؟
طبعاً، الـ CSS تستخدم لإعطاء صفحة HTML التأثيرات المرئية أي الإظهارات، يتم ربط الملف كما في الخطوة 4 بالمناسبة ملف الـ CSS هو ملف عادي ولكن حولت لاحقته لـ css بدلاً من txt. ولدينا ثلاثة أنواع من selector (راجع الخطوة 5) واحد لوسم HTML موجود والأخر هو المعرف لإعطائه لوسم HTML واحد والأخير هو الصنف حيث يعطى لأكثر من وسم.
أسئلة للمستوى المتقدم:
8- كيف أعطي وسم يحتوي على خاصية محددة تأثيراً ما، مثلاً لدي الوسمان:
نص
نص آخر
أريد أن أعطي الوسم الذي يحتوي على خاصية الـ title تأثيراً أي الوسم الأول فكيف أحصل على ذلك؟
لا مشكلة، تستطيع ذلك بكتابة التالي في ملف css:
h1[title] {color: blue;}هكذا سيحصل وسم h1 الذي يحتوي على خاصية title تأثيراً خاصاً به.
9- شيء جميل لكن هل يوجد تطبيق آخر له؟
نعم، أستطيع إعطاء وسم a الخاص بالإيميل تأثيراً معيناً، لاحظ معي:
a[href^="mailto"] { color: blue; }هنا أخبرته أنه سيجد في بداية خاصية href كلمة mailto الخاصة بالبريد والـ (^) تعني بالبداية.
والسلام عليكم.
الله يجزايك بخيلا على هذا الدرس الجميل
أتمنى أن تكمل المسيرات في تعليم هذه التقنيات ولا تكتفي بالمقدمات فقط
أهلا خالد،
أنا مثلك مهتم بالكتابة التقنية بالعربية، و لي بضع ملاحظات عما كتبت، فاسمح لي:
- كنتُ قد عربتُ CSS على “صفحات الطرز المنسدلة”. أحب أن أعرف نقدك، و إن كانت لديك اقتراحات أخرى.
- “وسم” كتعريب tag تصلح عند تناول لغات الوسم مثل HTML بأنواعها و كذلك تنويعات XML؛ لكن CSS ليست لغة وسم، و مكوناتها التي أشرت إليها أعلاه بكلمة “وسم” هي في الحقيقة “قواعد”، إذ أن “القاعدة” rule هي الوحدة التي تتكون منها CSS
تتألف كل قاعدة – كما أشرتَ – من “منتق|محدِّد” و “بيان”، و يتألف البيان بدوره من “خصيصة” و “قيمة”. كما ترى لا زلت لا أعرف أيهما أصلح و أقل تضاربا مع غيرها: “محدد” أم “منتق”، و أحب أن أعرف رأيك.
- كما أشرتَ أعلاه فإن class هي أنواع المحدات الممكنة في القواعد، لكني أفضل تعريبها على “فئة” بدلا من “صنف”، إذ ان “صنف|تصنيفات” ترتبط بالتصنيفات categories.
توجد مجموعة من المهتمين بتعريب المصطلحات التقنية تعمل بالتشاور و الاقتراح و نقد الاقتراحات موضوعيا هي مجموعة Arabeyes.org، يا حبذا لو شاركتنا فيها بحيث تتوازى جهودك في الكتابة التقنية مع المساعدة في إغناء القاموس التقني بالمصطلحات التي تقابلها، و في ذات الوقت يمكنك الاستعانة بالقاموس عند التعريب بما يحقق الاتساق، أو اقتراح بدائل أفضل للمصطلحات.
شكرا على مجهودك و تحياتي،
@Mercedes: شرفت المدونة وبالطبع سأكتب عن أشياء منقدمة ومشاكل واجهتني ولكن يجب التمهيد أولاً بتدوينة أو تدوينتين.
@أحمد: شكراً جزيلاً لك وأنا انتظر النقد بالفعل.
قرأت قبل شهر مقالك حول استقلال الفضاء السبراني وفعلاً كلمات رائعة وفي الصميم.
بالنسبة لنقاطك:
أول مرة أسمعها.
- بخصوص التعريب لم أجد رابطاً في مدونتك !
- راجعت المقال ولم أجد أني قد استخدمت كلمة وسم لل css !
كلمة محدد بالتأكيد أفضل لأني لا أعرف معنى كلمة منتق
وبخصوص Arabeyes سمعت أنهم توقفوا ! وأتمنى أن يكون هناك مشروع كهذا لأشارك به فوراً، ممكن تضع الرابط؟
موفق ان شاء الله بداية جميلة فى ال CSS
ننتظر الوصول لل Browsers Incompatibilities
على فكرة الاشتراك البريدى لايعمل
وطريقة كتابة تاريخ التعليق تحتاج لتعديل
سترى تدوينات مميزة إن شاء الله
وبخصوص التاريخ مازال هناك بعض الأشياء التي فعلاً بحاجة إلى تحسين وسأعمل على تعديل التاريخ الأن المشكلة أن التعريب ناقص …
وبخصوص الاشتراك البريدي سأرى المشكلة فوراً وستحل بإذن الله
تحية يا خالد،
إعلان استقلال الفضاء السبراني ليس مقالي، بل هو ترجمة ما كتبه بول بيري بارلو، ترجمتها لأن كلماتها أعجبتني، و نشرتها بداية في ويكيمصدر.
هل تقصد بالرابط الذي لم تجده رابطا لموقع عربآيز؟ ها قد وضعته لك، و حقا كان علي أن أضعه من البداية، و لكن جوجل صديق الإنسان أصبح يجعلني أميل إلى الكسل
و لا، لم يتوقف عربآيز عن العمل، لكن موجات النشاط تعلو و تخفت حسب قدرة الأعضاء و مشاغلهم، لأن العدد قليل نسبيا، و قد تستوي الموجة بزيادة العدد.
للتوضيح: ما قصدته باستخدامك “وسم” مذكور في النقطة الثالة، حيث كتبتَ: “- ما “لوسم الـ CSS ثلاثة مكونات وهي على الشكل…”
“منتقٍ|منتقي” هي اسم الفاعل من “انتقى ينتقي انتقِ”
ربما لا يكون استخدامها شائعا، لكن هذا يحعلها أكثر جاذبية عند التعريب لأنها تتفادى التعارض مع مصطلحات أخرى. كما أن كلمة selector لم في نظر شخص من قبل عصر الحوسبة كانت ستكون كلمة غريبة مصطنعة.
أكرر سعادتي بحماسك للكتبة التقنية بالعربية.
أهه فعلاً تذكرت أنها ترجمة ولكن لم أذكر ذلك … على كل مترجم المقال ككاتبه
وفعلاً الكسل مني فلم أبحث بموقعهم جيداً … وسأتفحص ذلك فوراً
وبخصوص الوسم معك حق لم أنتبه لها حتى بعد مراجعتها ! وقمت بالتصحيح شكراً مرة أخرى
والأن عرفت من أين جائت كلمة منتق
فعلاً كلمة جميلة وليست شائعة فلا يسبب تضارب مع عدة مصطلحات آخرى كما ذكرت وعند تداولها سيعتاد الناس عليها وإلا سنبقى نترجم كل مصطلح بكلمة نستخدمها لمئة مصطلح آخر !
بالمناسبة لماذا ذكرت كلمة “خصيصة” وليس “خاصية”؟
[...] مقدمة في CakePHP [...]